@phsa.tec/design-system-react 0.1.0

package/src/components/actions/Button/Button.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { fn } from "storybook/test";
+
+import { Button } from "./index";
+
+const meta = {
+  title: "Action/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      options: [
+        "primary",
+        "secondary",
+        "destructive",
+        "outline",
+        "ghost",
+        "link",
+      ],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};

package/src/components/actions/Button/Button.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import { Spinner } from "../../../components/feedback";
+import {
+  Button as UIButton,
+  ButtonProps as UIButtonProps,
+} from "../../ui/button";
+
+export type ButtonProps = UIButtonProps & {
+  loading?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, disabled, loading, ...rest }, ref) => {
+    return (
+      <UIButton {...rest} disabled={disabled || loading} ref={ref}>
+        {loading && <Spinner className="fill-white" />}
+        {children}
+      </UIButton>
+    );
+  }
+);
+
+Button.displayName = "Button";

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

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

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

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

package/src/components/actions/Dialog/Dialog.stories.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { DialogWithActions as DialogWithActionsComponent } from "./components/DialogWithActions";
+import { Dialog } from "./Dialog";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Label } from "@/components/dataDisplay/Label";
+import { Input } from "@/components/dataInput";
+
+const meta = {
+  title: "Action/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+  },
+
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Dialog Title",
+    description: "Dialog Description",
+    footer: () => <button>Footer Button</button>,
+  },
+  render: (props) => {
+    const [open, setOpen] = useState<boolean>(false);
+    return (
+      <div>
+        <button onClick={() => setOpen(true)}>Open Dialog</button>
+        <Dialog {...props} open={open} onOpenChange={setOpen}>
+          This action cannot be undone. This will permanently delete your
+          account and remove your data from our servers.
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const DialogWithActions: Story = {
+  render: (args) => {
+    return (
+      <DialogWithActionsComponent {...args}>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input
+              id="name"
+              defaultValue="Pedro Duarte"
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input
+              id="username"
+              defaultValue="@peduarte"
+              className="col-span-3"
+            />
+          </div>
+        </div>
+      </DialogWithActionsComponent>
+    );
+  },
+};

package/src/components/actions/Dialog/Dialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+import {
+  Dialog as DialogComponent,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogProps as DialogComponentProps,
+  DialogClose,
+} from "../../../components/ui/dialog";
+import { PropsWithChildren, useRef } from "react";
+import { Button } from "../Button";
+
+export type DialogProps = DialogComponentProps &
+  PropsWithChildren & {
+    className?: string;
+    title?: string;
+    description?: string;
+    footer?: () => React.ReactNode;
+  };
+
+export function Dialog({
+  title,
+  description,
+  className,
+  children,
+  footer = () => null,
+  ...props
+}: DialogProps) {
+  return (
+    <DialogComponent {...props}>
+      <DialogContent className={className}>
+        <DialogHeader>
+          {title && <DialogTitle>{title}</DialogTitle>}
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {children}
+        {footer && <DialogFooter>{footer()}</DialogFooter>}
+      </DialogContent>
+    </DialogComponent>
+  );
+}
+
+export type DialogWithFormProps = DialogProps & {
+  onSubmit: () => void;
+};
+
+export const DialogWithForm = ({
+  title,
+  description,
+  className,
+  children,
+  footer = () => null,
+  onSubmit = () => {},
+  ...props
+}: DialogWithFormProps) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <DialogComponent {...props}>
+      <DialogContent className={className} ref={dialogRef}>
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <DialogHeader>
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && (
+              <DialogDescription>{description}</DialogDescription>
+            )}
+          </DialogHeader>
+          {children}
+          {footer && (
+            <DialogFooter>
+              <div className="flex justify-between w-full">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Fechar
+                  </Button>
+                </DialogClose>
+                {footer()}
+              </div>
+            </DialogFooter>
+          )}
+        </form>
+      </DialogContent>
+    </DialogComponent>
+  );
+};

package/src/components/actions/Dialog/components/DialogWithActions/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Button } from "../../../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../../components/ui/dialog";
+
+type DialogWithActionsProps = React.PropsWithChildren & {
+  title?: string;
+  description?: string;
+};
+
+export function DialogWithActions({
+  children,
+  title = "Edit profile",
+  description = "Make changes to your profile here. Click save when you're done.",
+}: DialogWithActionsProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        {children}
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

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

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { fn } from "storybook/test";
+
+import { Steps } from "./Steps";
+
+const meta = {
+  title: "Action/Steps",
+  component: Steps,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {},
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Steps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }],
+    value: 3,
+  },
+};

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

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

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

package/src/components/actions/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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