@phsa.tec/design-system-react 0.1.0

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

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

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

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

@@ -0,0 +1,94 @@
+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,
+  };
+}