@multiplatform.one/frappe-ui 6.0.0

package/src/FrappeDashboard.stories.tsx

@@ -0,0 +1,196 @@
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { KPICard, ChartCard, type DashboardWidget } from "@multiplatform.one/components";
+import { FrappeDashboard } from "./FrappeDashboard";
+import { FrappeProvider } from "./FrappeProvider";
+
+export default {
+  title: "FrappeUI/FrappeDashboard",
+  component: FrappeDashboard,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component: "A dashboard component with KPI cards and charts for visualizing Frappe data.",
+      },
+    },
+  },
+};
+
+// KPI Card Stories
+export const KPICardDefault = () => (
+  <KPICard
+    config={{
+      id: "revenue-kpi",
+      title: "Total Revenue",
+      value: 125000,
+      format: "currency",
+      currencySymbol: "$",
+    }}
+  />
+);
+
+KPICardDefault.storyName = "Main";
+// Chart Card Stories
+export const BarChart = () => (
+  <ChartCard
+    config={{
+      id: "monthly-sales",
+      title: "Monthly Sales",
+      type: "bar",
+      data: [
+        { label: "Jan", value: 4000 },
+        { label: "Feb", value: 3000 },
+        { label: "Mar", value: 5000 },
+        { label: "Apr", value: 4500 },
+        { label: "May", value: 6000 },
+        { label: "Jun", value: 5500 },
+      ],
+    }}
+    colors={["#3B82F6"]}
+  />
+);
+BarChart.parameters = {
+  docs: {
+    description: {
+      story: "Bar chart for comparing values across categories.",
+    },
+  },
+};
+
+// Dashboard Stories
+interface SalesOrder {
+  name: string;
+  doctype: string;
+  total: number;
+  status: string;
+  region: string;
+}
+
+const salesFixtures: SalesOrder[] = [
+  {
+    name: "SO-001",
+    doctype: "SalesOrder",
+    total: 5000,
+    status: "Completed",
+    region: "North America",
+  },
+  { name: "SO-002", doctype: "SalesOrder", total: 3500, status: "Pending", region: "Europe" },
+  {
+    name: "SO-003",
+    doctype: "SalesOrder",
+    total: 7200,
+    status: "Completed",
+    region: "Asia Pacific",
+  },
+  {
+    name: "SO-004",
+    doctype: "SalesOrder",
+    total: 2800,
+    status: "Completed",
+    region: "North America",
+  },
+  { name: "SO-005", doctype: "SalesOrder", total: 4100, status: "Pending", region: "Europe" },
+];
+
+const widgets: DashboardWidget[] = [
+  {
+    id: "total-revenue",
+    type: "kpi",
+    colSpan: 1,
+    kpiConfig: {
+      id: "total-revenue",
+      title: "Total Revenue",
+      value: 22600,
+      previousValue: 18500,
+      format: "currency",
+      currencySymbol: "$",
+      trend: "up",
+    },
+  },
+  {
+    id: "orders",
+    type: "kpi",
+    colSpan: 1,
+    kpiConfig: {
+      id: "orders",
+      title: "Orders",
+      value: 5,
+      previousValue: 4,
+      format: "number",
+      trend: "up",
+    },
+  },
+  {
+    id: "avg-order",
+    type: "kpi",
+    colSpan: 1,
+    kpiConfig: {
+      id: "avg-order",
+      title: "Average Order",
+      value: 4520,
+      previousValue: 4625,
+      format: "currency",
+      currencySymbol: "$",
+      trend: "down",
+    },
+  },
+  {
+    id: "completion-rate",
+    type: "kpi",
+    colSpan: 1,
+    kpiConfig: {
+      id: "completion-rate",
+      title: "Completion Rate",
+      value: 60,
+      previousValue: 50,
+      format: "percent",
+      trend: "up",
+    },
+  },
+  {
+    id: "revenue-status",
+    type: "chart",
+    colSpan: 2,
+    chartConfig: {
+      id: "revenue-status",
+      title: "Revenue by Status",
+      type: "bar",
+      data: [
+        { label: "Completed", value: 15000 },
+        { label: "Pending", value: 7600 },
+      ],
+    },
+  },
+  {
+    id: "sales-region",
+    type: "chart",
+    colSpan: 2,
+    chartConfig: {
+      id: "sales-region",
+      title: "Sales by Region",
+      type: "pie",
+      data: [
+        { label: "North America", value: 7800, color: "#3B82F6" },
+        { label: "Europe", value: 7600, color: "#10B981" },
+        { label: "Asia Pacific", value: 7200, color: "#F59E0B" },
+      ],
+      showLegend: true,
+    },
+  },
+];
+
+export const SalesDashboard = () => (
+  <FrappeProvider
+    baseURL="https://demo.frappe.cloud"
+    fixtures={new InMemoryFixtureProvider({ SalesOrder: salesFixtures })}
+  >
+    <FrappeDashboard widgets={widgets} columns={4} />
+  </FrappeProvider>
+);
+SalesDashboard.parameters = {
+  docs: {
+    description: {
+      story: "Complete sales dashboard with KPI cards and charts.",
+    },
+  },
+};

package/src/FrappeDashboard.tsx

@@ -0,0 +1,199 @@
+import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { Dashboard, type DashboardWidget } from "@multiplatform.one/components";
+import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
+import React, { useMemo, useCallback, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Spinner, Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useFrappeConfig } from "./FrappeProvider";
+
+/**
+ * Data source configuration for live data.
+ */
+export interface DashboardDataSource<TDoc> {
+  doctype: string;
+  fields?: readonly (keyof TDoc & string)[];
+  filters?: Partial<TDoc> | Array<[keyof TDoc & string, string, any]>;
+  aggregations?: {
+    field: keyof TDoc & string;
+    operation: "count" | "sum" | "avg" | "min" | "max";
+    groupBy?: keyof TDoc & string;
+  }[];
+}
+
+export interface FrappeDashboardProps<TDoc extends { name: string; doctype: string }> extends Omit<
+  YStackProps,
+  "children"
+> {
+  baseURL?: string;
+  auth?: { useToken?: boolean; token?: string; type?: string };
+  syncOptions?: any;
+  title?: string;
+  description?: string;
+  widgets: DashboardWidget[];
+  dataSource?: DashboardDataSource<TDoc>;
+  transformData?: (data: Partial<TDoc>[]) => DashboardWidget[];
+  columns?: number;
+  gap?: number;
+  padding?: number;
+  autoRefresh?: boolean;
+  refreshInterval?: number;
+  loading?: React.ReactNode;
+  error?: (error: Error) => React.ReactNode;
+}
+
+/**
+ * Thin Frappe wrapper around the generic Dashboard component.
+ *
+ * Fetches live data via `useFrappeCollection` / `useLiveQuery` if a
+ * `dataSource` is configured, transforms it into widget data, and
+ * passes everything to the generic `Dashboard` from
+ * `@multiplatform.one/components`.
+ */
+export function FrappeDashboard<TDoc extends { name: string; doctype: string }>({
+  baseURL,
+  auth,
+  syncOptions,
+  title,
+  description,
+  widgets: staticWidgets,
+  dataSource,
+  transformData,
+  columns = 4,
+  gap = 16,
+  padding = 16,
+  autoRefresh = false,
+  refreshInterval = 60,
+  loading,
+  error: _error,
+  ...stackProps
+}: FrappeDashboardProps<TDoc>) {
+  const config = useFrappeConfig();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation();
+
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  // Use live data if dataSource is configured
+  const appConfig =
+    finalBaseURL && dataSource?.doctype
+      ? {
+          baseURL: finalBaseURL,
+          socketPort: config?.socketPort,
+          auth: finalAuth,
+          syncOptions: finalSyncOptions,
+          fixtures: config?.fixtures,
+        }
+      : undefined;
+
+  const collection = useFrappeCollection<TDoc>(appConfig, dataSource?.doctype ?? "", {
+    fields: dataSource?.fields,
+    filters: dataSource?.filters,
+  });
+  const { data: rawData, isLoading: isLiveLoading } = useLiveQuery(
+    (q) => (collection ? q.from({ _list: collection }) : null),
+    [collection],
+  );
+  const liveData = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
+
+  // Transform data if needed
+  const widgets = useMemo(() => {
+    if (dataSource && transformData && liveData.length > 0) {
+      return transformData(liveData);
+    }
+    return staticWidgets;
+  }, [dataSource, transformData, liveData, staticWidgets]);
+
+  // Auto-refresh
+  useEffect(() => {
+    if (!autoRefresh || refreshInterval <= 0) return;
+    const interval = setInterval(() => {
+      setLastRefresh(new Date());
+    }, refreshInterval * 1000);
+    return () => clearInterval(interval);
+  }, [autoRefresh, refreshInterval]);
+
+  const handleRefresh = useCallback(() => {
+    setIsRefreshing(true);
+    setLastRefresh(new Date());
+    setTimeout(() => setIsRefreshing(false), 500);
+  }, []);
+
+  // Loading state for live data
+  if (dataSource && isLiveLoading) {
+    if (loading) return <>{loading}</>;
+    return (
+      <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps}>
+        <Spinner size="large" />
+        <Text color="$color10" marginTop="$2">
+          {t("Loading dashboard...")}
+        </Text>
+      </YStack>
+    );
+  }
+
+  return (
+    <YStack {...knobProps.borderRadius} flex={1} {...stackProps}>
+      {/* Frappe-specific header with refresh controls */}
+      {(title || autoRefresh) && (
+        <XStack
+          {...knobProps.panelPadding}
+          justifyContent="space-between"
+          alignItems="center"
+          paddingBottom={0}
+        >
+          {title && <H3>{title}</H3>}
+          <XStack {...knobProps.gap} alignItems="center">
+            {autoRefresh && (
+              <Text fontSize="$1" color="$color10">
+                {t("Last updated: {{time}}", { time: lastRefresh.toLocaleTimeString() })}
+              </Text>
+            )}
+            <Button
+              size="$2"
+              icon={ArrowsClockwiseIcon}
+              onPress={handleRefresh}
+              disabled={isRefreshing}
+              chromeless
+            />
+          </XStack>
+        </XStack>
+      )}
+
+      {/* Delegate to generic Dashboard */}
+      <Dashboard
+        widgets={widgets}
+        title={!title && !autoRefresh ? undefined : undefined}
+        description={description}
+        columns={columns}
+        gap={typeof knobProps.gap?.gap === "number" ? knobProps.gap.gap : gap}
+        padding={
+          typeof knobProps.panelPadding?.padding === "number"
+            ? knobProps.panelPadding.padding
+            : padding
+        }
+      />
+    </YStack>
+  );
+}
+
+export {
+  KPICard,
+  ChartCard,
+  calculateTrend,
+  calculatePercentageChange,
+  aggregateData,
+  type DashboardWidget,
+  type KPICardConfig,
+  type KPICardProps,
+  type ChartConfig,
+  type ChartCardProps,
+  type ChartDataPoint,
+  type ChartType,
+  type TrendDirection,
+} from "@multiplatform.one/components";

package/src/FrappeForm.stories.tsx

@@ -0,0 +1,250 @@
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { action } from "@multiplatform.one/storybook";
+import { YStack } from "tamagui";
+import { Data } from "./fields/Data";
+import { Select } from "./fields/Select";
+import { Check } from "./fields/Check";
+import { Date } from "./fields/Date";
+import { Numeric } from "./fields/Numeric";
+import { FrappeForm } from "./FrappeForm";
+import { FrappeProvider } from "./FrappeProvider";
+
+export default {
+  title: "FrappeUI/FrappeForm",
+  component: FrappeForm,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A form component connected to Frappe Live data for creating and editing documents with real-time sync.",
+      },
+    },
+  },
+};
+
+interface Contact {
+  name: string;
+  doctype: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+  status: string;
+}
+
+const contactFixtures: Contact[] = [
+  {
+    name: "CONTACT-001",
+    doctype: "Contact",
+    first_name: "John",
+    last_name: "Doe",
+    email: "john@example.com",
+    phone: "555-0100",
+    status: "Active",
+  },
+  {
+    name: "CONTACT-002",
+    doctype: "Contact",
+    first_name: "Jane",
+    last_name: "Smith",
+    email: "jane@example.com",
+    phone: "555-0101",
+    status: "Lead",
+  },
+];
+
+export const CreateForm = () => (
+  <FrappeProvider
+    baseURL="https://demo.frappe.cloud"
+    fixtures={new InMemoryFixtureProvider({ Contact: contactFixtures })}
+  >
+    <FrappeForm<Contact> doctype="Contact" onSave={action("onSave")} onCancel={action("onCancel")}>
+      {({ doc, setValue, errors }) => (
+        <YStack gap="$3" width={400}>
+          <Data
+            label="First Name"
+            value={doc.first_name || ""}
+            onChange={(v) => setValue("first_name", v)}
+            required
+            error={errors.first_name}
+          />
+          <Data
+            label="Last Name"
+            value={doc.last_name || ""}
+            onChange={(v) => setValue("last_name", v)}
+            required
+            error={errors.last_name}
+          />
+          <Data
+            label="Email"
+            value={doc.email || ""}
+            onChange={(v) => setValue("email", v)}
+            required
+            error={errors.email}
+          />
+          <Data label="Phone" value={doc.phone || ""} onChange={(v) => setValue("phone", v)} />
+          <Select
+            label="Status"
+            value={doc.status || ""}
+            onChange={(v) => setValue("status", v)}
+            options={["Active", "Lead", "Inactive"]}
+          />
+        </YStack>
+      )}
+    </FrappeForm>
+  </FrappeProvider>
+);
+CreateForm.parameters = {
+  docs: {
+    description: {
+      story: "Form for creating a new Contact document.",
+    },
+  },
+};
+
+CreateForm.storyName = "Main";
+export const EditForm = () => (
+  <FrappeProvider
+    baseURL="https://demo.frappe.cloud"
+    fixtures={new InMemoryFixtureProvider({ Contact: contactFixtures })}
+  >
+    <FrappeForm<Contact>
+      doctype="Contact"
+      name="CONTACT-001"
+      onSave={action("onSave")}
+      onCancel={action("onCancel")}
+    >
+      {({ doc, setValue, errors }) => (
+        <YStack gap="$3" width={400}>
+          <Data
+            label="First Name"
+            value={doc.first_name || ""}
+            onChange={(v) => setValue("first_name", v)}
+            required
+            error={errors.first_name}
+          />
+          <Data
+            label="Last Name"
+            value={doc.last_name || ""}
+            onChange={(v) => setValue("last_name", v)}
+            required
+            error={errors.last_name}
+          />
+          <Data
+            label="Email"
+            value={doc.email || ""}
+            onChange={(v) => setValue("email", v)}
+            required
+            error={errors.email}
+          />
+          <Data label="Phone" value={doc.phone || ""} onChange={(v) => setValue("phone", v)} />
+          <Select
+            label="Status"
+            value={doc.status || ""}
+            onChange={(v) => setValue("status", v)}
+            options={["Active", "Lead", "Inactive"]}
+          />
+        </YStack>
+      )}
+    </FrappeForm>
+  </FrappeProvider>
+);
+EditForm.parameters = {
+  docs: {
+    description: {
+      story: "Form for editing an existing Contact document.",
+    },
+  },
+};
+
+interface Order {
+  name: string;
+  doctype: string;
+  customer: string;
+  order_date: string;
+  total_amount: number;
+  status: string;
+  is_paid: boolean;
+  notes: string;
+}
+
+const orderFixtures: Order[] = [
+  {
+    name: "ORD-001",
+    doctype: "SalesOrder",
+    customer: "CUST-001",
+    order_date: "2026-01-20",
+    total_amount: 1500.0,
+    status: "Draft",
+    is_paid: false,
+    notes: "",
+  },
+];
+
+export const ComplexForm = () => (
+  <FrappeProvider
+    baseURL="https://demo.frappe.cloud"
+    fixtures={new InMemoryFixtureProvider({ SalesOrder: orderFixtures })}
+  >
+    <FrappeForm<Order>
+      doctype="SalesOrder"
+      name="ORD-001"
+      onSave={action("onSave")}
+      onCancel={action("onCancel")}
+    >
+      {({ doc, setValue, errors }) => (
+        <YStack gap="$3" width={500}>
+          <Data
+            label="Customer"
+            value={doc.customer || ""}
+            onChange={(v) => setValue("customer", v)}
+            required
+            error={errors.customer}
+          />
+          <Date
+            label="Order Date"
+            type="date"
+            value={doc.order_date || ""}
+            onChange={(v) => setValue("order_date", v)}
+            required
+          />
+          <Numeric
+            label="Total Amount"
+            type="Currency"
+            currencySymbol="$"
+            value={doc.total_amount}
+            onChange={(v) => setValue("total_amount", v)}
+          />
+          <Select
+            label="Status"
+            value={doc.status || ""}
+            onChange={(v) => setValue("status", v)}
+            options={["Draft", "Submitted", "Completed", "Cancelled"]}
+          />
+          <Check
+            label="Payment Received"
+            value={doc.is_paid || false}
+            onChange={(v) => setValue("is_paid", v)}
+          />
+          <Data
+            label="Notes"
+            type="long_text"
+            value={doc.notes || ""}
+            onChange={(v) => setValue("notes", v)}
+            placeholder="Add any additional notes..."
+          />
+        </YStack>
+      )}
+    </FrappeForm>
+  </FrappeProvider>
+);
+ComplexForm.parameters = {
+  docs: {
+    description: {
+      story:
+        "A more complex form with multiple field types including dates, numbers, selects, and checkboxes.",
+    },
+  },
+};