[ui][radio list] implementation

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

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import type { RadioListOrientation } from '@tih/ui';
+import { HorizontalDivider } from '@tih/ui';
+import { RadioList } from '@tih/ui';
+
+const RadioListOrientations: ReadonlyArray<RadioListOrientation> = [
+  'horizontal',
+  'vertical',
+];
+
+export default {
+  argTypes: {
+    description: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    orientation: {
+      control: { type: 'select' },
+      options: RadioListOrientations,
+    },
+  },
+  component: RadioList,
+  title: 'RadioList',
+} as ComponentMeta<typeof RadioList>;
+
+export function Basic({
+  description,
+  label,
+}: Pick<React.ComponentProps<typeof RadioList>, 'description' | 'label'>) {
+  const items = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  return (
+    <RadioList
+      defaultValue="apple"
+      description={description}
+      label={label}
+      name="fruit">
+      {items.map(({ label: itemLabel, value }) => (
+        <RadioList.Item key={itemLabel} label={itemLabel} value={value} />
+      ))}
+    </RadioList>
+  );
+}
+
+Basic.args = {
+  description: 'Your favorite fruit',
+  label: 'Choose a fruit',
+};
+
+export function Controlled() {
+  const items = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <RadioList
+      label="Choose a fruit"
+      value={value}
+      onChange={(newValue: string) => setValue(newValue)}>
+      {items.map(({ label: itemLabel, value: itemValue }) => (
+        <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+      ))}
+    </RadioList>
+  );
+}
+
+export function Orientation() {
+  const items = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <RadioList
+        defaultValue="apple"
+        label="Choose a fruit"
+        name="fruit-2"
+        orientation="vertical">
+        {items.map(({ label: itemLabel, value: itemValue }) => (
+          <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+        ))}
+      </RadioList>
+      <HorizontalDivider />
+      <RadioList
+        defaultValue="banana"
+        label="Choose a fruit"
+        name="fruit-3"
+        orientation="horizontal">
+        {items.map(({ label: itemLabel, value: itemValue }) => (
+          <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+        ))}
+      </RadioList>
+    </div>
+  );
+}

packages/ui/src/RadioList/RadioList.tsx

@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import type { ChangeEvent } from 'react';
+
+import { RadioListContext } from './RadioListContext';
+import RadioListItem from './RadioListItem';
+
+export type RadioListOrientation = 'horizontal' | 'vertical';
+
+type Props<T> = Readonly<{
+  children: ReadonlyArray<React.ReactElement<typeof RadioListItem>>;
+  defaultValue?: T;
+  description?: string;
+  isLabelHidden?: boolean;
+  label: string;
+  name?: string;
+  onChange?: (value: T, event: ChangeEvent<HTMLInputElement>) => void;
+  orientation?: RadioListOrientation;
+  value?: T;
+}>;
+
+RadioList.Item = RadioListItem;
+
+export default function RadioList<T>({
+  children,
+  defaultValue,
+  description,
+  orientation = 'vertical',
+  isLabelHidden,
+  name,
+  label,
+  value,
+  onChange,
+}: Props<T>) {
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore TODO: Figure out how to type the onChange.
+    <RadioListContext.Provider value={{ defaultValue, name, onChange, value }}>
+      <div>
+        <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-4')}>
+          <label className="text-base font-medium text-gray-900">{label}</label>
+          {description && (
+            <p className="text-sm leading-5 text-gray-500">{description}</p>
+          )}
+        </div>
+        <fieldset>
+          <legend className="sr-only">TODO</legend>
+          <div
+            className={clsx(
+              'space-y-4',
+              orientation === 'horizontal' &&
+                'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+            )}>
+            {children}
+          </div>
+        </fieldset>
+      </div>
+    </RadioListContext.Provider>
+  );
+}

packages/ui/src/RadioList/RadioListContext.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent } from 'react';
+import { createContext, useContext } from 'react';
+
+type RadioListContextValue<T = unknown> = {
+  defaultValue?: T;
+  name?: string;
+  onChange?: (
+    value: T,
+    event: ChangeEvent<HTMLInputElement>,
+  ) => undefined | void;
+  value?: T;
+};
+
+export const RadioListContext =
+  createContext<RadioListContextValue<unknown> | null>(null);
+export function useRadioListContext<T>(): RadioListContextValue<T> | null {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore TODO: Figure out how to type useContext with generics.
+  return useContext<T>(RadioListContext);
+}

packages/ui/src/RadioList/RadioListItem.tsx

@@ -0,0 +1,42 @@
+import { useId } from 'react';
+
+import { useRadioListContext } from './RadioListContext';
+
+type Props<T> = Readonly<{
+  label?: string;
+  value: T;
+}>;
+
+export default function RadioListItem<T>({ label, value }: Props<T>) {
+  const id = useId();
+  const context = useRadioListContext();
+
+  return (
+    <div className="flex items-center">
+      <input
+        checked={context?.value != null ? value === context?.value : undefined}
+        className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
+        defaultChecked={
+          context?.defaultValue != null
+            ? value === context?.defaultValue
+            : undefined
+        }
+        id={id}
+        name={context?.name}
+        type="radio"
+        onChange={
+          context?.onChange != null
+            ? (event) => {
+                context?.onChange?.(value, event);
+              }
+            : undefined
+        }
+      />
+      <label
+        className="ml-3 block text-sm font-medium text-gray-700"
+        htmlFor={id}>
+        {label}
+      </label>
+    </div>
+  );
+}

packages/ui/src/index.tsx

@@ -22,6 +22,9 @@ export { default as HorizontalDivider } from './HorizontalDivider/HorizontalDivi
 // Pagination
 export * from './Pagination/Pagination';
 export { default as Pagination } from './Pagination/Pagination';
+// RadioList
+export * from './RadioList/RadioList';
+export { default as RadioList } from './RadioList/RadioList';
 // Select
 export * from './Select/Select';
 export { default as Select } from './Select/Select';