@multiplatform.one/forms 6.0.0

package/src/fields/Select/Select.spec.tsx

@@ -0,0 +1,227 @@
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { YStack } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Select, type SelectOption } from "./index";
+
+const mockOptions: SelectOption[] = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+];
+
+let consoleErrorSpy: ReturnType<typeof vi.spyOn> | null = null;
+beforeEach(() => {
+  consoleErrorSpy = vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
+    const message = args.map(String).join(" ");
+    if (message.includes("React does not recognize the `marginLeft` prop on a DOM element")) {
+      return;
+    }
+  });
+});
+
+afterEach(() => {
+  consoleErrorSpy?.mockRestore();
+  consoleErrorSpy = null;
+});
+
+describe("Select Components", () => {
+  describe("Select", () => {
+    it("should display placeholder when no value is selected", () => {
+      const result = renderWithProviders(
+        <Select options={mockOptions} placeholder="Choose an option" />,
+      );
+
+      // Placeholder should be visible
+      expect(result.findTextElement("Choose an option")).toBeDefined();
+    });
+
+    it("should display selected value", () => {
+      const result = renderWithProviders(
+        <Select options={mockOptions} value="option1" placeholder="Choose an option" />,
+      );
+
+      // Should show the selected option label
+      expect(result.findTextElement("Option 1")).toBeDefined();
+    });
+
+    it("should handle empty options array", () => {
+      const result = renderWithProviders(<Select options={[]} placeholder="No options" />);
+
+      expect(result.findTextElement("No options")).toBeDefined();
+    });
+
+    it("should support custom placeholder", () => {
+      const result = renderWithProviders(
+        <Select options={mockOptions} placeholder="Custom placeholder text" />,
+      );
+
+      expect(result.findTextElement("Custom placeholder text")).toBeDefined();
+    });
+  });
+
+  describe("Select", () => {
+    describe("without form context", () => {
+      it("should render with label and helper text", () => {
+        const result = renderWithProviders(
+          <Select
+            label="Choose Option"
+            helperText="Select an option from the list"
+            name="option"
+            options={mockOptions}
+          />,
+        );
+
+        expect(result.findTextElement("Choose Option")).toBeDefined();
+        expect(result.findTextElement("Select an option from the list")).toBeDefined();
+      });
+
+      it("should display error message", () => {
+        const result = renderWithProviders(
+          <Select
+            label="Choose Option"
+            name="option"
+            options={mockOptions}
+            error="This field is required"
+          />,
+        );
+
+        expect(result.findTextElement("This field is required")).toBeDefined();
+      });
+
+      it("should render required label with asterisk", () => {
+        const result = renderWithProviders(
+          <Select label="Required Select" name="option" options={mockOptions} required />,
+        );
+
+        const label = result.container.querySelector("label");
+        expect(label).toBeDefined();
+        expect(label?.textContent).toContain("Required Select");
+        expect(label?.textContent).toContain("*");
+      });
+    });
+
+    describe("with form context", () => {
+      const FormExample = ({
+        defaultValue = "",
+        name = "option",
+        onSubmit = async (_value: unknown) => {},
+      }) => {
+        const form = useForm({
+          defaultValues: {
+            [name]: defaultValue,
+          },
+          onSubmit: async ({ value }) => {
+            await onSubmit(value);
+          },
+        });
+
+        return (
+          <Form form={form}>
+            <Select label="Choose Option" name={name} options={mockOptions} />
+            <Button action="submit">Submit</Button>
+          </Form>
+        );
+      };
+
+      it("should render with form context and handle form submission", async () => {
+        const onSubmit = vi.fn();
+        const result = renderWithProviders(
+          <YStack>
+            <FormExample onSubmit={onSubmit} />
+          </YStack>,
+        );
+
+        const submitButton = result.getSubmitButton();
+        await act(async () => {
+          if (submitButton) fireEvent.click(submitButton);
+        });
+
+        expect(onSubmit).toHaveBeenCalledWith({ option: "" });
+      });
+
+      it("should handle form submission with selected value", async () => {
+        const onSubmit = vi.fn();
+        const result = renderWithProviders(
+          <YStack>
+            <FormExample defaultValue="option1" onSubmit={onSubmit} />
+          </YStack>,
+        );
+
+        const submitButton = result.getSubmitButton();
+        await act(async () => {
+          if (submitButton) fireEvent.click(submitButton);
+        });
+
+        expect(onSubmit).toHaveBeenCalledWith({ option: "option1" });
+      });
+    });
+
+    describe("with useForm hook directly", () => {
+      it("should handle form submission with useForm", async () => {
+        const onSubmitMock = vi.fn();
+        const TestComponent = () => {
+          const form = useForm({
+            defaultValues: {
+              option: "option2",
+            },
+            onSubmit: async ({ value }) => {
+              onSubmitMock(value);
+            },
+          });
+
+          return (
+            <Form form={form}>
+              <Select label="Choose Option" name="option" options={mockOptions} />
+              <Button action="submit">Submit</Button>
+            </Form>
+          );
+        };
+
+        const result = renderWithProviders(<TestComponent />);
+
+        const submitButton = result.getSubmitButton();
+        await act(async () => {
+          if (submitButton) fireEvent.click(submitButton);
+        });
+
+        await waitFor(() => {
+          expect(onSubmitMock).toHaveBeenCalledWith({ option: "option2" });
+        });
+      });
+    });
+  });
+
+  describe("integration scenarios", () => {
+    it("should handle dynamic options", () => {
+      const DynamicSelect = ({ options }: { options: SelectOption[] }) => {
+        return <Select label="Dynamic Select" name="dynamic" options={options} />;
+      };
+
+      const result = renderWithProviders(<DynamicSelect options={mockOptions} />);
+
+      result.rerender(
+        <DynamicSelect
+          options={[
+            { value: "new1", label: "New Option 1" },
+            { value: "new2", label: "New Option 2" },
+          ]}
+        />,
+      );
+      expect(result.findTextElement("Dynamic Select")).toBeDefined();
+    });
+  });
+
+  describe("accessibility", () => {
+    it("should announce selected value to screen readers", () => {
+      const result = renderWithProviders(
+        <Select options={mockOptions} value="option1" aria-label="Test select" />,
+      );
+
+      expect(result.findTextElement("Option 1")).toBeDefined();
+    });
+  });
+});

package/src/fields/Select/Select.stories.tsx

@@ -0,0 +1,328 @@
+import React, { useState } from "react";
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Adapt, Paragraph, Select as TamaguiSelect, Sheet, XStack, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Select, type SelectOption } from "./index";
+
+const meta: Meta<typeof Select> = {
+  title: "Forms/Select",
+  component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component: "A select component with form integration and responsive design.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    size: { control: "select", options: ["$2", "$3", "$4"] },
+    value: { control: "text" },
+    options: { control: "object" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const sampleOptions: SelectOption[] = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+  { value: "option4", label: "Option 4" },
+];
+
+const roleOptions: SelectOption[] = [
+  { value: "admin", label: "Administrator" },
+  { value: "user", label: "User" },
+  { value: "guest", label: "Guest" },
+  { value: "moderator", label: "Moderator" },
+];
+
+const countryOptions: SelectOption[] = [
+  { value: "us", label: "United States" },
+  { value: "ca", label: "Canada" },
+  { value: "uk", label: "United Kingdom" },
+  { value: "de", label: "Germany" },
+  { value: "fr", label: "France" },
+  { value: "jp", label: "Japan" },
+];
+
+export const Main: StoryObj<typeof Select> = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          role: "",
+          country: "us",
+          priority: "",
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form} className="max-w-md">
+          <YStack gap="$4">
+            <Select
+              label="User Role"
+              name="role"
+              options={roleOptions}
+              placeholder="Select a role"
+              required
+            />
+
+            <Select
+              label="Country"
+              name="country"
+              options={countryOptions}
+              placeholder="Select your country"
+            />
+
+            <Select
+              label="Priority"
+              name="priority"
+              options={[
+                { value: "low", label: "Low Priority" },
+                { value: "medium", label: "Medium Priority" },
+                { value: "high", label: "High Priority" },
+                { value: "urgent", label: "Urgent" },
+              ]}
+              placeholder="Select priority level"
+            />
+
+            <Button action="submit">Submit Form</Button>
+          </YStack>
+        </Form>
+      );
+    };
+
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Country",
+    placeholder: "Select a country",
+    helperText: "Choose your country",
+    disabled: false,
+    required: false,
+    size: "$3",
+    options: countryOptions,
+  },
+  render: (args) => <Select {...args} />,
+};
+
+export const Basic: Story = {
+  args: {
+    options: sampleOptions,
+    placeholder: "Select an option",
+  },
+  render: function Render(args) {
+    const [value, setValue] = useState("");
+    return (
+      <Select
+        {...args}
+        value={value || undefined}
+        onValueChange={(val) => {
+          setValue(Array.isArray(val) ? (val[0] ?? "") : val);
+          action("onValueChange")(val);
+        }}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    options: sampleOptions,
+    placeholder: "Cannot interact",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true,
+    options: sampleOptions,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Select label="Small" size="$2" options={sampleOptions} placeholder="Small select" />
+      <Select
+        label="Medium (default)"
+        size="$3"
+        options={sampleOptions}
+        placeholder="Medium select"
+      />
+      <Select label="Large" size="$4" options={sampleOptions} placeholder="Large select" />
+    </YStack>
+  ),
+};
+
+export const DynamicOptions: StoryObj<typeof Select> = {
+  render: () => {
+    const DynamicExample = () => {
+      const [category, setCategory] = useState("");
+
+      const getOptions = (category: string): SelectOption[] => {
+        switch (category) {
+          case "fruits":
+            return [
+              { value: "apple", label: "Apple" },
+              { value: "banana", label: "Banana" },
+              { value: "orange", label: "Orange" },
+            ];
+          case "vegetables":
+            return [
+              { value: "carrot", label: "Carrot" },
+              { value: "broccoli", label: "Broccoli" },
+              { value: "spinach", label: "Spinach" },
+            ];
+          default:
+            return [];
+        }
+      };
+
+      const categoryOptions = [
+        { value: "fruits", label: "Fruits" },
+        { value: "vegetables", label: "Vegetables" },
+      ];
+
+      return (
+        <YStack gap="$4" padding="$4">
+          <Select
+            label="Category"
+            name="category"
+            options={categoryOptions}
+            placeholder="Select a category"
+            onValueChange={(val) => setCategory(Array.isArray(val) ? (val[0] ?? "") : val)}
+          />
+
+          <Select
+            label="Item"
+            name="item"
+            options={getOptions(category)}
+            placeholder={category ? "Select an item" : "Select a category first"}
+            disabled={!category}
+          />
+        </YStack>
+      );
+    };
+
+    return <DynamicExample />;
+  },
+};
+
+export const Comparison: StoryObj<typeof Select> = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customValue, setCustomValue] = useState<string>();
+      const [tamaguiValue, setTamaguiValue] = useState<string>();
+      return (
+        <XStack gap="$4" alignItems="flex-start" padding="$4">
+          <YStack gap="$2" width={320}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Custom Select
+            </Paragraph>
+            <Select
+              options={sampleOptions}
+              placeholder="Select an option"
+              groupLabel="Options"
+              value={customValue}
+              onValueChange={(val) => {
+                setCustomValue(Array.isArray(val) ? val[0] : val);
+                action("custom.onValueChange")(val);
+              }}
+            />
+          </YStack>
+
+          <YStack gap="$2" width={320}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Tamagui Select
+            </Paragraph>
+            <TamaguiSelect
+              value={tamaguiValue}
+              onValueChange={(val) => {
+                setTamaguiValue(val);
+                action("tamagui.onValueChange")(val);
+              }}
+            >
+              <TamaguiSelect.Trigger iconAfter={CaretDownIcon}>
+                <TamaguiSelect.Value placeholder="Select an option" />
+              </TamaguiSelect.Trigger>
+              {/* biome-ignore lint/suspicious/noExplicitAny: Tamagui Adapt breakpoint type */}
+              <Adapt when={"sm" as any} platform="touch">
+                <Sheet modal dismissOnSnapToBottom>
+                  <Sheet.Frame>
+                    <Sheet.ScrollView>
+                      <Adapt.Contents />
+                    </Sheet.ScrollView>
+                  </Sheet.Frame>
+                  <Sheet.Overlay
+                    transition="lazy"
+                    enterStyle={{ opacity: 0 }}
+                    exitStyle={{ opacity: 0 }}
+                  />
+                </Sheet>
+              </Adapt>
+              <TamaguiSelect.Content {...({ zIndex: 200000 } as any)}>
+                <TamaguiSelect.ScrollUpButton
+                  alignItems="center"
+                  justifyContent="center"
+                  position="relative"
+                  width="100%"
+                  height="$3"
+                >
+                  <YStack zIndex={10}>
+                    <CaretUpIcon size={20} />
+                  </YStack>
+                </TamaguiSelect.ScrollUpButton>
+                <TamaguiSelect.Viewport minWidth={200}>
+                  <TamaguiSelect.Group>
+                    {sampleOptions.map((option, i) => (
+                      <TamaguiSelect.Item key={option.value} value={option.value} index={i}>
+                        <TamaguiSelect.ItemText>{option.label}</TamaguiSelect.ItemText>
+                      </TamaguiSelect.Item>
+                    ))}
+                  </TamaguiSelect.Group>
+                </TamaguiSelect.Viewport>
+                <TamaguiSelect.ScrollDownButton
+                  alignItems="center"
+                  justifyContent="center"
+                  position="relative"
+                  width="100%"
+                  height="$3"
+                >
+                  <YStack zIndex={10}>
+                    <CaretDownIcon size={20} />
+                  </YStack>
+                </TamaguiSelect.ScrollDownButton>
+              </TamaguiSelect.Content>
+            </TamaguiSelect>
+          </YStack>
+        </XStack>
+      );
+    };
+
+    return <ComparisonExample />;
+  },
+};