@phsa.tec/design-system-react 0.1.0

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import { Icon } from "./index";
+
+const meta = {
+  title: "DataDisplay/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "MdHome",
+  },
+};

package/src/components/dataDisplay/Icon/Icon.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback, useMemo } from "react";
+import { IconContext } from "react-icons";
+import { IconProps } from "./types";
+
+export const Icon: React.FC<IconProps> = ({ name, size = 24, ...rest }) => {
+  const nameIcon = useMemo(() => name, [name]);
+
+  const iconsModulePath = useMemo(
+    () => ({
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      md: require("react-icons/md"),
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      fa: require("react-icons/fa"),
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      bs: require("react-icons/bs"),
+    }),
+    []
+  );
+
+  const typeIcon = useMemo(() => {
+    const matches = [...nameIcon.matchAll(/[A-Z]/g)];
+    return String(
+      nameIcon.slice(0, matches[1]?.index) || ""
+    ).toLocaleLowerCase();
+  }, [nameIcon]);
+
+  const Icon = useCallback(
+    (props: typeof rest) => {
+      try {
+        if (!typeIcon || !nameIcon) return <></>;
+
+        return iconsModulePath[typeIcon as keyof typeof iconsModulePath][
+          nameIcon
+        ]?.(props);
+      } catch {
+        return <></>;
+      }
+    },
+    [iconsModulePath, nameIcon, typeIcon]
+  );
+
+  return (
+    <IconContext.Provider value={{ size: String(size) }}>
+      <Icon {...rest} />
+    </IconContext.Provider>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./Icon";

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

@@ -0,0 +1,6 @@
+export type IconProps = {
+  name: string;
+  size?: number;
+  className?: string;
+  color?: string;
+};

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import { Label } from "./index";
+
+const meta = {
+  title: "DataDisplay/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Label",
+  },
+};

package/src/components/dataDisplay/Label/Label.tsx

@@ -0,0 +1,10 @@
+import {
+  Label as LabelComponent,
+  LabelProps as LabelComponentProps,
+} from "../../ui/label";
+
+export type LabelProps = LabelComponentProps;
+
+export const Label = (props: LabelProps) => {
+  return <LabelComponent {...props} />;
+};

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

@@ -0,0 +1 @@
+export * from "./Label";

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

@@ -0,0 +1,173 @@
+"use client";
+
+import {
+  ChevronDown,
+  ChevronUp,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import {
+  Table as ShadcnTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  PaginationState,
+} from "@tanstack/react-table";
+
+export interface TableProps<TData> {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  pageSize?: number;
+  onSortingChange?: (sorting: SortingState) => void;
+  sorting?: SortingState;
+  onPaginationChange?: (pagination: PaginationState) => void;
+  pagination?: PaginationState;
+  emptyMessage?: string;
+}
+
+export function Table<TData>({
+  data,
+  columns,
+  onSortingChange = () => {},
+  sorting = [],
+  pagination = { pageIndex: 0, pageSize: 0 },
+  onPaginationChange = () => {},
+  emptyMessage = "No results.",
+}: TableProps<TData>) {
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: (sorting) => {
+      onSortingChange(sorting as SortingState);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: (pagination) => {
+      onPaginationChange(pagination as PaginationState);
+    },
+    initialState: {
+      pagination,
+    },
+  });
+
+  const getSortingIcons = (column: {
+    getIsSorted: () => string | false;
+    getCanSort: () => boolean;
+  }) => {
+    const sortDirection = column.getIsSorted();
+
+    if (!column.getCanSort()) return null;
+
+    if (sortDirection === "asc") {
+      return <ChevronUp className="ml-2 h-4 w-4 inline" />;
+    } else if (sortDirection === "desc") {
+      return <ChevronDown className="ml-2 h-4 w-4 inline" />;
+    }
+
+    return (
+      <div className="ml-2 inline-flex flex-col">
+        <ChevronUp className="h-3 w-3" />
+        <ChevronDown className="h-3 w-3 -mt-1" />
+      </div>
+    );
+  };
+
+  return (
+    <div className="rounded-md border">
+      <ShadcnTable>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : (
+                    <div
+                      className={
+                        header.column.getCanSort()
+                          ? "cursor-pointer select-none flex items-center"
+                          : ""
+                      }
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {getSortingIcons(header.column)}
+                    </div>
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {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">
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </ShadcnTable>
+
+      <div className="flex items-center justify-end space-x-2 py-4 px-4 border-t">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredRowModel().rows.length} row(s) total
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex items-center gap-1">
+          <p className="text-sm font-medium">Page</p>
+          <span className="text-sm font-medium">
+            {table.getState().pagination.pageIndex + 1} of{" "}
+            {table.getPageCount() || 0}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/dataDisplay/Table/columns.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "../../../components/ui/checkbox";
+import { z } from "zod";
+import {
+  ArrowDownIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  CheckCircledIcon,
+  CircleIcon,
+  CrossCircledIcon,
+  QuestionMarkCircledIcon,
+  StopwatchIcon,
+} from "@radix-ui/react-icons";
+import { DataTableColumnHeader } from "./custom/CustomTable/data-table-column-header";
+import { Badge } from "../../../components/ui/badge";
+import { DataTableRowActions } from "./custom/CustomTable/data-table-row-actions";
+
+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,
+  },
+];
+
+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>;
+
+export const columns: ColumnDef<Task>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Task" />
+    ),
+    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Title" />
+    ),
+    cell: ({ row }) => {
+      const label = labels.find((label) => label.value === row.original.label);
+
+      return (
+        <div className="flex space-x-2">
+          {label && <Badge variant="outline">{label.label}</Badge>}
+          <span className="max-w-[500px] truncate font-medium">
+            {row.getValue("title")}
+          </span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    cell: ({ row }) => {
+      const status = statuses.find(
+        (status) => status.value === row.getValue("status")
+      );
+
+      if (!status) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[100px] items-center">
+          {status.icon && (
+            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+          )}
+          <span>{status.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: "priority",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Priority" />
+    ),
+    cell: ({ row }) => {
+      const priority = priorities.find(
+        (priority) => priority.value === row.getValue("priority")
+      );
+
+      if (!priority) {
+        return null;
+      }
+
+      return (
+        <div className="flex items-center">
+          {priority.icon && (
+            <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+          )}
+          <span>{priority.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => (
+      <DataTableRowActions
+        row={row}
+        options={[
+          {
+            action: () => alert("Edit"),
+            label: "Edit",
+          },
+          {
+            action: () => alert("Make a copy"),
+            label: "Make a copy",
+          },
+          {
+            action: () => alert("Favorite"),
+            label: "Favorite",
+          },
+          {
+            action: () => alert("Delete"),
+            label: "Delete",
+          },
+        ]}
+      />
+    ),
+  },
+];

package/src/components/dataDisplay/Table/components/DynamicTable/data-table-column-header.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CaretSortIcon,
+  EyeNoneIcon,
+} from "@radix-ui/react-icons";
+import { Column } from "@tanstack/react-table";
+import { cn } from "../../../../../lib/utils";
+import { Button } from "../../../../../components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../../../components/ui/dropdown-menu";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDownIcon className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUpIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <CaretSortIcon className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Crescente
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Decrescente
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Ocultar
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/dataDisplay/Table/components/DynamicTable/data-table-pagination.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "../../../../../components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../../../components/ui/select";
+import { DynamicTablePaginationProps } from "./types";
+
+export function DataTablePagination<TData>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DynamicTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length} de{" "}
+        {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Linhas por página</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Página {table.getState().pagination.pageIndex + 1} de{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <DoubleArrowLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronRightIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <DoubleArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { DataTableViewOptions } from "./data-table-view-options";
+import { DynamicTableToolbarProps } from "./types";
+
+export function DataTableToolbar<TData>({
+  table,
+  filters,
+  showColumnVisibility,
+}: DynamicTableToolbarProps<TData>) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center space-x-2">{filters}</div>
+      {showColumnVisibility && <DataTableViewOptions table={table} />}
+    </div>
+  );
+}