@multiplatform.one/forms 6.0.0

package/src/fields/Duration/Duration.stories.tsx

@@ -0,0 +1,186 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { ClockIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Text, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Duration } from "./index";
+
+const meta: Meta<typeof Duration> = {
+  title: "Forms/Duration",
+  component: Duration,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A duration picker with scrollable hour/minute/second columns and quick-select presets.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    size: { control: "select", options: ["$2", "$3", "$4"] },
+    value: { control: "number", description: "Duration in seconds" },
+    showSeconds: { control: "boolean", description: "Show seconds column" },
+    placeholder: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Duration>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          workTime: 28800,
+          breakTime: 3600,
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form} maxWidth={400}>
+          <YStack gap="$4">
+            <Duration
+              label="Work Duration"
+              name="workTime"
+              helperText="How long did you work?"
+              clockIcon={<ClockIcon size={16} />}
+            />
+            <Duration
+              label="Break Duration"
+              name="breakTime"
+              helperText="Total break time"
+              clockIcon={<ClockIcon size={16} />}
+            />
+            <Button action="submit">Log Time</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Duration",
+    helperText: "How long?",
+    value: 5400,
+    showSeconds: false,
+    placeholder: "Select duration",
+  },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const Basic: Story = {
+  args: {
+    label: "Duration",
+    helperText: "Select a time duration",
+    value: 5400,
+    onChange: action("onChange"),
+  },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Duration",
+    helperText: "This field is disabled",
+    value: 5400,
+    disabled: true,
+    onChange: action("onChange"),
+  },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Duration",
+    helperText: "Select a time duration",
+    value: 0,
+    required: true,
+    error: "Duration is required",
+    onChange: action("onChange"),
+  },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={300}>
+      <Text fontWeight="bold">Size $2</Text>
+      <Duration
+        label="Small"
+        value={3600}
+        size="$2"
+        clockIcon={<ClockIcon size={16} />}
+        onChange={action("onChange")}
+      />
+      <Text fontWeight="bold">Size $3</Text>
+      <Duration
+        label="Medium"
+        value={3600}
+        size="$3"
+        clockIcon={<ClockIcon size={16} />}
+        onChange={action("onChange")}
+      />
+      <Text fontWeight="bold">Size $4</Text>
+      <Duration
+        label="Large"
+        value={3600}
+        size="$4"
+        clockIcon={<ClockIcon size={16} />}
+        onChange={action("onChange")}
+      />
+    </YStack>
+  ),
+};
+
+export const WithSeconds: Story = {
+  args: {
+    label: "Precise Duration",
+    helperText: "Includes seconds",
+    value: 3661,
+    showSeconds: true,
+    onChange: action("onChange"),
+  },
+  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState(5400);
+      const h = Math.floor(value / 3600);
+      const m = Math.floor((value % 3600) / 60);
+      return (
+        <YStack gap="$4" maxWidth={300}>
+          <Duration
+            label="Session Length"
+            helperText={`${h}h ${m}m selected`}
+            value={value}
+            onChange={(v) => {
+              setValue(v);
+              action("onChange")(v);
+            }}
+            clockIcon={<ClockIcon size={16} />}
+          />
+          <Duration label="Disabled" value={7200} disabled clockIcon={<ClockIcon size={16} />} />
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};

package/src/fields/Duration/index.tsx

@@ -0,0 +1,312 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { useCallback, useMemo, useState } from "react";
+import type { LabelProps, SizeTokens } from "tamagui";
+import { XStack, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { FloatingPanel } from "../../FloatingPanel";
+import { Input as InputParts } from "../../InputParts";
+import { formCommonColors } from "../../shared/colorRamps";
+import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+
+function secondsToHms(totalSeconds: number): { hours: number; minutes: number; seconds: number } {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return { hours, minutes, seconds };
+}
+
+function hmsToSeconds(hours: number, minutes: number, seconds: number): number {
+  return hours * 3600 + minutes * 60 + seconds;
+}
+
+function formatDuration(totalSeconds: number, showSeconds: boolean): string {
+  const { hours, minutes, seconds } = secondsToHms(totalSeconds);
+  if (showSeconds) {
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+  }
+  return `${String(hours).padStart(2, "0")}h ${String(minutes).padStart(2, "0")}m`;
+}
+
+const hourValues = generateRange(0, 23);
+const minuteValues = generateRange(0, 59);
+const secondValues = generateRange(0, 59);
+
+interface DurationPreset {
+  label: string;
+  seconds: number;
+}
+
+const defaultPresets: DurationPreset[] = [
+  { label: "15m", seconds: 900 },
+  { label: "30m", seconds: 1800 },
+  { label: "1h", seconds: 3600 },
+  { label: "2h", seconds: 7200 },
+  { label: "4h", seconds: 14400 },
+  { label: "8h", seconds: 28800 },
+];
+
+function DurationPopoverContent({
+  value,
+  onChange,
+  knobProps,
+  showSeconds,
+  presets,
+}: {
+  value: number;
+  onChange: (seconds: number) => void;
+  knobProps: KnobProps;
+  showSeconds: boolean;
+  presets: DurationPreset[];
+}) {
+  const { hours, minutes, seconds } = secondsToHms(value);
+
+  return (
+    <YStack {...knobProps.gap}>
+      <XStack gap="$2" alignItems="flex-start" justifyContent="center">
+        <TimeColumn
+          label="Hours"
+          values={hourValues}
+          selected={hours}
+          onChange={(newHours) => onChange(hmsToSeconds(newHours, minutes, seconds))}
+          knobProps={knobProps}
+        />
+        <TimeColumnSeparator knobProps={knobProps} />
+        <TimeColumn
+          label="Min"
+          values={minuteValues}
+          selected={minutes}
+          onChange={(newMinutes) => onChange(hmsToSeconds(hours, newMinutes, seconds))}
+          knobProps={knobProps}
+        />
+        {showSeconds && (
+          <>
+            <TimeColumnSeparator knobProps={knobProps} />
+            <TimeColumn
+              label="Sec"
+              values={secondValues}
+              selected={seconds}
+              onChange={(newSeconds) => onChange(hmsToSeconds(hours, minutes, newSeconds))}
+              knobProps={knobProps}
+            />
+          </>
+        )}
+      </XStack>
+      {presets.length > 0 && (
+        <XStack gap="$1" flexWrap="wrap" justifyContent="center">
+          {presets.map((preset) => (
+            <Button
+              key={preset.seconds}
+              size="$2"
+              onPress={() => onChange(preset.seconds)}
+              theme={value === preset.seconds ? "active" : undefined}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </XStack>
+      )}
+    </YStack>
+  );
+}
+
+export interface DurationProps {
+  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;
+  /** Duration in seconds */
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Show seconds column (default false) */
+  showSeconds?: boolean;
+  /** Quick-select presets. Pass [] to hide. */
+  presets?: DurationPreset[];
+  placeholder?: string;
+  clockIcon?: ReactNode;
+  /** When true, renders a skeleton placeholder instead of the duration picker */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+}
+
+export function Duration({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value = 0,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  showSeconds = false,
+  presets = defaultPresets,
+  placeholder = "Select duration",
+  clockIcon,
+  skeleton,
+  compact,
+}: DurationProps) {
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [open, setOpen] = useState(false);
+
+  const displayValue = useMemo(() => {
+    if (!value && value !== 0) return "";
+    return formatDuration(value, showSeconds);
+  }, [value, showSeconds]);
+
+  const handleChange = useCallback(
+    (seconds: number, fieldChange?: (v: any) => void) => {
+      fieldChange?.(seconds);
+      onChange?.(seconds);
+    },
+    [onChange],
+  );
+
+  const renderTrigger = (triggerValue: string, hasError?: boolean) => (
+    <InputParts size={size || knobProps.sizeToken}>
+      <InputParts.Box
+        theme={hasError ? "red" : undefined}
+        {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
+      >
+        {clockIcon && (
+          <InputParts.Section>
+            <InputParts.Icon adornment="leading">{clockIcon}</InputParts.Icon>
+          </InputParts.Section>
+        )}
+        <InputParts.Area
+          readOnly
+          value={triggerValue}
+          placeholder={placeholder}
+          disabled={disabled}
+          color={formCommonColors.text}
+          aria-readonly={readOnly || undefined}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+        />
+      </InputParts.Box>
+    </InputParts>
+  );
+
+  const panelContent = (currentValue: number, onValueChange: (s: number) => void) => (
+    <DurationPopoverContent
+      value={currentValue}
+      onChange={onValueChange}
+      knobProps={knobProps}
+      showSeconds={showSeconds}
+      presets={presets}
+    />
+  );
+
+  // 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}
+      >
+        {readOnly ? (
+          renderTrigger(displayValue, !!error)
+        ) : (
+          <FloatingPanel
+            open={open}
+            onOpenChange={setOpen}
+            disabled={disabled}
+            scrollable
+            sizing="fill"
+            fitContent
+            trigger={renderTrigger(displayValue, !!error)}
+          >
+            {panelContent(value, (s) => handleChange(s))}
+          </FloatingPanel>
+        )}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        const fieldValue = (field.state.value as number) ?? 0;
+        const fieldDisplay = formatDuration(fieldValue, showSeconds);
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            {readOnly ? (
+              renderTrigger(fieldDisplay, !!resolvedError)
+            ) : (
+              <FloatingPanel
+                open={open}
+                onOpenChange={setOpen}
+                disabled={disabled}
+                scrollable
+                sizing="fill"
+                fitContent
+                trigger={renderTrigger(fieldDisplay, !!resolvedError)}
+              >
+                {panelContent(fieldValue, (s) => handleChange(s, (v) => field.handleChange(v)))}
+              </FloatingPanel>
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { FileUpload } from "./index";
+
+describe("FileUpload", () => {
+  it("should render placeholder and upload button text", () => {
+    const result = renderWithProviders(
+      <FileUpload
+        label="Attachment"
+        placeholder="Upload your file"
+        buttonText="Pick file"
+        name="attachment"
+      />,
+    );
+
+    expect(result.findTextElement("Attachment")).toBeDefined();
+    expect(result.findTextElement("Upload your file")).toBeDefined();
+    expect(result.findTextElement("Pick file")).toBeDefined();
+  });
+});

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,168 @@
+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 { FileUpload } from "./index";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "Forms/FileUpload",
+  component: FileUpload,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A file upload component with drag-and-drop support, file validation, and preview capabilities for form integration.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    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 file upload" },
+    size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
+    accept: { control: "text", description: "Accepted file types" },
+    maxSize: { control: "number", description: "Maximum file size in bytes" },
+    multiple: { control: "boolean", description: "Allow multiple file selection" },
+    dragDrop: { control: "boolean", description: "Enable drag and drop" },
+    showPreview: { control: "boolean", description: "Show file preview" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          avatar: null,
+          document: null,
+          attachments: null,
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <FileUpload
+              {...({
+                label: "Profile Picture",
+                name: "avatar",
+                accept: "image/*",
+                helperText: "Upload your profile picture",
+                showPreview: true,
+              } as any)}
+            />
+            <FileUpload
+              {...({
+                label: "Document",
+                name: "document",
+                accept: ".pdf,.doc,.docx",
+                helperText: "Upload PDF or Word document",
+              } as any)}
+            />
+            <FileUpload
+              {...({
+                label: "Attachments",
+                name: "attachments",
+                multiple: true,
+                helperText: "Upload multiple files",
+              } as any)}
+            />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Upload File",
+    helperText: "Max 10MB",
+    accept: "*/*",
+    maxSize: 10485760,
+  },
+  render: (args) => <FileUpload {...args} />,
+};
+
+export const Basic: Story = {
+  render: (args) => <FileUpload {...args} />,
+  args: {
+    label: "Upload File",
+    placeholder: "Click to upload or drag and drop",
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <FileUpload {...args} />,
+  args: {
+    label: "Disabled Upload",
+    disabled: true,
+    placeholder: "Cannot upload",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <FileUpload {...args} />,
+  args: {
+    label: "Required File",
+    error: "Please upload a file",
+    required: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <FileUpload label="Small" size="$2" placeholder="Upload a file" />
+      <FileUpload label="Medium (default)" size="$3" placeholder="Upload a file" />
+      <FileUpload label="Large" size="$4" placeholder="Upload a file" />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [file, setFile] = useState<File | null>(null);
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <FileUpload
+            label="Upload File"
+            // @ts-expect-error controlled mode not supported
+            onChange={(f: File | null) => {
+              setFile(f);
+              action("onChange")(f);
+            }}
+            helperText={file ? `Selected: ${file.name}` : "No file selected"}
+          />
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};
+
+export const ImageOnly: Story = {
+  render: (args) => <FileUpload {...args} />,
+  args: {
+    label: "Upload Image",
+    accept: "image/*",
+    showPreview: true,
+    helperText: "PNG, JPG, GIF up to 5MB",
+    maxSize: 5 * 1024 * 1024,
+  },
+};