@multiplatform.one/frappe-ui 6.0.0

package/src/fields/FileUpload.tsx

@@ -0,0 +1,204 @@
+import { useFrappeCollection } from "@multiplatform.one/frappe";
+import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useRef, useState } from "react";
+import { Button, Image, Label, Spinner, Text, XStack, YStack } from "tamagui";
+import { useFrappeConfig } from "../FrappeProvider";
+
+export interface FileUploadProps {
+  label?: string;
+  value?: string;
+  onChange: (fileUrl: string) => void;
+  accept?: string;
+  isImage?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  maxSize?: number;
+  baseURL?: string;
+  auth?: any;
+}
+
+export function FileUpload({
+  label,
+  value,
+  onChange,
+  accept,
+  isImage = false,
+  disabled = false,
+  required = false,
+  maxSize = 5 * 1024 * 1024,
+  baseURL,
+  auth,
+}: FileUploadProps) {
+  const { knobProps } = useResolvedKnobs();
+  const config = useFrappeConfig();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
+  const finalConfig = finalBaseURL
+    ? {
+        baseURL: finalBaseURL,
+        socketPort: config?.socketPort,
+        auth: auth ?? config?.auth,
+        syncOptions: config?.syncOptions,
+        fixtures: config?.fixtures,
+      }
+    : undefined;
+
+  const fileCollection = useFrappeCollection<{
+    name: string;
+    doctype: string;
+    file_name: string;
+    file_url: string;
+    is_private: 0 | 1;
+  }>(finalConfig, "File", {
+    fields: ["name", "file_name", "file_url", "is_private"],
+  });
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (maxSize && file.size > maxSize) {
+      setError(`File size exceeds ${Math.round(maxSize / 1024 / 1024)}MB limit`);
+      return;
+    }
+
+    setError(null);
+    setUploading(true);
+
+    try {
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        try {
+          const base64 = e.target?.result as string;
+
+          if (fileCollection) {
+            const tx = fileCollection.insert({
+              doctype: "File",
+              name: `new-${Date.now()}`,
+              file_name: file.name,
+              file_url: base64,
+              is_private: 0,
+            });
+            await tx.isPersisted.promise;
+          }
+          onChange(base64);
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "Upload failed");
+        } finally {
+          setUploading(false);
+        }
+      };
+
+      reader.onerror = () => {
+        setError("Failed to read file");
+        setUploading(false);
+      };
+
+      reader.readAsDataURL(file);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+      setUploading(false);
+    }
+  };
+
+  const handleRemove = () => {
+    onChange("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <YStack {...knobProps.gap}>
+      {label && (
+        <Label>
+          {label}
+          {required && <Text color="$red10"> *</Text>}
+        </Label>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept || (isImage ? "image/*" : undefined)}
+        style={{ display: "none" }}
+        onChange={handleFileSelect}
+        disabled={disabled || uploading}
+      />
+
+      {!value ? (
+        <Button
+          size="$3"
+          icon={uploading ? Spinner : UploadIcon}
+          disabled={disabled || uploading}
+          onPress={handleClick}
+          {...knobProps.borderRadius}
+        >
+          {uploading ? "Uploading..." : "Choose File"}
+        </Button>
+      ) : (
+        <YStack {...knobProps.gap}>
+          {isImage ? (
+            <Image
+              source={{ uri: value }}
+              width={200}
+              height={200}
+              {...knobProps.borderRadius}
+              resizeMode="cover"
+            />
+          ) : (
+            <XStack
+              gap="$2"
+              alignItems="center"
+              {...knobProps.panelPadding}
+              {...{ backgroundColor: "$color2" }}
+            >
+              <FileIcon size={20} />
+              <Text flex={1} numberOfLines={1}>
+                {value.split("/").pop() || value}
+              </Text>
+            </XStack>
+          )}
+
+          <XStack {...knobProps.gap}>
+            <Button
+              size="$2"
+              variant="outlined"
+              icon={UploadIcon}
+              disabled={disabled || uploading}
+              onPress={handleClick}
+              {...knobProps.borderRadius}
+            >
+              Replace
+            </Button>
+            <Button
+              size="$2"
+              variant="outlined"
+              icon={XIcon}
+              disabled={disabled || uploading}
+              onPress={handleRemove}
+              {...knobProps.borderRadius}
+            >
+              Remove
+            </Button>
+          </XStack>
+        </YStack>
+      )}
+
+      {error && (
+        <Text color="$red10" fontSize="$2">
+          {error}
+        </Text>
+      )}
+    </YStack>
+  );
+}

package/src/fields/FileUploadField/index.tsx

@@ -0,0 +1,80 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { FileUpload } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+const imageAccept = "image/png,image/jpeg,image/gif,image/webp,image/svg+xml";
+
+export type FileUploadFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    unknown
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        unknown
+      >,
+      "children"
+    >
+  > & {
+    disabled?: boolean;
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+    isImage?: boolean;
+  };
+
+export function FileUploadField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: FileUploadFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    _preserveValue,
+    validators,
+    disabled,
+    accept,
+    maxSize,
+    multiple,
+    isImage,
+    ...fieldProps
+  } = useProps(props) as FileUploadFieldProps<TData, TName> & Record<string, unknown>;
+
+  const resolvedAccept = isImage ? (accept ?? imageAccept) : accept;
+
+  return (
+    <FileUpload
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      accept={resolvedAccept}
+      maxSize={maxSize}
+      multiple={multiple}
+    />
+  );
+}

package/src/fields/Geolocation/index.tsx

@@ -0,0 +1,76 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Geolocation as FormsGeolocation } from "@multiplatform.one/forms";
+import { NavigationArrowIcon } from "@phosphor-icons/react";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type GeolocationProps<
+  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"
+    >
+  > & {
+    /** JSON string: {"lat": number, "lng": number} */
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+  };
+
+export function Geolocation<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: GeolocationProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode: _mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue: _preserveValue,
+    validators,
+    disabled,
+    value,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsGeolocation
+      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}
+      onChange={onChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      locationIcon={<NavigationArrowIcon size={16} />}
+    />
+  );
+}

package/src/fields/HTML/index.tsx

@@ -0,0 +1,50 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { Label, Text, View, YStack, type YStackProps } from "tamagui";
+
+export interface HtmlProps extends Omit<YStackProps, "children"> {
+  label?: string;
+  /** HTML string to render */
+  value?: string;
+}
+
+/** Strip <script> tags for basic XSS protection */
+function sanitizeHtml(html: string): string {
+  return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+}
+
+function HtmlContent({ html }: { html: string }) {
+  // dangerouslySetInnerHTML is web-only; View renders as div on web
+  const webProps = {
+    dangerouslySetInnerHTML: { __html: html },
+    style: { lineHeight: 1.5, fontSize: 14, color: "var(--color)" },
+  };
+  return <View {...(webProps as Record<string, unknown>)} />;
+}
+
+export function Html({ label, value = "", ...stackProps }: HtmlProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sanitizedHtml = useMemo(() => sanitizeHtml(value), [value]);
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {label && <Label>{label}</Label>}
+      <YStack
+        {...knobProps.borderRadius}
+        borderWidth={1}
+        borderColor="$borderColor"
+        backgroundColor="$backgroundHover"
+        {...knobProps.panelPadding}
+        minHeight={60}
+      >
+        {sanitizedHtml ? (
+          <HtmlContent html={sanitizedHtml} />
+        ) : (
+          <Text color="$color10" fontSize="$2">
+            No content
+          </Text>
+        )}
+      </YStack>
+    </YStack>
+  );
+}

package/src/fields/Heading/Heading.stories.tsx

@@ -0,0 +1,112 @@
+import { action } from "@multiplatform.one/storybook";
+import { Text, YStack } from "tamagui";
+import { Heading, type HeadingProps } from ".";
+import { Data } from "../Data";
+import { Check } from "../Check";
+import { useState } from "react";
+
+export default {
+  title: "FrappeUI/Heading",
+  component: Heading,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A section heading component for organizing form fields with optional collapsible sections.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Heading text" },
+    description: { control: "text", description: "Optional description text" },
+    level: {
+      control: "select",
+      options: [1, 2, 3, 4],
+      description: "Heading level (H1-H4)",
+    },
+    collapsible: { control: "boolean", description: "Allow section to collapse" },
+    defaultCollapsed: { control: "boolean", description: "Start collapsed" },
+    showSeparator: { control: "boolean", description: "Show separator line" },
+  },
+};
+
+export const Default = (args: HeadingProps) => <Heading {...args} />;
+Default.args = {
+  label: "General Information",
+  level: 2,
+} satisfies Partial<HeadingProps>;
+
+Default.storyName = "Main";
+export const Collapsible = () => {
+  return (
+    <YStack gap="$4" width={500}>
+      <Heading
+        label="Personal Information"
+        description="Click to expand/collapse"
+        level={2}
+        collapsible
+        onCollapseChange={action("onCollapseChange")}
+      >
+        <YStack gap="$3" paddingTop="$3">
+          <Text color="$gray11">This content is inside the collapsible section.</Text>
+        </YStack>
+      </Heading>
+    </YStack>
+  );
+};
+Collapsible.parameters = {
+  docs: {
+    description: {
+      story: "Collapsible sections can be toggled by clicking the heading.",
+    },
+  },
+};
+
+export const FormWithSections = () => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [newsletter, setNewsletter] = useState(false);
+
+  return (
+    <YStack gap="$4" width={500}>
+      <Heading label="Personal Information" level={2} showSeparator collapsible>
+        <YStack gap="$3" paddingTop="$3">
+          <Data label="First Name" value={firstName} onChange={(v) => setFirstName(v)} required />
+          <Data label="Last Name" value={lastName} onChange={(v) => setLastName(v)} required />
+        </YStack>
+      </Heading>
+
+      <Heading label="Contact Information" level={2} showSeparator collapsible>
+        <YStack gap="$3" paddingTop="$3">
+          <Data label="Email" value={email} onChange={(v) => setEmail(v)} required />
+        </YStack>
+      </Heading>
+
+      <Heading
+        label="Preferences"
+        description="Optional settings"
+        level={2}
+        showSeparator
+        collapsible
+        defaultCollapsed
+      >
+        <YStack gap="$3" paddingTop="$3">
+          <Check
+            label="Subscribe to newsletter"
+            value={newsletter}
+            onChange={(v) => setNewsletter(v)}
+          />
+        </YStack>
+      </Heading>
+    </YStack>
+  );
+};
+FormWithSections.parameters = {
+  docs: {
+    description: {
+      story: "Real-world example of using Heading to organize a form into collapsible sections.",
+    },
+  },
+};

package/src/fields/Heading/index.tsx

@@ -0,0 +1,103 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { useCallback, useState } from "react";
+import { H1, H2, H3, H4, Separator, Text, XStack, YStack, type YStackProps } from "tamagui";
+
+export type HeadingLevel = 1 | 2 | 3 | 4;
+
+export interface HeadingProps extends Omit<YStackProps, "children"> {
+  label: string;
+  description?: string;
+  level?: HeadingLevel;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  showSeparator?: boolean;
+  children?: React.ReactNode;
+  onCollapseChange?: (collapsed: boolean) => void;
+}
+
+function ChevronIcon({ collapsed }: { collapsed: boolean }) {
+  return (
+    <Text fontSize="$3" color="$color10" aria-hidden>
+      {collapsed ? "\u25B6" : "\u25BC"}
+    </Text>
+  );
+}
+
+export function Heading({
+  label,
+  description,
+  level = 2,
+  collapsible = false,
+  defaultCollapsed = false,
+  showSeparator = true,
+  children,
+  onCollapseChange,
+  ...stackProps
+}: HeadingProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const handleToggle = useCallback(() => {
+    if (!collapsible) return;
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    onCollapseChange?.(newState);
+  }, [collapsible, isCollapsed, onCollapseChange]);
+
+  const HeadingComponent = { 1: H1, 2: H2, 3: H3, 4: H4 }[level];
+
+  const headingContent = (
+    <XStack
+      alignItems="center"
+      gap="$2"
+      cursor={collapsible ? "pointer" : "default"}
+      onPress={handleToggle}
+      paddingVertical="$2"
+      hoverStyle={collapsible ? { opacity: 0.8 } : undefined}
+      role={collapsible ? "button" : undefined}
+      aria-expanded={collapsible ? !isCollapsed : undefined}
+      aria-controls={
+        collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : undefined
+      }
+    >
+      {collapsible && <ChevronIcon collapsed={isCollapsed} />}
+      <HeadingComponent
+        {...knobProps.heading}
+        size={level === 1 ? "$8" : level === 2 ? "$6" : level === 3 ? "$5" : "$4"}
+        fontWeight="600"
+        color="$color"
+      >
+        {label}
+      </HeadingComponent>
+    </XStack>
+  );
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {headingContent}
+      {description && !isCollapsed && (
+        <Text
+          fontSize={knobProps.sizeToken}
+          {...knobProps.body}
+          color="$color10"
+          marginTop="$-1"
+          marginBottom="$1"
+          paddingLeft={collapsible ? "$6" : undefined}
+        >
+          {description}
+        </Text>
+      )}
+      {showSeparator && <Separator marginVertical="$1" backgroundColor="$color5" />}
+      {children && !isCollapsed && (
+        <YStack
+          id={collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : undefined}
+          {...knobProps.gap}
+          paddingLeft={collapsible ? "$4" : undefined}
+        >
+          {children}
+        </YStack>
+      )}
+    </YStack>
+  );
+}