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

package/src/components/actions/Steps/Steps.tsx

@@ -1,51 +0,0 @@
-import { useCallback } from "react";
-import { Button } from "../Button";
-import { Icon } from "../../../components/dataDisplay";
-import { Separator } from "../../../components/layout";
-import { cn } from "../../../lib/utils";
-
-type StepsProps = {
-  data: {
-    label?: string;
-    id: number;
-  }[];
-  onClick?: (id: number) => void;
-  value?: number;
-};
-export const Steps = ({ data, onClick = () => {}, value }: StepsProps) => {
-  const renderSteps = useCallback(() => {
-    return data.map(({ label, id }, index) => {
-      const isLast = index === data.length - 1;
-      const isActive = typeof value === "number" && id <= value;
-
-      return (
-        <div key={index} className={cn(!isLast && "w-full flex items-center")}>
-          <div>
-            <Button
-              onClick={() => onClick && onClick(id)}
-              variant={isActive ? "default" : "outline"}
-              size="icon"
-              className="rounded-full"
-            >
-              {isActive ? <Icon name="MdCheck" /> : index + 1}
-            </Button>
-          </div>
-          {label && <p className="absolute">{label}</p>}
-          {!isLast && (
-            <Separator
-              orientation="horizontal"
-              className={cn(isActive && "bg-primary h-[2px]")}
-            />
-          )}
-          {/* {
-              <Separator
-                orientation="horizontal"
-                className={cn("bg-primary h-[2px]")}
-              />
-            } */}
-        </div>
-      );
-    });
-  }, [data, onClick, value]);
-  return <div className="flex w-full">{renderSteps()}</div>;
-};

package/src/components/actions/Steps/index.ts

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

package/src/components/actions/index.ts

@@ -1,5 +0,0 @@
-export * from "./Button";
-export * from "./Dialog";
-export * from "./Collapsible";
-export * from "./Steps";
-export * from "./AlertDialog";

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

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Avatar } from "./Avatar";
-
-const meta = {
-  title: "DataDisplay/Avatar",
-  component: Avatar,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    src: "https://github.com/shadcn.png",
-    alt: "Avatar",
-    avatarFallback: "A",
-  },
-};

package/src/components/dataDisplay/Avatar/Avatar.tsx

@@ -1,21 +0,0 @@
-import {
-  Avatar as AvatarComponent,
-  AvatarFallback,
-  AvatarImage,
-} from "../../../components/ui/avatar";
-
-type AvatarProps = {
-  src: string;
-  alt: string;
-  className?: string;
-  avatarFallback: string;
-};
-
-export function Avatar({ src, alt, className, avatarFallback }: AvatarProps) {
-  return (
-    <AvatarComponent>
-      <AvatarImage src={src} alt={alt} className={className} />
-      <AvatarFallback>{avatarFallback}</AvatarFallback>
-    </AvatarComponent>
-  );
-}

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

@@ -1,2 +0,0 @@
-// export * from "./Avatar";
-export * from "../../ui/avatar";

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

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Badge } from "./index";
-
-const meta = {
-  title: "DataDisplay/Badge",
-  component: Badge,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  argTypes: {
-    variant: {
-      control: {
-        type: "select",
-      },
-      options: [
-        "default",
-        "primary",
-        "secondary",
-        "success",
-        "warning",
-        "destructive",
-      ],
-    },
-  },
-  args: {
-    children: "Badge",
-    variant: "default",
-  },
-};

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

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

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

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-
-import { Card } from "./index";
-import { Button } from "../../../components/actions";
-
-const meta = {
-  title: "DataDisplay/Card",
-  component: Card,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "Card title",
-    description: "Card description",
-    footer: () => <Button>Card footer</Button>,
-  },
-};

package/src/components/dataDisplay/Card/Card.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import {
-  Card as CardComponent,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../../components/ui/card";
-
-export type CardProps = {
-  title?: string;
-  description?: string;
-  footer?: () => React.ReactNode | JSX.Element;
-  children?: React.ReactNode | JSX.Element;
-};
-
-export const Card = ({
-  title,
-  children,
-  description,
-  footer = () => <></>,
-}: CardProps) => {
-  return (
-    <CardComponent>
-      <CardHeader>
-        {title && <CardTitle>{title}</CardTitle>}
-        {description && <CardDescription>{description}</CardDescription>}
-      </CardHeader>
-      {children && <CardContent>{children}</CardContent>}
-      {footer && <CardFooter>{footer()}</CardFooter>}
-    </CardComponent>
-  );
-};

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

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

package/src/components/dataDisplay/DataPairList/DataPairList.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import { isEmpty } from "lodash";
-import { DataPairListProps } from "./types";
-import { cn } from "../../../lib/utils";
-import { Text } from "../Text";
-
-export const DataPairList = ({
-  title,
-  data,
-  labels,
-  className,
-  infoDirection = "horizontal",
-  direction = "vertical",
-  withBorder = false,
-  header = <></>,
-}: DataPairListProps) => {
-  if (isEmpty(data)) return null;
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-2 rounded-md p-4",
-        withBorder && "border border-muted",
-        className
-      )}
-    >
-      <div className="flex gap-3">
-        {title && <Text variant="title">{title}</Text>}
-        {header}
-      </div>
-      <div
-        className={cn(
-          "grid grid-cols-1  mt-5",
-          direction === "vertical"
-            ? "gap-3"
-            : "sm:grid-cols-2 md:grid-cols-4 gap-10"
-        )}
-      >
-        {Object.entries(data || {}).map(([key, value], index) => (
-          <div
-            className={cn(
-              "flex gap-3",
-              infoDirection === "horizontal" ? "flex-row" : "flex-col"
-            )}
-            key={index}
-          >
-            <Text className="uppercase text-muted-foreground font-bold">
-              {labels?.[key] || key}:
-            </Text>
-            <Text>{value}</Text>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/dataDisplay/DataPairList/data-pair-list.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { DataPairList } from ".";
-import { Button } from "@/components/actions";
-
-const meta = {
-  title: "DataDisplay/DataPairList",
-  component: DataPairList,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof DataPairList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "Informações Pessoais",
-    data: {
-      name: "John Doe",
-      age: 30,
-      email: "john@example.com",
-      phone: "(11) 99999-9999",
-    },
-  },
-};
-
-export const WithLabels: Story = {
-  args: {
-    title: "Informações Pessoais",
-    data: {
-      name: "John Doe",
-      age: 30,
-      email: "john@example.com",
-      phone: "(11) 99999-9999",
-    },
-    labels: {
-      name: "Nome",
-      age: "Idade",
-      email: "E-mail",
-      phone: "Telefone",
-    },
-  },
-};
-
-export const WithoutTitle: Story = {
-  args: {
-    data: {
-      name: "John Doe",
-      age: 30,
-      email: "john@example.com",
-      phone: "(11) 99999-9999",
-    },
-  },
-};
-
-export const EmptyData: Story = {
-  args: {
-    title: "Sem Dados",
-    data: {},
-  },
-};
-
-export const WithHeader: Story = {
-  args: {
-    title: "Com botão de ação",
-    data: {
-      name: "John Doe",
-      age: 30,
-      email: "john@example.com",
-      phone: "(11) 99999-9999",
-    },
-    header: <Button>Editar</Button>,
-  },
-};
-
-export const WithClassName: Story = {
-  args: {
-    title: "Com Classe Customizada",
-    data: {
-      name: "John Doe",
-      age: 30,
-    },
-    className: "bg-slate-100",
-  },
-};

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

@@ -1,2 +0,0 @@
-export * from "./DataPairList";
-export type { DataPairListProps } from "./types";

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>
-  );
-}