[ui][radio list] implementation

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';