@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/cjs/components/DataTableColumnPinning/DataTableColumnPinning.stories.cjs

@@ -1,486 +0,0 @@
-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 DataTableColumnPinning_stories_exports = {};
-__export(DataTableColumnPinning_stories_exports, {
-  Advanced: () => Advanced,
-  Basic: () => Basic,
-  DisabledPinning: () => DisabledPinning,
-  MaxPinnedColumns: () => MaxPinnedColumns,
-  default: () => DataTableColumnPinning_stories_default
-});
-module.exports = __toCommonJS(DataTableColumnPinning_stories_exports);
-var import_storybook = require("@multiplatform.one/storybook");
-var import_react = require("@phosphor-icons/react");
-var import_react_table = require("@tanstack/react-table");
-var import_react2 = 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 generateData = count => {
-  const departments = ["Engineering", "Sales", "Marketing", "HR", "Finance"];
-  const roles = ["Manager", "Senior", "Junior", "Lead", "Intern"];
-  const statuses = ["active", "inactive", "pending"];
-  return Array.from({
-    length: count
-  }, (_, i) => ({
-    id: i + 1,
-    firstName: `First${i + 1}`,
-    lastName: `Last${i + 1}`,
-    email: `user${i + 1}@example.com`,
-    department: departments[i % departments.length],
-    role: roles[i % roles.length],
-    salary: 5e4 + Math.floor(Math.random() * 1e5),
-    startDate: new Date(2020 + i % 4, i % 12, i % 28 + 1).toISOString().split("T")[0],
-    status: statuses[i % statuses.length],
-    performance: Math.floor(Math.random() * 100)
-  }));
-};
-const defaultData = generateData(50);
-const columnHelper = (0, import_react_table.createColumnHelper)();
-const defaultColumns = [columnHelper.accessor("id", {
-  header: "ID",
-  cell: info => info.getValue(),
-  size: 60
-}), columnHelper.accessor("firstName", {
-  header: "First Name",
-  cell: info => info.getValue()
-}), columnHelper.accessor("lastName", {
-  header: "Last Name",
-  cell: info => info.getValue()
-}), columnHelper.accessor("email", {
-  header: "Email",
-  cell: info => info.getValue(),
-  size: 200
-}), columnHelper.accessor("department", {
-  header: "Department",
-  cell: info => info.getValue()
-}), columnHelper.accessor("role", {
-  header: "Role",
-  cell: info => info.getValue()
-}), columnHelper.accessor("salary", {
-  header: "Salary",
-  cell: info => `$${info.getValue().toLocaleString()}`
-}), columnHelper.accessor("startDate", {
-  header: "Start Date",
-  cell: info => info.getValue()
-}), columnHelper.accessor("status", {
-  header: "Status",
-  cell: info => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-    color: info.getValue() === "active" ? "$green10" : info.getValue() === "inactive" ? "$red10" : "$yellow10",
-    children: info.getValue()
-  })
-}), columnHelper.accessor("performance", {
-  header: "Performance",
-  cell: info => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    alignItems: "center",
-    gap: "$2",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      backgroundColor: "$gray5",
-      height: 8,
-      flex: 1,
-      borderRadius: "$2",
-      overflow: "hidden",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        backgroundColor: info.getValue() > 70 ? "$green10" : info.getValue() > 40 ? "$yellow10" : "$red10",
-        height: "100%",
-        width: `${info.getValue()}%`
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-      fontSize: "$1",
-      children: [info.getValue(), "%"]
-    })]
-  })
-})];
-const meta = {
-  title: "Table/DataTableColumnPinning",
-  component: import_index.DataTableColumnPinning,
-  parameters: {
-    layout: "fullscreen"
-  }
-};
-var DataTableColumnPinning_stories_default = meta;
-function BasicPinningExample() {
-  const [data] = (0, import_react2.useState)(defaultData);
-  const table = (0, import_react_table.useReactTable)({
-    data,
-    columns: defaultColumns,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    columnResizeMode: "onChange"
-  });
-  const pinning = (0, import_index.DataTableColumnPinning)({
-    table,
-    onPinChange: (0, import_storybook.action)("onPinChange")
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    padding: "$4",
-    gap: "$4",
-    height: "100vh",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-          children: "Column Pinning Example"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-          children: "Click the pin icons to pin/unpin columns to left or right"
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        padding: "$4",
-        gap: "$2",
-        flexWrap: "wrap",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          children: ["Pinned Left: ", pinning.pinnedLeftColumns.length]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "|"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          children: ["Pinned Right: ", pinning.pinnedRightColumns.length]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "|"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          children: ["Scrollable: ", pinning.scrollableColumns.length]
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          borderBottomWidth: 1,
-          borderColor: "$borderColor",
-          children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-            children: headerGroup.headers.map(header => {
-              const isPinned = pinning.isPinned(header.column.id);
-              const position = pinning.getPinPosition(header.column.id);
-              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-                width: header.getSize(),
-                padding: "$2",
-                borderRightWidth: 1,
-                borderColor: "$borderColor",
-                backgroundColor: isPinned ? "$gray3" : "$background",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    fontWeight: "bold",
-                    children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                    gap: "$1",
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                      size: "$1",
-                      icon: isPinned && position === "left" ? import_react.PushPinSlashIcon : import_react.PushPinIcon,
-                      onPress: () => pinning.togglePin(header.column.id, "left"),
-                      disabled: !isPinned && position !== "left" && !pinning.canPin("left"),
-                      circular: true,
-                      variant: position === "left" ? "outlined" : void 0
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                      size: "$1",
-                      icon: isPinned && position === "right" ? import_react.PushPinSlashIcon : import_react.PushPinIcon,
-                      onPress: () => pinning.togglePin(header.column.id, "right"),
-                      disabled: !isPinned && position !== "right" && !pinning.canPin("right"),
-                      circular: true,
-                      variant: position === "right" ? "outlined" : void 0
-                    })]
-                  })]
-                }), isPinned && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                  fontSize: "$1",
-                  color: "$gray10",
-                  children: ["Pinned: ", position]
-                })]
-              }, header.id);
-            })
-          }, headerGroup.id))
-        }), table.getRowModel().rows.slice(0, 10).map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          borderBottomWidth: 1,
-          borderColor: "$borderColor",
-          children: row.getVisibleCells().map(cell => {
-            const isPinned = pinning.isPinned(cell.column.id);
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: cell.column.getSize(),
-              padding: "$2",
-              borderRightWidth: 1,
-              borderColor: "$borderColor",
-              backgroundColor: isPinned ? "$gray2" : "$background",
-              children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-            }, cell.id);
-          })
-        }, row.id))]
-      })
-    })]
-  });
-}
-const Basic = {
-  name: "Main",
-  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(BasicPinningExample, {})
-};
-function AdvancedPinningExample() {
-  const [data] = (0, import_react2.useState)(defaultData);
-  const table = (0, import_react_table.useReactTable)({
-    data,
-    columns: defaultColumns,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)()
-  });
-  const {
-    pinnedState,
-    pinColumn,
-    unpinColumn,
-    resetPinning
-  } = (0, import_index.useColumnPinning)(table, {
-    maxPinnedColumns: 3,
-    initialPinnedColumns: {
-      left: ["id", "firstName"],
-      right: ["status"]
-    }
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    padding: "$4",
-    gap: "$4",
-    height: "100vh",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-          children: "Advanced Column Pinning"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-          children: "Using the useColumnPinning hook with initial pinned columns"
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        padding: "$4",
-        gap: "$2",
-        alignItems: "center",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          icon: import_react.ArrowCounterClockwiseIcon,
-          onPress: resetPinning,
-          size: "$3",
-          children: "Reset Pinning"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-          vertical: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            fontSize: "$2",
-            children: ["Left: ", pinnedState.left.join(", ") || "None"]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            fontSize: "$2",
-            children: ["Right: ", pinnedState.right.join(", ") || "None"]
-          })]
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      flex: 1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          minWidth: "100%",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-            backgroundColor: "$gray3",
-            borderBottomWidth: 2,
-            borderColor: "$borderColor",
-            children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-              children: headerGroup.headers.map(header => {
-                const isPinnedLeft = pinnedState.left.includes(header.column.id);
-                const isPinnedRight = pinnedState.right.includes(header.column.id);
-                const isPinned = isPinnedLeft || isPinnedRight;
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  width: header.getSize(),
-                  padding: "$3",
-                  borderRightWidth: 1,
-                  borderColor: "$borderColor",
-                  backgroundColor: isPinnedLeft ? "$blue3" : isPinnedRight ? "$purple3" : "$gray3",
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                    gap: "$1",
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                      fontWeight: "bold",
-                      fontSize: "$3",
-                      children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                      gap: "$1",
-                      children: [!isPinnedLeft && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                        size: "$1",
-                        onPress: () => pinColumn(header.column.id, "left"),
-                        disabled: pinnedState.left.length >= 3,
-                        ...{
-                          fontSize: "$1"
-                        },
-                        children: "Pin Left"
-                      }), !isPinnedRight && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                        size: "$1",
-                        onPress: () => pinColumn(header.column.id, "right"),
-                        disabled: pinnedState.right.length >= 3,
-                        ...{
-                          fontSize: "$1"
-                        },
-                        children: "Pin Right"
-                      }), isPinned && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                        size: "$1",
-                        onPress: () => unpinColumn(header.column.id),
-                        ...{
-                          fontSize: "$1",
-                          color: "$red10"
-                        },
-                        children: "Unpin"
-                      })]
-                    })]
-                  })
-                }, header.id);
-              })
-            }, headerGroup.id))
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-            maxHeight: 400,
-            children: table.getRowModel().rows.map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-              borderBottomWidth: 1,
-              borderColor: "$borderColor",
-              hoverStyle: {
-                backgroundColor: "$gray2"
-              },
-              children: row.getVisibleCells().map(cell => {
-                const isPinnedLeft = pinnedState.left.includes(cell.column.id);
-                const isPinnedRight = pinnedState.right.includes(cell.column.id);
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  width: cell.column.getSize(),
-                  padding: "$2",
-                  borderRightWidth: 1,
-                  borderColor: "$borderColor",
-                  backgroundColor: isPinnedLeft ? "$blue1" : isPinnedRight ? "$purple1" : "$background",
-                  children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-                }, cell.id);
-              })
-            }, row.id))
-          })]
-        })
-      })
-    })]
-  });
-}
-const Advanced = {
-  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdvancedPinningExample, {})
-};
-const MaxPinnedColumns = {
-  render: () => {
-    const [data] = (0, import_react2.useState)(defaultData.slice(0, 10));
-    const table = (0, import_react_table.useReactTable)({
-      data,
-      columns: defaultColumns.slice(0, 6),
-      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
-    });
-    const pinning = (0, import_index.DataTableColumnPinning)({
-      table,
-      maxPinnedColumns: 2,
-      onPinChange: (0, import_storybook.action)("onPinChange")
-    });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      padding: "$4",
-      gap: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-            children: "Max Pinned Columns (Limited to 2)"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-            children: "Only 2 columns can be pinned at a time"
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          padding: "$4",
-          gap: "$2",
-          children: table.getAllColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "$2",
-            borderRadius: "$2",
-            backgroundColor: pinning.isPinned(column.id) ? "$blue3" : "$gray2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              children: column.id
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                size: "$2",
-                onPress: () => pinning.togglePin(column.id, "left"),
-                disabled: !pinning.isPinned(column.id) && !pinning.canPin("left"),
-                variant: pinning.getPinPosition(column.id) === "left" ? "outlined" : void 0,
-                children: pinning.getPinPosition(column.id) === "left" ? "Unpin" : "Pin Left"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                size: "$2",
-                onPress: () => pinning.togglePin(column.id, "right"),
-                disabled: !pinning.isPinned(column.id) && !pinning.canPin("right"),
-                variant: pinning.getPinPosition(column.id) === "right" ? "outlined" : void 0,
-                children: pinning.getPinPosition(column.id) === "right" ? "Unpin" : "Pin Right"
-              })]
-            })]
-          }, column.id))
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          padding: "$4",
-          gap: "$4",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            children: ["Left: ", pinning.pinnedLeftColumns.length, "/2"]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            children: ["Right: ", pinning.pinnedRightColumns.length, "/2"]
-          })]
-        })]
-      })]
-    });
-  }
-};
-const DisabledPinning = {
-  render: () => {
-    const [data] = (0, import_react2.useState)(defaultData.slice(0, 5));
-    const table = (0, import_react_table.useReactTable)({
-      data,
-      columns: defaultColumns.slice(0, 4),
-      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
-    });
-    const pinning = (0, import_index.DataTableColumnPinning)({
-      table,
-      allowPinning: false
-    });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      padding: "$4",
-      gap: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-            children: "Disabled Column Pinning"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-            children: "Column pinning is disabled in this example"
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          padding: "$4",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: "$gray10",
-            children: "Pin buttons are not rendered when allowPinning is false"
-          }), table.getAllColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "$3",
-            borderBottomWidth: 1,
-            borderColor: "$borderColor",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              children: column.id
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
-              columnId: column.id
-            })]
-          }, column.id))]
-        })
-      })]
-    });
-  }
-};