@phsa.tec/design-system-react 0.1.0

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

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

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

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

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

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

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

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

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

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