@multiplatform.one/forms 6.0.0

package/src/fields/Barcode/index.tsx

@@ -0,0 +1,234 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import type { LabelProps, SizeTokens } from "tamagui";
+import { Text, View } from "tamagui";
+import { Button } from "../../Button";
+import { ControlGroup } from "../../ControlGroup";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { formCommonColors } from "../../shared/colorRamps";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+import { BarcodeScanner } from "./BarcodeScanner";
+
+function BarcodeInput({
+  value,
+  onValueChange,
+  disabled,
+  readOnly,
+  enableScan,
+  knobProps,
+  barcodeIcon,
+  scanIcon,
+  stopIcon,
+  required,
+  hasError,
+}: {
+  value: string;
+  onValueChange: (v: string) => void;
+  disabled: boolean;
+  readOnly: boolean;
+  enableScan: boolean;
+  knobProps: KnobProps;
+  barcodeIcon: ReactNode;
+  scanIcon: ReactNode;
+  stopIcon: ReactNode;
+  required?: boolean;
+  hasError?: boolean;
+}) {
+  const [isScanning, setIsScanning] = useState(false);
+  const [scanError, setScanError] = useState<string | null>(null);
+
+  return (
+    <>
+      <InputParts size={knobProps.sizeToken}>
+        <ControlGroup>
+          <View width={0} />
+          <InputParts.Box>
+            <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
+            <InputParts.Area
+              value={value}
+              onChangeText={readOnly ? undefined : onValueChange}
+              readOnly={readOnly}
+              aria-readonly={readOnly || undefined}
+              placeholder="Enter or scan barcode"
+              disabled={disabled}
+              aria-required={required || undefined}
+              aria-invalid={hasError || undefined}
+            />
+          </InputParts.Box>
+          {enableScan && !readOnly ? (
+            <Button
+              size={knobProps.sizeToken}
+              disabled={disabled}
+              onPress={() => setIsScanning((s) => !s)}
+              icon={isScanning ? stopIcon : scanIcon}
+              {...(isScanning ? { theme: "red" } : undefined)}
+              aria-label={isScanning ? "Stop scanning" : "Scan barcode"}
+            />
+          ) : (
+            <View width={0} />
+          )}
+        </ControlGroup>
+      </InputParts>
+      <BarcodeScanner
+        active={isScanning}
+        onScan={onValueChange}
+        onError={setScanError}
+        onClose={() => setIsScanning(false)}
+        knobProps={knobProps}
+      />
+      {scanError && (
+        <Text {...knobProps.body} color={formCommonColors.error} fontSize="$2">
+          {scanError}
+        </Text>
+      )}
+    </>
+  );
+}
+
+export interface BarcodeProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  size?: SizeTokens;
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  enableScan?: boolean;
+  formats?: string[];
+  barcodeIcon: ReactNode;
+  scanIcon: ReactNode;
+  stopIcon: ReactNode;
+  /** When true, renders a skeleton placeholder instead of the barcode field */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+}
+
+export function Barcode({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  enableScan = true,
+  barcodeIcon,
+  scanIcon,
+  stopIcon,
+  skeleton,
+  compact,
+}: BarcodeProps) {
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  const iconProps = { barcodeIcon, scanIcon, stopIcon };
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={error}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <BarcodeInput
+          value={value ?? (defaultValue as string) ?? ""}
+          onValueChange={(v) => {
+            if (!disabled && !readOnly) onChange?.(v);
+          }}
+          disabled={!!disabled}
+          readOnly={!!readOnly}
+          enableScan={enableScan}
+          knobProps={knobProps}
+          required={required}
+          hasError={!!error}
+          {...iconProps}
+        />
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <BarcodeInput
+              value={(field.state.value as string) ?? ""}
+              onValueChange={(v) => {
+                if (disabled || readOnly) return;
+                field.handleChange(v as any);
+                onChange?.(v);
+              }}
+              disabled={!!disabled}
+              readOnly={!!readOnly}
+              enableScan={enableScan}
+              knobProps={knobProps}
+              required={required}
+              hasError={!!resolvedError}
+              {...iconProps}
+            />
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/Barcode/scannerTypes.ts

@@ -0,0 +1,13 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+
+export interface BarcodeScannerProps {
+  /** When true, the camera scanner is active and rendered. */
+  active: boolean;
+  /** Called with the decoded barcode value. */
+  onScan: (value: string) => void;
+  /** Report a scanner error message (or null to clear). */
+  onError: (message: string | null) => void;
+  /** Called after a successful scan or unrecoverable error to deactivate. */
+  onClose: () => void;
+  knobProps: KnobProps;
+}

package/src/fields/Checkbox/Checkbox.spec.tsx

@@ -0,0 +1,101 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroup } from "./CheckboxGroup";
+
+describe("Checkbox", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(<Checkbox label="Accept terms" name="terms" />);
+      expect(result.findTextElement("Accept terms")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(<Checkbox label="Required" name="req" required />);
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders disabled state", () => {
+      const result = renderWithProviders(<Checkbox label="Disabled" name="d" disabled />);
+      const checkbox = result.getCheckbox();
+      expect(checkbox?.getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("renders checked state", () => {
+      const result = renderWithProviders(<Checkbox label="Checked" name="c" checked />);
+      const checkbox = result.getCheckbox();
+      expect(checkbox?.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(<Checkbox label="Loading" name="l" skeleton />);
+      expect(result.container.querySelector("[role='checkbox']")).toBeNull();
+    });
+
+    it("calls onCheckedChange when clicked", () => {
+      const onCheckedChange = vi.fn();
+      const result = renderWithProviders(
+        <Checkbox name="cb" defaultValue={false} onCheckedChange={onCheckedChange} />,
+      );
+      const checkbox = result.getCheckbox();
+      if (checkbox) fireEvent.click(checkbox);
+      expect(onCheckedChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { agree: false } }} submitText="Submit">
+          <Checkbox name="agree" label="I agree" />
+        </Form>,
+      );
+      expect(result.findTextElement("I agree")).toBeDefined();
+    });
+  });
+});
+
+describe("CheckboxGroup", () => {
+  const options = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+    { label: "Option C", value: "c" },
+  ];
+
+  it("renders all options", () => {
+    const result = renderWithProviders(
+      <CheckboxGroup label="Pick options" name="opts" options={options} />,
+    );
+    expect(result.findTextElement("Option A")).toBeDefined();
+    expect(result.findTextElement("Option B")).toBeDefined();
+    expect(result.findTextElement("Option C")).toBeDefined();
+  });
+
+  it("renders required label with asterisk", () => {
+    const result = renderWithProviders(
+      <CheckboxGroup label="Required" name="req" options={options} required />,
+    );
+    const label = result.container.querySelector("label");
+    expect(label?.textContent).toContain("*");
+  });
+
+  it("renders skeleton placeholder", () => {
+    const result = renderWithProviders(
+      <CheckboxGroup label="Loading" name="l" options={options} skeleton />,
+    );
+    const checkboxes = result.container.querySelectorAll("[role='checkbox']");
+    expect(checkboxes.length).toBe(0);
+  });
+
+  it("renders with form context", () => {
+    const result = renderWithProviders(
+      <Form formOptions={{ defaultValues: { opts: [] } }} submitText="Submit">
+        <CheckboxGroup name="opts" label="Options" options={options} />
+      </Form>,
+    );
+    expect(result.findTextElement("Option A")).toBeDefined();
+  });
+});

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,339 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { CheckIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Checkbox as TamaguiCheckbox, Label, Paragraph, XStack, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Forms/Checkbox",
+  component: Checkbox,
+  parameters: { status: { type: "beta" } },
+  argTypes: {
+    label: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    size: { control: "select", options: ["$2", "$3", "$4"] },
+    checked: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          terms: false,
+          newsletter: true,
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <Checkbox
+            label="Accept terms"
+            name="terms"
+            validators={{ onChange: ({ value }) => (!value ? "Terms are required" : undefined) }}
+          />
+          <Checkbox label="Subscribe to newsletter" name="newsletter" />
+          <Button action="submit">Submit</Button>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Accept terms",
+    helperText: "You must accept to continue",
+    disabled: false,
+    required: false,
+  },
+  render: (args) => <Checkbox {...args} />,
+};
+
+export const Basic: Story = {
+  args: {
+    label: "Accept terms",
+    helperText: "You must accept before continuing",
+    defaultValue: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true,
+  },
+};
+
+export const Pointy: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Checkbox label="Pointy (hard angles)" pointy checked={true} />
+      <Checkbox label="Regular (default)" pointy={false} checked={true} />
+    </YStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Checkbox label="Small" size="$2" />
+      <Checkbox label="Medium (default)" size="$3" />
+      <Checkbox label="Large" size="$4" />
+    </YStack>
+  ),
+};
+
+export const compound = () => {
+  const [values, setValues] = useState({
+    analytics: true,
+    updates: false,
+    marketing: false,
+  });
+
+  return (
+    <YStack gap="$4">
+      <Checkboxes
+        values={values}
+        onValuesChange={(nextValues) => setValues(nextValues as typeof values)}
+      >
+        <Checkboxes.Title>Notification Preferences</Checkboxes.Title>
+        <Checkboxes.FocusGroup orientation="vertical">
+          <Checkboxes.Group>
+            <Checkboxes.Group.Item>
+              <Checkboxes.FocusGroup.Item value="analytics">
+                <Checkboxes.Card>
+                  <Checkboxes.Checkbox>
+                    <Checkboxes.Checkbox.Indicator />
+                  </Checkboxes.Checkbox>
+                  <Paragraph>Product analytics</Paragraph>
+                </Checkboxes.Card>
+              </Checkboxes.FocusGroup.Item>
+            </Checkboxes.Group.Item>
+            <Checkboxes.Group.Item>
+              <Checkboxes.FocusGroup.Item value="updates">
+                <Checkboxes.Card>
+                  <Checkboxes.Checkbox>
+                    <Checkboxes.Checkbox.Indicator />
+                  </Checkboxes.Checkbox>
+                  <Paragraph>Release updates</Paragraph>
+                </Checkboxes.Card>
+              </Checkboxes.FocusGroup.Item>
+            </Checkboxes.Group.Item>
+            <Checkboxes.Group.Item>
+              <Checkboxes.FocusGroup.Item value="marketing">
+                <Checkboxes.Card>
+                  <Checkboxes.Checkbox>
+                    <Checkboxes.Checkbox.Indicator />
+                  </Checkboxes.Checkbox>
+                  <Paragraph>Marketing emails</Paragraph>
+                </Checkboxes.Card>
+              </Checkboxes.FocusGroup.Item>
+            </Checkboxes.Group.Item>
+          </Checkboxes.Group>
+        </Checkboxes.FocusGroup>
+      </Checkboxes>
+    </YStack>
+  );
+};
+
+export const Comparison: StoryObj = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customChecked, setCustomChecked] = useState(false);
+      const [tamaguiChecked, setTamaguiChecked] = useState<boolean>(false);
+      return (
+        <XStack gap="$6" alignItems="flex-start" padding="$4">
+          <YStack gap="$3" width={250}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Custom Checkbox
+            </Paragraph>
+            <Checkbox
+              label="Accept terms"
+              defaultValue={customChecked}
+              onCheckedChange={(val) => {
+                setCustomChecked(!!val);
+                action("custom.onCheckedChange")(val);
+              }}
+            />
+          </YStack>
+
+          <YStack gap="$3" width={250}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Tamagui Checkbox
+            </Paragraph>
+            <XStack gap="$2" alignItems="center">
+              <TamaguiCheckbox
+                id="tamagui-cb"
+                checked={tamaguiChecked}
+                onCheckedChange={(val) => {
+                  setTamaguiChecked(!!val);
+                  action("tamagui.onCheckedChange")(val);
+                }}
+              >
+                <TamaguiCheckbox.Indicator>
+                  <CheckIcon />
+                </TamaguiCheckbox.Indicator>
+              </TamaguiCheckbox>
+              <Label htmlFor="tamagui-cb">Accept terms</Label>
+            </XStack>
+          </YStack>
+        </XStack>
+      );
+    };
+    return <ComparisonExample />;
+  },
+};
+
+// --- CheckboxGroup Stories ---
+
+export const CheckboxGroupBasic: StoryObj = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <CheckboxGroup
+        label="Features"
+        options={[
+          { value: "notifications", label: "Push Notifications" },
+          { value: "emails", label: "Email Updates" },
+          { value: "sms", label: "SMS Alerts" },
+        ]}
+        defaultValue={["emails"]}
+        helperText="Select all that apply"
+      />
+    </YStack>
+  ),
+};
+
+export const CheckboxGroupWithForm: StoryObj = {
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          features: ["notifications"],
+          permissions: [] as string[],
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4" maxWidth={400}>
+            <CheckboxGroup
+              label="Features"
+              name="features"
+              options={[
+                { value: "notifications", label: "Push Notifications" },
+                { value: "emails", label: "Email Updates" },
+                { value: "sms", label: "SMS Alerts" },
+                { value: "reports", label: "Weekly Reports" },
+              ]}
+              helperText="Select your preferred features"
+            />
+            <CheckboxGroup
+              label="Permissions"
+              name="permissions"
+              options={[
+                { value: "read", label: "Read Access" },
+                { value: "write", label: "Write Access" },
+                { value: "delete", label: "Delete Access" },
+                { value: "admin", label: "Admin Access" },
+              ]}
+              helperText="Select required permissions"
+              required
+            />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const CheckboxGroupHorizontal: StoryObj = {
+  render: () => (
+    <YStack gap="$4" maxWidth={600}>
+      <CheckboxGroup
+        label="Size"
+        orientation="horizontal"
+        options={[
+          { value: "s", label: "Small" },
+          { value: "m", label: "Medium" },
+          { value: "l", label: "Large" },
+          { value: "xl", label: "X-Large" },
+        ]}
+        defaultValue={["m"]}
+      />
+    </YStack>
+  ),
+};
+
+export const CheckboxGroupWithDisabled: StoryObj = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <CheckboxGroup
+        label="Options"
+        options={[
+          { value: "available", label: "Available Option" },
+          { value: "disabled", label: "Disabled Option", disabled: true },
+          { value: "another", label: "Another Option" },
+        ]}
+        defaultValue={["available"]}
+        helperText="Some options may be disabled"
+      />
+    </YStack>
+  ),
+};
+
+export const CheckboxGroupInteractive: StoryObj = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [selected, setSelected] = useState<string[]>(["opt1"]);
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <CheckboxGroup
+            label="Interactive Selection"
+            options={[
+              { value: "opt1", label: "Option 1" },
+              { value: "opt2", label: "Option 2" },
+              { value: "opt3", label: "Option 3" },
+            ]}
+            value={selected}
+            onValueChange={(values) => {
+              setSelected(values);
+              action("onValueChange")(values);
+            }}
+          />
+          <Paragraph size="$2">Selected: {selected.join(", ") || "None"}</Paragraph>
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};