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

package/src/app/columns.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { z } from "zod";
-import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
-  CheckCircledIcon,
-  CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons";
-import {
-  Badge,
-  DataTableColumnHeader,
-  DataTableRowActions,
-} from "@/components";
-
-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>[] = [
-  {
-    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} />,
-  },
-];

package/src/app/globals.css

@@ -1,94 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: "Roboto", Arial, Helvetica, sans-serif; /* Adicionando a fonte Roboto */
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 150 6% 25%;
-    --card: 0 0% 100%;
-    --card-foreground: 150 6% 25%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 150 6% 25%;
-    --primary: 145 63% 42%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 150 10% 96%;
-    --secondary-foreground: 150 6% 25%;
-    --muted: 150 10% 96%;
-    --muted-foreground: 150 6% 45%;
-    --accent: 150 10% 96%;
-    --accent-foreground: 150 6% 25%;
-    --success: 145 63% 42%;
-    --success-foreground: 0 0% 98%;
-    --warning: 48 89% 50%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 150 12% 88%;
-    --input: 150 12% 88%;
-    --ring: 145 63% 42%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 150 15% 98%;
-    --sidebar-foreground: 150 6% 30%;
-    --sidebar-primary: 145 63% 42%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 150 15% 95%;
-    --sidebar-accent-foreground: 150 6% 25%;
-    --sidebar-border: 150 15% 90%;
-    --sidebar-ring: 145 63% 42%;
-  }
-
-  .dark {
-    --background: 150 15% 4%;
-    --foreground: 150 10% 95%;
-    --card: 150 15% 4%;
-    --card-foreground: 150 10% 95%;
-    --popover: 150 15% 4%;
-    --popover-foreground: 150 10% 95%;
-    --primary: 145 63% 48%;
-    --primary-foreground: 150 15% 8%;
-    --secondary: 150 12% 12%;
-    --secondary-foreground: 150 10% 95%;
-    --muted: 150 12% 12%;
-    --muted-foreground: 150 8% 60%;
-    --accent: 150 12% 12%;
-    --accent-foreground: 150 10% 95%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 150 12% 18%;
-    --input: 150 12% 18%;
-    --ring: 145 63% 48%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 150 15% 8%;
-    --sidebar-foreground: 150 10% 90%;
-    --sidebar-primary: 145 63% 48%;
-    --sidebar-primary-foreground: 150 15% 8%;
-    --sidebar-accent: 150 12% 15%;
-    --sidebar-accent-foreground: 150 10% 90%;
-    --sidebar-border: 150 12% 15%;
-    --sidebar-ring: 145 63% 48%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/app/layout.tsx

@@ -1,35 +0,0 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}

package/src/app/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-export default function Home() {
-  return (
-    <div className="flex w-full justify-center flex-col items-center"></div>
-  );
-}

package/src/components/actions/AlertDialog/AlertDialog.tsx

@@ -1,45 +0,0 @@
-import {
-  AlertDialog as AlertDialogUI,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "../../ui/alert-dialog";
-
-export type AlertDialogProps = {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-  onConfirm?: () => void;
-  onCancel?: () => void;
-};
-
-export const AlertDialog = ({
-  title,
-  description,
-  children,
-  onConfirm,
-  onCancel,
-}: AlertDialogProps) => {
-  return (
-    <AlertDialogUI>
-      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          {description && (
-            <AlertDialogDescription>{description}</AlertDialogDescription>
-          )}
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm}>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialogUI>
-  );
-};

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