Implement RadioGroup

packages/ui/fixtures/RadioGroup.fixture.tsx

@@ -8,11 +8,35 @@ export default function Fixture() {
   return (
     <div style={{ padding: "2rem" }}>
       <RadioGroup value={value} onChange={setValue}>
-        <RadioGroup.Item value="foo" label="Foo" />
+        <RadioGroup.Item title="Foo title" value="foo" label="Foo" />
         <RadioGroup.Item value="bar" label="Bar" />
         <RadioGroup.Item value="baz" label="Baz" />
         <RadioGroup.Item value="qux" label="Qux" />
         <RadioGroup.Item value="quux" label="Quux" />
+        <div
+          style={{
+            padding: "1rem",
+            margin: "1rem 0",
+            background: "black",
+            color: "white",
+          }}
+        >
+          The rain in spain falls mainly on the plain.
+        </div>
+        <RadioGroup.Item value="corge" label="Corge" />
+      </RadioGroup>
+
+      <RadioGroup
+        style={{
+          marginTop: "2rem",
+          borderColor: "red",
+          flexDirection: "row", // HMMM: Not that great that we can't just easily change to horizontal layout
+        }}
+        value={value}
+        onChange={setValue}
+      >
+        <RadioGroup.Item value="foo" label="Foo" />
+        <RadioGroup.Item value="bar" label="Bar" />
         <RadioGroup.Item value="corge" label="Corge" />
       </RadioGroup>
     </div>

packages/ui/lib/RadioGroup/index.tsx

@@ -1,51 +1,9 @@
-import {
-  createContext,
-  InputHTMLAttributes,
-  ReactNode,
-  useContext,
-} from "react";
+import { createContext, CSSProperties, ReactNode, useContext } from "react";
 import { cn } from "@sys42/utils";
-
-import { Sys42Props } from "../types";
+import { omit } from "lodash-es";
 
 import styles from "./styles.module.css";
 
-/*
-
-  GENERAL NOTES:
-
-  - Something I don't like so much about this pattern is that the value prop type
-    of Group and Item aren't linked. The dream would be that the enum type that is
-    set to <Group value={<T>} /> would match and check the value
-    prop of its children <Item value={<T>} />. Not possible as far as I'm aware.
-
-  - I don't like so much the fact that the hook `useBaseRadioGroup` does not return
-    any relevant props for the child input. I wish we could do something like this,
-    although the execution is shitty:
-
-    ```ts
-      const useBaseRadioGroup = ()=>({
-        groupElem,
-        inputProps,
-      })
-
-      const RadioGroup = (()=>{
-        let _inputProps = null;
-
-        const Main = (props)=>{
-          const { groupElem, inputProps } = useBaseRadioGroup(props);
-          _inputProps = inputProps
-          return groupElem;
-        };
-
-        Main.Item = ()=> <input {..._inputProps} />;
-
-        return Main;
-      })();
-    ```
-
-*/
-
 // ------------------------------------------------------------------------------
 // 👉 CONTEXT
 // ------------------------------------------------------------------------------
@@ -55,8 +13,6 @@ type BaseRadioGroupContextProps = {
   onChange: (value: string) => void;
 };
 
-// QUESTION: Is it really neccessary to define null first?
-// The children won't render without the value being set, right?
 const BaseRadioGroupContext = createContext({} as BaseRadioGroupContextProps);
 
 // ------------------------------------------------------------------------------
@@ -74,71 +30,105 @@ function useBaseRadioGroup({
   onChange,
   children,
 }: UseBaseRadioGroupProps) {
-  return {
-    // TODO: Should probably have the groupElem return a wrapperDiv so that it would
-    // be easy to for example change the Radios into a horizontal layout? Or maybe -
-    // this should be left to the consumer?
-    groupElem: (
-      <BaseRadioGroupContext.Provider value={{ activeValue: value, onChange }}>
-        {children}
-      </BaseRadioGroupContext.Provider>
-    ),
-  };
+  return (
+    <BaseRadioGroupContext.Provider value={{ activeValue: value, onChange }}>
+      {children}
+    </BaseRadioGroupContext.Provider>
+  );
 }
 
-export const Group = (props: UseBaseRadioGroupProps) => {
-  const { groupElem } = useBaseRadioGroup(props);
-  return groupElem;
+export const Group = ({
+  id,
+  className,
+  style,
+  ariaLabeledBy,
+  ...rest
+}: UseBaseRadioGroupProps & {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  ariaLabeledBy?: string;
+}) => {
+  const groupElem = useBaseRadioGroup(rest);
+
+  return (
+    <div
+      aria-labelledby={ariaLabeledBy}
+      className={cn(className, styles.group)}
+      id={id}
+      role="radiogroup"
+      style={style}
+    >
+      {groupElem}
+    </div>
+  );
 };
 
 // ------------------------------------------------------------------------------
 // 👉 ITEM
 // ------------------------------------------------------------------------------
 
-type RadioGroupItemProps = {
-  value: string;
+type UseBaseRadioGroupItemProps = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
   label: string;
+  name?: string;
+  title?: string;
+  value: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
 };
 
-// QUESTION: In this case, we do not need to merge any label
-// props as we are not exposing it to the user?
-export type BaseRadioGroupItemProps = Sys42Props<
-  RadioGroupItemProps,
-  Partial<
-    Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "readOnly" | "type">
-  >
->;
-
-function Item({
-  value,
-  label,
-  onClick,
-  className,
-  ...nativeProps
-}: BaseRadioGroupItemProps) {
+function useBaseItem(props: UseBaseRadioGroupItemProps) {
   const { activeValue, onChange } = useContext(BaseRadioGroupContext);
 
-  function handleClick(e: React.MouseEvent<HTMLInputElement>) {
-    onClick?.(e);
-    onChange(value);
+  function handleChange() {
+    onChange(props.value);
   }
 
+  return {
+    handleChange,
+    checked: props.value === activeValue,
+    ...omit(props, "value"),
+  };
+}
+
+function Item(props: UseBaseRadioGroupItemProps) {
+  const {
+    label,
+    checked,
+    handleChange,
+    className,
+    name,
+    title,
+    style,
+    id,
+    ariaDescribedBy,
+    ariaLabelledBy,
+  } = useBaseItem(props);
+
   return (
-    <label className={cn(className, styles.radio)}>
+    <label
+      id={id}
+      className={cn(className, styles.item)}
+      style={style}
+      title={title}
+    >
       <input
-        {...nativeProps}
-        readOnly
         type="radio"
-        onClick={handleClick}
-        checked={value === activeValue}
+        onChange={handleChange}
+        checked={checked}
+        aria-checked={checked}
+        name={name}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
       />
       {label}
     </label>
   );
 }
 
-// HMMM: Wondering why I'm able to do this more simply -
-// I might just need to make sure my TS is setup the same way.
 export const RadioGroup = Object.assign(Group, {
   Item,
 });

packages/ui/lib/RadioGroup/styles.module.css

@@ -1,4 +1,13 @@
-.radio {
+.group {
+  border: 3px solid indigo;
+  width: fit-content;
+}
+
+.item + .item {
+  margin-top: 2rem;
+}
+
+.item {
   display: flex;
   flex-direction: row;
   align-items: baseline;

packages/ui/lib/main.ts

@@ -6,6 +6,7 @@ export { Stack } from "./Stack";
 export { TextArea } from "./TextArea";
 export { TextLink, TextLinkButton } from "./TextLink";
 export { TextInput } from "./TextInput";
+export { RadioGroup } from "./RadioGroup";
 
 export { useButton } from "./Button/useButton";
 export { useFormField } from "./FormField/useFormField";