@dust-tt/sparkle 0.2.240 → 0.2.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.240",
+  "version": "0.2.242",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/DataTable.tsx

@@ -8,7 +8,6 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   PaginationState,
-  SortingFn,
   type SortingState,
   Updater,
   useReactTable,
@@ -57,9 +56,10 @@ interface DataTableProps<TData extends TBaseData> {
   filterColumn?: string;
   pagination?: PaginationState;
   setPagination?: (pagination: PaginationState) => void;
-  initialColumnOrder?: SortingState;
   columnsBreakpoints?: ColumnBreakpoint;
-  sortingFn?: SortingFn<TData>;
+  sorting?: SortingState;
+  setSorting?: (sorting: SortingState) => void;
+  isServerSideSorting?: boolean;
 }
 
 function shouldRenderColumn(
@@ -80,18 +80,20 @@ export function DataTable<TData extends TBaseData>({
   widthClassName = "s-w-full s-max-w-4xl",
   filter,
   filterColumn,
-  initialColumnOrder,
   columnsBreakpoints = {},
   pagination,
   setPagination,
+  sorting,
+  setSorting,
+  isServerSideSorting = false,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
-  const [sorting, setSorting] = useState<SortingState>(
-    initialColumnOrder ?? []
-  );
+
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+  const isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
+
   const onPaginationChange =
     pagination && setPagination
       ? (updater: Updater<PaginationState>) => {
@@ -101,26 +103,44 @@ export function DataTable<TData extends TBaseData>({
         }
       : undefined;
 
+  const onSortingChange =
+    sorting && setSorting
+      ? (updater: Updater<SortingState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(sorting) : updater;
+          setSorting(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
     rowCount: totalRowCount,
     manualPagination: isServerSidePagination,
-    onSortingChange: setSorting,
+    manualSorting: isServerSideSorting,
+    ...(isServerSideSorting && {
+      onSortingChange: onSortingChange,
+    }),
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    ...(!isServerSideSorting && {
+      getSortedRowModel: getSortedRowModel(),
+      enableSorting: isClientSideSortingEnabled,
+    }),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
     state: {
       columnFilters,
-      sorting: isServerSidePagination ? undefined : sorting,
+      ...(isServerSideSorting && {
+        sorting,
+      }),
       pagination,
     },
     initialState: {
       pagination,
+      sorting,
     },
-    onPaginationChange: onPaginationChange,
+    onPaginationChange,
   });
 
   useEffect(() => {

package/src/icons/solid/StopSign.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgStopSign = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10Zm-4-1.5H6v3h12v-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgStopSign;

package/src/icons/solid/index.ts

@@ -113,6 +113,7 @@ export { default as SquareIcon } from "./Square";
 export { default as Square3Stack3DIcon } from "./Square3Stack3D";
 export { default as StarIcon } from "./Star";
 export { default as StopIcon } from "./Stop";
+export { default as StopSignIcon } from "./StopSign";
 export { default as TableIcon } from "./Table";
 export { default as TagIcon } from "./Tag";
 export { default as TemplateIcon } from "./Template";

package/src/icons/src/solid/stop-sign.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12ZM18 10.5H6V13.5H18V10.5Z" fill="#020617"/>
+</svg>

package/src/icons/src/stroke/stop-sign.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 10.5H6V13.5H18V10.5Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12ZM20 12C20 16.42 16.42 20 12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12Z" fill="#020617"/>
+</svg>

package/src/icons/stroke/StopSign.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgStopSign = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M18 10.5H6v3h12v-3Z" />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10Zm-2 0c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8 8 3.58 8 8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgStopSign;

package/src/icons/stroke/index.ts

@@ -113,6 +113,7 @@ export { default as SquareStrokeIcon } from "./Square";
 export { default as Square3Stack3DStrokeIcon } from "./Square3Stack3D";
 export { default as StarStrokeIcon } from "./Star";
 export { default as StopStrokeIcon } from "./Stop";
+export { default as StopSignStrokeIcon } from "./StopSign";
 export { default as TableStrokeIcon } from "./Table";
 export { default as TagStrokeIcon } from "./Tag";
 export { default as TemplateStrokeIcon } from "./Template";

package/src/logo/platforms/O1.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgO1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#o1_svg__a)">
+      <path
+        fill="currentColor"
+        d="M0 4a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z"
+      />
+      <path
+        fill="#F8FAFC"
+        d="M19.813 10.367a4.432 4.432 0 0 0-.39-3.683c-.996-1.71-2.997-2.59-4.95-2.176A4.574 4.574 0 0 0 11.043 3c-1.997-.004-3.77 1.265-4.384 3.14a4.543 4.543 0 0 0-3.04 2.175 4.49 4.49 0 0 0 .566 5.318 4.432 4.432 0 0 0 .39 3.684c.996 1.71 2.997 2.59 4.951 2.175A4.57 4.57 0 0 0 12.955 21c1.999.005 3.772-1.265 4.386-3.142a4.543 4.543 0 0 0 3.04-2.176 4.49 4.49 0 0 0-.567-5.316l-.001.001Zm-6.857 9.457a3.435 3.435 0 0 1-2.188-.781c.028-.015.076-.041.107-.06l3.633-2.07c.186-.104.3-.3.299-.51v-5.054l1.535.875a.053.053 0 0 1 .03.042v4.184c-.003 1.861-1.53 3.37-3.416 3.374Zm-7.344-3.096a3.321 3.321 0 0 1-.408-2.26l.108.064 3.632 2.07a.598.598 0 0 0 .597 0l4.434-2.527v1.75a.056.056 0 0 1-.021.046l-3.672 2.092c-1.635.93-3.724.377-4.67-1.235Zm-.957-7.824a3.396 3.396 0 0 1 1.78-1.479l-.002.124v4.14a.582.582 0 0 0 .298.51l4.435 2.527-1.536.874a.055.055 0 0 1-.051.005L5.906 13.51a3.353 3.353 0 0 1-1.251-4.606Zm12.614 2.897-4.435-2.527L14.37 8.4a.055.055 0 0 1 .051-.005l3.673 2.092a3.35 3.35 0 0 1 1.25 4.61 3.406 3.406 0 0 1-1.778 1.478V12.31a.58.58 0 0 0-.297-.51Zm1.528-2.27a5.022 5.022 0 0 0-.108-.063l-3.633-2.07a.598.598 0 0 0-.596 0l-4.435 2.527v-1.75a.056.056 0 0 1 .022-.046l3.671-2.09c1.636-.932 3.727-.378 4.67 1.237.398.681.543 1.48.407 2.255h.002ZM9.19 12.65l-1.535-.874a.053.053 0 0 1-.03-.042V7.55c.001-1.863 1.533-3.373 3.421-3.372.799 0 1.572.277 2.186.78a2.563 2.563 0 0 0-.108.06L9.49 7.088a.58.58 0 0 0-.298.51l-.003 5.051v.001Zm.834-1.774L12 9.75l1.975 1.125v2.25L12 14.25l-1.976-1.125v-2.25Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="o1_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgO1;

package/src/logo/platforms/index.ts

@@ -24,6 +24,7 @@ export { default as MicrosoftPowerpointLogo } from "./MicrosoftPowerpoint";
 export { default as MicrosoftWordLogo } from "./MicrosoftWord";
 export { default as MistralLogo } from "./Mistral";
 export { default as NotionLogo } from "./Notion";
+export { default as O1Logo } from "./O1";
 export { default as OfficeLogo } from "./Office";
 export { default as OpenaiLogo } from "./Openai";
 export { default as OpenaiWhiteLogo } from "./OpenaiWhite";

package/src/logo/src/platforms/o1.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1026_9)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="#020617"/>
+<path d="M19.813 10.3673C20.2269 9.14159 20.0844 7.79887 19.4226 6.68397C18.4272 4.97394 16.4263 4.09417 14.4721 4.50818C13.6027 3.54178 12.3537 2.99221 11.0443 3.00008C9.04673 2.99558 7.27439 4.26461 6.65985 6.14003C5.37663 6.39934 4.26898 7.19192 3.62082 8.31526C2.61807 10.0208 2.84666 12.1707 4.18632 13.6332C3.77245 14.859 3.91497 16.2017 4.57682 17.3166C5.57216 19.0266 7.5731 19.9064 9.5273 19.4924C10.3961 20.4588 11.6457 21.0083 12.9551 20.9999C14.9538 21.005 16.7267 19.7348 17.3412 17.8577C18.6245 17.5984 19.7321 16.8058 20.3803 15.6825C21.3819 13.9769 21.1527 11.8287 19.8136 10.3662L19.813 10.3673ZM12.9563 19.8237C12.1565 19.8248 11.3817 19.5486 10.7678 19.0429C10.7957 19.0283 10.8442 19.0019 10.8755 18.9827L14.508 16.9127C14.6938 16.8086 14.8078 16.6134 14.8067 16.4025V11.3494L16.3419 12.2242C16.3584 12.232 16.3693 12.2478 16.3715 12.2658V16.4503C16.3693 18.3111 14.8421 19.8198 12.9563 19.8237ZM5.6115 16.7282C5.21074 16.0453 5.06651 15.2448 5.2039 14.468C5.23069 14.4838 5.27801 14.5125 5.31164 14.5316L8.94412 16.6016C9.12825 16.7079 9.35628 16.7079 9.54098 16.6016L13.9755 14.0748V15.8242C13.9767 15.8422 13.9681 15.8597 13.9539 15.8709L10.2821 17.9629C8.64654 18.8922 6.55781 18.3398 5.61207 16.7282H5.6115ZM4.65549 8.90421C5.05454 8.2202 5.68447 7.69706 6.43468 7.42537C6.43468 7.4563 6.43297 7.51087 6.43297 7.54912V11.6898C6.43183 11.9001 6.54584 12.0953 6.73111 12.1994L11.1657 14.7256L9.63048 15.6004C9.61509 15.6105 9.59571 15.6122 9.5786 15.6049L5.90622 13.5112C4.27412 12.5785 3.71431 10.5181 4.65492 8.90477L4.65549 8.90421ZM17.2688 11.8006L12.8343 9.27378L14.3695 8.39964C14.3849 8.38951 14.4042 8.38782 14.4213 8.39514L18.0937 10.4871C19.7287 11.4192 20.2891 13.4831 19.3445 15.0963C18.9448 15.7792 18.3155 16.3024 17.5658 16.5746V12.3102C17.5676 12.0998 17.4541 11.9052 17.2694 11.8006H17.2688ZM18.7966 9.53141C18.7698 9.5151 18.7225 9.48697 18.6889 9.46785L15.0564 7.3978C14.8723 7.29149 14.6442 7.29149 14.4595 7.3978L10.025 9.92461V8.17519C10.0238 8.15719 10.0324 8.13976 10.0466 8.12851L13.7184 6.03821C15.354 5.10725 17.445 5.66133 18.3879 7.27574C18.7864 7.9575 18.9306 8.75571 18.7955 9.53141H18.7966ZM9.19039 12.6494L7.65462 11.7747C7.63809 11.7668 7.62726 11.7511 7.62498 11.7331V7.54856C7.62612 5.68552 9.1579 4.17573 11.046 4.17686C11.8446 4.17686 12.6176 4.45361 13.2316 4.95763C13.2037 4.97225 13.1558 4.99869 13.1239 5.01781L9.49138 7.08786C9.30554 7.19192 9.19153 7.38655 9.19267 7.59749L9.19039 12.6483V12.6494ZM10.0244 10.8753L11.9997 9.74967L13.975 10.8747V13.1253L11.9997 14.2503L10.0244 13.1253V10.8753Z" fill="#F8FAFC"/>
+</g>
+<defs>
+<clipPath id="clip0_1026_9">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/stories/DataTable.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta } from "@storybook/react";
-import { ColumnDef, PaginationState } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
 import React, { useMemo } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
@@ -206,6 +210,34 @@ export const DataTableExample = () => {
   );
 };
 
+export const DataTableClientSideSortingExample = () => {
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: "name", desc: true },
+  ]);
+  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
+        className="s-w-full s-max-w-4xl s-overflow-x-auto"
+        data={data}
+        filter={filter}
+        filterColumn="name"
+        columns={columns}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
+        sorting={sorting}
+        setSorting={setSorting}
+      />
+    </div>
+  );
+};
+
 export const DataTablePaginatedExample = () => {
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -229,7 +261,6 @@ export const DataTablePaginatedExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
         columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
@@ -241,14 +272,29 @@ export const DataTablePaginatedServerSideExample = () => {
     pageIndex: 0,
     pageSize: 2,
   });
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: "name", desc: true },
+  ]);
   const [filter, setFilter] = React.useState<string>("");
   const rows = useMemo(() => {
+    if (sorting.length > 0) {
+      const order = sorting[0].desc ? -1 : 1;
+      return data
+        .sort((a: Data, b: Data) => {
+          return (
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order
+          );
+        })
+        .slice(
+          pagination.pageIndex * pagination.pageSize,
+          (pagination.pageIndex + 1) * pagination.pageSize
+        );
+    }
     return data.slice(
       pagination.pageIndex * pagination.pageSize,
       (pagination.pageIndex + 1) * pagination.pageSize
     );
-  }, [data, pagination]);
-
+  }, [data, pagination, sorting]);
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
       <Input
@@ -266,8 +312,10 @@ export const DataTablePaginatedServerSideExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
+        sorting={sorting}
+        setSorting={setSorting}
         columnsBreakpoints={{ lastUpdated: "sm" }}
+        isServerSideSorting={true}
       />
     </div>
   );