@phsa.tec/design-system-react 0.1.0

package/src/components/dataDisplay/Table/custom/CustomTable/data-table-row-actions.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Row } from "@tanstack/react-table";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../../../../../components/ui/dropdown-menu";
+import { Button } from "../../../../../components/ui/button";
+import { taskSchema } from "./schema";
+import { labels } from "./data";
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  options: {
+    action: (row: Row<TData>) => void;
+    label: string;
+  }[];
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  options,
+}: DataTableRowActionsProps<TData>) {
+  // const task = taskSchema.parse(row.original);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+        >
+          <DotsHorizontalIcon className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[160px]">
+        {options.map(({ action, label }, index) => (
+          <DropdownMenuItem key={index} onClick={() => action(row)}>
+            {label}
+          </DropdownMenuItem>
+        ))}
+        {/* <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Make a copy</DropdownMenuItem>
+        <DropdownMenuItem>Favorite</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuRadioGroup value={task.label}>
+              {labels.map((label) => (
+                <DropdownMenuRadioItem key={label.value} value={label.value}>
+                  {label.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Delete
+          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+        </DropdownMenuItem> */}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/dataDisplay/Table/custom/CustomTable/data-table-toolbar.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Table } from "@tanstack/react-table";
+
+import { priorities, statuses } from "./data";
+import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { Input } from "../../../../../components/ui/input";
+import { Button } from "../../../../../components/ui/button";
+import { DataTableViewOptions } from "./data-table-view-options";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableToolbar<TData>({
+  table,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center space-x-2">
+        <Input
+          placeholder="Filter tasks..."
+          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("title")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+        {table.getColumn("status") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("status")}
+            title="Status"
+            options={statuses}
+          />
+        )}
+        {table.getColumn("priority") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("priority")}
+            title="Priority"
+            options={priorities}
+          />
+        )}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => table.resetColumnFilters()}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <DataTableViewOptions table={table} />
+    </div>
+  );
+}

package/src/components/dataDisplay/Table/custom/CustomTable/data-table-view-options.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { MixerHorizontalIcon } from "@radix-ui/react-icons";
+import { Table } from "@tanstack/react-table";
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "../../../../../components/ui/dropdown-menu";
+import { Button } from "../../../../../components/ui/button";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/dataDisplay/Table/custom/CustomTable/data-table.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  TableState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../../../components/ui/table";
+
+import { DataTablePagination } from "./data-table-pagination";
+import { DataTableToolbar } from "./data-table-toolbar";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  callback?: (data: TableState) => void;
+  renderToolbar?: (table: any) => React.ReactNode;
+  renderPagination?: (table: any) => React.ReactNode;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  callback = () => {},
+  renderToolbar = () => null,
+  renderPagination = () => null,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = useState({});
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+  });
+
+  const {
+    pagination,
+    sorting: tableSorting,
+    columnFilters: tableFilters,
+  } = table.getState();
+
+  useEffect(() => {
+    callback(table.getState());
+  }, [pagination, tableSorting, tableFilters]);
+
+  return (
+    <div className="space-y-4">
+      {/* <DataTableToolbar table={table} /> */}
+      {renderToolbar(table)}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  Sem resultados.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {renderPagination(table)}
+      {/* <DataTablePagination table={table} /> */}
+    </div>
+  );
+}

package/src/components/dataDisplay/Table/custom/CustomTable/data.ts

@@ -0,0 +1,71 @@
+import {
+  ArrowDownIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  CheckCircledIcon,
+  CircleIcon,
+  CrossCircledIcon,
+  QuestionMarkCircledIcon,
+  StopwatchIcon,
+} from "@radix-ui/react-icons";
+
+export const labels = [
+  {
+    value: "bug",
+    label: "Bug",
+  },
+  {
+    value: "feature",
+    label: "Feature",
+  },
+  {
+    value: "documentation",
+    label: "Documentation",
+  },
+];
+
+export const statuses = [
+  {
+    value: "backlog",
+    label: "Backlog",
+    icon: QuestionMarkCircledIcon,
+  },
+  {
+    value: "todo",
+    label: "Todo",
+    icon: CircleIcon,
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+    icon: StopwatchIcon,
+  },
+  {
+    value: "done",
+    label: "Done",
+    icon: CheckCircledIcon,
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+    icon: CrossCircledIcon,
+  },
+];
+
+export const priorities = [
+  {
+    label: "Low",
+    value: "low",
+    icon: ArrowDownIcon,
+  },
+  {
+    label: "Medium",
+    value: "medium",
+    icon: ArrowRightIcon,
+  },
+  {
+    label: "High",
+    value: "high",
+    icon: ArrowUpIcon,
+  },
+];

package/src/components/dataDisplay/Table/custom/CustomTable/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { DataTable } from "./data-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { DataTableRowActions } from "./data-table-row-actions";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableToolbar } from "./data-table-toolbar";
+
+import { ColumnDef, TableState } from "@tanstack/react-table";
+
+export type CustomTableProps<TData, TValue> = {
+  data: TData[];
+  columns: ColumnDef<TData, TValue>[];
+  callback?: (data: TableState) => void;
+  renderToolbar?: (table: any) => React.ReactNode;
+  renderPagination?: (table: any) => React.ReactNode;
+};
+
+export function CustomTable<TData, TValue>({
+  data,
+  columns,
+  callback = () => {},
+  renderPagination = () => null,
+  renderToolbar = () => null,
+}: CustomTableProps<TData, TValue>) {
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      callback={callback}
+      renderPagination={renderPagination}
+      renderToolbar={renderToolbar}
+    />
+  );
+}

package/src/components/dataDisplay/Table/custom/CustomTable/schema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string(),
+  label: z.string(),
+  priority: z.string(),
+});
+
+export type Task = z.infer<typeof taskSchema>;

package/src/components/dataDisplay/Table/index.ts

@@ -0,0 +1,2 @@
+export * from "./components/DynamicTable";
+export * from "./types";

package/src/components/dataDisplay/Table/table.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Table } from "./Table";
+import { ColumnDef } from "@tanstack/react-table";
+
+const meta: Meta<typeof Table> = {
+  title: "DataDisplay/Table",
+  component: Table,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table<User>>;
+
+type User = {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+};
+
+const mockData: User[] = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    role: "Admin",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "User",
+  },
+  {
+    id: 3,
+    name: "Bob Johnson",
+    email: "bob@example.com",
+    role: "Editor",
+  },
+  {
+    id: 4,
+    name: "Alice Brown",
+    email: "alice@example.com",
+    role: "User",
+  },
+  {
+    id: 5,
+    name: "Charlie Wilson",
+    email: "charlie@example.com",
+    role: "Editor",
+  },
+  {
+    id: 6,
+    name: "Diana Miller",
+    email: "diana@example.com",
+    role: "User",
+  },
+];
+
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "id",
+    header: "ID",
+    enableSorting: true,
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    enableSorting: true,
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    enableSorting: true,
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    data: mockData,
+    columns: columns,
+    pagination: {
+      pageIndex: 0,
+      pageSize: 5,
+    },
+    onPaginationChange: (pagination) => {
+      console.log("Page changed:", {
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+      });
+    },
+  },
+};
+
+export const SmallPageSize: Story = {
+  args: {
+    data: mockData,
+    columns: columns,
+    pagination: {
+      pageIndex: 0,
+      pageSize: 3,
+    },
+    onPaginationChange: (pagination) => {
+      console.log("Page changed:", {
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+      });
+    },
+  },
+};
+
+export const StartingFromPage2: Story = {
+  args: {
+    data: mockData,
+    columns: columns,
+    pagination: {
+      pageIndex: 1, // Starts from second page
+      pageSize: 3,
+    },
+    onPaginationChange: (pagination) => {
+      console.log("Page changed:", {
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+      });
+    },
+  },
+};
+
+export const EmptyTable: Story = {
+  args: {
+    data: [],
+    columns: columns,
+  },
+};
+
+export const SingleRow: Story = {
+  args: {
+    data: [mockData[0]],
+    columns: columns,
+  },
+};

package/src/components/dataDisplay/Table/types.ts

@@ -0,0 +1,15 @@
+export interface Column<T> {
+  header: string;
+  accessorKey: keyof T;
+  cell?: (row: T) => React.ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+}
+
+export interface TableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  className?: string;
+  filters?: React.ReactNode;
+  onSort?: (field: keyof T, direction: "asc" | "desc") => void;
+}

package/src/components/dataDisplay/Tabs/Tabs.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import { Tabs } from "./Tabs";
+
+const meta = {
+  title: "DataDisplay/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      {
+        label: "Tab 1",
+        value: "tab1",
+        content: <div>Tab 1 content</div>,
+      },
+      {
+        label: "Tab 2",
+        value: "tab2",
+        content: <div>Tab 2 content</div>,
+      },
+    ],
+    defaultValue: "tab1",
+    onSelectTab: (value) => console.log(value),
+  },
+};