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

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

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

@@ -1,295 +0,0 @@
-import { AlertCircle, Edit, Plus, Trash2 } from "lucide-react";
-import { Table } from "./components/Table";
-import { CrudLayoutProps } from "./types";
-import { Button } from "@/components/ui/button";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Form } from "@/components/ui/form";
-import {
-  Dialog,
-  DialogHeader,
-  DialogContent,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import {
-  useTitleModal,
-  useDescriptionModal,
-  useSubmitButtonText,
-  useCreateButtonText,
-  useCrudLayoutActions,
-  useOpenEditModal,
-  useDeleteId,
-  useEditId,
-  useSendingButtonText,
-} from "./store/CrudLayoutStore";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { useRequest } from "./hook/useRequest";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { toast } from "sonner";
-
-export const CrudLayout = <
-  ListData extends { _id: string },
-  CreateData,
-  UpdateData
->({
-  columns,
-  title,
-  createRequest,
-  updateRequest,
-  deleteRequest,
-  listRequest = () => Promise.resolve({ data: [], total: 0 }),
-  formComponent,
-  actions = [],
-  form,
-}: CrudLayoutProps<ListData, CreateData, UpdateData>) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalMode, setModalMode] = useState<"create" | "edit">("create");
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(10);
-
-  const titleModal = useTitleModal();
-  const descriptionModal = useDescriptionModal();
-  const submitButtonText = useSubmitButtonText();
-  const createButtonText = useCreateButtonText();
-  const sendingButtonText = useSendingButtonText();
-  const deleteId = useDeleteId();
-  const editId = useEditId();
-  const openEditModal = useOpenEditModal();
-  const { setDeleteId, setOpenEditModal, setEditId } = useCrudLayoutActions();
-
-  const isEditMode = useMemo(() => modalMode === "edit", [modalMode]);
-
-  const {
-    listData,
-    total,
-    error,
-    createActionRequest,
-    updateActionRequest,
-    deleteActionRequest,
-    isLoading,
-  } = useRequest({
-    queryKey: "configs",
-    createRequest,
-    updateRequest,
-    deleteRequest,
-    listRequest,
-    page,
-    limit,
-  });
-
-  useEffect(() => {
-    if (openEditModal && editId) {
-      const itemToEdit = listData.find((item: ListData) => item._id === editId);
-      if (itemToEdit) {
-        form.reset(itemToEdit);
-        setModalMode("edit");
-        setIsModalOpen(true);
-        setOpenEditModal(false);
-      }
-    }
-  }, [editId, form, listData, openEditModal, setOpenEditModal]);
-
-  const resetForm = useCallback(() => {
-    form.reset({});
-    const formValues = form.getValues();
-    Object.keys(formValues).forEach((key) => {
-      form.setValue(key, "");
-    });
-  }, [form]);
-
-  const customColumns = useMemo(() => {
-    const editButton = actions.includes("update") && {
-      id: "actions",
-      header: "Ações",
-      cell: ({ row }) => {
-        const data = row.original;
-        return (
-          <div className="flex gap-2">
-            {actions.includes("update") && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  setEditId(data._id);
-                  setOpenEditModal(true);
-                }}
-              >
-                <Edit className="h-4 w-4" />
-              </Button>
-            )}
-            {actions.includes("delete") && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setDeleteId(data._id)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        );
-      },
-    };
-
-    const data = [...columns];
-
-    if (editButton) data.push(editButton);
-
-    return data;
-  }, [columns, actions, setEditId, setOpenEditModal, setDeleteId]);
-
-  const closeModal = useCallback(() => {
-    setIsModalOpen(false);
-    setModalMode("create");
-    setEditId(null);
-    resetForm();
-  }, [setEditId, resetForm]);
-
-  const onSubmit = useCallback(
-    async (data: CreateData | UpdateData) => {
-      try {
-        let success;
-
-        if (isEditMode) {
-          success = await updateActionRequest(data as UpdateData);
-          if (success) {
-            toast.success("Configuração atualizada");
-          }
-        } else {
-          success = await createActionRequest(data as CreateData);
-          if (success) {
-            toast.success("Configuração criada");
-          }
-        }
-
-        if (success) {
-          closeModal();
-        }
-      } catch (error) {
-        console.error("Erro ao salvar:", error);
-        toast.error("Erro ao salvar configuração");
-      }
-    },
-    [createActionRequest, updateActionRequest, isEditMode, closeModal]
-  );
-
-  const onClickCreate = useCallback(() => {
-    resetForm();
-    setModalMode("create");
-    setEditId(null);
-    setIsModalOpen(true);
-  }, [setEditId, resetForm]);
-
-  const onDeleteData = useCallback(
-    async (dataId: string) => {
-      const success = await deleteActionRequest(dataId);
-      if (success) {
-        toast.success("Configuração deletada com sucesso");
-        setDeleteId(null);
-      }
-    },
-    [deleteActionRequest, setDeleteId]
-  );
-
-  const handleModalOpenChange = useCallback(
-    (isOpen: boolean) => {
-      if (!isOpen) {
-        closeModal();
-      }
-    },
-    [closeModal]
-  );
-
-  const handlePageChange = useCallback((newPage: number) => {
-    setPage(newPage);
-  }, []);
-
-  const handleLimitChange = useCallback((newLimit: number) => {
-    setLimit(newLimit);
-    setPage(1); // Reset to first page when changing limit
-  }, []);
-
-  return (
-    <div className="container mx-auto p-4 space-y-6 bg-white rounded-md">
-      <div className="flex justify-between items-center md:flex-row flex-col gap-4">
-        <h1 className="text-2xl font-bold">{title}</h1>
-        <Button onClick={onClickCreate} className="w-full md:w-auto">
-          <Plus className="mr-2 h-4 w-4" /> {createButtonText}
-        </Button>
-      </div>
-
-      <Dialog open={isModalOpen} onOpenChange={handleModalOpenChange}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{titleModal}</DialogTitle>
-            <DialogDescription>{descriptionModal}</DialogDescription>
-          </DialogHeader>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              {formComponent}
-              <DialogFooter>
-                <Button type="submit" disabled={isLoading}>
-                  {isLoading ? sendingButtonText : submitButtonText}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <Table<ListData>
-        data={listData}
-        columns={customColumns}
-        isLoading={isLoading}
-        pagination={{
-          page,
-          limit,
-          total,
-          onPageChange: handlePageChange,
-          onLimitChange: handleLimitChange,
-        }}
-      />
-      <AlertDialog
-        open={!!deleteId}
-        onOpenChange={(open) => {
-          if (!open) {
-            setDeleteId(null);
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{titleModal}</AlertDialogTitle>
-            <AlertDialogDescription>{descriptionModal}</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancelar</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => onDeleteData(deleteId as string)}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              {isLoading ? sendingButtonText : "Excluir"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-};

package/src/components/layout/Crud/store/CrudLayoutStore.ts

@@ -1,75 +0,0 @@
-import { create } from "zustand";
-
-export type CrudLayoutStore = {
-  titleModal?: string;
-  descriptionModal?: string;
-  submitButtonText?: string;
-  createButtonText?: string;
-  isEditMode: boolean;
-  deleteId: string | null;
-  editId: string | null;
-  openEditModal: boolean;
-  sendingButtonText?: string;
-  actions: {
-    setTitleModal: (title: string) => void;
-    setDescriptionModal: (description: string) => void;
-    setSubmitButtonText: (text: string) => void;
-    setCreateButtonText: (text: string) => void;
-    setIsEditMode: (isEditMode: boolean) => void;
-    setDeleteId: (id: string | null) => void;
-    setEditId: (id: string | null) => void;
-    setOpenEditModal: (open: boolean) => void;
-    setSendingButtonText: (text?: string) => void;
-  };
-};
-
-export const useCrudLayoutStore = create<CrudLayoutStore>((set) => ({
-  titleModal: "",
-  descriptionModal: "",
-  submitButtonText: "Salvar",
-  createButtonText: "Criar",
-  isEditMode: false,
-  deleteId: null,
-  editId: null,
-  openEditModal: false,
-  actions: {
-    setTitleModal: (title) => set({ titleModal: title }),
-    setDescriptionModal: (description) =>
-      set({ descriptionModal: description }),
-    setSubmitButtonText: (text) => set({ submitButtonText: text }),
-    setCreateButtonText: (text) => set({ createButtonText: text }),
-    setIsEditMode: (isEditMode) => set({ isEditMode }),
-    setDeleteId: (id) => set({ deleteId: id }),
-    setEditId: (id) => set({ editId: id }),
-    setOpenEditModal: (open) => set({ openEditModal: open }),
-    setSendingButtonText: (text) => set({ sendingButtonText: text }),
-  },
-}));
-
-export const useCrudLayoutActions = () =>
-  useCrudLayoutStore((state) => state.actions);
-
-export const useTitleModal = () =>
-  useCrudLayoutStore((state) => state.titleModal);
-
-export const useDescriptionModal = () =>
-  useCrudLayoutStore((state) => state.descriptionModal);
-
-export const useSubmitButtonText = () =>
-  useCrudLayoutStore((state) => state.submitButtonText);
-
-export const useCreateButtonText = () =>
-  useCrudLayoutStore((state) => state.createButtonText);
-
-export const useIsEditMode = () =>
-  useCrudLayoutStore((state) => state.isEditMode);
-
-export const useDeleteId = () => useCrudLayoutStore((state) => state.deleteId);
-
-export const useEditId = () => useCrudLayoutStore((state) => state.editId);
-
-export const useOpenEditModal = () =>
-  useCrudLayoutStore((state) => state.openEditModal);
-
-export const useSendingButtonText = () =>
-  useCrudLayoutStore((state) => state.sendingButtonText);

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

@@ -1,14 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-
-export type CrudLayoutProps<ListData, CreateData, UpdateData> = {
-  columns: ColumnDef<ListData>[];
-  title: string;
-  listRequest?: () => Promise<ListData[]>;
-  createRequest?: (data?: CreateData) => Promise<ListData>;
-  updateRequest?: (data?: UpdateData) => Promise<ListData>;
-  deleteRequest?: (key: string) => Promise<void>;
-  formComponent: React.ReactNode;
-
-  form: any;
-  actions?: ["create", "update", "delete"];
-};

package/src/components/layout/Drawer/CustomDrawer/index.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Minus, Plus } from "lucide-react";
-// import { Bar, BarChart, ResponsiveContainer } from "recharts";
-
-import { Button } from "../../../actions";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerProps,
-  DrawerTitle,
-  DrawerTrigger,
-} from "../../Drawer";
-
-export type CustomDrawerProps = DrawerProps & {
-  className?: string;
-};
-
-export function CustomDrawer({ className, ...props }: CustomDrawerProps) {
-  return (
-    <Drawer {...props}>
-      {/* <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger> */}
-      <DrawerContent className={className}>{props.children}</DrawerContent>
-    </Drawer>
-  );
-}

package/src/components/layout/Drawer/Drawer.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-
-import { Button } from "../../actions/Button";
-
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-  CustomDrawer as CustomDrawerComponent,
-  CustomDrawerProps,
-} from "./index";
-
-const meta = {
-  title: "DataDisplay/Drawer",
-  render: (args) => {
-    return (
-      <Drawer>
-        <DrawerTrigger>Open</DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Are you absolutely sure?</DrawerTitle>
-            <DrawerDescription>This action cannot be undone.</DrawerDescription>
-          </DrawerHeader>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    );
-  },
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Drawer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Drawer",
-  },
-};
-
-export const CustomDrawer: StoryObj<CustomDrawerProps> = {
-  args: {
-    children: "Drawer",
-    open: true,
-  },
-  argTypes: {
-    direction: {
-      options: ["top", "right", "bottom", "left"],
-      control: {
-        type: "select",
-      },
-    },
-    className: {
-      control: {
-        type: "text",
-      },
-    },
-    open: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-  render: (args) => {
-    return <CustomDrawerComponent {...args} />;
-  },
-};

package/src/components/layout/Drawer/index.ts

@@ -1,2 +0,0 @@
-export * from "../../ui/drawer";
-export * from "./CustomDrawer";

package/src/components/layout/PageLayout/PageLayout.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { PageLayout } from "./index";
-import { Icon, Text } from "../../../components/dataDisplay";
-import { Button } from "../../../components/actions";
-
-const meta: Meta<typeof PageLayout> = {
-  title: "Layout/PageLayout",
-  component: PageLayout,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    title: { control: "text" },
-    subtitle: { control: "text" },
-    header: { control: "text" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PageLayout>;
-
-export const Default: Story = {
-  args: {
-    title: "Page Title",
-    subtitle: "Page Subtitle",
-    children: <Text>Page content goes here.</Text>,
-  },
-};
-
-export const WithHeader: Story = {
-  args: {
-    title: "Page Title",
-    subtitle: "Page Subtitle",
-    header: (
-      <Button>
-        <Icon name="MdAdd" />
-      </Button>
-    ),
-    children: <Text>Page content goes here.</Text>,
-  },
-};