@dust-tt/sparkle 0.2.225 → 0.2.226

package/src/stories/DataTable.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta } from "@storybook/react";
-import { ColumnDef } from "@tanstack/react-table";
-import React from "react";
+import { ColumnDef, PaginationState } from "@tanstack/react-table";
+import React, { useMemo } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
+import { Input } from "@sparkle/components/Input";
 
 import { DataTable, FolderIcon } from "../index_with_tw_base";
 
@@ -28,141 +29,210 @@ type Data = {
   roundedAvatar?: boolean;
 };
 
+const data: Data[] = [
+  {
+    name: "Soupinou with tooltip on avatar",
+    usedBy: 100,
+    addedBy: "User1",
+    lastUpdated: "July 8, 2023",
+    size: "32kb",
+    avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
+    avatarTooltipLabel: "Meow",
+    roundedAvatar: true,
+    onClick: () => console.log("hehe"),
+  },
+  {
+    name: "Marketing",
+    description: "(23 items)",
+    usedBy: 8,
+    addedBy: "User1",
+    lastUpdated: "July 8, 2023",
+    size: "32kb",
+    avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+    roundedAvatar: true,
+    onClick: () => alert("Marketing clicked"),
+  },
+  {
+    name: "Design",
+    usedBy: 2,
+    addedBy: "User2",
+    lastUpdated: "2023-07-09",
+    size: "64kb",
+    icon: FolderIcon,
+    moreMenuItems: [
+      {
+        label: "Edit (disabled)",
+        onClick: () => alert("Design menu clicked"),
+        disabled: true,
+      },
+    ],
+    onClick: () => alert("Design clicked"),
+  },
+  {
+    name: "design",
+    usedBy: 3,
+    addedBy: "User21",
+    lastUpdated: "2023-07-09",
+    size: "64kb",
+    icon: FolderIcon,
+    moreMenuItems: [
+      {
+        label: "Edit",
+        onClick: () => alert("Design menu clicked"),
+      },
+    ],
+  },
+  {
+    name: "Development",
+    usedBy: 5,
+    addedBy: "User3",
+    lastUpdated: "2023-07-07",
+    size: "128kb",
+  },
+  {
+    name: "Sales",
+    usedBy: 10,
+    addedBy: "User4",
+    lastUpdated: "2023-07-10",
+    size: "16kb",
+  },
+  {
+    name: "HR",
+    usedBy: 3,
+    addedBy: "User5",
+    lastUpdated: "2023-07-06",
+    size: "48kb",
+  },
+];
+
+const columns: ColumnDef<Data>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+    sortingFn: "text",
+    cell: (info) => (
+      <DataTable.CellContent
+        avatarUrl={info.row.original.avatarUrl}
+        avatarTooltipLabel={info.row.original.avatarTooltipLabel}
+        icon={info.row.original.icon}
+        description={info.row.original.description}
+        roundedAvatar={info.row.original.roundedAvatar}
+      >
+        {info.row.original.name}
+      </DataTable.CellContent>
+    ),
+  },
+  {
+    accessorKey: "usedBy",
+    header: "Used by",
+    cell: (info) => (
+      <DataTable.CellContent>{info.row.original.usedBy}</DataTable.CellContent>
+    ),
+  },
+  {
+    accessorKey: "addedBy",
+    header: "Added by",
+    cell: (info) => (
+      <DataTable.CellContent>{info.row.original.addedBy}</DataTable.CellContent>
+    ),
+  },
+  {
+    accessorKey: "lastUpdated",
+    header: "Last updated",
+    cell: (info) => (
+      <DataTable.CellContent>
+        {info.row.original.lastUpdated}
+      </DataTable.CellContent>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "size",
+    header: "Size",
+    cell: (info) => (
+      <DataTable.CellContent>{info.row.original.size}</DataTable.CellContent>
+    ),
+  },
+];
+
 export const DataTableExample = () => {
-  const data: Data[] = [
-    {
-      name: "Soupinou with tooltip on avatar",
-      usedBy: 100,
-      addedBy: "User1",
-      lastUpdated: "July 8, 2023",
-      size: "32kb",
-      avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
-      avatarTooltipLabel: "Meow",
-      roundedAvatar: true,
-      onClick: () => console.log("hehe"),
-    },
-    {
-      name: "Marketing",
-      description: "(23 items)",
-      usedBy: 8,
-      addedBy: "User1",
-      lastUpdated: "July 8, 2023",
-      size: "32kb",
-      avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-      roundedAvatar: true,
-      onClick: () => alert("Marketing clicked"),
-    },
-    {
-      name: "Design",
-      usedBy: 2,
-      addedBy: "User2",
-      lastUpdated: "2023-07-09",
-      size: "64kb",
-      icon: FolderIcon,
-      moreMenuItems: [
-        {
-          label: "Edit (disabled)",
-          onClick: () => alert("Design menu clicked"),
-          disabled: true,
-        },
-      ],
-      onClick: () => alert("Design clicked"),
-    },
-    {
-      name: "design",
-      usedBy: 3,
-      addedBy: "User21",
-      lastUpdated: "2023-07-09",
-      size: "64kb",
-      icon: FolderIcon,
-      moreMenuItems: [
-        {
-          label: "Edit",
-          onClick: () => alert("Design menu clicked"),
-        },
-      ],
-    },
-    {
-      name: "Development",
-      usedBy: 5,
-      addedBy: "User3",
-      lastUpdated: "2023-07-07",
-      size: "128kb",
-    },
-    {
-      name: "Sales",
-      usedBy: 10,
-      addedBy: "User4",
-      lastUpdated: "2023-07-10",
-      size: "16kb",
-    },
-    {
-      name: "HR",
-      usedBy: 3,
-      addedBy: "User5",
-      lastUpdated: "2023-07-06",
-      size: "48kb",
-    },
-  ];
+  const [filter, setFilter] = React.useState<string>("");
+
+  return (
+    <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Input
+        name="filter"
+        placeholder="Filter"
+        value={filter}
+        onChange={(v) => setFilter(v)}
+      />
+      <DataTable
+        data={data}
+        filter={filter}
+        filterColumn="name"
+        columns={columns}
+      />
+    </div>
+  );
+};
 
-  const columns: ColumnDef<Data>[] = [
-    {
-      accessorKey: "name",
-      header: "Name",
-      sortingFn: "text",
-      cell: (info) => (
-        <DataTable.CellContent
-          avatarUrl={info.row.original.avatarUrl}
-          avatarTooltipLabel={info.row.original.avatarTooltipLabel}
-          icon={info.row.original.icon}
-          description={info.row.original.description}
-          roundedAvatar={info.row.original.roundedAvatar}
-        >
-          {info.row.original.name}
-        </DataTable.CellContent>
-      ),
-    },
-    {
-      accessorKey: "usedBy",
-      header: "Used by",
-      cell: (info) => (
-        <DataTable.CellContent>
-          {info.row.original.usedBy}
-        </DataTable.CellContent>
-      ),
-    },
-    {
-      accessorKey: "addedBy",
-      header: "Added by",
-      cell: (info) => (
-        <DataTable.CellContent>
-          {info.row.original.addedBy}
-        </DataTable.CellContent>
-      ),
-    },
-    {
-      accessorKey: "lastUpdated",
-      header: "Last updated",
-      cell: (info) => (
-        <DataTable.CellContent>
-          {info.row.original.lastUpdated}
-        </DataTable.CellContent>
-      ),
-      enableSorting: false,
-    },
-    {
-      accessorKey: "size",
-      header: "Size",
-      cell: (info) => (
-        <DataTable.CellContent>{info.row.original.size}</DataTable.CellContent>
-      ),
-    },
-  ];
+export const DataTablePaginatedExample = () => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 2,
+  });
+  const [filter, setFilter] = React.useState<string>("");
 
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Input
+        name="filter"
+        placeholder="Filter"
+        value={filter}
+        onChange={(v) => setFilter(v)}
+      />
       <DataTable
         data={data}
+        filter={filter}
+        filterColumn="name"
+        pagination={pagination}
+        setPagination={setPagination}
+        columns={columns}
+        initialColumnOrder={[{ id: "name", desc: false }]}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
+      />
+    </div>
+  );
+};
+
+export const DataTablePaginatedServerSideExample = () => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 2,
+  });
+  const [filter, setFilter] = React.useState<string>("");
+  const rows = useMemo(() => {
+    return data.slice(
+      pagination.pageIndex * pagination.pageSize,
+      (pagination.pageIndex + 1) * pagination.pageSize
+    );
+  }, [data, pagination]);
+
+  return (
+    <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Input
+        name="filter"
+        placeholder="Filter"
+        value={filter}
+        onChange={(v) => setFilter(v)}
+      />
+      <DataTable
+        data={rows}
+        totalRowCount={data.length}
+        filter={filter}
+        filterColumn="name"
+        pagination={pagination}
+        setPagination={setPagination}
         columns={columns}
         initialColumnOrder={[{ id: "name", desc: false }]}
         columnsBreakpoints={{ lastUpdated: "sm" }}

package/src/stories/Pagination.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
+import { usePaginationFromUrl } from "@sparkle/hooks/usePaginationFromUrl";
+
 import { Pagination } from "../index_with_tw_base";
 
 const meta = {
@@ -9,38 +11,64 @@ const meta = {
 } satisfies Meta<typeof Pagination>;
 
 export default meta;
-
 export const PaginationSM = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
   return (
     <Pagination
-      itemsCount={960}
-      maxItemsPerPage={50}
-      onButtonClick={() => {}}
+      rowCount={960}
+      pagination={pagination}
+      setPagination={setPagination}
     />
   );
 };
 
 export const PaginationXS = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
   return (
     <Pagination
-      itemsCount={960}
-      maxItemsPerPage={50}
+      rowCount={960}
       size="xs"
       showDetails={false}
-      onButtonClick={() => {}}
+      pagination={pagination}
+      setPagination={setPagination}
     />
   );
 };
 
 export const PaginationNoPageButtons = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
   return (
     <Pagination
-      itemsCount={960}
-      maxItemsPerPage={50}
+      rowCount={960}
       size="xs"
       showDetails={false}
       showPageButtons={false}
-      onButtonClick={() => {}}
+      pagination={pagination}
+      setPagination={setPagination}
     />
   );
 };
+
+export const PaginationWithUrl = () => {
+  const { pagination, setPagination } = usePaginationFromUrl("example", 50);
+
+  return (
+    <>
+      <div className="s-p-2">Current hash: {location.hash}</div>
+      <Pagination
+        rowCount={960}
+        pagination={pagination}
+        setPagination={setPagination}
+      />
+    </>
+  );
+};