@multiplatform.one/frappe-ui 6.0.0

package/src/fields/TimePicker/index.tsx

@@ -0,0 +1,11 @@
+import type { TimePickerProps as FormsTimePickerProps } from "@multiplatform.one/forms";
+import { TimePicker as FormsTimePicker } from "@multiplatform.one/forms";
+import { ClockIcon } from "@phosphor-icons/react";
+import { useProps } from "tamagui";
+
+export type TimePickerProps = FormsTimePickerProps;
+
+export function TimePicker(props: TimePickerProps) {
+  const resolvedProps = useProps(props);
+  return <FormsTimePicker clockIcon={<ClockIcon size={16} />} {...resolvedProps} />;
+}

package/src/fields/ToggleGroup/index.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { ToggleGroup as FormsToggleGroup } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type ToggleGroupFieldProps<
+  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 | string[]
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string | string[]
+      >,
+      "children"
+    >
+  > & {
+    type?: "single" | "multiple";
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    options?: Array<{ label: string; value: string; icon?: ReactNode }>;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    children?: ReactNode;
+  };
+
+export function ToggleGroupField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: ToggleGroupFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    type,
+    options,
+    orientation,
+    children,
+    ...fieldProps
+  } = useProps(props) as ToggleGroupFieldProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsToggleGroup
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as string | string[]}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      type={type}
+      value={value}
+      onValueChange={onChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      options={options}
+      orientation={orientation}
+    >
+      {children}
+    </FormsToggleGroup>
+  );
+}

package/src/index.ts

@@ -0,0 +1,184 @@
+/**
+ * @multiplatform.one/frappe-ui
+ *
+ * Pre-wired Tamagui components for Frappe doctypes with live data.
+ *
+ * This package exports ONLY Frappe-specific components and wrappers.
+ * Generic field, layout, filter, and form components have been migrated to:
+ *   - @multiplatform.one/forms (fields, SchemaForm, fieldRegistry)
+ *   - @multiplatform.one/table (ChildTable, TableInput, DataTable, …)
+ *   - @multiplatform.one/components (Sidebar, Toolbar, ViewSwitcher, Breadcrumbs, etc.)
+ *   - @multiplatform.one/table (FilterManager, SavedFilterDropdown, useSavedFilters)
+ */
+
+// ---------------------------------------------------------------------------
+// Frappe Provider
+// ---------------------------------------------------------------------------
+
+export {
+  FrappeProvider,
+  useFrappeConfig,
+  useFrappeContext,
+  type FrappeConfig,
+  type FrappeProviderProps,
+} from "./FrappeProvider";
+
+// ---------------------------------------------------------------------------
+// Frappe View Wrappers
+// ---------------------------------------------------------------------------
+
+export { FrappeTable, type FrappeTableProps } from "./FrappeTable";
+export { FrappeForm, type FrappeFormProps } from "./FrappeForm";
+export { FrappeList, type FrappeListProps } from "./FrappeList";
+export { FrappeListView, type FrappeListViewProps, type ListViewMode } from "./FrappeListView";
+
+export {
+  FrappeKanban,
+  type FrappeKanbanProps,
+  type KanbanColumn,
+  type KanbanCardRenderer,
+} from "./FrappeKanban";
+
+export {
+  FrappeCalendar,
+  type FrappeCalendarProps,
+  type CalendarViewType,
+  type CalendarEventRenderer,
+} from "./FrappeCalendar";
+
+export {
+  FrappeReportBuilder,
+  type FrappeReportBuilderProps,
+  type ReportColumn,
+  type GroupByConfig,
+} from "./FrappeReportBuilder";
+
+export {
+  FrappeDashboard,
+  type FrappeDashboardProps,
+  type DashboardDataSource,
+  KPICard,
+  ChartCard,
+  calculateTrend,
+  calculatePercentageChange,
+  aggregateData,
+  type DashboardWidget,
+  type KPICardConfig,
+  type KPICardProps,
+  type ChartConfig,
+  type ChartCardProps,
+  type ChartDataPoint,
+  type ChartType,
+  type TrendDirection,
+} from "./FrappeDashboard";
+
+export { FrappeImageView, type FrappeImageViewProps } from "./FrappeImageView";
+export { FrappeTreeView, type FrappeTreeViewProps } from "./FrappeTreeView";
+
+// ---------------------------------------------------------------------------
+// Schema Form & Field Registry
+// ---------------------------------------------------------------------------
+
+export { SchemaForm } from "./schemaForm";
+export type {
+  SchemaFormProps,
+  FormSchema,
+  FormSection,
+  FormColumn,
+  FieldOverride,
+} from "./schemaForm";
+
+export { registerField, getFieldComponent, initDefaultRegistry } from "./fieldRegistry";
+export type { FieldRenderProps, FieldSchema } from "./fieldRegistry";
+
+// ---------------------------------------------------------------------------
+// Frappe Field Type Renderers (map Frappe DocType field types to UI)
+// ---------------------------------------------------------------------------
+
+export { Barcode } from "./fields/Barcode";
+export { Check } from "./fields/Check";
+export type { CheckProps } from "./fields/Check";
+export { Color } from "./fields/Color";
+export type { ColorProps } from "./fields/Color";
+export { Data } from "./fields/Data";
+export type { DataProps } from "./fields/Data";
+export { Date } from "./fields/Date";
+export type { DateProps } from "./fields/Date";
+export { DateRangeField, type DateRangeFieldProps } from "./fields/DateRange";
+export { Duration } from "./fields/Duration";
+export { FileUploadField, type FileUploadFieldProps } from "./fields/FileUploadField";
+export { TimePicker, type TimePickerProps } from "./fields/TimePicker";
+export { Geolocation } from "./fields/Geolocation";
+export { Heading } from "./fields/Heading";
+export { Html } from "./fields/HTML";
+export { LongText } from "./fields/LongText";
+export type { LongTextProps } from "./fields/LongText";
+export { MentionInputField, type MentionInputFieldProps } from "./fields/MentionInput";
+export { Numeric } from "./fields/Numeric";
+export type { NumericProps, NumericType } from "./fields/Numeric";
+export { OTPInputField, type OTPInputFieldProps } from "./fields/OTPInput";
+export { Password } from "./fields/Password";
+export type { PasswordProps } from "./fields/Password";
+export { Phone, type PhoneFieldProps } from "./fields/Phone";
+export { ProgressField, type ProgressFieldProps } from "./fields/Progress";
+export { RadioGroupField, type RadioGroupFieldProps } from "./fields/RadioGroup";
+export { Rating } from "./fields/Rating";
+export { ReadOnly } from "./fields/ReadOnly";
+export { Select } from "./fields/Select";
+export type { SelectProps } from "./fields/Select";
+export { Signature } from "./fields/Signature";
+export { SliderField, type SliderFieldProps } from "./fields/Slider";
+export { SmallText } from "./fields/SmallText";
+export type { SmallTextProps } from "./fields/SmallText";
+export { SwitchField, type SwitchFieldProps } from "./fields/Switch";
+export { TextEditor } from "./fields/TextEditor";
+export { ToggleGroupField, type ToggleGroupFieldProps } from "./fields/ToggleGroup";
+
+// ---------------------------------------------------------------------------
+// Frappe-Specific Fields (depend on Frappe APIs)
+// ---------------------------------------------------------------------------
+
+export { Link, type LinkProps } from "./fields/Link";
+export { DynamicLink, type DynamicLinkProps } from "./fields/DynamicLink";
+export {
+  TableMultiSelect,
+  type TableMultiSelectProps,
+  type TableMultiSelectOption,
+} from "./fields/TableMultiSelect";
+export { FileUpload, type FileUploadProps } from "./fields/FileUpload";
+
+// ---------------------------------------------------------------------------
+// Desk Shell Components
+// ---------------------------------------------------------------------------
+
+export { Awesomebar, type AwesomebarProps } from "./desk/awesomebar";
+export {
+  DeskSidebar,
+  type DeskSidebarProps,
+  addToRecent,
+  addToFavorites,
+  removeFromFavorites,
+} from "./desk/DeskSidebar";
+export { DeskShell, type DeskShellProps } from "./desk/DeskShell";
+export { DeskListPage, type DeskListPageProps } from "./desk/DeskListPage";
+export { DeskFormPage, type DeskFormPageProps } from "./desk/DeskFormPage";
+
+// ---------------------------------------------------------------------------
+// Pagination Bridge
+// ---------------------------------------------------------------------------
+
+export {
+  useFrappePagination,
+  type UseFrappePaginationOptions,
+  type UseFrappePaginationResult,
+} from "./useFrappePagination";
+
+// ---------------------------------------------------------------------------
+// Re-exports for Convenience
+// ---------------------------------------------------------------------------
+
+// Frappe hooks
+export { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+
+// Table utilities
+export type { DataTableColumn } from "@multiplatform.one/table";

package/src/schemaForm/index.tsx

@@ -0,0 +1,252 @@
+/**
+ * Schema-driven form layout renderer.
+ *
+ * Renders a complete form from a generic schema definition —
+ * iterating over sections, columns, and fields.  Supports conditional
+ * visibility via `depends_on` expressions, field overrides, hidden
+ * fields, and read-only fields.
+ *
+ * This component is framework-agnostic: it accepts a generic
+ * `FormSchema` (sections → columns → fields) and resolves field
+ * renderers via the `fieldRegistry`.
+ */
+
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Card, Text, XStack, YStack } from "tamagui";
+
+import { Heading } from "../fields/Heading";
+import { getFieldComponent, type FieldRenderProps, type FieldSchema } from "../fieldRegistry";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** A column within a form section — contains an array of fields. */
+export interface FormColumn {
+  fields: FieldSchema[];
+}
+
+/** A section within a form — contains heading info and columns. */
+export interface FormSection {
+  label?: string;
+  collapsible?: boolean;
+  columns: FormColumn[];
+}
+
+/** Top-level form schema definition. */
+export interface FormSchema {
+  sections: FormSection[];
+  /** Flat list of all fields (for depends_on pre-compilation). */
+  fields: FieldSchema[];
+}
+
+/** Override for a specific field in the schema form. */
+export type FieldOverride =
+  | ((props: FieldRenderProps) => React.ReactNode)
+  | { component: React.ComponentType<FieldRenderProps> }
+  | { props: Record<string, any> };
+
+export interface SchemaFormProps {
+  /** The form schema (sections, columns, fields). */
+  schema: FormSchema;
+  /** Current document / record values keyed by field name. */
+  doc: Record<string, any>;
+  /** Callback to set a single field value. */
+  setValue: (field: string, value: unknown) => void;
+  /** Per-field error messages keyed by field name. */
+  errors?: Record<string, string>;
+  /** Disable all fields. */
+  disabled?: boolean;
+  /** Per-field overrides keyed by field name. */
+  overrides?: Record<string, FieldOverride>;
+  /** Field names to hide. */
+  hideFields?: string[];
+  /** Field names to force read-only. */
+  readOnlyFields?: string[];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Layout break field types that are not rendered as form inputs. */
+const layoutFieldTypes = new Set(["Section Break", "Column Break", "Tab Break"]);
+
+/**
+ * Minimal depends_on evaluator.
+ *
+ * Supports simple expressions like `eval:doc.status === "Draft"` or
+ * bare field references like `status` (truthy check).
+ */
+function parseDependsOn(expr: string): (doc: Record<string, unknown>) => boolean {
+  if (expr.startsWith("eval:")) {
+    const code = expr.slice(5);
+    return (doc) => {
+      try {
+        return !!new Function("doc", `return (${code})`)(doc);
+      } catch {
+        return true;
+      }
+    };
+  }
+  // Bare field reference: truthy check
+  return (doc) => !!doc[expr];
+}
+
+function isOverrideFunction(
+  override: FieldOverride,
+): override is (props: FieldRenderProps) => React.ReactNode {
+  return typeof override === "function";
+}
+
+function isOverrideComponent(
+  override: FieldOverride,
+): override is { component: React.ComponentType<FieldRenderProps> } {
+  return typeof override === "object" && "component" in override;
+}
+
+function isOverrideProps(override: FieldOverride): override is { props: Record<string, any> } {
+  return typeof override === "object" && "props" in override;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function SchemaForm({
+  schema,
+  doc,
+  setValue,
+  errors = {},
+  disabled = false,
+  overrides = {},
+  hideFields = [],
+  readOnlyFields = [],
+}: SchemaFormProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+
+  // Pre-compile depends_on evaluators for all fields
+  const dependsOnMap = useMemo(() => {
+    const map = new Map<string, (doc: Record<string, unknown>) => boolean>();
+    for (const field of schema.fields) {
+      if (field.depends_on) {
+        map.set(field.name, parseDependsOn(field.depends_on));
+      }
+    }
+    return map;
+  }, [schema.fields]);
+
+  const hiddenSet = useMemo(() => new Set(hideFields), [hideFields]);
+  const readOnlySet = useMemo(() => new Set(readOnlyFields), [readOnlyFields]);
+
+  function renderField(field: FieldSchema) {
+    // Skip layout break fields — structural, not rendered as inputs
+    if (layoutFieldTypes.has(field.type)) {
+      return null;
+    }
+
+    // Check hideFields
+    if (field.hidden || hiddenSet.has(field.name)) {
+      return null;
+    }
+
+    // Check depends_on
+    const evaluator = dependsOnMap.get(field.name);
+    if (evaluator && !evaluator(doc)) {
+      return null;
+    }
+
+    const fieldDisabled = disabled || readOnlySet.has(field.name) || !!field.readOnly;
+
+    const baseProps: FieldRenderProps = {
+      label: field.label,
+      value: doc[field.name],
+      onChange: (v: unknown) => setValue(field.name, v),
+      disabled: fieldDisabled,
+      required: !!field.required,
+      error: errors[field.name],
+      fieldMeta: field,
+      options: field.options,
+    };
+
+    // Check overrides
+    const override = overrides[field.name];
+    if (override) {
+      if (isOverrideFunction(override)) {
+        return <React.Fragment key={field.name}>{override(baseProps)}</React.Fragment>;
+      }
+
+      if (isOverrideComponent(override)) {
+        const OverrideComponent = override.component;
+        return <OverrideComponent key={field.name} {...baseProps} />;
+      }
+
+      if (isOverrideProps(override)) {
+        const mergedProps = { ...baseProps, ...override.props };
+        const Component = getFieldComponent(field.type);
+        if (!Component) {
+          return (
+            <Text key={field.name} color="$color10" fontSize="$2">
+              {t("Unsupported field type: {{fieldtype}}", { fieldtype: field.type })}
+            </Text>
+          );
+        }
+        return <Component key={field.name} {...mergedProps} />;
+      }
+    }
+
+    // Default: use registry
+    const Component = getFieldComponent(field.type);
+    if (!Component) {
+      return (
+        <Text key={field.name} color="$color10" fontSize="$2">
+          {t("Unsupported field type: {{fieldtype}}", { fieldtype: field.type })} ({field.name})
+        </Text>
+      );
+    }
+
+    return <Component key={field.name} {...baseProps} />;
+  }
+
+  return (
+    <YStack {...knobProps.gapLg}>
+      {schema.sections.map((section, sectionIndex) => {
+        const sectionKey = section.label ? `section-${section.label}` : `section-${sectionIndex}`;
+
+        return (
+          <Card
+            borderWidth={1}
+            borderColor="$borderColor"
+            size={knobProps.sizeToken}
+            key={sectionKey}
+          >
+            <Card.Header {...knobProps.panelPadding}>
+              {section.label && (
+                <Heading label={section.label} level={3} collapsible={section.collapsible} />
+              )}
+            </Card.Header>
+            <Card.Footer {...knobProps.panelPadding}>
+              <YStack {...knobProps.gap} width="100%">
+                {Array.from(
+                  { length: Math.max(...section.columns.map((c) => c.fields.length), 0) },
+                  (_, rowIndex) => (
+                    <XStack key={rowIndex} {...knobProps.gapLg} width="100%">
+                      {section.columns.map((column, colIndex) => (
+                        <YStack key={colIndex} flex={1} minWidth={250}>
+                          {column.fields[rowIndex] ? renderField(column.fields[rowIndex]) : null}
+                        </YStack>
+                      ))}
+                    </XStack>
+                  ),
+                )}
+              </YStack>
+            </Card.Footer>
+          </Card>
+        );
+      })}
+    </YStack>
+  );
+}

package/src/useFrappePagination.ts

@@ -0,0 +1,85 @@
+/**
+ * Hook that bridges Frappe's VirtualPageManager cursor-based pagination
+ * to the generic `onLoadMore` / `hasMore` interface expected by
+ * view components like `List` from `@multiplatform.one/components`.
+ *
+ * Usage:
+ * ```tsx
+ * const { items, isLoading, onLoadMore, hasMore } = useFrappePagination<TDoc>(
+ *   connectionConfig,
+ *   doctype,
+ *   { fields, filters, pageSize: 20 },
+ * );
+ * return <List items={items} onLoadMore={onLoadMore} hasMore={hasMore} />;
+ * ```
+ *
+ * Internally it manages an increasing `limit` that is passed to
+ * `useFrappeCollection`. When the number of returned items equals
+ * the limit, `hasMore` is `true`. Calling `onLoadMore` increases
+ * the limit by `pageSize`, triggering the sync layer's
+ * VirtualPageManager to fetch the next cursor-based batch.
+ */
+
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { useCallback, useMemo, useState } from "react";
+import type { UseFrappeCollectionConfig } from "@multiplatform.one/frappe";
+
+export interface UseFrappePaginationOptions<TDoc> {
+  fields?: readonly (keyof TDoc & string)[];
+  filters?: Partial<TDoc> | Array<[keyof TDoc & string, string, unknown]>;
+  pageSize?: number;
+}
+
+export interface UseFrappePaginationResult<TDoc> {
+  items: TDoc[];
+  isLoading: boolean;
+  hasMore: boolean;
+  onLoadMore: () => void;
+  /** Current fetch limit (for debugging / display). */
+  limit: number;
+  /** Reset back to the first page. */
+  reset: () => void;
+}
+
+const defaultPageSize = 20;
+
+export function useFrappePagination<TDoc extends { name: string; doctype: string }>(
+  config: UseFrappeCollectionConfig | undefined,
+  doctype: string,
+  options?: UseFrappePaginationOptions<TDoc>,
+): UseFrappePaginationResult<TDoc> {
+  const pageSize = options?.pageSize ?? defaultPageSize;
+  const [limit, setLimit] = useState(pageSize);
+
+  // Create the collection with the current limit
+  const collection = useFrappeCollection<TDoc>(config, doctype, {
+    fields: options?.fields,
+    filters: options?.filters,
+  });
+
+  // Query the live data
+  const { data: rawData, isLoading } = useLiveQuery(
+    (q) => (collection ? q.from({ _list: collection }) : null),
+    [collection],
+  );
+
+  const allItems = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
+
+  // Slice to the current limit (progressive disclosure)
+  const items = useMemo(() => allItems.slice(0, limit), [allItems, limit]);
+
+  // If the total data available equals or exceeds the limit, there might
+  // be more to load. If the sync layer has fetched all available docs and
+  // they're fewer than the limit, hasMore is false.
+  const hasMore = allItems.length >= limit;
+
+  const onLoadMore = useCallback(() => {
+    setLimit((prev) => prev + pageSize);
+  }, [pageSize]);
+
+  const reset = useCallback(() => {
+    setLimit(pageSize);
+  }, [pageSize]);
+
+  return { items, isLoading, hasMore, onLoadMore, limit, reset };
+}