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

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

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

@@ -1,156 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-// import { ConfigResponse } from "@/service/config/types";
-
-// esse ConfigResponse
-
-export type useRequestProps<ListData, CreateData, UpdateData> = {
-  queryKey: string;
-  createRequest?: (data: CreateData) => Promise<ListData | void>;
-  updateRequest?: (data: UpdateData) => Promise<ListData | void>;
-  deleteRequest?: (id: string) => Promise<void>;
-  listRequest: (
-    page?: number,
-    limit?: number
-  ) => Promise<{ data: ListData[]; total: number }>;
-  page: number;
-  limit: number;
-};
-
-export function useRequest<
-  ListData extends { _id: string },
-  CreateData,
-  UpdateData
->({
-  queryKey,
-  updateRequest = () => Promise.resolve(),
-  deleteRequest = () => Promise.resolve(),
-  createRequest = () => Promise.resolve(),
-  listRequest,
-  page,
-  limit,
-}: useRequestProps<ListData, CreateData, UpdateData>) {
-  const queryClient = useQueryClient();
-
-  const queryKeys = useMemo(() => {
-    return [queryKey, page, limit];
-  }, [queryKey, page, limit]);
-
-  // Query para buscar configurações
-  const {
-    data: queryData,
-    isLoading: isLoadingList,
-    error: queryError,
-    refetch,
-  } = useQuery({
-    queryKey: queryKeys,
-    queryFn: () => listRequest(page, limit),
-    staleTime: 5 * 60 * 1000, // 5 minutos
-  });
-
-  const listData = queryData?.data || [];
-  const total = queryData?.total || 0;
-
-  // Mutation para criar/atualizar configuração
-  const {
-    mutateAsync: createMutation,
-    isPending: isCreating,
-    error: createError,
-  } = useMutation({
-    mutationFn: createRequest,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys });
-    },
-  });
-
-  const {
-    mutateAsync: updateMutation,
-    isPending: isUpdating,
-    error: updateError,
-  } = useMutation({
-    mutationFn: updateRequest,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys });
-    },
-  });
-
-  // Mutation para excluir configuração
-  const {
-    mutateAsync: deleteMutation,
-    isPending: isDeleting,
-    error: deleteError,
-  } = useMutation({
-    mutationFn: (id: string) => deleteRequest(id),
-    onSuccess: (_, id) => {
-      // Invalidar todas as páginas para garantir consistência
-      queryClient.invalidateQueries({
-        queryKey: [queryKey],
-        exact: false,
-      });
-    },
-  });
-
-  const error =
-    queryError || createError || updateError || deleteError
-      ? (queryError || createError || updateError || deleteError) instanceof
-        Error
-        ? (queryError || createError || updateError || deleteError)?.message
-        : "Erro desconhecido"
-      : null;
-
-  // Função para criar nova configuração
-  const createActionRequest = useCallback(
-    async (configData: CreateData) => {
-      try {
-        await createMutation(configData);
-        return true;
-      } catch (err) {
-        console.error("Erro ao criar configuração:", err);
-        return false;
-      }
-    },
-    [createMutation]
-  );
-
-  // Função para atualizar configuração existente
-  const updateActionRequest = useCallback(
-    async (configData: UpdateData) => {
-      try {
-        await updateMutation(configData);
-        return true;
-      } catch (err) {
-        console.error("Erro ao atualizar configuração:", err);
-        return false;
-      }
-    },
-    [updateMutation]
-  );
-
-  const deleteActionRequest = useCallback(
-    async (key: string) => {
-      try {
-        await deleteMutation(key);
-        return true;
-      } catch (err) {
-        console.error("Erro ao excluir configuração:", err);
-        return false;
-      }
-    },
-    [deleteMutation]
-  );
-
-  const refreshConfigs = useCallback(() => {
-    return refetch();
-  }, [refetch]);
-
-  return {
-    listData,
-    total,
-    isLoading: isLoadingList || isCreating || isUpdating || isDeleting,
-    error,
-    createActionRequest,
-    updateActionRequest,
-    deleteActionRequest,
-    refreshConfigs,
-  };
-}