@phsa.tec/design-system-react 0.1.6 → 0.1.8

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

@@ -1,10 +0,0 @@
-export interface DataPairListProps {
-  title?: string;
-  data: Record<string, string | number | undefined>;
-  labels?: Record<string, string>;
-  className?: string;
-  infoDirection?: "vertical" | "horizontal";
-  direction?: "vertical" | "horizontal";
-  withBorder?: boolean;
-  header?: React.ReactNode;
-}

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

@@ -1 +0,0 @@
-export * from "../../ui/dropdown-menu";

package/src/components/dataDisplay/ErrorMessage/ErrorMessage.tsx

@@ -1,6 +0,0 @@
-export type ErrorMessageProps = {
-  children: string;
-};
-export const ErrorMessage = ({ children }: ErrorMessageProps) => {
-  return <p className="text-sm font-medium text-destructive">{children}</p>;
-};

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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,173 +0,0 @@
-"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

@@ -1,223 +0,0 @@
-"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

@@ -1,72 +0,0 @@
-"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>
-  );
-}