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

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[];
-  };
-}

package/src/components/layout/Crud/crud.stories.tsx

@@ -1,317 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { CrudLayout } from "./index";
-import { useForm } from "react-hook-form";
-import { Input } from "@/components/dataInput/Input/components/Input";
-import { Button } from "@/components/ui/button";
-import { ColumnDef } from "@tanstack/react-table";
-import { Edit, Trash2 } from "lucide-react";
-import { useCrudLayoutActions } from "./store/CrudLayoutStore";
-import { useCrudLayout } from "./hook/useCrudLayout";
-
-// Tipos de exemplo para as stories
-interface ExampleData {
-  _id: string;
-  name: string;
-  email: string;
-  status: string;
-}
-
-interface CreateData {
-  name: string;
-  email: string;
-  status: string;
-}
-
-interface UpdateData extends CreateData {
-  _id: string;
-}
-
-// Função para gerar dados aleatórios
-const generateMockData = (count: number): ExampleData[] => {
-  const firstNames = [
-    "João",
-    "Maria",
-    "Pedro",
-    "Ana",
-    "Carlos",
-    "Lucia",
-    "Roberto",
-    "Fernanda",
-    "Ricardo",
-    "Juliana",
-    "Marcos",
-    "Patricia",
-    "Antonio",
-    "Carla",
-    "José",
-    "Sandra",
-    "Paulo",
-    "Beatriz",
-    "Francisco",
-    "Mariana",
-    "Luiz",
-    "Gabriela",
-    "Miguel",
-    "Larissa",
-    "Rafael",
-    "Camila",
-    "Daniel",
-    "Renata",
-    "Felipe",
-    "Vanessa",
-    "Bruno",
-    "Priscila",
-    "Thiago",
-    "Amanda",
-    "Leonardo",
-    "Bianca",
-    "Gustavo",
-    "Natalia",
-    "Rodrigo",
-    "Tatiana",
-    "Eduardo",
-    "Viviane",
-    "Vinicius",
-    "Claudia",
-    "Matheus",
-    "Sabrina",
-    "Lucas",
-    "Adriana",
-    "Diego",
-    "Monica",
-  ];
-
-  const lastNames = [
-    "Silva",
-    "Santos",
-    "Oliveira",
-    "Costa",
-    "Ferreira",
-    "Pereira",
-    "Lima",
-    "Alves",
-    "Souza",
-    "Rodrigues",
-    "Martins",
-    "Carvalho",
-    "Barbosa",
-    "Gomes",
-    "Nascimento",
-    "Ribeiro",
-    "Araujo",
-    "Dias",
-    "Fernandes",
-    "Morais",
-    "Cardoso",
-    "Campos",
-    "Rocha",
-    "Monteiro",
-    "Mendes",
-    "Freitas",
-    "Pinto",
-    "Cavalcanti",
-    "Vieira",
-    "Teixeira",
-    "Moreira",
-    "Correia",
-    "Castro",
-    "Andrade",
-    "Nunes",
-    "Ramos",
-    "Lopes",
-    "Machado",
-    "Reis",
-    "Moura",
-    "Cunha",
-    "Pires",
-    "Farias",
-    "Melo",
-    "Azevedo",
-    "Borges",
-    "Paiva",
-    "Coelho",
-    "Guimaraes",
-    "Nogueira",
-  ];
-
-  const domains = [
-    "example.com",
-    "test.com",
-    "demo.com",
-    "sample.org",
-    "mock.net",
-  ];
-  const statuses = ["Ativo", "Inativo", "Pendente", "Suspenso"];
-
-  const data: ExampleData[] = [];
-
-  for (let i = 1; i <= count; i++) {
-    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
-    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
-    const domain = domains[Math.floor(Math.random() * domains.length)];
-    const status = statuses[Math.floor(Math.random() * statuses.length)];
-
-    const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${domain}`;
-
-    data.push({
-      _id: i.toString(),
-      name: `${firstName} ${lastName}`,
-      email: email,
-      status: status,
-    });
-  }
-
-  return data;
-};
-
-// Dados de exemplo gerados automaticamente
-const mockData: ExampleData[] = generateMockData(100);
-
-// Componente de formulário de exemplo
-const ExampleForm = () => {
-  return (
-    <div className="space-y-4">
-      <Input name="name" label="Nome" placeholder="Digite o nome" required />
-      <Input name="email" label="Email" placeholder="Digite o email" required />
-      <Input
-        name="status"
-        label="Status"
-        placeholder="Digite o status"
-        required
-      />
-    </div>
-  );
-};
-
-// Create a QueryClient instance for Storybook
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false, // Disable retries in Storybook
-      refetchOnWindowFocus: false, // Disable refetch on window focus
-    },
-  },
-});
-
-// Componente wrapper para usar o store
-const CrudWrapper = (args: any) => {
-  const form = useForm<CreateData | UpdateData>();
-  useCrudLayout({
-    create: {
-      titleModal: "Criar Usuário",
-      submitButtonText: "Criar",
-      descriptionModal: "Crie um novo usuário",
-    },
-    update: {
-      titleModal: "Atualizar Usuário",
-      submitButtonText: "Atualizar",
-      descriptionModal: "Atualize os dados do usuário",
-    },
-    delete: {
-      titleModal: "Deletar Usuário",
-      submitButtonText: "Deletar",
-      descriptionModal: "Tem certeza que deseja deletar o usuário?",
-    },
-    createButtonText: "Novo usuário",
-  });
-
-  // Colunas da tabela
-  const columns: ColumnDef<ExampleData>[] = [
-    {
-      accessorKey: "name",
-      header: "Nome",
-    },
-    {
-      accessorKey: "email",
-      header: "Email",
-    },
-    {
-      accessorKey: "status",
-      header: "Status",
-    },
-  ];
-
-  // Funções de exemplo
-  const createRequest = async (data: CreateData) => {
-    console.log("Creating:", data);
-    // Simula delay de requisição
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    return Promise.resolve();
-  };
-
-  const updateRequest = async (data: UpdateData) => {
-    console.log("Updating:", data);
-    // Simula delay de requisição
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    return Promise.resolve();
-  };
-
-  const deleteRequest = async (id: string) => {
-    console.log("Deleting:", id);
-    // Simula delay de requisição
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    return Promise.resolve();
-  };
-
-  const listRequest = async (page?: number, limit?: number) => {
-    // Simula delay de carregamento
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // Implementar paginação nos dados mock
-    const startIndex = ((page || 1) - 1) * (limit || 10);
-    const endIndex = startIndex + (limit || 10);
-    const paginatedData = mockData.slice(startIndex, endIndex);
-
-    return Promise.resolve({
-      data: paginatedData,
-      total: mockData.length,
-    });
-  };
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <CrudLayout
-        {...args}
-        columns={columns}
-        form={form}
-        formComponent={<ExampleForm />}
-        createRequest={createRequest}
-        updateRequest={updateRequest}
-        deleteRequest={deleteRequest}
-        listRequest={listRequest}
-        actions={["update", "delete"]}
-        title="Gerenciar Usuários"
-        description="Gerencie os usuários do sistema"
-      />
-    </QueryClientProvider>
-  );
-};
-
-const meta: Meta<typeof CrudLayout> = {
-  title: "Layout/Crud",
-  component: CrudLayout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-  decorators: [
-    (Story) => (
-      <QueryClientProvider client={queryClient}>
-        <div className="p-4">
-          <Story />
-        </div>
-      </QueryClientProvider>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof CrudLayout>;
-
-export const Default: Story = {
-  render: (args) => <CrudWrapper {...args} />,
-  args: {
-    title: "Gerenciar Usuários",
-  },
-};

package/src/components/layout/Crud/hook/useCrudLayout/index.tsx

@@ -1,94 +0,0 @@
-import { useEffect, useMemo } from "react";
-import {
-  useCreateButtonText,
-  useCrudLayoutActions,
-  useDeleteId,
-  useEditId,
-  useDescriptionModal,
-  useIsEditMode,
-  useSubmitButtonText,
-  useTitleModal,
-  useOpenEditModal,
-} from "../../store/CrudLayoutStore";
-
-type CommonProps = {
-  titleModal: string;
-  descriptionModal?: string;
-  submitButtonText: string;
-  sendingButtonText?: string;
-};
-
-type UseCrudLayoutProps = {
-  create?: CommonProps;
-  update?: CommonProps;
-  delete?: CommonProps;
-  createButtonText: string;
-};
-
-export function useCrudLayout(props: UseCrudLayoutProps) {
-  const deleteId = useDeleteId();
-  const editId = useEditId();
-  const titleModal = useTitleModal();
-  const descriptionModal = useDescriptionModal();
-  const submitButtonText = useSubmitButtonText();
-  const createButtonText = useCreateButtonText();
-  const isEditMode = useIsEditMode();
-  const openEditModal = useOpenEditModal();
-  const {
-    setTitleModal,
-    setDescriptionModal,
-    setSubmitButtonText,
-    setCreateButtonText,
-    setIsEditMode,
-    setDeleteId,
-    setEditId,
-    setOpenEditModal,
-    setSendingButtonText,
-  } = useCrudLayoutActions();
-
-  const key = useMemo(() => {
-    if (editId) return "update";
-    if (deleteId) return "delete";
-    return "create";
-  }, [editId, deleteId]);
-
-  useEffect(() => {
-    const data = props[key] as CommonProps;
-
-    if (data) {
-      setTitleModal(data.titleModal);
-      setDescriptionModal(data.descriptionModal || "");
-      setSubmitButtonText(data.submitButtonText);
-      setCreateButtonText(props.createButtonText);
-      setSendingButtonText(data.sendingButtonText);
-    }
-  }, [
-    props,
-    key,
-    setTitleModal,
-    setDescriptionModal,
-    setSubmitButtonText,
-    setCreateButtonText,
-    setSendingButtonText,
-    deleteId,
-  ]);
-
-  return {
-    setTitleModal,
-    setDescriptionModal,
-    setSubmitButtonText,
-    setCreateButtonText,
-    setIsEditMode,
-    setDeleteId,
-    setEditId,
-    setOpenEditModal,
-    titleModal,
-    descriptionModal,
-    submitButtonText,
-    createButtonText,
-    isEditMode,
-    deleteId,
-    editId,
-    openEditModal,
-  };
-}