@multiplatform.one/components 5.0.26 → 6.0.0

package/dist/cjs/views/List.stories.native.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var List_stories_exports = {};
+__export(List_stories_exports, {
+  Default: () => Default,
+  default: () => List_stories_default
+});
+module.exports = __toCommonJS(List_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+var import_List = require("./List.native.js");
+var items = [{
+  id: "1",
+  title: "Setup Project",
+  description: "Initialize the repository and install dependencies"
+}, {
+  id: "2",
+  title: "Design System",
+  description: "Create component library and theme tokens"
+}, {
+  id: "3",
+  title: "Authentication",
+  description: "Implement login and registration flows"
+}, {
+  id: "4",
+  title: "API Layer",
+  description: "Build REST and WebSocket APIs"
+}, {
+  id: "5",
+  title: "Testing",
+  description: "Write unit and integration tests"
+}];
+var meta = {
+  title: "Components/List",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var List_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_List.List, {
+      items,
+      getItemKey: function getItemKey(item) {
+        return item.id;
+      },
+      renderItem: function renderItem(item) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$3",
+          children: item.title
+        });
+      },
+      onItemPress: function onItemPress(item) {
+        return console.log("Pressed:", item.id);
+      },
+      height: 400
+    });
+  }
+};
+//# sourceMappingURL=List.stories.native.js.map

package/dist/cjs/views/List.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","List_stories_exports","__export","Default","default","List_stories_default","module","exports","import_jsx_runtime","require","import_tamagui","import_List","items","id","title","description","meta","parameters"],"sources":["../../../src/views/List.stories.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAC;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAX,YAAqB,CAAAK,oBAAA;AACrB,IAAAO,kBAAqB,GAAAC,OAAA;AAmCO,IAAAC,cAAA,GAAAD,OAAA;AA3B5B,IAAAE,WAA8B,GAAAF,OAAA;AAAA,IAC5BG,KAAA;EAEEC,EAAA,KAAO;EACPC,KAAA,iBAAa;EACfC,WAAA;AACA,GACA;EACEF,EAAA,EAAI;EACJC,KAAI,iBAAY;EACpBC,WAAA;AAEA,GACE;EACAF,EAAA;EACEC,KAAA,kBAAgB;EAClBC,WAAA;AACF,GAEA;EAEOF,EAAM;EACXC,KAAM;EACNC,WAAQ,EACN;AAAA,GAAC;EAAAF,EACC;EAAAC,KACA,WAAa;EAAcC,WAC3B;AAAsD,EACA;AAC9C,IAAAC,IAAA;EACVF,KAAA;EAEJG,UAAA","ignoreList":[]}

package/dist/cjs/views/ReportBuilder.cjs

@@ -0,0 +1,387 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ReportBuilder_exports = {};
+__export(ReportBuilder_exports, {
+  ReportBuilder: () => ReportBuilder
+});
+module.exports = __toCommonJS(ReportBuilder_exports);
+var import_componentColors = require("../componentColors.cjs");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const numericFieldTypes = /* @__PURE__ */new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
+const aggregationLabels = {
+  count: "Count",
+  sum: "Sum",
+  avg: "Average",
+  min: "Min",
+  max: "Max"
+};
+const defaultChartColors = ["var(--accentBackground)", "var(--color7)", "var(--color8)", "var(--color9)", "var(--color10)", "var(--color11)", "var(--color6)", "var(--color5)"];
+function isNumericFieldType(fieldtype) {
+  return numericFieldTypes.has(fieldtype);
+}
+function formatCellValue(value, fieldtype) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  switch (fieldtype) {
+    case "Check":
+      return value ? "Yes" : "No";
+    case "Currency":
+      return Number(value).toLocaleString(void 0, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    case "Float":
+      return Number(value).toLocaleString(void 0, {
+        maximumFractionDigits: 4
+      });
+    case "Int":
+      return Number(value).toLocaleString();
+    case "Percent":
+      return `${Number(value).toFixed(1)}%`;
+    case "Rating":
+      return `${(Number(value) * 5).toFixed(1)} / 5`;
+    default:
+      return String(value);
+  }
+}
+function SimpleBarChart({
+  data,
+  height = 200
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const maxValue = (0, import_react.useMemo)(() => Math.max(...data.map(d => d.value), 1), [data]);
+  if (data.length === 0) return null;
+  const barWidth = 100 / Math.max(data.length, 1);
+  const padding = barWidth * 0.15;
+  const chartHeight = height - 30;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+    size: knobProps.sizeToken,
+    ...{
+      backgroundColor: import_componentColors.componentColors.surface.background
+    },
+    padding: "$2",
+    overflow: "hidden",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      height,
+      width: "100%",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("svg", {
+        width: "100%",
+        height: "100%",
+        viewBox: `0 0 100 ${height}`,
+        preserveAspectRatio: "none",
+        role: "img",
+        "aria-label": "Bar chart",
+        children: data.map((point, index) => {
+          const barHeight = point.value / maxValue * chartHeight;
+          const x = index * barWidth + padding;
+          const y = height - 30 - barHeight;
+          const color = defaultChartColors[index % defaultChartColors.length];
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("g", {
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
+              x: `${x}%`,
+              y,
+              width: `${barWidth - padding * 2}%`,
+              height: barHeight,
+              fill: color,
+              rx: "2"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("text", {
+              x: `${x + (barWidth - padding * 2) / 2}%`,
+              y: height - 8,
+              textAnchor: "middle",
+              fontSize: "7",
+              fill: "currentColor",
+              children: point.label.length > 10 ? `${point.label.slice(0, 10)}\u2026` : point.label
+            })]
+          }, `${point.label}-${index}`);
+        })
+      })
+    })
+  });
+}
+function ReportBuilder({
+  columns,
+  data,
+  groupBy: groupByProp,
+  onGroupByChange,
+  onColumnsChange,
+  onExport,
+  showChart = false,
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [enabledColumnSet, setEnabledColumnSet] = (0, import_react.useState)(() => new Set(columns.filter(c => c.enabled).map(c => c.fieldname)));
+  const enabledColumns = (0, import_react.useMemo)(() => columns.filter(c => enabledColumnSet.has(c.fieldname)), [columns, enabledColumnSet]);
+  const _numericColumns = (0, import_react.useMemo)(() => columns.filter(c => isNumericFieldType(c.fieldtype)), [columns]);
+  const _toggleColumn = (0, import_react.useCallback)(fieldname => {
+    setEnabledColumnSet(prev => {
+      const next = new Set(prev);
+      if (next.has(fieldname)) {
+        next.delete(fieldname);
+      } else {
+        next.add(fieldname);
+      }
+      onColumnsChange?.(Array.from(next));
+      return next;
+    });
+  }, [onColumnsChange]);
+  const [internalGroupBy, setInternalGroupBy] = (0, import_react.useState)(groupByProp ?? null);
+  const groupBy = groupByProp !== void 0 ? groupByProp : internalGroupBy;
+  const _handleGroupByChange = (0, import_react.useCallback)(config => {
+    setInternalGroupBy(config);
+    onGroupByChange?.(config);
+  }, [onGroupByChange]);
+  const [collapsedGroups, setCollapsedGroups] = (0, import_react.useState)(() => /* @__PURE__ */new Set());
+  const groupedData = (0, import_react.useMemo)(() => {
+    if (!groupBy) return null;
+    const groups = {};
+    for (const row of data) {
+      const key = String(row[groupBy.field] ?? "(empty)");
+      if (!groups[key]) {
+        groups[key] = {
+          rows: [],
+          aggregationValue: 0
+        };
+      }
+      groups[key].rows.push(row);
+    }
+    for (const group of Object.values(groups)) {
+      switch (groupBy.aggregation) {
+        case "count":
+          group.aggregationValue = group.rows.length;
+          break;
+        case "sum":
+          {
+            const field = groupBy.aggregationField;
+            group.aggregationValue = field ? group.rows.reduce((acc, row) => acc + (Number(row[field]) || 0), 0) : group.rows.length;
+            break;
+          }
+        case "avg":
+          {
+            const field = groupBy.aggregationField;
+            if (field && group.rows.length > 0) {
+              const sum = group.rows.reduce((acc, row) => acc + (Number(row[field]) || 0), 0);
+              group.aggregationValue = sum / group.rows.length;
+            }
+            break;
+          }
+        case "min":
+          {
+            const field = groupBy.aggregationField;
+            if (field && group.rows.length > 0) {
+              group.aggregationValue = Math.min(...group.rows.map(row => Number(row[field]) || 0));
+            }
+            break;
+          }
+        case "max":
+          {
+            const field = groupBy.aggregationField;
+            if (field && group.rows.length > 0) {
+              group.aggregationValue = Math.max(...group.rows.map(row => Number(row[field]) || 0));
+            }
+            break;
+          }
+      }
+    }
+    return groups;
+  }, [groupBy, data]);
+  const chartData = (0, import_react.useMemo)(() => {
+    if (!groupedData) return [];
+    return Object.entries(groupedData).map(([label, group]) => ({
+      label,
+      value: group.aggregationValue
+    }));
+  }, [groupedData]);
+  const [chartVisible, setChartVisible] = (0, import_react.useState)(false);
+  const toggleGroup = (0, import_react.useCallback)(groupKey => {
+    setCollapsedGroups(prev => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) {
+        next.delete(groupKey);
+      } else {
+        next.add(groupKey);
+      }
+      return next;
+    });
+  }, []);
+  const handleExport = (0, import_react.useCallback)(() => {
+    const exportData = data.map(row => {
+      const filtered = {};
+      for (const col of enabledColumns) {
+        filtered[col.fieldname] = row[col.fieldname];
+      }
+      return filtered;
+    });
+    onExport?.(exportData);
+  }, [data, enabledColumns, onExport]);
+  const renderHeaderRow = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    padding: "$2",
+    ...{
+      backgroundColor: import_componentColors.componentColors.surface.background
+    },
+    borderBottomWidth: 1,
+    borderBottomColor: "$borderColor",
+    children: enabledColumns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      flex: 1,
+      fontWeight: "600",
+      fontSize: "$2",
+      color: "$color",
+      paddingHorizontal: "$2",
+      numberOfLines: 1,
+      children: col.label
+    }, col.fieldname))
+  });
+  const renderDataRow = (row, index, isGrouped = false) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    padding: "$2",
+    borderBottomWidth: 1,
+    borderBottomColor: import_componentColors.componentColors.divider,
+    backgroundColor: index % 2 === 0 ? "$background" : {
+      backgroundColor: import_componentColors.componentColors.surface.background
+    }.backgroundColor,
+    hoverStyle: {
+      backgroundColor: import_componentColors.componentColors.surface.background
+    },
+    ...(isGrouped ? {
+      paddingLeft: knobProps.panelPadding.padding
+    } : {}),
+    children: enabledColumns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      flex: 1,
+      fontSize: "$2",
+      color: "$color",
+      paddingHorizontal: "$2",
+      numberOfLines: 1,
+      children: formatCellValue(row[col.fieldname], col.fieldtype)
+    }, col.fieldname))
+  }, `row-${String(row.name ?? index)}`);
+  const renderGroupedRows = () => {
+    if (!groupedData || !groupBy) return null;
+    const groupByCol = columns.find(c => c.fieldname === groupBy.field);
+    const aggLabel = aggregationLabels[groupBy.aggregation];
+    const aggFieldCol = groupBy.aggregationField ? columns.find(c => c.fieldname === groupBy.aggregationField) : null;
+    return Object.entries(groupedData).map(([groupKey, group]) => {
+      const isCollapsed = collapsedGroups.has(groupKey);
+      const aggDisplay = groupBy.aggregation === "count" ? `${aggLabel}: ${group.aggregationValue}` : `${aggLabel}(${aggFieldCol?.label ?? groupBy.aggregationField ?? ""}): ${Number.isInteger(group.aggregationValue) ? group.aggregationValue : group.aggregationValue.toFixed(2)}`;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          padding: "$2",
+          paddingHorizontal: knobProps.panelPadding.padding,
+          backgroundColor: import_componentColors.componentColors.interactive.background,
+          borderBottomWidth: 1,
+          borderBottomColor: "$borderColor",
+          alignItems: "center",
+          gap: "$2",
+          cursor: "pointer",
+          onPress: () => toggleGroup(groupKey),
+          hoverStyle: {
+            backgroundColor: import_componentColors.componentColors.interactive.hover
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$2",
+            children: isCollapsed ? "\u25B6" : "\u25BC"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontWeight: "600",
+            fontSize: "$2",
+            color: "$accentColor",
+            children: [groupByCol?.label ?? groupBy.field, ": ", groupKey]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontSize: "$2",
+            color: import_componentColors.componentColors.text.muted,
+            children: ["(", group.rows.length, " ", group.rows.length === 1 ? "record" : "records", ")"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            flex: 1
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontWeight: "500",
+            fontSize: "$2",
+            color: "$accentColor",
+            children: aggDisplay
+          })]
+        }), !isCollapsed && group.rows.map((row, index) => renderDataRow(row, index, true))]
+      }, groupKey);
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+      size: knobProps.sizeToken,
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.panelPadding,
+        ...knobProps.gap,
+        alignItems: "center",
+        flexWrap: "wrap",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          fontSize: "$2",
+          color: import_componentColors.componentColors.text.muted,
+          children: [enabledColumns.length, " / ", columns.length, " columns"]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          flex: 1
+        }), showChart && groupedData && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: "$2",
+          onPress: () => setChartVisible(v => !v),
+          theme: chartVisible ? "active" : void 0,
+          children: "Chart"
+        }), onExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: "$2",
+          onPress: handleExport,
+          children: "Export"
+        })]
+      })
+    }), chartVisible && groupedData && chartData.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleBarChart, {
+        data: chartData
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+      size: knobProps.sizeToken,
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          minWidth: "100%",
+          children: [renderHeaderRow(), groupBy && groupedData ? renderGroupedRows() : data.map((row, index) => renderDataRow(row, index)), data.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: import_componentColors.componentColors.text.muted,
+              fontSize: knobProps.sizeToken,
+              children: "No data to display"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}