@multiplatform.one/table 6.0.0

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

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