[ui][checkbox list] implementation

apps/storybook/stories/checkbox-input.stories.tsx

@@ -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"
+    />
+  );
+}

apps/storybook/stories/checkbox-list.stories.tsx

@@ -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>
+  );
+}

packages/ui/src/CheckboxInput/CheckboxInput.tsx

@@ -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>
+  );
+}

packages/ui/src/CheckboxList/CheckboxList.tsx

@@ -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>
+  );
+}

packages/ui/src/index.tsx

@@ -7,6 +7,12 @@ export { default as Badge } from './Badge/Badge';
 // Button
 export * from './Button/Button';
 export { default as Button } from './Button/Button';
+// CheckboxInput
+export * from './CheckboxInput/CheckboxInput';
+export { default as CheckboxInput } from './CheckboxInput/CheckboxInput';
+// CheckboxList
+export * from './CheckboxList/CheckboxList';
+export { default as CheckboxList } from './CheckboxList/CheckboxList';
 // Collapsible
 export * from './Collapsible/Collapsible';
 export { default as Collapsible } from './Collapsible/Collapsible';