@multiplatform.one/table 6.1.0 → 6.4.0

package/dist/cjs/components/DataTableGrouping/DataTableGrouping.stories.cjs

@@ -1,523 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var DataTableGrouping_stories_exports = {};
-__export(DataTableGrouping_stories_exports, {
-  BasicGrouping: () => BasicGrouping,
-  ComprehensiveAggregations: () => ComprehensiveAggregations,
-  CustomGroupFooters: () => CustomGroupFooters,
-  CustomGroupHeaders: () => CustomGroupHeaders,
-  MultiLevelGrouping: () => MultiLevelGrouping,
-  PerformanceTest: () => PerformanceTest,
-  WithAggregations: () => WithAggregations,
-  WithGroupingControls: () => WithGroupingControls,
-  default: () => DataTableGrouping_stories_default
-});
-module.exports = __toCommonJS(DataTableGrouping_stories_exports);
-var import_storybook = require("@multiplatform.one/storybook");
-var import_react = __toESM(require("react"));
-var import_forms = require("@multiplatform.one/forms");
-var import_tamagui = require("tamagui");
-var import_index = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-const salesData = [{
-  id: "1",
-  region: "North America",
-  category: "Electronics",
-  salesperson: "Alice",
-  quantity: 5,
-  unitPrice: 1200,
-  totalRevenue: 6e3,
-  date: "2024-01-15"
-}, {
-  id: "2",
-  region: "North America",
-  category: "Furniture",
-  salesperson: "Alice",
-  quantity: 10,
-  unitPrice: 300,
-  totalRevenue: 3e3,
-  date: "2024-01-16"
-}, {
-  id: "3",
-  region: "North America",
-  category: "Electronics",
-  salesperson: "Bob",
-  quantity: 8,
-  unitPrice: 800,
-  totalRevenue: 6400,
-  date: "2024-01-17"
-}, {
-  id: "4",
-  region: "Europe",
-  category: "Electronics",
-  salesperson: "Claire",
-  quantity: 12,
-  unitPrice: 1e3,
-  totalRevenue: 12e3,
-  date: "2024-01-15"
-}, {
-  id: "5",
-  region: "Europe",
-  category: "Furniture",
-  salesperson: "David",
-  quantity: 6,
-  unitPrice: 500,
-  totalRevenue: 3e3,
-  date: "2024-01-18"
-}, {
-  id: "6",
-  region: "Asia Pacific",
-  category: "Electronics",
-  salesperson: "Eva",
-  quantity: 15,
-  unitPrice: 900,
-  totalRevenue: 13500,
-  date: "2024-01-20"
-}];
-const columns = [{
-  accessorKey: "region",
-  header: "Region"
-}, {
-  accessorKey: "category",
-  header: "Category"
-}, {
-  accessorKey: "salesperson",
-  header: "Salesperson"
-}, {
-  accessorKey: "quantity",
-  header: "Quantity"
-}, {
-  accessorKey: "totalRevenue",
-  header: "Revenue",
-  cell: info => `$${info.getValue().toLocaleString()}`
-}, {
-  accessorKey: "date",
-  header: "Date"
-}];
-var DataTableGrouping_stories_default = {
-  title: "Table/DataTableGrouping",
-  component: import_index.DataTableGrouping,
-  parameters: {
-    docs: {
-      description: {
-        component: "A data table component with advanced grouping and aggregation capabilities."
-      }
-    }
-  }
-};
-const BasicGrouping = () => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Basic Grouping by Region"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region"]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Data is grouped by region with default expand/collapse functionality."
-    })]
-  });
-};
-BasicGrouping.storyName = "Main";
-const MultiLevelGrouping = () => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Multi-Level Grouping"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region", "category"]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Hierarchical grouping by region, then by category within each region."
-    })]
-  });
-};
-const WithAggregations = () => {
-  const aggregations = [{
-    column: "totalRevenue",
-    function: "sum",
-    label: "Total Revenue"
-  }, {
-    column: "quantity",
-    function: "sum",
-    label: "Total Quantity"
-  }, {
-    column: "totalRevenue",
-    function: "avg",
-    label: "Average Revenue"
-  }];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Grouping with Aggregations"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region"],
-      aggregations
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$3",
-      borderRadius: "$4",
-      backgroundColor: "$blue2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$3",
-          fontWeight: "500",
-          color: "$blue11",
-          children: "Aggregations:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$blue11",
-          children: "\u2022 Sum: Total of all values"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$blue11",
-          children: "\u2022 Average: Mean of all values"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$blue11",
-          children: "\u2022 Count: Number of items"
-        })]
-      })
-    })]
-  });
-};
-const ComprehensiveAggregations = () => {
-  const aggregations = [{
-    column: "totalRevenue",
-    function: "sum",
-    label: "Total Revenue"
-  }, {
-    column: "totalRevenue",
-    function: "avg",
-    label: "Average Revenue"
-  }, {
-    column: "totalRevenue",
-    function: "min",
-    label: "Min Revenue"
-  }, {
-    column: "totalRevenue",
-    function: "max",
-    label: "Max Revenue"
-  }, {
-    column: "quantity",
-    function: "count",
-    label: "Item Count"
-  }];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Comprehensive Aggregations"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region", "category"],
-      aggregations
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Multiple aggregation functions applied to grouped data."
-    })]
-  });
-};
-const CustomGroupHeaders = () => {
-  const renderGroupHeader = (group, level) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    padding: "$3",
-    backgroundColor: level === 0 ? "$blue2" : level === 1 ? "$green2" : "$yellow2",
-    borderRadius: "$2",
-    marginBottom: "$1",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$4",
-          fontWeight: "600",
-          children: group.key
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$gray11",
-          children: ["Level ", level + 1, " \u2022 ", group.count, " items"]
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-        fontSize: "$3",
-        fontWeight: "500",
-        color: "$blue11",
-        children: ["$", group.aggregations?.totalRevenue?.sum?.toLocaleString() || 0]
-      })]
-    })
-  });
-  const aggregations = [{
-    column: "totalRevenue",
-    function: "sum"
-  }];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Custom Group Headers"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region", "category"],
-      aggregations,
-      renderGroupHeader
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Custom styled group headers with additional information."
-    })]
-  });
-};
-const CustomGroupFooters = () => {
-  const renderGroupFooter = (group, _level) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    padding: "$2",
-    backgroundColor: "$gray2",
-    borderRadius: "$2",
-    marginTop: "$1",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-      fontSize: "$2",
-      color: "$gray11",
-      textAlign: "center",
-      children: ["End of ", group.key, " group \u2022 ", group.count, " total items"]
-    })
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Custom Group Footers"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: ["region"],
-      renderGroupFooter
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Custom footer content for each group."
-    })]
-  });
-};
-const WithGroupingControls = () => {
-  const [groupingConfig, setGroupingConfig] = import_react.default.useState({
-    columns: ["region"],
-    aggregations: [{
-      column: "totalRevenue",
-      function: "sum",
-      label: "Total Revenue"
-    }]
-  });
-  const handleGroupingChange = config => {
-    setGroupingConfig(config);
-    (0, import_storybook.action)("grouping-changed")(config);
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Interactive Grouping Controls"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$3",
-      flexWrap: "wrap",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: "$3",
-        variant: "outlined",
-        onPress: () => setGroupingConfig({
-          columns: ["region"],
-          aggregations: [{
-            column: "totalRevenue",
-            function: "sum"
-          }]
-        }),
-        children: "Group by Region"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: "$3",
-        variant: "outlined",
-        onPress: () => setGroupingConfig({
-          columns: ["category"],
-          aggregations: [{
-            column: "quantity",
-            function: "count"
-          }]
-        }),
-        children: "Group by Category"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: "$3",
-        variant: "outlined",
-        onPress: () => setGroupingConfig({
-          columns: ["region", "category"],
-          aggregations: [{
-            column: "totalRevenue",
-            function: "sum"
-          }, {
-            column: "quantity",
-            function: "sum"
-          }]
-        }),
-        children: "Multi-Level Grouping"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: "$3",
-        variant: "outlined",
-        onPress: () => setGroupingConfig({
-          columns: [],
-          aggregations: []
-        }),
-        children: "Clear Grouping"
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: salesData,
-      columns,
-      groupBy: groupingConfig.columns,
-      aggregations: groupingConfig.aggregations,
-      onGroupingChange: handleGroupingChange
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$3",
-      borderRadius: "$4",
-      backgroundColor: "$green2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$3",
-          fontWeight: "500",
-          color: "$green11",
-          children: "Current Grouping:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$green11",
-          children: ["Columns: ", groupingConfig.columns.join(", ") || "None"]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$green11",
-          children: ["Aggregations: ", groupingConfig.aggregations.length]
-        })]
-      })
-    })]
-  });
-};
-const PerformanceTest = () => {
-  const largeDataset = Array.from({
-    length: 1e3
-  }, (_, i) => ({
-    id: `item-${i + 1}`,
-    region: ["North America", "Europe", "Asia Pacific", "South America"][i % 4],
-    category: ["Electronics", "Furniture", "Appliances", "Books"][i % 4],
-    salesperson: `Person ${i % 10 + 1}`,
-    quantity: Math.floor(Math.random() * 20) + 1,
-    unitPrice: Math.floor(Math.random() * 1e3) + 100,
-    totalRevenue: 0,
-    // Will be calculated
-    date: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0]
-  })).map(item => ({
-    ...item,
-    totalRevenue: item.quantity * item.unitPrice
-  }));
-  const aggregations = [{
-    column: "totalRevenue",
-    function: "sum",
-    label: "Total Revenue"
-  }, {
-    column: "quantity",
-    function: "count",
-    label: "Item Count"
-  }];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "Performance Test (1000 items)"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$3",
-      borderRadius: "$4",
-      backgroundColor: "$orange2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$3",
-          fontWeight: "500",
-          color: "$orange11",
-          children: "Dataset Information:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$orange11",
-          children: ["\u2022 Total records: ", largeDataset.length]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$orange11",
-          children: "\u2022 Regions: North America, Europe, Asia Pacific, South America"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$orange11",
-          children: "\u2022 Categories: Electronics, Furniture, Appliances, Books"
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableGrouping, {
-      data: largeDataset,
-      columns,
-      groupBy: ["region", "category"],
-      aggregations
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Test performance with large datasets and complex grouping."
-    })]
-  });
-};