@multiplatform.one/frappe-ui 6.0.0

package/src/fields/Check/Check.stories.tsx

@@ -0,0 +1,60 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Check, type CheckProps } from ".";
+
+export default {
+  title: "FrappeUI/Check",
+  component: Check,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component: "A checkbox field for Frappe Check field type (boolean values).",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    value: { control: "boolean", description: "Checked state" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledCheck(props: Omit<CheckProps, "onChange">) {
+  const [value, setValue] = useState(props.value || false);
+  return (
+    <Check
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const Default = (args: CheckProps) => <ControlledCheck {...args} />;
+Default.args = {
+  label: "Accept Terms",
+} satisfies Partial<CheckProps>;
+
+Default.storyName = "Main";
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledCheck label="Unchecked (Default)" value={false} />
+    <ControlledCheck label="Checked" value={true} />
+    <ControlledCheck label="With Error" value={false} error="This field is required" />
+    <ControlledCheck label="Disabled Unchecked" value={false} disabled />
+    <ControlledCheck label="Disabled Checked" value={true} disabled />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the CheckField component.",
+    },
+  },
+};

package/src/fields/Check/index.tsx

@@ -0,0 +1,76 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Checkbox as FormsCheckbox } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type CheckProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    boolean
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        boolean
+      >,
+      "children"
+    >
+  > & {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    checkboxProps?: Record<string, unknown>;
+  };
+
+export function Check<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: CheckProps<TData, TName>) {
+  const {
+    checkboxProps,
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    ...fieldProps
+  } = useProps(props) as CheckProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsCheckbox
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as boolean}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      checked={value}
+      onCheckedChange={(checked) => onChange?.(checked === true)}
+      onBlur={onBlur}
+      disabled={disabled}
+      checkboxProps={checkboxProps as any}
+    />
+  );
+}

package/src/fields/Color/Color.stories.tsx

@@ -0,0 +1,70 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Color, type ColorProps } from ".";
+
+export default {
+  title: "FrappeUI/Color",
+  component: Color,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A color picker field with preset colors and hex input for Frappe Color field type.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    value: { control: "color", description: "Current color value (hex)" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    required: { control: "boolean", description: "Mark as required" },
+    showPresets: { control: "boolean", description: "Show preset color swatches" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledColor(props: Omit<ColorProps, "onChange">) {
+  const [value, setValue] = useState(props.value || "");
+  return (
+    <Color
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const Default = (args: ColorProps) => <ControlledColor {...args} />;
+Default.args = {
+  label: "Brand Color",
+  placeholder: "#000000",
+} satisfies Partial<ColorProps>;
+
+Default.storyName = "Main";
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledColor label="Default" />
+    <ControlledColor label="With Value" value="#10B981" />
+    <ControlledColor label="Required" required />
+    <ControlledColor label="With Error" value="invalid" error="Invalid color" />
+    <ControlledColor label="Disabled" value="#F59E0B" disabled />
+    <ControlledColor label="No Presets" showPresets={false} />
+    <ControlledColor
+      label="Custom Presets"
+      presetColors={["#FF0000", "#00FF00", "#0000FF", "#FFFF00"]}
+    />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the ColorField component.",
+    },
+  },
+};

package/src/fields/Color/index.tsx

@@ -0,0 +1,84 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { ColorPicker as FormsColorPicker } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type ColorProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    showPresets?: boolean;
+    presetColors?: string[];
+  };
+
+export function Color<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: ColorProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue,
+    validators,
+    disabled,
+    value,
+    placeholder = "#000000",
+    _showPresets = true,
+    presetColors,
+    ...fieldProps
+  } = useProps(props) as ColorProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsColorPicker
+      name={name}
+      form={form}
+      validators={validators}
+      value={value as string | undefined}
+      onValueChange={onChange as ((v: string) => void) | undefined}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      placeholder={placeholder}
+      format="hex"
+      presetColors={presetColors}
+      onBlur={onBlur}
+      mode={mode}
+      preserveValue={preserveValue}
+    />
+  );
+}

package/src/fields/Data/Data.stories.tsx

@@ -0,0 +1,75 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Data, type DataProps } from ".";
+
+export default {
+  title: "FrappeUI/Data",
+  component: Data,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A text input field for Frappe Data, Small Text, Long Text, and Text Editor field types.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["data", "small_text", "long_text", "text_editor"],
+      description: "The type of text field to render",
+    },
+    label: { control: "text", description: "Field label" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    required: { control: "boolean", description: "Mark as required" },
+    maxLength: { control: "number", description: "Maximum character length" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledData(props: Omit<DataProps, "onChange">) {
+  const [value, setValue] = useState(props.value || "");
+  return (
+    <Data
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const Default = (args: DataProps) => <ControlledData {...args} />;
+Default.args = {
+  label: "Name",
+  placeholder: "Enter your name",
+  type: "data",
+} satisfies Partial<DataProps>;
+
+Default.storyName = "Main";
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledData label="Default" placeholder="Enter text" />
+    <ControlledData label="With Value" value="Some entered text" />
+    <ControlledData label="Required Field" required placeholder="Required" />
+    <ControlledData label="With Error" value="invalid" error="This value is not valid" />
+    <ControlledData label="Disabled" value="Cannot edit" disabled />
+    <ControlledData
+      label="With Character Limit"
+      maxLength={100}
+      value="Some text with character counting"
+    />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the DataField component.",
+    },
+  },
+};

package/src/fields/Data/index.tsx

@@ -0,0 +1,86 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Input as FormsInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type DataProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    type?: "data" | "small_text" | "long_text" | "text_editor";
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    inputProps?: Record<string, unknown>;
+  };
+
+export function Data<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DataProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    inputProps,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    type = "data",
+    maxLength,
+    ...fieldProps
+  } = useProps(props) as DataProps<TData, TName> & Record<string, unknown>;
+  const isMultiline = type === "long_text" || type === "text_editor" || type === "small_text";
+
+  return (
+    <FormsInput
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onChangeText={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      disabled={disabled}
+      multiline={isMultiline}
+      maxLength={maxLength ?? (isMultiline ? undefined : 140)}
+      inputProps={inputProps as any}
+    />
+  );
+}

package/src/fields/Date/Date.stories.tsx

@@ -0,0 +1,154 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Date, type DateProps } from ".";
+
+export default {
+  title: "FrappeUI/Date",
+  component: Date,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A date/datetime/time picker field for Frappe Date, Datetime, and Time field types.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["date", "datetime", "time"],
+      description: "The type of date field to render",
+    },
+    label: { control: "text", description: "Field label" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    required: { control: "boolean", description: "Mark as required" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledDate(props: Omit<DateProps, "onChange">) {
+  const [value, setValue] = useState(props.value || "");
+  return (
+    <Date
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const Default = (args: DateProps) => <ControlledDate {...args} />;
+Default.args = {
+  label: "Date",
+  type: "date",
+} satisfies Partial<DateProps>;
+
+Default.storyName = "Main";
+export const DateType = (args: DateProps) => <ControlledDate {...args} />;
+DateType.args = {
+  label: "Birth Date",
+  type: "date",
+  value: "2000-01-15",
+} satisfies Partial<DateProps>;
+
+export const DatetimeType = (args: DateProps) => <ControlledDate {...args} />;
+DatetimeType.args = {
+  label: "Meeting Start",
+  type: "datetime",
+  value: "2026-01-24T14:30",
+} satisfies Partial<DateProps>;
+DatetimeType.parameters = {
+  docs: {
+    description: {
+      story: "Datetime type includes both date and time selection.",
+    },
+  },
+};
+
+export const TimeType = (args: DateProps) => <ControlledDate {...args} />;
+TimeType.args = {
+  label: "Daily Reminder",
+  type: "time",
+  value: "09:00",
+} satisfies Partial<DateProps>;
+TimeType.parameters = {
+  docs: {
+    description: {
+      story: "Time type for time-only input.",
+    },
+  },
+};
+
+export const Required = (args: DateProps) => <ControlledDate {...args} />;
+Required.args = {
+  label: "Start Date",
+  type: "date",
+  required: true,
+} satisfies Partial<DateProps>;
+
+export const WithError = (args: DateProps) => <ControlledDate {...args} />;
+WithError.args = {
+  label: "End Date",
+  type: "date",
+  error: "End date must be after start date",
+} satisfies Partial<DateProps>;
+
+export const Disabled = (args: DateProps) => <ControlledDate {...args} />;
+Disabled.args = {
+  label: "Created On",
+  type: "datetime",
+  value: "2026-01-01T10:00",
+  disabled: true,
+} satisfies Partial<DateProps>;
+
+export const AllTypes = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledDate label="Date Only" type="date" value="2026-01-24" />
+    <ControlledDate label="Date and Time" type="datetime" value="2026-01-24T14:30" />
+    <ControlledDate label="Time Only" type="time" value="14:30" />
+  </YStack>
+);
+AllTypes.parameters = {
+  docs: {
+    description: {
+      story: "All three date field types: date, datetime, and time.",
+    },
+  },
+};
+
+export const AllStates = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledDate label="Default (Empty)" type="date" />
+    <ControlledDate label="With Value" type="date" value="2026-06-15" />
+    <ControlledDate label="Required" type="date" required />
+    <ControlledDate label="With Error" type="date" error="Please select a valid date" />
+    <ControlledDate label="Disabled" type="date" value="2026-01-01" disabled />
+  </YStack>
+);
+AllStates.parameters = {
+  docs: {
+    description: {
+      story: "All possible states of the DateField component.",
+    },
+  },
+};
+
+export const EventSchedulingExample = () => (
+  <YStack gap="$4" width={400}>
+    <ControlledDate label="Event Date" type="date" value="2026-02-14" required />
+    <ControlledDate label="Start Time" type="time" value="09:00" required />
+    <ControlledDate label="End Time" type="time" value="17:00" required />
+  </YStack>
+);
+EventSchedulingExample.parameters = {
+  docs: {
+    description: {
+      story: "Real-world example of using DateField for event scheduling.",
+    },
+  },
+};