@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/cjs/components/DataTableViewOptions/DataTableViewOptions.stories.cjs

@@ -1,436 +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 DataTableViewOptions_stories_exports = {};
-__export(DataTableViewOptions_stories_exports, {
-  AllOptionsCombined: () => AllOptionsCombined,
-  Default: () => Default,
-  DensityOptions: () => DensityOptions,
-  Disabled: () => Disabled,
-  ManyColumns: () => ManyColumns,
-  MinimalColumns: () => MinimalColumns,
-  WithPageSizeControls: () => WithPageSizeControls,
-  default: () => DataTableViewOptions_stories_default
-});
-module.exports = __toCommonJS(DataTableViewOptions_stories_exports);
-var import_storybook = require("@multiplatform.one/storybook");
-var import_react = __toESM(require("react"));
-var import_tamagui = require("tamagui");
-var import_index = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-const allColumns = [{
-  accessorKey: "name",
-  header: "Product Name"
-}, {
-  accessorKey: "category",
-  header: "Category"
-}, {
-  accessorKey: "price",
-  header: "Price",
-  cell: info => `$${info.getValue().toFixed(2)}`
-}, {
-  accessorKey: "stock",
-  header: "Stock"
-}, {
-  accessorKey: "status",
-  header: "Status"
-}, {
-  accessorKey: "rating",
-  header: "Rating"
-}, {
-  accessorKey: "weight",
-  header: "Weight (lbs)"
-}, {
-  accessorKey: "dimensions",
-  header: "Dimensions"
-}, {
-  accessorKey: "createdAt",
-  header: "Created",
-  cell: info => new Date(info.getValue()).toLocaleDateString()
-}, {
-  accessorKey: "description",
-  header: "Description"
-}, {
-  accessorKey: "tags",
-  header: "Tags",
-  cell: info => info.getValue().join(", ")
-}];
-const transformedColumns = allColumns.map((col, index) => ({
-  id: col.accessorKey,
-  label: col.header,
-  visible: true,
-  order: index,
-  canHide: true,
-  canResize: true,
-  canReorder: true
-}));
-var DataTableViewOptions_stories_default = {
-  title: "Table/DataTableViewOptions",
-  component: import_index.DataTableViewOptions,
-  parameters: {
-    docs: {
-      description: {
-        component: "A component for controlling table view options like column visibility, density, and page size."
-      }
-    }
-  }
-};
-const Default = () => {
-  const [columnVisibility, setColumnVisibility] = import_react.default.useState({});
-  const [density, _setDensity] = import_react.default.useState("comfortable");
-  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: "View Options Demo"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns,
-      onColumnVisibilityChange: (columnId, visible) => setColumnVisibility(prev => ({
-        ...prev,
-        [columnId]: visible
-      })),
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$4",
-      borderRadius: "$4",
-      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",
-          children: "Current Settings:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$gray11",
-          children: ["Density: ", density]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$gray11",
-          children: ["Visible Columns: ", Object.keys(columnVisibility).length || "All"]
-        })]
-      })
-    })]
-  });
-};
-Default.storyName = "Main";
-const WithPageSizeControls = () => {
-  const [pageSize, _setPageSize] = import_react.default.useState(10);
-  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: "With Page Size Controls"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns,
-      onColumnVisibilityChange: () => {},
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$3",
-      borderRadius: "$4",
-      backgroundColor: "$blue2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-        fontSize: "$3",
-        color: "$blue11",
-        children: ["Current page size: ", pageSize, " items per page"]
-      })
-    })]
-  });
-};
-const ManyColumns = () => {
-  const [_columnVisibility, setColumnVisibility] = import_react.default.useState({});
-  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: "Many Columns Example"
-    }), /* @__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: "Available Columns:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$2",
-          color: "$green11",
-          children: [transformedColumns.length, " total columns to manage visibility"]
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns,
-      onColumnVisibilityChange: (columnId, visible) => {
-        setColumnVisibility(prev => ({
-          ...prev,
-          [columnId]: visible
-        }));
-        (0, import_storybook.action)("column-visibility-changed")({
-          [columnId]: visible
-        });
-      },
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Toggle column visibility to customize your table view."
-    })]
-  });
-};
-const DensityOptions = () => {
-  const [density, _setDensity] = import_react.default.useState("comfortable");
-  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: "Density Options"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns.slice(0, 5),
-      onColumnVisibilityChange: () => {},
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$4",
-      borderRadius: "$4",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$3",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: "$3",
-          fontWeight: "500",
-          children: ["Current Density: ", density]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              style: {
-                width: 20,
-                height: density === "compact" ? 8 : density === "comfortable" ? 12 : 16,
-                backgroundColor: "var(--color-blue9)",
-                borderRadius: 2
-              }
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              color: "$gray11",
-              children: "Compact: Tighter row spacing"
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              style: {
-                width: 20,
-                height: density === "comfortable" ? 12 : 16,
-                backgroundColor: "var(--color-green9)",
-                borderRadius: 2
-              }
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              color: "$gray11",
-              children: "Comfortable: Balanced spacing"
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              style: {
-                width: 20,
-                height: 16,
-                backgroundColor: "var(--color-purple9)",
-                borderRadius: 2
-              }
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              color: "$gray11",
-              children: "Spacious: More generous row spacing"
-            })]
-          })]
-        })]
-      })
-    })]
-  });
-};
-const Disabled = () => {
-  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: "Disabled State"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns,
-      onColumnVisibilityChange: () => {},
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "View options are disabled and cannot be interacted with."
-    })]
-  });
-};
-const MinimalColumns = () => {
-  const minimalColumns = transformedColumns.slice(0, 3);
-  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: "Minimal Columns"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: minimalColumns,
-      onColumnVisibilityChange: () => {},
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$3",
-      color: "$gray11",
-      children: "Example with only a few columns to manage."
-    })]
-  });
-};
-const AllOptionsCombined = () => {
-  const [columnVisibility, setColumnVisibility] = import_react.default.useState({});
-  const [density, _setDensity] = import_react.default.useState("comfortable");
-  const [pageSize, _setPageSize] = import_react.default.useState(10);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$6",
-    padding: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$4",
-      fontWeight: "600",
-      children: "All View Options Combined"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
-      columns: transformedColumns,
-      onColumnVisibilityChange: (columnId, visible) => {
-        setColumnVisibility(prev => ({
-          ...prev,
-          [columnId]: visible
-        }));
-        (0, import_storybook.action)("column-visibility")({
-          [columnId]: visible
-        });
-      },
-      onColumnOrderChange: () => {},
-      onColumnSizingChange: () => {},
-      onSaveView: () => {},
-      onLoadView: () => {},
-      onResetToDefault: () => {}
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      padding: "$4",
-      borderRadius: "$4",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$3",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$3",
-          fontWeight: "500",
-          children: "Current Configuration:"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$4",
-          flexWrap: "wrap",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$1",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              fontWeight: "500",
-              color: "$gray12",
-              children: "Density"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              color: "$blue11",
-              children: density
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$1",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              fontWeight: "500",
-              color: "$gray12",
-              children: "Page Size"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              fontSize: "$3",
-              color: "$green11",
-              children: [pageSize, " items"]
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$1",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$2",
-              fontWeight: "500",
-              color: "$gray12",
-              children: "Visible Columns"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              fontSize: "$3",
-              color: "$purple11",
-              children: [Object.keys(columnVisibility).filter(key => columnVisibility[key]).length || transformedColumns.length, " ", "of ", transformedColumns.length]
-            })]
-          })]
-        })]
-      })
-    })]
-  });
-};