@multiplatform.one/forms 6.0.0

package/src/fields/Checkbox/index.tsx

@@ -0,0 +1,212 @@
+import type { RovingFocusGroupProps, RovingFocusItemProps } from "@tamagui/roving-focus";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { CheckIcon as CheckRegular } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ElementRef, KeyboardEvent, PropsWithChildren } from "react";
+import { forwardRef } from "react";
+import type { CheckedState, YStackProps } from "tamagui";
+import {
+  Checkbox as TamaguiCheckbox,
+  Group,
+  H2,
+  Label,
+  View,
+  createStyledContext,
+  isWeb,
+  styled,
+  withStaticProperties,
+} from "tamagui";
+import { formCardColors } from "../../shared/colorRamps";
+import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
+import { clampRadiusForControl } from "../../shared/utils";
+
+// ─── Checkboxes Compound Component ────────────────────────────────────────────
+
+const CheckboxesContext = createStyledContext<{
+  values: Record<string, boolean>;
+  onValuesChange: (values: Record<string, boolean>) => void;
+}>({
+  values: {},
+  onValuesChange: () => {},
+});
+
+const FocusGroup = forwardRef<ElementRef<typeof View>, RovingFocusGroupProps>((props, ref) => {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RovingFocusGroup
+      gap={knobProps.gap.gap}
+      focusable
+      outlineOffset={1}
+      focusStyle={{ zIndex: 1 }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+const FocusItemContext = createStyledContext({
+  value: "",
+});
+
+const FocusGroupItem = forwardRef<any, RovingFocusItemProps & { value: string }>(
+  (itemProps, ref) => {
+    const { value, ...props } = itemProps;
+    const { values, onValuesChange } = CheckboxesContext.useStyledContext();
+
+    const combinedProps = {
+      focusable: true,
+      outlineOffset: 1,
+      flexShrink: 1,
+      focusStyle: { zIndex: 1 },
+      ...(isWeb && {
+        onKeyDown: (e: KeyboardEvent) => {
+          if (e.key === "Enter" || e.code === "Space") {
+            e.preventDefault();
+            onValuesChange({ ...values, [value]: !values[value] });
+          }
+        },
+      }),
+      onPress: () => {
+        onValuesChange({ ...values, [value]: !values[value] });
+      },
+      ...props,
+    };
+
+    return (
+      <FocusItemContext.Provider value={value}>
+        <RovingFocusGroup.Item ref={ref} {...combinedProps} />
+      </FocusItemContext.Provider>
+    );
+  },
+);
+
+const RadiusGroup = styled(Group, {
+  orientation: "vertical",
+  gap: "$2",
+});
+
+const CheckboxesTitle = styled(H2, {
+  size: "$8",
+});
+
+export type CheckboxesProps<K extends string> = {
+  values: Record<K, boolean>;
+  onValuesChange: (values: Record<K, boolean>) => void;
+} & YStackProps;
+
+const CheckboxesImp = <K extends string>(
+  checkboxesProps: PropsWithChildren<CheckboxesProps<K>>,
+) => {
+  const { values, onValuesChange, ...props } = checkboxesProps;
+  return (
+    <CheckboxesContext.Provider values={values} onValuesChange={onValuesChange}>
+      <View {...props} />
+    </CheckboxesContext.Provider>
+  );
+};
+
+const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
+  const { checked: _userChecked, onCheckedChange: onCheckedChangeProp, ...props } = checkboxProps;
+  const { values, onValuesChange } = CheckboxesContext.useStyledContext();
+  const { value: focusItemValue } = FocusItemContext.useStyledContext();
+  const { knobProps } = useResolvedKnobs();
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const cappedRadius = clampRadiusForControl(radiusToken, 2);
+  const resolvedRadius =
+    cappedRadius === 0
+      ? { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: 0 }
+      : { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: cappedRadius };
+  const combinedProps = {
+    ...props,
+    checked: values[focusItemValue],
+    onCheckedChange: (checked: CheckedState) => {
+      onCheckedChangeProp?.(checked);
+      onValuesChange({
+        ...values,
+        [focusItemValue]: typeof checked === "boolean" ? checked : !values[focusItemValue],
+      });
+    },
+  };
+
+  return (
+    <CheckboxFieldFrame
+      ref={ref}
+      value={focusItemValue}
+      {...knobProps.inputSurface}
+      size={knobProps.sizeToken}
+      {...resolvedRadius}
+      outlined={knobProps.outlined}
+      transition={knobProps.transition}
+      {...combinedProps}
+    />
+  );
+});
+
+const CheckboxCardFrame = styled(View, {
+  cursor: "pointer",
+  width: "100%",
+  padding: "$3",
+  borderRadius: "$4",
+  backgroundColor: formCardColors.background.base,
+  borderColor: formCardColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    borderColor: formCardColors.border.hover,
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: formCardColors.background.active,
+        borderColor: formCardColors.border.active,
+      },
+    },
+  } as const,
+});
+
+const CheckboxCard = CheckboxCardFrame.styleable<{ unstyled?: boolean; active?: boolean }>(
+  (cardProps, ref) => {
+    const { values } = CheckboxesContext.useStyledContext();
+    const { value } = FocusItemContext.useStyledContext();
+    const { knobProps } = useResolvedKnobs();
+    const selected = values[value];
+
+    return (
+      <CheckboxCardFrame
+        ref={ref}
+        active={cardProps.active ?? selected}
+        {...knobProps.panelPadding}
+        borderRadius={knobProps.borderRadius.borderRadius}
+        {...cardProps}
+      />
+    );
+  },
+);
+
+const CheckboxesIndicator = TamaguiCheckbox.Indicator.styleable((indicatorProps, ref) => {
+  const { children, ...props } = indicatorProps;
+  return (
+    <TamaguiCheckbox.Indicator ref={ref} {...props}>
+      {children ?? <CheckRegular />}
+    </TamaguiCheckbox.Indicator>
+  );
+});
+
+export const Checkboxes = withStaticProperties(CheckboxesImp, {
+  Group: withStaticProperties(RadiusGroup, {
+    Item: Group.Item,
+  }),
+  FocusGroup: withStaticProperties(FocusGroup, {
+    Item: FocusGroupItem,
+  }),
+  Title: CheckboxesTitle,
+  Checkbox: withStaticProperties(CheckboxesCheckbox, {
+    Indicator: CheckboxesIndicator,
+    Label,
+  }),
+  Card: CheckboxCard,
+});
+
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export { CheckboxGroup } from "./CheckboxGroup";
+export type { CheckboxGroupProps, CheckboxGroupOption } from "./CheckboxGroup";

package/src/fields/ColorPicker/ColorPicker.spec.tsx

@@ -0,0 +1,130 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  hexToHsv,
+  hexToRgb,
+  hsvToHex,
+  hsvToRgb,
+  isValidHex,
+  normalizeHex,
+  rgbToHex,
+  rgbToHsv,
+} from "./parts";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null,
+}));
+
+async function loadColorPicker() {
+  return (await import("./index")).ColorPicker;
+}
+
+describe("ColorPicker", () => {
+  it("should handle disabled state", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(<ColorPicker label="Color" name="color" disabled />);
+    const input = result.container.querySelector("input");
+    expect(input).toBeTruthy();
+    expect(input?.getAttribute("aria-disabled")).toBe("true");
+
+    const clickable = result.container.querySelector("input,button,[role='button']");
+    if (clickable) {
+      fireEvent.click(clickable);
+    }
+    expect(result.findTextElement("Opacity: 100%")).toBeUndefined();
+  });
+
+  it("opens popover and updates value from hex input", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(
+      <ColorPicker label="Color" name="color" placeholder="Pick a color" showAlpha />,
+    );
+
+    const triggerInput = result.container.querySelector("input");
+    expect(triggerInput).toBeTruthy();
+
+    await act(async () => {
+      if (triggerInput) fireEvent.click(triggerInput);
+    });
+
+    await waitFor(() => {
+      expect(document.body.textContent?.includes("Opacity:")).toBe(true);
+    });
+
+    const hexInput = document.body.querySelector(
+      'input[placeholder="#000000"]',
+    ) as HTMLInputElement | null;
+    expect(hexInput).toBeTruthy();
+
+    await act(async () => {
+      if (hexInput) fireEvent.change(hexInput, { target: { value: "00ff00" } });
+    });
+
+    await waitFor(() => {
+      const updated = result.container.querySelector("input") as HTMLInputElement | null;
+      expect(updated?.value).toBe("#00FF00");
+    });
+  });
+
+  it("clears selected value from trigger button", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(
+      <ColorPicker label="Color" name="color" placeholder="Pick a color" defaultValue="#112233" />,
+    );
+
+    const input = result.container.querySelector("input") as HTMLInputElement | null;
+    expect(input?.value).toBe("#112233");
+
+    const triggerButton = result.container.querySelector("button");
+    await act(async () => {
+      if (triggerButton) fireEvent.click(triggerButton);
+    });
+
+    await waitFor(() => {
+      const updated = result.container.querySelector("input") as HTMLInputElement | null;
+      expect(updated?.value ?? "").toBe("");
+    });
+  });
+
+  it("shows format validation error for invalid rgb value", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(
+      <ColorPicker label="Color" name={undefined as never} format="rgb" defaultValue="not-rgb" />,
+    );
+
+    expect(result.findTextElement("Invalid RGB color value")).toBeDefined();
+  });
+
+  describe("color utilities", () => {
+    it("validates and normalizes hex values", () => {
+      expect(isValidHex("#AABBCC")).toBe(true);
+      expect(isValidHex("#abc")).toBe(true);
+      expect(isValidHex("123456")).toBe(false);
+      expect(normalizeHex("#abc")).toBe("#AABBCC");
+      expect(normalizeHex("aabbcc")).toBe("#AABBCC");
+    });
+
+    it("converts between RGB and HEX", () => {
+      expect(rgbToHex(255, 0, 128)).toBe("#FF0080");
+      expect(hexToRgb("#FF0080")).toEqual({ r: 255, g: 0, b: 128 });
+      expect(hexToRgb("invalid")).toBeNull();
+    });
+
+    it("converts between HSV and RGB/HEX", () => {
+      expect(hsvToRgb(0, 100, 100)).toEqual({ r: 255, g: 0, b: 0 });
+      expect(hsvToHex(120, 100, 100)).toBe("#00FF00");
+
+      const hsv = rgbToHsv(0, 0, 255);
+      expect(hsv.h).toBe(240);
+      expect(hsv.s).toBe(100);
+      expect(hsv.v).toBe(100);
+
+      const fromHex = hexToHsv("#0000FF");
+      expect(fromHex.h).toBe(240);
+      expect(fromHex.s).toBe(100);
+      expect(fromHex.v).toBe(100);
+    });
+  });
+});

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,165 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { ColorPicker } from "./index";
+
+const meta: Meta<typeof ColorPicker> = {
+  title: "Forms/ColorPicker",
+  component: ColorPicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A color picker with a 2D saturation/value panel, hue strip, preset swatches, and hex input. Opens in a popover dropdown.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    helperText: { control: "text", description: "Helper text below the field" },
+    error: { control: "text", description: "Error message" },
+    required: { control: "boolean", description: "Mark field as required" },
+    disabled: { control: "boolean", description: "Disable the color picker" },
+    size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
+    format: {
+      control: "select",
+      options: ["hex", "rgb", "hsl"],
+      description: "Color format to use",
+    },
+    showAlpha: { control: "boolean", description: "Show alpha channel slider" },
+    presetColors: { control: "object", description: "Array of preset color values" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          brandColor: "#3B82F6",
+          backgroundColor: "#FFFFFF",
+          textColor: "#000000",
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <ColorPicker
+              label="Brand Color"
+              name="brandColor"
+              helperText="Choose your primary brand color"
+            />
+            <ColorPicker
+              label="Background Color"
+              name="backgroundColor"
+              helperText="Choose background color"
+            />
+            <ColorPicker label="Text Color" name="textColor" helperText="Choose text color" />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Brand Color",
+    placeholder: "Pick a color",
+    helperText: "Choose your brand color",
+    format: "hex",
+  },
+  render: (args) => <ColorPicker {...args} />,
+};
+
+export const Basic: Story = {
+  render: (args) => <ColorPicker {...args} />,
+  args: {
+    label: "Choose Color",
+    placeholder: "Select a color",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <ColorPicker label="Small" size="$2" placeholder="Pick a color" />
+      <ColorPicker label="Medium (default)" size="$3" placeholder="Pick a color" />
+      <ColorPicker label="Large" size="$4" placeholder="Pick a color" />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [color, setColor] = useState("#3B82F6");
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <ColorPicker
+            label="Pick a Color"
+            value={color}
+            // @ts-expect-error controlled mode not supported
+            onChange={(val: string) => {
+              setColor(val);
+              action("onChange")(val);
+            }}
+            helperText={`Selected: ${color}`}
+          />
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};
+
+export const WithAlpha: Story = {
+  render: (args) => <ColorPicker {...args} />,
+  args: {
+    label: "Color with Alpha",
+    showAlpha: true,
+    placeholder: "Select a color with transparency",
+  },
+};
+
+export const CustomPresets: Story = {
+  render: (args) => <ColorPicker {...args} />,
+  args: {
+    label: "Brand Palette",
+    presetColors: ["#1E40AF", "#1D4ED8", "#2563EB", "#3B82F6", "#60A5FA", "#93C5FD", "#BFDBFE"],
+    helperText: "Select from the brand color palette",
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <ColorPicker {...args} />,
+  args: {
+    label: "Disabled Color",
+    disabled: true,
+    placeholder: "Cannot select",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <ColorPicker {...args} />,
+  args: {
+    label: "Required Color",
+    error: "Please select a valid color",
+    required: true,
+  },
+};