@multiplatform.one/frappe-ui 6.0.0

package/src/fields/Link.tsx

@@ -0,0 +1,271 @@
+import { useLinkSearch, type FrappeConnectionConfig } from "@multiplatform.one/frappe";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import type React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  ListItem,
+  Popover,
+  ScrollView,
+  Spinner,
+  Text,
+  XStack,
+  YStack,
+  type YStackProps,
+} from "tamagui";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
+  label?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  doctype: string;
+  displayField?: string;
+  searchFields?: string[];
+  filters?: Record<string, unknown> | Array<[string, string, unknown]>;
+  allowCreate?: boolean;
+  createRoute?: string;
+  onCreateNew?: () => void;
+  showDescription?: boolean;
+  descriptionField?: string;
+  showAdvancedSearch?: boolean;
+  onAdvancedSearch?: () => void;
+  disabled?: boolean;
+  required?: boolean;
+  baseURL?: string;
+  auth?: any;
+  error?: string;
+}
+
+export function Link({
+  label,
+  value = "",
+  onChange,
+  doctype,
+  displayField: _displayField,
+  searchFields,
+  filters,
+  allowCreate = false,
+  createRoute: _createRoute,
+  onCreateNew,
+  showDescription = false,
+  descriptionField: _descriptionField,
+  showAdvancedSearch = true,
+  onAdvancedSearch,
+  disabled = false,
+  required = false,
+  baseURL,
+  auth,
+  error,
+  ...stackProps
+}: LinkProps) {
+  const { knobProps } = useResolvedKnobs();
+  const config = useFrappeConfig();
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
+  const connectionConfig: FrappeConnectionConfig | undefined = finalBaseURL
+    ? { baseURL: finalBaseURL, socketPort: config?.socketPort, auth: auth ?? config?.auth }
+    : undefined;
+
+  const { results, isLoading } = useLinkSearch(connectionConfig, doctype, {
+    query: search,
+    searchFields,
+    filters,
+    limit: 20,
+  });
+
+  const displayValue = useMemo(() => {
+    if (!value) return "";
+    const match = results.find((r) => r.value === value);
+    return match?.label ?? value;
+  }, [value, results]);
+
+  const handleSelect = useCallback(
+    (selectedValue: string) => {
+      onChange(selectedValue);
+      setOpen(false);
+      setSearch("");
+      setHighlightedIndex(-1);
+    },
+    [onChange],
+  );
+
+  const handleClear = useCallback(() => {
+    onChange("");
+    setSearch("");
+    setHighlightedIndex(-1);
+  }, [onChange]);
+
+  const handleInputChange = useCallback(
+    (text: string) => {
+      setSearch(text);
+      setHighlightedIndex(-1);
+      if (!open) setOpen(true);
+    },
+    [open],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          setOpen(true);
+          e.preventDefault();
+          return;
+        }
+        return;
+      }
+
+      const itemCount = results.length;
+
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          setHighlightedIndex((prev) => (prev < itemCount - 1 ? prev + 1 : 0));
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : itemCount - 1));
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (highlightedIndex >= 0 && highlightedIndex < itemCount) {
+            handleSelect(results[highlightedIndex].value);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          setOpen(false);
+          setHighlightedIndex(-1);
+          break;
+        }
+      }
+    },
+    [open, results, highlightedIndex, handleSelect],
+  );
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {label && (
+        <Label>
+          {label}
+          {required && <Text color="$red10"> *</Text>}
+        </Label>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen} placement="bottom">
+        <Popover.Trigger asChild>
+          <XStack alignItems="center" gap="$1">
+            <Input
+              ref={inputRef as any}
+              flex={1}
+              value={open ? search : displayValue}
+              onChangeText={handleInputChange}
+              placeholder={`Select ${doctype}`}
+              disabled={disabled}
+              onFocus={() => {
+                setOpen(true);
+                setSearch("");
+              }}
+              {...({ onKeyDown: handleKeyDown } as any)}
+            />
+            {value && !disabled && (
+              <Button size="$2" chromeless onPress={handleClear} aria-label="Clear">
+                <XIcon size={16} />
+              </Button>
+            )}
+          </XStack>
+        </Popover.Trigger>
+
+        <Popover.Content
+          borderColor="$borderColor"
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+        >
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+          <YStack minWidth={250} maxHeight={300}>
+            <ScrollView>
+              <YStack>
+                {isLoading && search ? (
+                  <YStack {...knobProps.panelPadding} alignItems="center">
+                    <Spinner size="small" />
+                  </YStack>
+                ) : results.length > 0 ? (
+                  results.map((result, index) => (
+                    <ListItem
+                      key={result.value}
+                      title={result.label}
+                      subTitle={
+                        showDescription && result.description ? result.description : undefined
+                      }
+                      size={knobProps.sizeToken}
+                      backgroundColor={highlightedIndex === index ? "$color4" : undefined}
+                      hoverStyle={{ backgroundColor: "$color4" }}
+                      pressStyle={{ backgroundColor: "$color5" }}
+                      cursor="pointer"
+                      onPress={() => handleSelect(result.value)}
+                    />
+                  ))
+                ) : search ? (
+                  <ListItem title="No results found" size={knobProps.sizeToken} disabled />
+                ) : (
+                  <ListItem title="Type to search..." size={knobProps.sizeToken} disabled />
+                )}
+              </YStack>
+            </ScrollView>
+
+            {allowCreate && (
+              <ListItem
+                title={`Create new ${doctype}`}
+                icon={PlusIcon}
+                size={knobProps.sizeToken}
+                borderTopWidth={1}
+                borderTopColor="$borderColor"
+                hoverStyle={{ backgroundColor: "$accentBackground" }}
+                pressStyle={{ backgroundColor: "$accentBackground" }}
+                cursor="pointer"
+                onPress={() => {
+                  onCreateNew?.();
+                  setOpen(false);
+                }}
+              />
+            )}
+
+            {showAdvancedSearch !== false && (
+              <ListItem
+                title="Advanced Search..."
+                icon={MagnifyingGlassIcon}
+                size={knobProps.sizeToken}
+                borderTopWidth={1}
+                borderTopColor="$borderColor"
+                hoverStyle={{ backgroundColor: "$color2" }}
+                cursor="pointer"
+                onPress={() => {
+                  onAdvancedSearch?.();
+                  setOpen(false);
+                }}
+              />
+            )}
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      {error && (
+        <Text color="$red10" fontSize="$2">
+          {error}
+        </Text>
+      )}
+    </YStack>
+  );
+}

package/src/fields/LongText/index.tsx

@@ -0,0 +1,85 @@
+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 LongTextProps<
+  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;
+    maxLength?: number;
+    minHeight?: number;
+    textAreaProps?: Record<string, unknown>;
+  };
+
+export function LongText<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: LongTextProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    maxLength,
+    _minHeight,
+    textAreaProps,
+    ...fieldProps
+  } = useProps(props) as LongTextProps<TData, TName> & Record<string, unknown>;
+
+  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
+      maxLength={maxLength}
+      inputProps={textAreaProps as any}
+    />
+  );
+}

package/src/fields/MentionInput/index.tsx

@@ -0,0 +1,105 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { MentionInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export interface MentionItem {
+  id: string;
+  display: string;
+  avatar?: string;
+  description?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface MentionConfig {
+  trigger: string;
+  data: MentionItem[];
+  allowSpace?: boolean;
+  insertSpace?: boolean;
+  menuHeight?: number;
+  menuWidth?: number;
+}
+
+export interface MentionValue {
+  text: string;
+  mentions: Array<{
+    type: string;
+    id: string;
+    display: string;
+    position: number;
+    length: number;
+  }>;
+}
+
+export type MentionInputFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    MentionValue
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        MentionValue
+      >,
+      "children"
+    >
+  > & {
+    value?: MentionValue;
+    onChange?: (value: MentionValue) => void;
+    disabled?: boolean;
+    mentions: MentionConfig[];
+    placeholder?: string;
+    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
+  };
+
+export function MentionInputField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: MentionInputFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    _preserveValue,
+    validators,
+    disabled,
+    _value,
+    mentions,
+    placeholder,
+    onMentionSelect,
+    ...fieldProps
+  } = useProps(props) as MentionInputFieldProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <MentionInput
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as MentionValue}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      mentions={mentions ?? []}
+      placeholder={placeholder}
+      onMentionSelect={onMentionSelect}
+    />
+  );
+}

package/src/fields/Numeric/Numeric.stories.tsx

@@ -0,0 +1,81 @@
+import { action } from "@multiplatform.one/storybook";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Numeric, type NumericProps } from ".";
+
+export default {
+  title: "FrappeUI/Numeric",
+  component: Numeric,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A numeric input field for Frappe Int, Float, Currency, and Percent field types with formatting and validation.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["Int", "Float", "Currency", "Percent"],
+      description: "The type of numeric field",
+    },
+    label: { control: "text", description: "Field label" },
+    value: { control: "number", description: "Current value" },
+    min: { control: "number", description: "Minimum value" },
+    max: { control: "number", description: "Maximum value" },
+    precision: { control: "number", description: "Decimal precision for floats" },
+    currencySymbol: { control: "text", description: "Currency symbol prefix" },
+    disabled: { control: "boolean", description: "Disable the field" },
+    required: { control: "boolean", description: "Mark as required" },
+    error: { control: "text", description: "Error message to display" },
+  },
+};
+
+function ControlledNumeric(props: Omit<NumericProps, "onChange">) {
+  const [value, setValue] = useState(props.value);
+  return (
+    <Numeric
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        action("onChange")(v);
+      }}
+    />
+  );
+}
+
+export const AllTypes = () => (
+  <YStack gap="$3">
+    <ControlledNumeric label="Integer" type="Int" value={42} />
+    <ControlledNumeric label="Float" type="Float" value={3.14} precision={2} />
+    <ControlledNumeric label="Currency" type="Currency" currencySymbol="$" value={99.99} />
+    <ControlledNumeric label="Percent" type="Percent" value={75} />
+  </YStack>
+);
+AllTypes.parameters = {
+  docs: {
+    description: {
+      story: "All numeric field types displayed together.",
+    },
+  },
+};
+
+AllTypes.storyName = "Main";
+export const DifferentCurrencies = () => (
+  <YStack gap="$3">
+    <ControlledNumeric label="USD Amount" type="Currency" value={1000} currencySymbol="$" />
+    <ControlledNumeric label="EUR Amount" type="Currency" value={850} currencySymbol="€" />
+    <ControlledNumeric label="GBP Amount" type="Currency" value={780} currencySymbol="£" />
+    <ControlledNumeric label="JPY Amount" type="Currency" value={150000} currencySymbol="¥" />
+  </YStack>
+);
+DifferentCurrencies.parameters = {
+  docs: {
+    description: {
+      story: "Currency fields with different currency symbols.",
+    },
+  },
+};

package/src/fields/Numeric/index.tsx

@@ -0,0 +1,103 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Stepper as FormsStepper } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type NumericType = "Int" | "Float" | "Currency" | "Percent";
+
+export type NumericProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    number
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        number
+      >,
+      "children"
+    >
+  > & {
+    value?: number;
+    onChange?: (value: number | undefined) => void;
+    type?: NumericType;
+    placeholder?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    currencySymbol?: string;
+    inputProps?: Record<string, unknown>;
+  };
+
+function derivePrecision(type: NumericType, explicitPrecision?: number): number {
+  if (explicitPrecision !== undefined) return explicitPrecision;
+  return type === "Int" ? 0 : 2;
+}
+
+export function Numeric<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: NumericProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    inputProps: _inputProps,
+    mode,
+    name,
+    onBlur,
+    onChange: _onChange,
+    preserveValue,
+    validators,
+    disabled,
+    value: _value,
+    type = "Float",
+    placeholder,
+    min,
+    max,
+    step,
+    precision,
+    currencySymbol: _currencySymbol = "$",
+    ...fieldProps
+  } = useProps(props);
+
+  const resolvedPrecision = derivePrecision(type, precision);
+
+  return (
+    <FormsStepper
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={(_value ?? defaultValue) as number}
+      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}
+      min={min}
+      max={max}
+      step={step}
+      precision={resolvedPrecision}
+      onBlur={onBlur}
+      mode={mode}
+      preserveValue={preserveValue}
+    />
+  );
+}