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

package/src/components/dataInput/Switch/Switch.tsx

@@ -1,52 +0,0 @@
-import { Label } from "../../../components/ui/label";
-import {
-  Switch as SwitchUI,
-  SwitchProps as SwitchUIProps,
-} from "../../../components/ui/switch";
-import { useFormContext } from "react-hook-form";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "../../../components/ui/form";
-import { cn } from "../../../lib/utils";
-
-export type SwitchProps = SwitchUIProps & {
-  label?: string;
-  withoutForm?: boolean;
-};
-
-export function Switch({
-  label,
-  withoutForm,
-  className,
-  ...props
-}: SwitchProps) {
-  const form = useFormContext();
-  const hasForm = !!form && !withoutForm && !!props.name;
-
-  if (!hasForm)
-    return (
-      <div className="flex items-center space-x-2">
-        <SwitchUI {...props} />
-        {label && <Label htmlFor={props.id}>{label}</Label>}
-      </div>
-    );
-  return (
-    <FormField
-      control={form.control}
-      name={props.name ?? ""}
-      render={({ field }) => (
-        <FormItem
-          className={cn(className, "flex items-center space-x-2 space-y-0")}
-        >
-          <FormControl>
-            <Switch checked={field.value} onCheckedChange={field.onChange} />
-          </FormControl>
-          <FormLabel>{label}</FormLabel>
-        </FormItem>
-      )}
-    />
-  );
-}

package/src/components/dataInput/Switch/index.ts

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

package/src/components/dataInput/checkbox/Checkbox.tsx

@@ -1,57 +0,0 @@
-import { useFormContext } from "react-hook-form";
-import {
-  Checkbox as CheckboxUI,
-  CheckboxProps as CheckboxUIProps,
-} from "../../ui/checkbox";
-import { Label } from "../../../components/ui/label";
-
-import { FormControl, FormField, FormItem, FormLabel } from "../form";
-
-import { ErrorMessage } from "../../../components/dataDisplay/ErrorMessage";
-
-export type CheckboxProps = CheckboxUIProps & {
-  label: string;
-  error?: string;
-  withoutForm?: boolean;
-};
-
-export const Checkbox = ({
-  label,
-  error,
-  withoutForm,
-  ...props
-}: CheckboxProps) => {
-  const form = useFormContext();
-
-  const hasForm = !withoutForm && !!form && !!props.name;
-  if (!hasForm)
-    return (
-      <div className="flex items-center space-x-2">
-        <CheckboxUI {...props} />
-        {label && <Label htmlFor={props.id}>{label}</Label>}
-        {error && <ErrorMessage>{error}</ErrorMessage>}
-      </div>
-    );
-
-  return (
-    <FormField
-      control={form.control}
-      name={props.name ?? ""}
-      render={({ field }) => (
-        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-          <FormControl>
-            <CheckboxUI
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
-          </FormControl>
-          {label && (
-            <div className="space-y-1 leading-none">
-              <FormLabel>{label}</FormLabel>
-            </div>
-          )}
-        </FormItem>
-      )}
-    />
-  );
-};

package/src/components/dataInput/checkbox/Checkbox_old.tsx

@@ -1,58 +0,0 @@
-import { Label } from "../../../components/ui/label";
-import {
-  Checkbox as CheckboxUI,
-  CheckboxProps as CheckboxUIProps,
-} from "../../ui/checkbox";
-import { ErrorMessage } from "../../../components/dataDisplay/ErrorMessage";
-import { FormControl } from "..";
-import { FormField, FormItem, FormLabel } from "../form";
-import { useFormContext } from "react-hook-form";
-
-export type CheckboxProps = CheckboxUIProps & {
-  label: string;
-  error?: string;
-  withoutForm?: boolean;
-};
-
-export const Checkbox = ({
-  label,
-  error,
-  withoutForm,
-  ...props
-}: CheckboxProps) => {
-  const form = useFormContext();
-
-  const hasForm = !withoutForm && !!form && !!props.name;
-  // if (!hasForm)
-  //   return (
-  //     <div className="flex items-center space-x-2">
-  //       <CheckboxUI {...props} />
-  //       {label && <Label htmlFor={props.id}>{label}</Label>}
-  //       {error && <ErrorMessage>{error}</ErrorMessage>}
-  //     </div>
-  //   );
-
-  return <></>;
-
-  return (
-    <FormField
-      control={form.control}
-      name={props.name ?? ""}
-      render={({ field }) => (
-        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-          <FormControl>
-            <CheckboxUI
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
-          </FormControl>
-          {label && (
-            <div className="space-y-1 leading-none">
-              <FormLabel>{label}</FormLabel>
-            </div>
-          )}
-        </FormItem>
-      )}
-    />
-  );
-};

package/src/components/dataInput/checkbox/Checkout.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Checkbox } from "./Checkbox";
-import { Form } from "../form";
-import { useForm } from "react-hook-form";
-
-type Story = StoryObj<typeof Checkbox>;
-
-const meta = {
-  title: "Data Input/Checkbox",
-  component: Checkbox,
-  tags: ["autodocs"],
-  args: {
-    label: "Accept terms and conditions",
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-
-export const Default: Story = {
-  args: {
-    label: "Accept terms and conditions",
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: "Accept terms and conditions",
-    checked: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: "Accept terms and conditions",
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  args: {
-    label: "Accept terms and conditions",
-    disabled: true,
-    checked: true,
-  },
-};
-
-export const WithForm: Story = {
-  args: {
-    label: "Accept terms and conditions",
-  },
-  decorators: [
-    (Story: React.ComponentType) => {
-      const form = useForm();
-
-      return (
-        <Form {...form}>
-          <Story />
-        </Form>
-      );
-    },
-  ],
-};

package/src/components/dataInput/checkbox/index.ts

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

package/src/components/dataInput/form/Form.tsx

@@ -1,47 +0,0 @@
-import { useMemo } from "react";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "./index";
-import {
-  ControllerRenderProps,
-  FieldValues,
-  useFormContext,
-} from "react-hook-form";
-
-export type FormContainerProps = {
-  name: string;
-  label?: string;
-  render: (
-    props?: ControllerRenderProps<FieldValues, string>
-  ) => React.ReactNode;
-  className?: string;
-};
-export const FormContainer = ({
-  name,
-  label,
-  className,
-  render = () => <></>,
-}: FormContainerProps) => {
-  const form = useFormContext();
-  const control = useMemo(() => form?.control, [form]);
-
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field }) => (
-        <FormItem className={className}>
-          <FormItem className={className}>
-            {label && <FormLabel>{label}</FormLabel>}
-            <FormControl>{render && render(field)}</FormControl>
-          </FormItem>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-};

package/src/components/dataInput/form/index.ts

@@ -1,3 +0,0 @@
-import { useFormContext } from "react-hook-form";
-export * from "../../ui/form";
-export { useFormContext };

package/src/components/dataInput/index.ts

@@ -1,5 +0,0 @@
-export * from "./checkbox";
-export * from "./Input";
-export * from "./form";
-export * from "./Select";
-export * from "./Switch";

package/src/components/feedback/ErrorLabel/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { Icon } from "@/components/dataDisplay";
-import { cn } from "@/lib/utils";
-
-export type ErrorLabelProps = React.PropsWithChildren<{
-  className?: string;
-  "data-testid"?: string;
-}>;
-
-export const ErrorLabel = ({
-  children,
-  className,
-  "data-testid": dataTestId,
-}: ErrorLabelProps) => {
-  return (
-    <div
-      className={cn("flex items-center gap-2 my-2", className)}
-      data-testid={`${dataTestId}-error-label`}
-    >
-      <Icon name="MdErrorOutline" size={18} className="text-destructive" />
-      <span className="text-destructive text-sm">{children}</span>
-    </div>
-  );
-};

package/src/components/feedback/Spinner/index.ts

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

package/src/components/feedback/Toast/Toast.stories.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { fn } from "storybook/test";
-import { Button } from "../../../components/actions";
-import { Toaster, useToast } from "./index";
-
-const meta = {
-  title: "DataInput/Toast",
-  component: Toaster,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onClick: fn() },
-} satisfies Meta<typeof Toaster>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "Success",
-    description: "This is a success message",
-    variant: "default",
-  },
-  argTypes: {
-    descritpion: { control: { type: "text" } },
-    title: { control: { type: "text" } },
-    variant: {
-      control: {
-        type: "select",
-      },
-      options: ["default", "success", "destructive"],
-    },
-  },
-  render: (args) => {
-    const { toast } = useToast();
-    return (
-      <div className="w-[500px] h-[500px]">
-        <Button onClick={() => toast(args)}>Success</Button>
-        <Toaster />
-      </div>
-    );
-  },
-};

package/src/components/feedback/Toast/index.ts

@@ -1,2 +0,0 @@
-export * from "../../ui/toaster";
-export * from "../../../hooks/use-toast";

package/src/components/feedback/index.ts

@@ -1,2 +0,0 @@
-export * from "./Spinner";
-export * from "./Toast";

package/src/components/index.ts

@@ -1,6 +0,0 @@
-export * from "./dataDisplay";
-export * from "./dataInput";
-export * from "./actions";
-export * from "./layout";
-export * from "./navigation";
-export * from "./feedback";

package/src/components/layout/Crud/components/Table/index.tsx

@@ -1,183 +0,0 @@
-import {
-  Table as TableUI,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableCell,
-} from "@/components/ui/table";
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { TableProps } from "./types";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-export function Table<TData>({
-  data,
-  columns,
-  isLoading,
-  pagination,
-}: TableProps<TData>) {
-  // Configuração da tabela
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount: pagination ? Math.ceil(pagination.total / pagination.limit) : 1,
-  });
-
-  if (isLoading && data.length === 0) {
-    return (
-      <div className="rounded-md border">
-        <TableUI>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell colSpan={columns.length} className="text-center">
-                Carregando...
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </TableUI>
-      </div>
-    );
-  }
-
-  if (data.length === 0) {
-    return (
-      <div className="rounded-md border">
-        <TableUI>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell colSpan={columns.length} className="text-center">
-                Nenhuma configuração encontrada
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </TableUI>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-md border">
-        <TableUI>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {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>
-            ))}
-          </TableBody>
-        </TableUI>
-      </div>
-
-      {pagination && (
-        <div className="flex items-center justify-between px-2">
-          <div className="flex items-center space-x-2">
-            <p className="text-sm font-medium">Linhas por página</p>
-            <Select
-              value={pagination.limit.toString()}
-              onValueChange={(value) => pagination.onLimitChange(Number(value))}
-            >
-              <SelectTrigger className="h-8 w-[70px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent side="top">
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="20">20</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-                <SelectItem value="100">100</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="flex items-center space-x-6 lg:space-x-8">
-            <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-              Página {pagination.page} de{" "}
-              {Math.ceil(pagination.total / pagination.limit)}
-            </div>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0"
-                onClick={() => pagination.onPageChange(pagination.page - 1)}
-                disabled={pagination.page <= 1}
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0"
-                onClick={() => pagination.onPageChange(pagination.page + 1)}
-                disabled={
-                  pagination.page >=
-                  Math.ceil(pagination.total / pagination.limit)
-                }
-              >
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/layout/Crud/components/Table/types.ts

@@ -1,15 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-
-export interface TableProps<TData> {
-  data: TData[];
-  columns: ColumnDef<TData>[];
-  isLoading: boolean;
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-    onPageChange: (page: number) => void;
-    onLimitChange: (limit: number) => void;
-    pageOptions: number[];
-  };
-}