@multiplatform.one/forms 6.0.0

package/src/fields/Input/Input.stories.tsx

@@ -0,0 +1,152 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Input as TamaguiInput, Paragraph, XStack, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Input } from "./index";
+
+const meta: Meta<typeof Input> = {
+  title: "Forms/Input",
+  component: Input,
+  parameters: { status: { type: "beta" } },
+  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" },
+    defaultValue: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          firstName: "",
+          email: "",
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <Input label="First name" name="firstName" placeholder="Jane" required />
+            <Input
+              label="Email"
+              name="email"
+              placeholder="jane@example.com"
+              required
+              validators={{
+                onBlur: ({ value }) => {
+                  if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value as string))
+                    return "Invalid email address";
+                },
+              }}
+            />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Basic: Story = {
+  args: {
+    label: "Full name",
+    placeholder: "Enter your name",
+    helperText: "This appears on your profile",
+    defaultValue: "",
+  },
+  render: (args) => (
+    <Input
+      onChangeText={(text) => action("onChangeText")(text)}
+      rightIcon={<XIcon />}
+      leftIcon={<MagnifyingGlassIcon />}
+      {...args}
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Input label="Small" size="$2" placeholder="Small input" />
+      <Input label="Medium (default)" size="$3" placeholder="Medium input" />
+      <Input label="Large" size="$4" placeholder="Large input" />
+    </YStack>
+  ),
+};
+
+export const Comparison: StoryObj = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState("");
+      const [tamaguiVal, setTamaguiVal] = useState("");
+      return (
+        <XStack gap="$6" alignItems="flex-start" padding="$4">
+          <YStack gap="$3" width={300}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Custom Input
+            </Paragraph>
+            <Input
+              placeholder="Enter your name"
+              value={customVal}
+              onChangeText={(text) => {
+                setCustomVal(text);
+                action("custom.onChangeText")(text);
+              }}
+            />
+          </YStack>
+
+          <YStack gap="$3" width={300}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Tamagui Input
+            </Paragraph>
+            <TamaguiInput
+              placeholder="Enter your name"
+              value={tamaguiVal}
+              onChangeText={(text) => {
+                setTamaguiVal(text);
+                action("tamagui.onChangeText")(text);
+              }}
+            />
+          </YStack>
+        </XStack>
+      );
+    };
+    return <ComparisonExample />;
+  },
+};

package/src/fields/Input/index.tsx

@@ -0,0 +1,251 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { useRef } from "react";
+import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
+import { Text } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import { Input as InputParts, useForwardFocus } from "../../InputParts";
+import type { AnyFormApi, LinkResolver } from "../../types";
+import { LinkCell } from "../../utils/LinkCell";
+
+type InputAreaProps = ComponentProps<typeof InputParts.Area>;
+
+export interface InputProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  linkResolver?: LinkResolver;
+  size?: SizeTokens;
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (e: any) => void;
+  onChangeText?: (text: string) => void;
+  onBlur?: (...args: any[]) => void;
+  secureTextEntry?: boolean;
+  placeholder?: string;
+  multiline?: boolean;
+  maxLength?: number;
+  keyboardType?: string;
+  textContentType?: string;
+  autoComplete?: string;
+  leftIcon?: ReactElement;
+  rightIcon?: ReactElement;
+  inputProps?: Omit<InputAreaProps, "value" | "id" | "onChange" | "onChangeText">;
+  children?: ReactNode;
+  /** When true, renders a skeleton placeholder instead of the input */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+  /** When true, renders without borders/background (for toolbar integration) */
+  chromeless?: boolean;
+}
+
+export function Input({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  onChangeText,
+  onBlur,
+  secureTextEntry,
+  placeholder,
+  multiline,
+  maxLength,
+  keyboardType,
+  textContentType,
+  autoComplete,
+  readOnly,
+  linkResolver,
+  leftIcon,
+  rightIcon,
+  inputProps,
+  children,
+  skeleton,
+  compact,
+  chromeless,
+}: InputProps) {
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const inputRef = useRef<TamaguiElement>(null);
+  const focusTrigger = useForwardFocus(inputRef);
+
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <InputParts size={size || knobProps.sizeToken}>
+        {label && <Skeleton variant="text" width="30%" height={14} />}
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </InputParts>
+    );
+  }
+
+  if (children) {
+    return (
+      <InputParts size={size || knobProps.sizeToken} {...(error ? { theme: "red" } : undefined)}>
+        {children}
+      </InputParts>
+    );
+  }
+
+  const chromelessProps = chromeless
+    ? { borderWidth: 0, backgroundColor: "transparent" as const }
+    : undefined;
+
+  const renderInputBox = (
+    inputValue: string | undefined,
+    handleChange?: (text: string) => void,
+    handleBlur?: (...args: any[]) => void,
+    hasError?: boolean,
+  ) => (
+    <InputParts.Box {...(handleBlur ? { onBlur: handleBlur } : undefined)} {...chromelessProps}>
+      {leftIcon && (
+        <InputParts.Icon adornment="leading" {...focusTrigger}>
+          {leftIcon}
+        </InputParts.Icon>
+      )}
+      {readOnly ? (
+        linkResolver ? (
+          <LinkCell value={inputValue} linkResolver={linkResolver}>
+            <Text
+              id={id}
+              aria-readonly="true"
+              aria-required={required || undefined}
+              aria-invalid={hasError || undefined}
+              color="$color"
+            >
+              {inputValue ?? ""}
+            </Text>
+          </LinkCell>
+        ) : (
+          <InputParts.Area
+            ref={inputRef}
+            value={inputValue ?? ""}
+            readOnly
+            id={id}
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        )
+      ) : (
+        <InputParts.Area
+          ref={inputRef}
+          {...inputProps}
+          {...(multiline !== undefined ? { multiline } : undefined)}
+          {...(maxLength !== undefined ? { maxLength } : undefined)}
+          {...(keyboardType !== undefined ? { keyboardType } : undefined)}
+          {...(textContentType !== undefined ? { textContentType } : undefined)}
+          {...(autoComplete !== undefined ? { autoComplete } : undefined)}
+          {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
+          {...(placeholder !== undefined ? { placeholder } : undefined)}
+          disabled={disabled}
+          id={id}
+          defaultValue={inputValue}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          onChange={onChange}
+          onChangeText={(text) => {
+            if (disabled) return;
+            handleChange?.(text);
+            onChangeText?.(text);
+          }}
+        />
+      )}
+      {rightIcon && (
+        <InputParts.Icon adornment="trailing" {...focusTrigger}>
+          {rightIcon}
+        </InputParts.Icon>
+      )}
+    </InputParts.Box>
+  );
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={error}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <InputParts size={size || knobProps.sizeToken}>
+          {renderInputBox(value ?? defaultValue, undefined, undefined, !!error)}
+        </InputParts>
+      </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)}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderInputBox(
+                field.state.value as string,
+                (text) => field.handleChange(text as any),
+                undefined,
+                !!resolvedError,
+              )}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}
+
+Input.Icon = InputParts.Icon;
+Input.Box = InputParts.Box;
+Input.Area = InputParts.Area;
+Input.Section = InputParts.Section;
+Input.Button = InputParts.Button;
+Input.Info = InputParts.Info;
+Input.Meta = InputParts.Meta;
+Input.Label = InputParts.Label;
+Input.XGroup = InputParts.XGroup;

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { MentionInput } from "./index";
+
+describe("MentionInput", () => {
+  it("should render with label and placeholder", () => {
+    const result = renderWithProviders(
+      <MentionInput
+        label="Comment"
+        name="comment"
+        placeholder="Type @ to mention"
+        mentions={[
+          {
+            trigger: "@",
+            data: [{ id: "u1", display: "Alice" }],
+          },
+        ]}
+      />,
+    );
+
+    expect(result.findTextElement("Comment")).toBeDefined();
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea?.getAttribute("placeholder")).toBe("Type @ to mention");
+  });
+});

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -0,0 +1,265 @@
+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 { MentionInput } from "./index";
+import type { MentionConfig } from "./index";
+
+const meta: Meta<typeof MentionInput> = {
+  title: "Forms/MentionInput",
+  component: MentionInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A text input component with @mention support for tagging users, hashtags, or other entities with autocomplete suggestions.",
+      },
+    },
+  },
+  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 input" },
+    size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
+    minHeight: { control: "number", description: "Minimum height of input" },
+    maxHeight: { control: "number", description: "Maximum height of input" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MentionInput>;
+
+const userMentions: MentionConfig = {
+  trigger: "@",
+  data: [
+    {
+      id: "1",
+      display: "John Doe",
+      avatar: "https://i.pravatar.cc/150?img=1",
+      description: "Software Engineer",
+    },
+    {
+      id: "2",
+      display: "Jane Smith",
+      avatar: "https://i.pravatar.cc/150?img=2",
+      description: "Product Manager",
+    },
+    {
+      id: "3",
+      display: "Bob Johnson",
+      avatar: "https://i.pravatar.cc/150?img=3",
+      description: "Designer",
+    },
+    {
+      id: "4",
+      display: "Alice Williams",
+      avatar: "https://i.pravatar.cc/150?img=4",
+      description: "Marketing",
+    },
+    {
+      id: "5",
+      display: "Charlie Brown",
+      avatar: "https://i.pravatar.cc/150?img=5",
+      description: "Developer",
+    },
+  ],
+  allowSpace: false,
+  insertSpace: true,
+};
+
+const hashtagMentions: MentionConfig = {
+  trigger: "#",
+  data: [
+    { id: "react", display: "react" },
+    { id: "javascript", display: "javascript" },
+    { id: "typescript", display: "typescript" },
+    { id: "webdev", display: "webdev" },
+    { id: "programming", display: "programming" },
+  ],
+  allowSpace: false,
+  insertSpace: true,
+};
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          comment: { text: "", mentions: [] },
+          message: { text: "", mentions: [] },
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <MentionInput
+              label="Comment"
+              name="comment"
+              mentions={[userMentions]}
+              helperText="Type @ to mention team members"
+              onMentionSelect={(mention) => action("mentionSelected")(mention)}
+              placeholder="Type @ to mention someone"
+            />
+            <MentionInput
+              label="Message"
+              name="message"
+              mentions={[userMentions]}
+              helperText="Write a message to your team"
+              placeholder="Type @ to mention someone"
+            />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Comment",
+    placeholder: "Type @ to mention...",
+    helperText: "Mention people with @",
+  },
+  render: (args) => <MentionInput {...args} mentions={[userMentions]} />,
+};
+
+export const Basic: Story = {
+  render: (args) => (
+    <MentionInput
+      {...args}
+      mentions={[userMentions]}
+      onMentionSelect={(mention, trigger) => action("onMentionSelect")(mention, trigger)}
+    />
+  ),
+  args: {
+    label: "Comment",
+    placeholder: "Type @ to mention someone",
+    disabled: false,
+    minHeight: undefined,
+    maxHeight: undefined,
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <MentionInput {...args} mentions={[userMentions]} />,
+  args: {
+    label: "Disabled Mention",
+    disabled: true,
+    placeholder: "Cannot interact",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <MentionInput {...args} mentions={[userMentions]} />,
+  args: {
+    label: "Required Comment",
+    error: "This field is required",
+    required: true,
+    placeholder: "Type @ to mention someone",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <MentionInput
+        label="Small"
+        size="$2"
+        mentions={[userMentions]}
+        placeholder="Type @ to mention"
+      />
+      <MentionInput
+        label="Medium (default)"
+        size="$3"
+        mentions={[userMentions]}
+        placeholder="Type @ to mention"
+      />
+      <MentionInput
+        label="Large"
+        size="$4"
+        mentions={[userMentions]}
+        placeholder="Type @ to mention"
+      />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("");
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <MentionInput
+            label="Comment"
+            value={value}
+            // @ts-expect-error controlled mode not supported
+            onChange={(val: string) => {
+              setValue(val);
+              action("onChange")(val);
+            }}
+            mentions={[userMentions]}
+            placeholder="Type @ to mention someone"
+            helperText={value ? `Current text: ${value}` : "Start typing..."}
+          />
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};
+
+export const MultipleTriggersStory: Story = {
+  render: (args) => {
+    const MultipleTriggersComponent = () => {
+      const form = useForm({
+        defaultValues: {
+          post: { text: "", mentions: [] },
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <YStack gap="$4">
+          <MentionInput
+            label="Create Post"
+            name="post"
+            form={form}
+            mentions={[userMentions, hashtagMentions]}
+            helperText="Use @ to mention team members and # for hashtags"
+            onMentionSelect={(mention, trigger) => action("mentionSelected")(mention, trigger)}
+            placeholder={args.placeholder}
+            minHeight={args.minHeight}
+            maxHeight={args.maxHeight}
+            disabled={args.disabled}
+          />
+          <Button form={form as unknown as import("../../types").AnyFormApi} action="submit">
+            Post
+          </Button>
+        </YStack>
+      );
+    };
+    return <MultipleTriggersComponent />;
+  },
+  args: {
+    placeholder: "Type @ to mention users or # for hashtags",
+    minHeight: 150,
+    maxHeight: undefined,
+    disabled: false,
+  },
+};