Yangshun Tay
2 years ago
parent
21e5e0672a
commit
0da41c265d
@ -0,0 +1,99 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { ComponentMeta } from '@storybook/react';
|
||||||
|
import { CheckboxInput } from '@tih/ui';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
argTypes: {
|
||||||
|
defaultValue: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
component: CheckboxInput,
|
||||||
|
title: 'CheckboxInput',
|
||||||
|
} as ComponentMeta<typeof CheckboxInput>;
|
||||||
|
|
||||||
|
export function Basic({
|
||||||
|
defaultValue,
|
||||||
|
description,
|
||||||
|
disabled,
|
||||||
|
label,
|
||||||
|
}: Pick<
|
||||||
|
React.ComponentProps<typeof CheckboxInput>,
|
||||||
|
'defaultValue' | 'description' | 'disabled' | 'label'
|
||||||
|
>) {
|
||||||
|
return (
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
description={description}
|
||||||
|
disabled={disabled}
|
||||||
|
label={label}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Basic.args = {
|
||||||
|
description: 'I will be responsible for any mistakes',
|
||||||
|
disabled: false,
|
||||||
|
label: 'I have read the terms and conditions',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Controlled() {
|
||||||
|
const [value, setValue] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CheckboxInput
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
value={value}
|
||||||
|
onChange={(newValue: boolean) => {
|
||||||
|
setValue(newValue);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Disabled() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={true}
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
/>
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={false}
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
/>
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={true}
|
||||||
|
disabled={true}
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
/>
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={false}
|
||||||
|
disabled={true}
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ItemDescriptions() {
|
||||||
|
return (
|
||||||
|
<CheckboxInput
|
||||||
|
defaultValue={false}
|
||||||
|
description="I will be responsible for any mistakes"
|
||||||
|
label="I have read the terms and conditions"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,259 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { ComponentMeta } from '@storybook/react';
|
||||||
|
import type { CheckboxListOrientation } from '@tih/ui';
|
||||||
|
import { HorizontalDivider } from '@tih/ui';
|
||||||
|
import { CheckboxInput, CheckboxList } from '@tih/ui';
|
||||||
|
|
||||||
|
const CheckboxListOrientations: ReadonlyArray<CheckboxListOrientation> = [
|
||||||
|
'horizontal',
|
||||||
|
'vertical',
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
argTypes: {
|
||||||
|
description: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
orientation: {
|
||||||
|
control: { type: 'select' },
|
||||||
|
options: CheckboxListOrientations,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
component: CheckboxList,
|
||||||
|
title: 'CheckboxList',
|
||||||
|
} as ComponentMeta<typeof CheckboxList>;
|
||||||
|
|
||||||
|
export function Basic({
|
||||||
|
description,
|
||||||
|
label,
|
||||||
|
orientation,
|
||||||
|
}: Pick<
|
||||||
|
React.ComponentProps<typeof CheckboxList>,
|
||||||
|
'description' | 'label' | 'orientation'
|
||||||
|
>) {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
label: 'Apple',
|
||||||
|
name: 'apple',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Banana',
|
||||||
|
name: 'banana',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orange',
|
||||||
|
name: 'orange',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CheckboxList
|
||||||
|
description={description}
|
||||||
|
label={label}
|
||||||
|
orientation={orientation}>
|
||||||
|
{items.map(({ label: itemLabel, name, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
defaultValue={itemValue}
|
||||||
|
label={itemLabel}
|
||||||
|
name={name}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Basic.args = {
|
||||||
|
description: 'Selected fruits will be served after dinner',
|
||||||
|
label: 'Select your favorite fruits',
|
||||||
|
orientation: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Controlled() {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
label: 'Apple',
|
||||||
|
value: 'apple',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Banana',
|
||||||
|
value: 'banana',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orange',
|
||||||
|
value: 'orange',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [values, setValues] = useState(new Set(['apple']));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CheckboxList
|
||||||
|
description="You will be served it during dinner"
|
||||||
|
label="Choose a fruit">
|
||||||
|
{items.map(({ label: itemLabel, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
label={itemLabel}
|
||||||
|
value={values.has(itemValue)}
|
||||||
|
onChange={(newValue: boolean) => {
|
||||||
|
if (newValue) {
|
||||||
|
setValues(new Set([...Array.from(values), itemValue]));
|
||||||
|
} else {
|
||||||
|
setValues(
|
||||||
|
new Set(Array.from(values).filter((v) => v !== itemValue)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Disabled() {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
description: 'A red fruit',
|
||||||
|
disabled: false,
|
||||||
|
label: 'Apple',
|
||||||
|
value: 'apple',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'A yellow fruit',
|
||||||
|
disabled: true,
|
||||||
|
label: 'Banana',
|
||||||
|
value: 'banana',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'An orange fruit',
|
||||||
|
disabled: false,
|
||||||
|
label: 'Orange',
|
||||||
|
value: 'orange',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [values, setValues] = useState(new Set(['apple', 'banana']));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<CheckboxList label="Choose a fruit (some fruits disabled)">
|
||||||
|
{items.map(({ disabled, label: itemLabel, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
disabled={disabled}
|
||||||
|
label={itemLabel}
|
||||||
|
value={values.has(itemValue)}
|
||||||
|
onChange={(newValue: boolean) => {
|
||||||
|
if (newValue) {
|
||||||
|
setValues(new Set([...Array.from(values), itemValue]));
|
||||||
|
} else {
|
||||||
|
setValues(
|
||||||
|
new Set(Array.from(values).filter((v) => v !== itemValue)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ItemDescriptions() {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
description: 'A red fruit',
|
||||||
|
label: 'Apple',
|
||||||
|
value: 'apple',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'A yellow fruit',
|
||||||
|
label: 'Banana',
|
||||||
|
value: 'banana',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'An orange fruit',
|
||||||
|
label: 'Orange',
|
||||||
|
value: 'orange',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [values, setValues] = useState(new Set(['apple', 'banana']));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<CheckboxList label="Choose a fruit (some fruits disabled)">
|
||||||
|
{items.map(({ description, label: itemLabel, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
description={description}
|
||||||
|
label={itemLabel}
|
||||||
|
value={values.has(itemValue)}
|
||||||
|
onChange={(newValue: boolean) => {
|
||||||
|
if (newValue) {
|
||||||
|
setValues(new Set([...Array.from(values), itemValue]));
|
||||||
|
} else {
|
||||||
|
setValues(
|
||||||
|
new Set(Array.from(values).filter((v) => v !== itemValue)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Orientation() {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
label: 'Apple',
|
||||||
|
name: 'apple',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Banana',
|
||||||
|
name: 'banana',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orange',
|
||||||
|
name: 'orange',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<CheckboxList label="Choose a fruit" orientation="vertical">
|
||||||
|
{items.map(({ label: itemLabel, name, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
defaultValue={itemValue}
|
||||||
|
label={itemLabel}
|
||||||
|
name={name}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
<HorizontalDivider />
|
||||||
|
<CheckboxList label="Choose a fruit" orientation="horizontal">
|
||||||
|
{items.map(({ label: itemLabel, name, value: itemValue }) => (
|
||||||
|
<CheckboxInput
|
||||||
|
key={itemLabel}
|
||||||
|
defaultValue={itemValue}
|
||||||
|
label={itemLabel}
|
||||||
|
name={name}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CheckboxList>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import type { ChangeEvent } from 'react';
|
||||||
|
import { useId } from 'react';
|
||||||
|
|
||||||
|
type Props = Readonly<{
|
||||||
|
defaultValue?: boolean;
|
||||||
|
description?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
label: string;
|
||||||
|
name?: string;
|
||||||
|
onChange?: (
|
||||||
|
value: boolean,
|
||||||
|
event: ChangeEvent<HTMLInputElement>,
|
||||||
|
) => undefined | void;
|
||||||
|
value?: boolean;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export default function CheckboxInput({
|
||||||
|
defaultValue,
|
||||||
|
description,
|
||||||
|
disabled = false,
|
||||||
|
label,
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: Props) {
|
||||||
|
const id = useId();
|
||||||
|
const descriptionId = useId();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'relative flex',
|
||||||
|
// Vertically center only when there's no description.
|
||||||
|
description == null && 'items-center',
|
||||||
|
)}>
|
||||||
|
<div className="flex h-5 items-center">
|
||||||
|
<input
|
||||||
|
aria-describedby={description != null ? descriptionId : undefined}
|
||||||
|
checked={value}
|
||||||
|
className={clsx(
|
||||||
|
'h-4 w-4 rounded border-slate-300',
|
||||||
|
disabled
|
||||||
|
? 'bg-slate-100 text-slate-400'
|
||||||
|
: 'text-primary-600 focus:ring-primary-500',
|
||||||
|
)}
|
||||||
|
defaultChecked={defaultValue}
|
||||||
|
disabled={disabled}
|
||||||
|
id={id}
|
||||||
|
name={name}
|
||||||
|
type="checkbox"
|
||||||
|
onChange={
|
||||||
|
onChange != null
|
||||||
|
? (event) => {
|
||||||
|
onChange?.(event.target.checked, event);
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
className={clsx(
|
||||||
|
'block font-medium',
|
||||||
|
disabled ? 'text-slate-400' : 'text-slate-700',
|
||||||
|
)}
|
||||||
|
htmlFor={id}>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
{description && (
|
||||||
|
<p
|
||||||
|
className={clsx(
|
||||||
|
'text-xs',
|
||||||
|
disabled ? 'text-slate-400' : 'text-slate-500',
|
||||||
|
)}
|
||||||
|
id={descriptionId}>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import { useId } from 'react';
|
||||||
|
|
||||||
|
import type CheckboxInput from '../CheckboxInput/CheckboxInput';
|
||||||
|
|
||||||
|
export type CheckboxListOrientation = 'horizontal' | 'vertical';
|
||||||
|
|
||||||
|
type Props = Readonly<{
|
||||||
|
children: ReadonlyArray<React.ReactElement<typeof CheckboxInput>>;
|
||||||
|
description?: string;
|
||||||
|
isLabelHidden?: boolean;
|
||||||
|
label: string;
|
||||||
|
orientation?: CheckboxListOrientation;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export default function CheckboxList({
|
||||||
|
children,
|
||||||
|
description,
|
||||||
|
isLabelHidden,
|
||||||
|
label,
|
||||||
|
orientation = 'vertical',
|
||||||
|
}: Props) {
|
||||||
|
const labelId = useId();
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={clsx(isLabelHidden ? 'sr-only' : 'mb-2')}>
|
||||||
|
<label className="text-sm font-medium text-gray-900" id={labelId}>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
{description && (
|
||||||
|
<p className="text-xs leading-5 text-gray-500">{description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-labelledby={labelId}
|
||||||
|
className={clsx(
|
||||||
|
'space-y-2',
|
||||||
|
orientation === 'horizontal' &&
|
||||||
|
'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
|
||||||
|
)}
|
||||||
|
role="group">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue