@dust-tt/sparkle 0.2.224 → 0.2.226

package/src/stories/Item.stories.tsx

@@ -82,8 +82,8 @@ export const ListItemExample = () => (
         <DropdownMenu>
           <DropdownMenu.Button label="Dust" />
           <DropdownMenu.Items>
-            <DropdownMenu.Item label="item 1" href="#" />
-            <DropdownMenu.Item label="item 2" href="#" />
+            <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
+            <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
           </DropdownMenu.Items>
         </DropdownMenu>
       </div>
@@ -91,8 +91,16 @@ export const ListItemExample = () => (
         <DropdownMenu>
           <DropdownMenu.Button label="Dust" />
           <DropdownMenu.Items>
-            <DropdownMenu.Item label="item 1" href="#" icon={Cog6ToothIcon} />
-            <DropdownMenu.Item label="item 2" href="#" icon={Cog6ToothIcon} />
+            <DropdownMenu.Item
+              label="item 1"
+              link={{ href: "#" }}
+              icon={Cog6ToothIcon}
+            />
+            <DropdownMenu.Item
+              label="item 2"
+              link={{ href: "#" }}
+              icon={Cog6ToothIcon}
+            />
           </DropdownMenu.Items>
         </DropdownMenu>
       </div>
@@ -102,13 +110,25 @@ export const ListItemExample = () => (
           <DropdownMenu.Items>
             <DropdownMenu.Item
               label="item 1"
-              href="#"
+              link={{ href: "#" }}
+              icon={Cog6ToothIcon}
+              description="Desciption of the item"
+            />
+            <DropdownMenu.Item
+              label="Dust site"
+              link={{ href: "https://dust.tt", target: "_blank" }}
+              icon={Cog6ToothIcon}
+              description="Desciption of the item"
+            />
+            <DropdownMenu.Item
+              label="item 1"
+              link={{ href: "#" }}
               icon={Cog6ToothIcon}
               description="Desciption of the item"
             />
             <DropdownMenu.Item
               label="item 2"
-              href="#"
+              link={{ href: "#" }}
               icon={Cog6ToothIcon}
               description="Desciption of the item"
             />

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