@dust-tt/sparkle 0.2.193 → 0.2.194-rc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.193",
+  "version": "0.2.194-rc",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -148,6 +148,9 @@ export { Markdown };
 import { DataTable } from "./components/DataTable";
 export { DataTable };
 
+import { Table, TableData } from "./components/Table";
+export { Table, TableData };
+
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
   LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,

package/src/components/Table.tsx

@@ -0,0 +1,286 @@
+import {
+  type ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import React, { ReactNode, useState } from "react";
+
+import { Avatar, MoreIcon } from "@sparkle/index";
+import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+type FirstColumnWidth = "expanded" | "normal";
+
+interface TableProps<TData, TValue> {
+  data: TData[];
+  columns: ColumnDef<TData, TValue>[];
+  className?: string;
+  width?: FirstColumnWidth;
+}
+
+export function Table<TData, TValue>({
+  data,
+  columns,
+  className,
+  width = "normal",
+}: TableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    state: {
+      columnFilters,
+      sorting,
+    },
+  });
+
+  return (
+    <TableData className={className}>
+      <TableData.Header>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableData.Row key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <TableData.Head
+                key={header.id}
+                width={width}
+                onClick={header.column.getToggleSortingHandler()}
+                className={header.column.getCanSort() ? "s-cursor-pointer" : ""}
+              >
+                <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                  {header.column.getCanSort() && (
+                    <Icon
+                      visual={
+                        header.column.getIsSorted() === "asc"
+                          ? ArrowUpIcon
+                          : header.column.getIsSorted() === "desc"
+                            ? ArrowDownIcon
+                            : ArrowDownIcon
+                      }
+                      className={classNames(
+                        "s-h-4 s-w-3 s-font-extralight",
+                        header.column.getIsSorted()
+                          ? "s-opacity-100"
+                          : "s-opacity-0"
+                      )}
+                    />
+                  )}
+                </div>
+              </TableData.Head>
+            ))}
+          </TableData.Row>
+        ))}
+      </TableData.Header>
+      <TableData.Body>
+        {table.getRowModel().rows.map((row) => (
+          <TableData.Row
+            key={row.id}
+            clickable={row.original.clickable}
+            onClick={row.original.onClick}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <TableData.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableData.Cell>
+            ))}
+          </TableData.Row>
+        ))}
+      </TableData.Body>
+    </TableData>
+  );
+}
+
+interface TableRootProps extends React.HTMLAttributes<HTMLTableElement> {
+  children: ReactNode;
+}
+
+interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: ReactNode;
+}
+
+interface HeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  width?: FirstColumnWidth;
+}
+
+interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  avatarUrl?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  children?: ReactNode;
+  description?: string;
+}
+
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  children: ReactNode;
+  clickable?: boolean;
+  onClick?: () => void;
+}
+
+const TableRoot: React.FC<TableRootProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <table
+      className={classNames("s-w-full s-border-collapse", className || "")}
+      {...props}
+    >
+      {children}
+    </table>
+  );
+};
+
+const Header: React.FC<HeaderProps> = ({ children, className, ...props }) => {
+  return (
+    <thead
+      className={classNames("s-text-xs s-capitalize", className || "")}
+      {...props}
+    >
+      {children}
+    </thead>
+  );
+};
+
+const Head: React.FC<HeadProps> = ({
+  children,
+  className,
+  width,
+  ...props
+}) => {
+  return (
+    <th
+      className={classNames(
+        "s-py-1 s-pr-3 s-text-left s-font-medium s-text-element-800",
+        width === "expanded" ? "s-w-full" : "s-w-auto",
+        className || ""
+      )}
+      {...props}
+    >
+      <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+        {children}
+      </div>
+    </th>
+  );
+};
+
+const Body: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <tbody className={className || ""} {...props}>
+    {children}
+  </tbody>
+);
+
+const Footer: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <tfoot
+    className={classNames(
+      "s-border-t s-border-structure-200 s-bg-structure-50",
+      className || ""
+    )}
+    {...props}
+  >
+    {children}
+  </tfoot>
+);
+
+const Row: React.FC<RowProps> = ({
+  children,
+  className,
+  clickable = false,
+  onClick,
+  ...props
+}) => (
+  <tr
+    className={classNames(
+      "s-border-b s-border-structure-200 s-text-sm",
+      className || ""
+    )}
+    {...props}
+  >
+    {children}
+    {clickable && (
+      <td
+        className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600"
+        onClick={clickable ? onClick : undefined}
+      >
+        <Icon visual={MoreIcon} size="sm" />
+      </td>
+    )}
+  </tr>
+);
+
+const Cell: React.FC<CellProps> = ({
+  children,
+  className,
+  avatarUrl,
+  icon,
+  description,
+  ...props
+}) => (
+  <td
+    className={classNames(
+      "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
+      className || ""
+    )}
+    {...props}
+  >
+    <div className="s-flex">
+      {avatarUrl && <Avatar visual={avatarUrl} size="xs" className="s-mr-2" />}
+      {icon && (
+        <Icon visual={icon} size="sm" className="s-mr-2 s-text-element-600" />
+      )}
+      <div className="s-flex">
+        <span className="s-text-sm s-text-element-800">{children}</span>
+        {description && (
+          <span className="s-pl-2 s-text-sm s-text-element-600">
+            {description}
+          </span>
+        )}
+      </div>
+    </div>
+  </td>
+);
+
+const Caption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <caption className={classNames(className || "")} {...props}>
+    {children}
+  </caption>
+);
+
+export const TableData = Object.assign(TableRoot, {
+  Header,
+  Body,
+  Footer,
+  Head,
+  Row,
+  Cell,
+  Caption,
+});

package/src/components/Tooltip.tsx

@@ -22,7 +22,7 @@ export function Tooltip({
   const handleMouseOver = () => {
     const id = window.setTimeout(() => {
       setIsHovered(true);
-    }, 800);
+    }, 600);
     setTimerId(id);
   };
 

package/src/stories/Table.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColumnDef } from "@tanstack/react-table";
+import React from 'react';
+
+import { TableData } from "@sparkle/components/Table";
+
+import { FolderIcon, Table } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Table",
+  component: Table
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type Data = {
+  name: string;
+  description?: string;
+  usedBy: number;
+  addedBy: string;
+  lastUpdated: string;
+  size: string;
+  avatarUrl?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  clickable?: boolean;
+  onClick?: () => void;
+};
+
+const TableExample = () => {
+  const data: Data[] = [
+    {
+      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",
+      clickable: true,
+      onClick: (() => console.log("hehe"))
+    },
+    { name: "Design", usedBy: 2, addedBy: "User2", lastUpdated: "2023-07-09", size: "64kb", icon: FolderIcon, clickable: false},
+    { 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",
+      cell: info => (
+        <TableData.Cell
+          avatarUrl={info.row.original.avatarUrl}
+          icon={info.row.original.icon}
+          description={info.row.original.description}
+        >
+          {info.row.original.name}
+        </TableData.Cell>
+      ),
+      meta: { width: "expanded" }
+    },
+    {
+      accessorKey: "usedBy",
+      header: "Used by",
+      cell: info => <TableData.Cell>{info.row.original.usedBy}</TableData.Cell>
+    },
+    {
+      accessorKey: "addedBy",
+      header: "Added by",
+      cell: info => <TableData.Cell>{info.row.original.addedBy}</TableData.Cell>
+    },
+    {
+      accessorKey: "lastUpdated",
+      header: "Last updated",
+      cell: info => <TableData.Cell>{info.row.original.lastUpdated}</TableData.Cell>,
+      enableSorting: false
+    },
+    {
+      accessorKey: "size",
+      header: "Size",
+      cell: info => <TableData.Cell>{info.row.original.size}</TableData.Cell>
+    }
+  ];
+
+  return (
+    <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Table
+        data={data}
+        columns={columns}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <TableExample />,
+};