@rovula/ui 0.0.10 → 0.0.12

package/dist/src/theme/global.css

@@ -860,6 +860,10 @@ body {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -897,6 +901,10 @@ body {
   right: 1rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -927,6 +935,10 @@ body {
   margin-bottom: auto;
 }
 
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1038,6 +1050,10 @@ body {
   height: 54px;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -1046,6 +1062,10 @@ body {
   width: 1rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-\[100px\] {
   width: 100px;
 }
@@ -1074,6 +1094,10 @@ body {
   max-width: 32rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1082,6 +1106,10 @@ body {
   caption-side: bottom;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1141,6 +1169,10 @@ body {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1196,10 +1228,18 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.self-stretch {
+  align-self: stretch;
+}
+
 .overflow-auto {
   overflow: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1208,6 +1248,10 @@ body {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1398,6 +1442,11 @@ body {
   background-color: rgb(var(--secondary-110) / var(--tw-bg-opacity));
 }
 
+.bg-secondary-80 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--secondary-80) / var(--tw-bg-opacity));
+}
+
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--success-default) / var(--tw-bg-opacity));
@@ -1514,6 +1563,11 @@ body {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1770,6 +1824,11 @@ body {
   color: rgb(var(--secondary-110) / var(--tw-text-opacity));
 }
 
+.text-secondary-120 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--secondary-120) / var(--tw-text-opacity));
+}
+
 .text-secondary-130 {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1815,6 +1874,11 @@ body {
   color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
 }
 
+.text-textcolor-grey-medium {
+  --tw-text-opacity: 1;
+  color: rgb(var(--text-grey-medium) / var(--tw-text-opacity));
+}
+
 .text-warning {
   --tw-text-opacity: 1;
   color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1902,6 +1966,11 @@ body {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2364,6 +2433,11 @@ body {
   background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
 }
 
+.peer:focus ~ .peer-focus\:bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .peer:focus ~ .peer-focus\:text-input-text-active {
   --tw-text-opacity: 1;
   color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
@@ -2411,6 +2485,11 @@ body {
   background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
 }
 
+.data-\[state\=selected\]\:bg-grey-20[data-state=selected] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--grey-20) / var(--tw-bg-opacity));
+}
+
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
   --tw-text-opacity: 1;
   color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
@@ -2448,8 +2527,12 @@ body {
   }
 }
 
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: 0px;
+.\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
+  width: 1rem;
+}
+
+.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-4:has([role=checkbox]) {
+  padding-right: 1rem;
 }
 
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -74,6 +74,8 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-virtual": "^3.5.0",
     "@types/react": "^18.3.2",
     "axios": "^1.6.4",
     "class-variance-authority": "^0.7.0",

package/src/components/Button/Button.tsx

@@ -1,8 +1,10 @@
-import React, { FC, ReactElement } from "react";
+import React, { FC, ReactElement, forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
+import { title } from "process";
+import { ref } from "yup";
 
-type ButtonProps = {
+export type ButtonProps = {
   title?: string;
   size?: "sm" | "md" | "lg";
   color?:
@@ -22,43 +24,49 @@ type ButtonProps = {
   endIcon?: ReactElement;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-const Button: FC<ButtonProps> = ({
-  size = "md",
-  color = "primary",
-  variant = "solid",
-  title,
-  children,
-  startIcon,
-  endIcon,
-  disabled = false,
-  fullwidth = false,
-  isLoading = false,
-  className,
-  ...props
-}) => {
-  const isDisabled = disabled || isLoading;
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = "md",
+      color = "primary",
+      variant = "solid",
+      title,
+      children,
+      startIcon,
+      endIcon,
+      disabled = false,
+      fullwidth = false,
+      isLoading = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || isLoading;
 
-  return (
-    <button
-      type="button"
-      {...props}
-      aria-disabled={isDisabled || undefined}
-      tabIndex={isDisabled ? -1 : 0}
-      className={cn(
-        buttonVariants({ size, color, variant, disabled, fullwidth }),
-        className
-      )}
-      disabled={isDisabled}
-    >
-      {
-        <>
-          {startIcon}
-          {children || title}
-          {endIcon}
-        </>
-      }
-    </button>
-  );
-};
+    return (
+      <button
+        type="button"
+        {...props}
+        ref={ref}
+        aria-disabled={isDisabled || undefined}
+        tabIndex={isDisabled ? -1 : 0}
+        className={cn(
+          buttonVariants({ size, color, variant, disabled, fullwidth }),
+          className
+        )}
+        disabled={isDisabled}
+      >
+        {
+          <>
+            {startIcon}
+            {children || title}
+            {endIcon}
+          </>
+        }
+      </button>
+    );
+  }
+);
 
 export default Button;

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DataTable } from "./DataTable";
+import { ColumnDef } from "@tanstack/react-table";
+
+const meta = {
+  title: "Components/DataTable",
+  component: DataTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div
+        className="p-5 flex flex-1 h-full w-full "
+        style={{ height: "100vh" }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "amount",
+  },
+  {
+    accessorKey: "status",
+  },
+  {
+    accessorKey: "email",
+  },
+];
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    const data = new Array(20).fill(0).map((__, i) => ({
+      id: "m5gr84i9",
+      amount: i + 1,
+      status: "success",
+      email: "ken99@yahoo.com",
+      email1: "ken99@yahoo.com",
+      email2: "ken99@yahoo.com",
+      email3: "ken99@yahoo.com",
+    }));
+
+    return (
+      <div className="flex flex-1 h-full flex-row gap-4 w-full">
+        <DataTable
+          columns={columns}
+          data={data}
+          onSorting={(sorting) => {
+            console.log("sorting ", sorting);
+          }}
+          fetchMoreData={() => {
+            console.log("fetchMoreData");
+          }}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,171 @@
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  OnChangeFn,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  // getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import React, { useEffect, useRef, useState } from "react";
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowsUpDownIcon,
+  ClipboardDocumentListIcon,
+} from "@heroicons/react/16/solid";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../Table/Table";
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  manualSorting?: boolean;
+  onSorting?: (sorting: SortingState) => void;
+  fetchMoreData?: () => void;
+}
+
+export function DataTable<TData, TValue>({
+  data,
+  columns,
+  manualSorting = false,
+  onSorting,
+  fetchMoreData,
+}: DataTableProps<TData, TValue>) {
+  const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    manualSorting,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    // getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      // pagination: {
+      //   pageSize: 100,
+      //   pageIndex: 0,
+      // },
+    },
+  });
+
+  useEffect(() => {
+    onSorting?.(sorting);
+  }, [sorting, onSorting]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (tableBodyRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = tableBodyRef.current;
+        if (scrollTop + clientHeight >= scrollHeight - 10) {
+          fetchMoreData?.();
+        }
+      }
+    };
+
+    const tableBodyElement = tableBodyRef.current;
+    if (tableBodyElement) {
+      tableBodyElement.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (tableBodyElement) {
+        tableBodyElement.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [fetchMoreData]);
+
+  const isEmpty = table.getRowModel().rows?.length === 0;
+
+  return (
+    <div className="flex w-full h-full rounded-xl overflow-hidden border border-primary-10">
+      <Table className={isEmpty ? "h-full" : ""} rootRef={tableBodyRef}>
+        <TableHeader className="sticky top-0">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="">
+              {headerGroup.headers.map((header, i) => {
+                return (
+                  <TableHead key={header.id}>
+                    <div
+                      className="flex flex-row items-center cursor-pointer"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                      {{
+                        asc: <ArrowUpIcon className="ml-3 h-4 w-4" />,
+                        desc: <ArrowDownIcon className="ml-3 h-4 w-4" />,
+                      }[header.column.getIsSorted() as string] ??
+                        (header.column.getCanSort() ? (
+                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-textcolor-grey-light" />
+                        ) : null)}
+                    </div>
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody className="overflow-y-scroll">
+          {!isEmpty ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className=""
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow className="h-full self-stretch">
+              <TableCell
+                colSpan={columns.length}
+                className="typography-body1 text-textcolor-grey-medium text-center h-full"
+              >
+                <div className="flex flex-1 h-full flex-col items-center justify-center gap-3">
+                  <ClipboardDocumentListIcon className="w-8 text-secondary-120" />
+                  There is no information yet.
+                </div>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import Dropdown from "./Dropdown";
+import Dropdown, { Options } from "./Dropdown";
+import Button from "../Button/Button";
+import { cn } from "@/utils/cn";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -22,7 +24,7 @@ const meta = {
 
 export default meta;
 
-const options = new Array(100).fill("").map((__, index) => ({
+const options: Options[] = new Array(100).fill("").map((__, index) => ({
   value: `option${index + 1}`,
   label: `Option ${index + 1}`,
 }));
@@ -47,3 +49,85 @@ export const Default = {
     );
   },
 } satisfies StoryObj;
+
+const DropdownWithRef = (props: any) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <Dropdown
+      id="1"
+      size="lg"
+      {...props}
+      ref={inputRef}
+      labelClassName="peer-focus:bg-red-500"
+      onKeyDown={(e) => {
+        if (e.code === "Enter") {
+          inputRef.current?.blur?.();
+        }
+      }}
+    />
+  );
+};
+
+export const WithRef = {
+  args: {
+    label: "Choose an option:",
+    fullwidth: true,
+    options,
+    filterMode: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+const customOptions: Options[] = new Array(100).fill("").map((__, index) => ({
+  value: `option${index + 1}`,
+  label: `Option ${index + 1}`,
+  renderLabel(config) {
+    return (
+      <div
+        className={cn(config, "w-full  flex justify-between")}
+        onMouseDown={config.handleOnClick}
+      >
+        <span>Test custom</span>
+        <Button
+          onMouseDown={(e) => {
+            // e.stopPropagation();
+            alert("SSS");
+          }}
+        >
+          Add action
+        </Button>
+      </div>
+    );
+  },
+}));
+
+export const CustomOption = {
+  args: {
+    label: "Choose an option:",
+    fullwidth: true,
+    options: customOptions,
+    filterMode: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+      </div>
+    );
+  },
+} satisfies StoryObj;