MattrixwvReactComponents/src/util/InputUtils.tsx

import { Button } from "$/component/button";
import { DragAndDropFileInput, FileInput, NumberInput, OptionInput, SelectInput, TextInput } from "$/component/input";
import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox";
import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox";
import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox";
import LightCheckbox from "$/component/input/checkbox/LightCheckbox";
import MattrixwvCheckbox from "$/component/input/checkbox/MattrixwvCheckbox";
import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox";
import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox";
import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
import DateInput from "$/component/input/date/DateInput";
import DateTimeInput from "$/component/input/date/DateTimeInput";
import TimeInput from "$/component/input/date/TimeInput";
import MultiNumberSlider from "$/component/input/number/MultiNumberSlider";
import NumberSlider from "$/component/input/number/NumberSlider";
import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
import LightRadioButton from "$/component/input/radio/LightRadioButton";
import MoltenRadioButton from "$/component/input/radio/MoltenRadioButton";
import PrimaryRadioButton from "$/component/input/radio/PrimaryRadioButton";
import RadioButton from "$/component/input/radio/RadioButton";
import RadioList from "$/component/input/radio/RadioList";
import SecondaryRadioButton from "$/component/input/radio/SecondaryRadioButton";
import SuccessRadioButton from "$/component/input/radio/SuccessRadioButton";
import TertiaryRadioButton from "$/component/input/radio/TertiaryRadioButton";
import WarningRadioButton from "$/component/input/radio/WarningRadioButton";
import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
import DangerSwitch from "$/component/input/switch/DangerSwitch";
import DarkSwitch from "$/component/input/switch/DarkSwitch";
import LightSwitch from "$/component/input/switch/LightSwitch";
import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
import SuccessSwitch from "$/component/input/switch/SuccessSwitch";
import TertiarySwitch from "$/component/input/switch/TertiarySwitch";
import WarningSwitch from "$/component/input/switch/WarningSwitch";
import TextArea from "$/component/input/text/TextArea";
import type { MattrixwvSwitchSize } from "$/types/Input";
import { useState } from "react";
import { BsCheck, BsX } from "react-icons/bs";


export function SwitchContent(){
	const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];


	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8"
		>
			<SwitchDisplay title="Basic">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<MattrixwvSwitch
								className="bg-gray-400 data-checked:bg-blue-600"
								knobClassName="bg-white"
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</MattrixwvSwitch>
						</div>
					))
				}
			</SwitchDisplay>
			<SwitchDisplay title="Wide">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<MattrixwvSwitch
								className="bg-gray-400 data-checked:bg-blue-600"
								knobClassName="bg-white"
								size={size}
								wide={true}
								offText={<span className="text-black">Off</span>}
								onText="On"
								defaultChecked={true}
							>
								{size} Switch
							</MattrixwvSwitch>
						</div>
					))
				}
			</SwitchDisplay>
			<SwitchDisplay title="Primary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<PrimarySwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</PrimarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<PrimarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</PrimarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<PrimarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</PrimarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Secondary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SecondarySwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</SecondarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SecondarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SecondarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SecondarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SecondarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Tertiary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<TertiarySwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</TertiarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<TertiarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</TertiarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<TertiarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</TertiarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Success">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SuccessSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</SuccessSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SuccessSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SuccessSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Warning">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<WarningSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</WarningSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<WarningSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</WarningSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<WarningSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</WarningSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Danger">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<DangerSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</DangerSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DangerSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</DangerSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DangerSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</DangerSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Dark">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<DarkSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</DarkSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DarkSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</DarkSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DarkSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</DarkSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Light">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<LightSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</LightSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<LightSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</LightSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<LightSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</LightSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Success Danger">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SuccessDangerSwitch
								size={size}
								defaultChecked={true}
							>
								{size} Switch
							</SuccessDangerSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessDangerSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SuccessDangerSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessDangerSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SuccessDangerSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Button">
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<ButtonSwitch
						className="cursor-pointer transition-all duration-250"
						onNode={<Button size="sm" shape="square" className="bg-green-600 border-green-600"><BsCheck size={32}/></Button>}
						offNode={<Button size="sm" shape="square" className="bg-red-600 border-red-600"><BsX size={32}/></Button>}
					/>
				</div>
			</SwitchDisplay>
		</div>
	);
}

function SwitchDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2"
		>
			<h2 className="text-2xl">{title}</h2>
			<div
				className="flex flex-row items-center justify-center gap-x-4"
			>
				{children}
			</div>
		</div>
	);
}

export function TextContent(){
	const selectOptions = [
		{value: "1", label: "Test 1"},
		{value: "2", label: "Test 2"},
		{value: "3", label: "Test 3"},
		{value: "4", label: "Test 4"},
		{value: "5", label: "Test 5"},
		{value: "6", label: "Test 6"},
		{value: "7", label: "Test 7"},
		{value: "8", label: "Test 8"},
		{value: "9", label: "Test 9"},
		{value: "10", label: "Test 10"},
		{value: "11", label: "Test 11"},
		{value: "12", label: "Test 12"},
		{value: "13", label: "Test 13"},
		{value: "14", label: "Test 14"},
		{value: "15", label: "Test 15"},
		{value: "16", label: "Test 16"},
		{value: "17", label: "Test 17"},
		{value: "18", label: "Test 18"},
		{value: "19", label: "Test 19"}
	];

	const [ selected, setSelected ] = useState(selectOptions[0]);

	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
		>
			<TextDisplay title="Text Input">
				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/>
			</TextDisplay>
			<TextDisplay title="Text Area">
				<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color)"/>
			</TextDisplay>
			<TextDisplay title="Select">
				<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
					{
						selectOptions.map((option) => (
							<OptionInput
								key={option.value}
								className="bg-neutral-600 hover:bg-neutral-700"
								value={option.value}
								children={option.label}
							/>
						))
					}
				</SelectInput>
			</TextDisplay>
			<TextDisplay
				title="Number Input"
			>
				<NumberInput
					labelClassName="bg-(--bg-color)"
				>
					Number Test
				</NumberInput>
			</TextDisplay>
			{/*
			<TextDisplay
				title="Number Slider"
			>
				<NumberSlider
					min={0}
					max={10}
				/>
			</TextDisplay>
			*/}
		</div>
	);
}

function TextDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2 w-full"
		>
			<h2 className="text-2xl">{title}</h2>
			{children}
		</div>
	);
}

export function FileContent(){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
		>
			<FileDisplay title="File Input">
				<FileInput
					showFileName={true}
					showSize={true}
				/>
			</FileDisplay>
			<FileDisplay title="Drag and Drop File Input">
				<DragAndDropFileInput
					showFileName={true}
					showSize={true}
					maxSize={1024 * 1024}
					minSize={1024}
				>
					Drag And Drop File Input
				</DragAndDropFileInput>
			</FileDisplay>
		</div>
	);
}

function FileDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2 w-full"
		>
			<h2 className="text-2xl">{title}</h2>
			{children}
		</div>
	);
}

export function CheckboxContent(){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
		>
			<CheckboxDisplay title="Checkbox">
				<div
					className="flex flex-row items-center justify-center gap-x-8"
				>
					<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
					<PrimaryCheckbox defaultChecked={true}>Primary</PrimaryCheckbox>
					<SecondaryCheckbox defaultChecked={true}>Secondary</SecondaryCheckbox>
					<TertiaryCheckbox defaultChecked={true}>Tertiary</TertiaryCheckbox>
					<InfoCheckbox defaultChecked={true}>Info</InfoCheckbox>
					<SuccessCheckbox defaultChecked={true}>Success</SuccessCheckbox>
					<WarningCheckbox defaultChecked={true}>Warning</WarningCheckbox>
					<DangerCheckbox defaultChecked={true}>Danger</DangerCheckbox>
					<MoltenCheckbox defaultChecked={true}>Molten</MoltenCheckbox>
					<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
					<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
				</div>
			</CheckboxDisplay>
			<CheckboxDisplay title="Checks">
				<div
					className="flex flex-row items-center justify-center gap-x-8"
				>
					<MattrixwvCheckbox className="group-data-checked:stroke-amber-400 not-group-data-checked:stroke-white" defaultChecked={true} box={false}>Default</MattrixwvCheckbox>
					<PrimaryCheckbox defaultChecked={true} box={false}>Primary</PrimaryCheckbox>
					<SecondaryCheckbox defaultChecked={true} box={false}>Secondary</SecondaryCheckbox>
					<TertiaryCheckbox defaultChecked={true} box={false}>Tertiary</TertiaryCheckbox>
					<InfoCheckbox defaultChecked={true} box={false}>Info</InfoCheckbox>
					<SuccessCheckbox defaultChecked={true} box={false}>Success</SuccessCheckbox>
					<WarningCheckbox defaultChecked={true} box={false}>Warning</WarningCheckbox>
					<DangerCheckbox defaultChecked={true} box={false}>Danger</DangerCheckbox>
					<MoltenCheckbox defaultChecked={true} box={false}>Molten</MoltenCheckbox>
					<LightCheckbox defaultChecked={true} box={false}>Light</LightCheckbox>
					<DarkCheckbox defaultChecked={true} box={false}>Dark</DarkCheckbox>
				</div>
			</CheckboxDisplay>
		</div>
	);
}

function CheckboxDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2 w-full"
		>
			<h2 className="text-2xl">{title}</h2>
			{children}
		</div>
	);
}

export function RadioContent(){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
		>
			<RadioDisplay title="Sizes">
				<RadioList
				>
					<PrimaryRadioButton size="xs" value="xs">Extra Small</PrimaryRadioButton>
					<PrimaryRadioButton size="sm" value="sm">Small</PrimaryRadioButton>
					<PrimaryRadioButton size="md" value="md">Medium</PrimaryRadioButton>
					<PrimaryRadioButton size="lg" value="lg">Large</PrimaryRadioButton>
					<PrimaryRadioButton size="xl" value="xl">Extra Large</PrimaryRadioButton>
				</RadioList>
			</RadioDisplay>
			<RadioDisplay title="Radio Checked">
				<div
					className="flex flex-row items-center justify-center gap-x-8"
				>
					<RadioList value="Primary"><PrimaryRadioButton value="Primary">Primary</PrimaryRadioButton></RadioList>
					<RadioList value="Secondary"><SecondaryRadioButton value="Secondary">Secondary</SecondaryRadioButton></RadioList>
					<RadioList value="Tertiary"><TertiaryRadioButton value="Tertiary">Tertiary</TertiaryRadioButton></RadioList>
					<RadioList value="Info"><InfoRadioButton value="Info">Info</InfoRadioButton></RadioList>
					<RadioList value="Success"><SuccessRadioButton value="Success">Success</SuccessRadioButton></RadioList>
					<RadioList value="warning"><WarningRadioButton value="warning">warning</WarningRadioButton></RadioList>
					<RadioList value="Danger"><DangerRadioButton value="Danger">Danger</DangerRadioButton></RadioList>
					<RadioList value="Molten"><MoltenRadioButton value="Molten">Molten</MoltenRadioButton></RadioList>
					<RadioList value="Light"><LightRadioButton value="Light">Light</LightRadioButton></RadioList>
					<RadioList value="Dark"><DarkRadioButton value="Dark">Dark</DarkRadioButton></RadioList>
				</div>
			</RadioDisplay>
			<RadioDisplay title="Radio Horizontal">
				<RadioList
					direction="horizontal"
				>
					<RadioButton value="default" className="group-data-checked:bg-amber-500">Default</RadioButton>
					<PrimaryRadioButton value="primary">Primary</PrimaryRadioButton>
					<SecondaryRadioButton value="secondary">Secondary</SecondaryRadioButton>
					<TertiaryRadioButton value="tertiary">Tertiary</TertiaryRadioButton>
					<InfoRadioButton value="info">Info</InfoRadioButton>
					<SuccessRadioButton value="success">Success</SuccessRadioButton>
					<WarningRadioButton value="warning">Warning</WarningRadioButton>
					<DangerRadioButton value="danger">Danger</DangerRadioButton>
					<MoltenRadioButton value="molten">Molten</MoltenRadioButton>
					<LightRadioButton value="light">Light</LightRadioButton>
					<DarkRadioButton value="dark">Dark</DarkRadioButton>
				</RadioList>
			</RadioDisplay>
			<RadioDisplay title="Radio Vertical">
				<RadioList
					direction="vertical"
				>
					<RadioButton value="default" className="group-data-checked:bg-amber-500">Default</RadioButton>
					<PrimaryRadioButton value="primary">Primary</PrimaryRadioButton>
					<SecondaryRadioButton value="secondary">Secondary</SecondaryRadioButton>
					<TertiaryRadioButton value="tertiary">Tertiary</TertiaryRadioButton>
					<InfoRadioButton value="info">Info</InfoRadioButton>
					<SuccessRadioButton value="success">Success</SuccessRadioButton>
					<WarningRadioButton value="warning">Warning</WarningRadioButton>
					<DangerRadioButton value="danger">Danger</DangerRadioButton>
					<MoltenRadioButton value="molten">Molten</MoltenRadioButton>
					<LightRadioButton value="light">Light</LightRadioButton>
					<DarkRadioButton value="dark">Dark</DarkRadioButton>
				</RadioList>
			</RadioDisplay>
		</div>
	);
}

function RadioDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2 w-full"
		>
			<h2 className="text-2xl">{title}</h2>
			{children}
		</div>
	);
}

export function DateContent(){
	return (
		<div
			className="flex flex-col items-center justify-center my-8 gap-y-8"
		>
			<DateInput
			/>
			<DateTimeInput
			/>
			<TimeInput
			/>
		</div>
	);
}

export function SliderContent(){
	return (
		<div
			className="flex flex-col items-center justify-center my-8 gap-y-8"
		>
			<NumberSlider
			/>
			<MultiNumberSlider
			/>
		</div>
	);
}