@multiplatform.one/table 6.0.0

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

@@ -0,0 +1,436 @@
+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]
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};