@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/cjs/components/DataTablePagination/DataTablePagination.stories.cjs

@@ -1,604 +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 DataTablePagination_stories_exports = {};
-__export(DataTablePagination_stories_exports, {
-  Accessibility: () => Accessibility,
-  Basic: () => Basic,
-  Compact: () => Compact,
-  CustomPageSizes: () => CustomPageSizes,
-  EdgeCases: () => EdgeCases,
-  ErrorStates: () => ErrorStates,
-  FirstPage: () => FirstPage,
-  InteractiveDemo: () => InteractiveDemo,
-  LargeDataSet: () => LargeDataSet,
-  LastPage: () => LastPage,
-  LoadingStates: () => LoadingStates,
-  MiddlePage: () => MiddlePage,
-  Minimal: () => Minimal,
-  NavigationDemo: () => NavigationDemo,
-  NoInfo: () => NoInfo,
-  NoPageJump: () => NoPageJump,
-  NoPageSizeSelector: () => NoPageSizeSelector,
-  PageJumpDemo: () => PageJumpDemo,
-  PageSizeDemo: () => PageSizeDemo,
-  Responsive: () => Responsive,
-  SinglePage: () => SinglePage,
-  SmallDataSet: () => SmallDataSet,
-  default: () => DataTablePagination_stories_default
-});
-module.exports = __toCommonJS(DataTablePagination_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__ = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-const meta = {
-  title: "Table/DataTablePagination",
-  component: import__.DataTablePagination,
-  parameters: {
-    docs: {
-      description: {
-        component: "A comprehensive pagination component for data tables with navigation controls, page size selection, and page jumping."
-      }
-    }
-  },
-  argTypes: {
-    pageSizeOptions: {
-      control: "object",
-      description: "Available page size options"
-    },
-    showInfo: {
-      control: "boolean",
-      description: "Whether to show pagination info"
-    },
-    showPageSizeSelector: {
-      control: "boolean",
-      description: "Whether to show page size selector"
-    },
-    showPageJump: {
-      control: "boolean",
-      description: "Whether to show page jump input"
-    },
-    compact: {
-      control: "boolean",
-      description: "Whether to use compact layout"
-    }
-  }
-};
-var DataTablePagination_stories_default = meta;
-const samplePagination = {
-  pageIndex: 0,
-  pageSize: 10,
-  totalCount: 150,
-  totalPages: 15
-};
-const Basic = {
-  name: "Main",
-  args: {
-    pagination: samplePagination,
-    onPaginationChange: (0, import_storybook.action)("onPaginationChange"),
-    pageSizeOptions: [10, 20, 50, 100],
-    showInfo: true,
-    showPageSizeSelector: true,
-    showPageJump: true,
-    compact: false
-  }
-};
-const Compact = {
-  args: {
-    ...Basic.args,
-    compact: true
-  }
-};
-const FirstPage = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      ...samplePagination,
-      pageIndex: 0
-    }
-  }
-};
-const MiddlePage = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      ...samplePagination,
-      pageIndex: 7
-    }
-  }
-};
-const LastPage = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      ...samplePagination,
-      pageIndex: 14
-    }
-  }
-};
-const NoInfo = {
-  args: {
-    ...Basic.args,
-    showInfo: false
-  }
-};
-const NoPageSizeSelector = {
-  args: {
-    ...Basic.args,
-    showPageSizeSelector: false
-  }
-};
-const NoPageJump = {
-  args: {
-    ...Basic.args,
-    showPageJump: false
-  }
-};
-const Minimal = {
-  args: {
-    ...Basic.args,
-    showInfo: false,
-    showPageSizeSelector: false,
-    showPageJump: false
-  }
-};
-const CustomPageSizes = {
-  args: {
-    ...Basic.args,
-    pageSizeOptions: [5, 15, 25, 50]
-  }
-};
-const LargeDataSet = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 50,
-      totalCount: 1250,
-      totalPages: 25
-    }
-  }
-};
-const SmallDataSet = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 10,
-      totalCount: 23,
-      totalPages: 3
-    }
-  }
-};
-const SinglePage = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 10,
-      totalCount: 5,
-      totalPages: 1
-    }
-  }
-};
-const InteractiveDemo = {
-  args: {
-    ...Basic.args
-  },
-  render: args => {
-    const InteractiveDemo2 = () => {
-      const [pagination, setPagination] = import_react.default.useState(samplePagination);
-      const handlePaginationChange = newPagination => {
-        setPagination({
-          ...pagination,
-          ...newPagination
-        });
-        (0, import_storybook.action)("onPaginationChange")(newPagination);
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-          ...args,
-          pagination,
-          onPaginationChange: handlePaginationChange
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          padding: "$4",
-          backgroundColor: "$gray2",
-          borderRadius: "$4",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Current State:"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            marginTop: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              children: ["Page: ", pagination.pageIndex + 1, " of ", pagination.totalPages]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              children: ["Page Size: ", pagination.pageSize]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              children: ["Total Items: ", pagination.totalCount]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              children: ["Showing: ", pagination.pageIndex * pagination.pageSize + 1, " -", " ", Math.min((pagination.pageIndex + 1) * pagination.pageSize, pagination.totalCount || 0)]
-            })]
-          })]
-        })]
-      });
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveDemo2, {});
-  }
-};
-const NavigationDemo = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      ...samplePagination,
-      pageIndex: 5
-    }
-  },
-  render: args => {
-    const NavigationDemo2 = () => {
-      const [pagination, setPagination] = import_react.default.useState({
-        ...samplePagination,
-        pageIndex: 5
-      });
-      const handlePaginationChange = newPagination => {
-        setPagination({
-          ...pagination,
-          ...newPagination
-        });
-        (0, import_storybook.action)("onPaginationChange")(newPagination);
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-          ...args,
-          pagination,
-          onPaginationChange: handlePaginationChange
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-          style: {
-            padding: "16px",
-            background: "#e8f4fd",
-            borderRadius: "4px"
-          },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Navigation Controls:"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
-            marginTop: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => handlePaginationChange({
-                pageIndex: 0,
-                pageSize: pagination.pageSize
-              }),
-              size: "$2",
-              padding: "$1",
-              children: "First"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => handlePaginationChange({
-                pageIndex: Math.max(0, pagination.pageIndex - 1),
-                pageSize: pagination.pageSize
-              }),
-              size: "$2",
-              padding: "$1",
-              children: "Previous"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => handlePaginationChange({
-                pageIndex: Math.min((pagination.totalPages || 1) - 1, pagination.pageIndex + 1),
-                pageSize: pagination.pageSize
-              }),
-              size: "$2",
-              padding: "$1",
-              children: "Next"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => handlePaginationChange({
-                pageIndex: (pagination.totalPages || 1) - 1,
-                pageSize: pagination.pageSize
-              }),
-              size: "$2",
-              padding: "$1",
-              children: "Last"
-            })]
-          })]
-        })]
-      });
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(NavigationDemo2, {});
-  }
-};
-const PageSizeDemo = {
-  args: {
-    ...Basic.args
-  },
-  render: args => {
-    const PageSizeDemo2 = () => {
-      const [pagination, setPagination] = import_react.default.useState(samplePagination);
-      const handlePaginationChange = newPagination => {
-        setPagination({
-          ...pagination,
-          ...newPagination
-        });
-        (0, import_storybook.action)("onPaginationChange")(newPagination);
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-          ...args,
-          pagination,
-          onPaginationChange: handlePaginationChange
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-          style: {
-            padding: "16px",
-            background: "#f0f9ff",
-            borderRadius: "4px"
-          },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Page Size Options:"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-            gap: "$2",
-            marginTop: "$2",
-            children: [5, 10, 20, 50, 100].map(size => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => handlePaginationChange({
-                pageIndex: 0,
-                pageSize: size
-              }),
-              size: "$2",
-              ...{
-                padding: "$1",
-                backgroundColor: pagination.pageSize === size ? "$blue10" : "$gray2",
-                color: pagination.pageSize === size ? "white" : "$gray12",
-                borderWidth: 1,
-                borderColor: "$gray6",
-                borderRadius: "$2"
-              },
-              children: size
-            }, size))
-          })]
-        })]
-      });
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PageSizeDemo2, {});
-  }
-};
-const PageJumpDemo = {
-  args: {
-    ...Basic.args
-  },
-  render: args => {
-    const PageJumpDemo2 = () => {
-      const [pagination, setPagination] = import_react.default.useState({
-        ...samplePagination,
-        pageIndex: 5
-      });
-      const handlePaginationChange = newPagination => {
-        setPagination({
-          ...pagination,
-          ...newPagination
-        });
-        (0, import_storybook.action)("onPaginationChange")(newPagination);
-      };
-      const handlePageJump = pageNumber => {
-        const page = Number.parseInt(pageNumber, 10) - 1;
-        if (!Number.isNaN(page) && page >= 0 && page < (pagination.totalPages || 1)) {
-          handlePaginationChange({
-            pageIndex: page,
-            pageSize: pagination.pageSize
-          });
-        }
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-          ...args,
-          pagination,
-          onPaginationChange: handlePaginationChange
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-          style: {
-            padding: "16px",
-            background: "#fff3cd",
-            borderRadius: "4px"
-          },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Page Jump:"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
-            marginTop: "$2",
-            alignItems: "center",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              children: "Go to page:"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
-              keyboardType: "numeric",
-              placeholder: `1-${pagination.totalPages}`,
-              onSubmitEditing: e => {
-                handlePageJump(e.nativeEvent.text);
-              },
-              padding: "$1",
-              width: 80
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              onPress: () => {
-                handlePageJump("1");
-              },
-              size: "$2",
-              padding: "$1",
-              children: "Go"
-            })]
-          })]
-        })]
-      });
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PageJumpDemo2, {});
-  }
-};
-const Responsive = {
-  args: {
-    ...Basic.args
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: "mobile1"
-    }
-  }
-};
-const Accessibility = {
-  args: {
-    ...Basic.args
-  },
-  render: args => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-      ...args
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      style: {
-        marginTop: "20px",
-        padding: "16px",
-        background: "#f8f9fa",
-        borderRadius: "4px"
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$5",
-        fontWeight: "600",
-        children: "Accessibility Features:"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        marginLeft: "$5",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Navigation buttons have proper ARIA labels"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Page size selector is keyboard accessible"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Page jump input has proper labeling"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Screen reader announcements for page changes"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Focus management between controls"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Proper semantic markup for pagination info"
-        })]
-      })]
-    })]
-  })
-};
-const LoadingStates = {
-  args: {
-    ...Basic.args
-  },
-  render: args => {
-    const LoadingDemo = () => {
-      const [isLoading, setIsLoading] = import_react.default.useState(false);
-      const handlePaginationChange = newPagination => {
-        setIsLoading(true);
-        setTimeout(() => setIsLoading(false), 1e3);
-        (0, import_storybook.action)("onPaginationChange")(newPagination);
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-          ...args,
-          onPaginationChange: handlePaginationChange
-        }), isLoading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          style: {
-            marginTop: "10px",
-            fontSize: "14px",
-            color: "#666"
-          },
-          children: "\u{1F504} Loading page data..."
-        })]
-      });
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LoadingDemo, {});
-  }
-};
-const ErrorStates = {
-  args: {
-    ...Basic.args
-  },
-  render: args => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-      ...args
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      style: {
-        marginTop: "10px",
-        padding: "8px",
-        background: "#fee",
-        border: "1px solid #fcc",
-        borderRadius: "4px",
-        color: "#c33"
-      },
-      children: "Error: Unable to load page data. Please try again."
-    })]
-  })
-};
-const EdgeCases = {
-  args: {
-    ...Basic.args,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 10,
-      totalCount: 0,
-      totalPages: 0
-    }
-  },
-  render: args => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      padding: "$4",
-      backgroundColor: "$gray1",
-      borderRadius: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$5",
-        fontWeight: "600",
-        children: "Edge Cases:"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        marginLeft: "$5",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Empty data (0 total items)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Single page scenarios"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Large datasets (1000+ pages)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Custom page sizes"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          children: "\u2022 Invalid page navigation attempts"
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.DataTablePagination, {
-      ...args
-    })]
-  })
-};