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

package/src/components/actions/AlertDialog/alert-dialog.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { AlertDialog } from "./AlertDialog";
-import { Button } from "../../ui/button";
-
-const meta: Meta<typeof AlertDialog> = {
-  title: "Action/AlertDialog",
-  component: AlertDialog,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof AlertDialog>;
-
-export const Default: Story = {
-  args: {
-    title: "Are you absolutely sure?",
-    description:
-      "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-    children: <Button variant="destructive">Delete Account</Button>,
-  },
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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";