@dust-tt/sparkle 0.2.225 → 0.2.227-rc

package/src/hooks/useHashParams.ts

@@ -0,0 +1,95 @@
+/**
+ * Original code from : https://www.npmjs.com/package/use-hash-param
+ * ISC License
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+const getHashSearchParams = (location: Location): [string, URLSearchParams] => {
+  const hash = location.hash.slice(1);
+  const [prefix, query] = hash.split("?");
+
+  return [prefix, new URLSearchParams(query)];
+};
+
+const getHashParam = (key: string, defaultValue?: string) => {
+  if (typeof window === "undefined") {
+    return defaultValue;
+  }
+
+  const [, searchParams] = getHashSearchParams(window.location);
+
+  return searchParams.get(key) ?? defaultValue;
+};
+
+const setHashParam = (
+  key: string,
+  value: string | undefined,
+  shouldReplaceState: boolean
+) => {
+  if (typeof window !== "undefined") {
+    const [prefix, searchParams] = getHashSearchParams(window.location);
+
+    if (typeof value === "undefined" || value === "") {
+      searchParams.delete(key);
+    } else {
+      searchParams.set(key, value);
+    }
+
+    const search = searchParams.toString();
+    const hash = search ? `${prefix}?${search}` : prefix;
+    if (shouldReplaceState && "replaceState" in history) {
+      history.replaceState(null, "", `#${hash}`);
+    } else {
+      window.location.hash = hash;
+    }
+  }
+};
+
+type Updater = (prevValue?: string) => string;
+type SetterOptions = {
+  history: "replace" | "push";
+};
+type Setter = (value?: string | Updater, options?: SetterOptions) => void;
+
+/**
+ * @param key The parameter-name to use from the hash-string query string.
+ * @param defaultValue A default value to use if the parameter is not specified and on the server.
+ * @returns A two-tuple, the first element is the selected param value (either extracted from the hash param or the default value).
+ *  The second element is a setter function to change the param value.
+ */
+
+export const useHashParam = (
+  key: string,
+  defaultValue?: string
+): [string | undefined, Setter] => {
+  const [innerValue, setInnerValue] = useState<string | undefined>(() =>
+    getHashParam(key, defaultValue)
+  );
+
+  useEffect(() => {
+    const handleHashChange = () =>
+      setInnerValue(getHashParam(key, defaultValue));
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [key]);
+
+  const setValue = useCallback<Setter>(
+    (
+      newValue?: string | Updater,
+      options: SetterOptions = { history: "replace" }
+    ) => {
+      const newInnerValue =
+        typeof newValue === "function"
+          ? newValue(getHashParam(key, defaultValue))
+          : newValue;
+
+      setInnerValue(newInnerValue);
+      setHashParam(key, newInnerValue, options.history === "replace");
+    },
+    [key]
+  );
+
+  return [innerValue || defaultValue, setValue];
+};

package/src/hooks/usePaginationFromUrl.ts

@@ -0,0 +1,36 @@
+import { PaginationState } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+import { useHashParam } from "@sparkle/hooks/useHashParams";
+
+const defaultPageSize = 25;
+
+export const usePaginationFromUrl = (
+  urlPrefix?: string,
+  initialPageSize = defaultPageSize
+) => {
+  const [pageIndexParam, setPageIndexParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageIndex` : "pageIndex"
+  );
+  const [pageSizeParam, setPageSizeParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageSize` : "pageSize"
+  );
+
+  const pageIndex = pageIndexParam ? parseInt(pageIndexParam) : 0;
+  const pageSize = pageSizeParam ? parseInt(pageSizeParam) : initialPageSize;
+
+  const res = useMemo(() => {
+    const pagination: PaginationState = { pageIndex, pageSize };
+
+    const setPagination = (newValue: PaginationState) => {
+      if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
+        setPageIndexParam(newValue.pageIndex.toString());
+        setPageSizeParam(newValue.pageSize.toString());
+      }
+    };
+
+    return { pagination, setPagination };
+  }, [pageIndex, pageSize, urlPrefix]);
+
+  return res;
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components";
 export { SparkleContext } from "./context";
+export * from "./hooks";
 export * from "./icons";
 export * from "./lib";
 export * from "./logo";

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}
+      />
+    </>
+  );
+};