Implement RadioGroup

packages/ui/fixtures/RadioGroup.fixture.tsx

@@ -0,0 +1,44 @@
+import { useValue } from "react-cosmos/client";
+
+import { RadioGroup } from "../lib/main";
+
+export default function Fixture() {
+  const [value, setValue] = useValue("Value", { defaultValue: "foo" });
+
+  return (
+    <div style={{ padding: "2rem" }}>
+      <RadioGroup value={value} onChange={setValue}>
+        <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

@@ -0,0 +1,134 @@
+import { createContext, CSSProperties, ReactNode, useContext } from "react";
+import { cn } from "@sys42/utils";
+import { omit } from "lodash-es";
+
+import styles from "./styles.module.css";
+
+// ------------------------------------------------------------------------------
+// 👉 CONTEXT
+// ------------------------------------------------------------------------------
+
+type BaseRadioGroupContextProps = {
+  activeValue: string;
+  onChange: (value: string) => void;
+};
+
+const BaseRadioGroupContext = createContext({} as BaseRadioGroupContextProps);
+
+// ------------------------------------------------------------------------------
+// 👉 GROUP
+// ------------------------------------------------------------------------------
+
+type UseBaseRadioGroupProps = {
+  value: string;
+  onChange: (value: string) => void;
+  children: ReactNode;
+};
+
+function useBaseRadioGroup({
+  value,
+  onChange,
+  children,
+}: UseBaseRadioGroupProps) {
+  return (
+    <BaseRadioGroupContext.Provider value={{ activeValue: value, onChange }}>
+      {children}
+    </BaseRadioGroupContext.Provider>
+  );
+}
+
+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 UseBaseRadioGroupItemProps = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  label: string;
+  name?: string;
+  title?: string;
+  value: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+};
+
+function useBaseItem(props: UseBaseRadioGroupItemProps) {
+  const { activeValue, onChange } = useContext(BaseRadioGroupContext);
+
+  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
+      id={id}
+      className={cn(className, styles.item)}
+      style={style}
+      title={title}
+    >
+      <input
+        type="radio"
+        onChange={handleChange}
+        checked={checked}
+        aria-checked={checked}
+        name={name}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+      />
+      {label}
+    </label>
+  );
+}
+
+export const RadioGroup = Object.assign(Group, {
+  Item,
+});

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

@@ -0,0 +1,57 @@
+.group {
+  border: 3px solid indigo;
+  width: fit-content;
+}
+
+.item + .item {
+  margin-top: 2rem;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 0.5rem;
+
+  input[type="radio"] {
+    /* Add if not using autoprefixer */
+    -webkit-appearance: none;
+    /* Remove most all native input styles */
+    -moz-appearance: none;
+    appearance: none;
+    /* For iOS < 15 */
+    background-color: blue;
+    /* Not removed via appearance */
+    margin: 0;
+    font: inherit;
+    color: currentColor;
+    width: 1.15em;
+    height: 1.15em;
+    border: 0.15em solid red;
+    border-radius: 50%;
+    transform: translateY(-0.075em);
+    display: grid;
+    place-content: center;
+  }
+
+  input[type="radio"]::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em yellow;
+    /* Windows High Contrast Mode */
+    background-color: CanvasText;
+  }
+
+  input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+  input[type="radio"]:focus {
+    outline: max(2px, 0.15em) solid green;
+    outline-offset: max(2px, 0.15em);
+  }
+}

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