Feat/forms component

package.json

@@ -21,6 +21,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.18.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

src/app/(admin)/estoque/_components/products/productsCard.tsx

@@ -1,4 +1,4 @@
-import { CldImage } from "@/components/app/cldImage";
+import CldImage from "@/components/app/cldImage";
 import { CardComponent } from "@/components/cardComponent";
 import { cn } from "@/lib/utils";
 import React from "react";

src/app/(admin)/historico/page.tsx

@@ -1,5 +1,5 @@
 import { DataTable } from "@/app/_components/data-table";
-import { UsersAction, columns } from "./users-actions-columns";
+import { type UsersAction, columns } from "./users-actions-columns";
 
 async function getData(): Promise<UsersAction[]> {
   return [

src/app/(admin)/historico/users-actions-columns.tsx

@@ -1,6 +1,5 @@
 "use client";
-
-import { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 

src/app/_components/data-table-pagination.tsx

@@ -4,7 +4,7 @@ import {
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
 } from "@radix-ui/react-icons";
-import { Table } from "@tanstack/react-table";
+import type { Table } from "@tanstack/react-table";
 
 import { Button } from "@/components//ui/button";
 import {

src/app/_components/data-table.tsx

@@ -31,7 +31,7 @@ import {
 } from "@/components/ui/table";
 import { DataTablePagination } from "./data-table-pagination";
 
-const columnTranslations = {
+const columnTranslations: Record<string, string> = {
   name: "Nome",
   action: "Ação",
   product: "Nome do Produto",
@@ -95,8 +95,9 @@ export function DataTable<TData, TValue>({
               .getAllColumns()
               .filter((column) => column.getCanHide())
               .map((column) => {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 const translatedName =
-                  columnTranslations[column.id] || column.id;
+                  columnTranslations[column.id] ?? column.id;
                 return (
                   <DropdownMenuCheckboxItem
                     key={column.id}

src/app/_components/navBarEstoque.tsx

@@ -1,10 +1,7 @@
-"use client"
-import { SetStateAction, useState } from "react";
+"use client";
+import { type SetStateAction, useState } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Filtro } from "./filtro";
-import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { SearchBar } from "./searchBar";
 import { BtnRegister } from "./btnRegister";
 
@@ -42,9 +39,9 @@ export function NavBarEstoque() {
           </TabsTrigger>
         </TabsList>
         <div className="flex">
-          <Filtro value={"ddd"} children={"ffff"} />
+          <Filtro value={"ddd"}>ffff</Filtro>
           <div className="mb-6 ml-7 flex w-full items-center justify-between">
-            <SearchBar placeholder={tabValue}/>
+            <SearchBar placeholder={tabValue} />
             <BtnRegister>{tabValue}</BtnRegister>
           </div>
         </div>

src/app/page.tsx

@@ -6,4 +6,4 @@ export default async function Home() {
       <NavBarEstoque />
     </main>
   );
-}
+}

src/components/formComponent/example.tsx

@@ -0,0 +1,109 @@
+"use client";
+import { Form } from ".";
+import { useState } from "react";
+
+export const FormsExample = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(false);
+
+  const onCancel = () => {
+    setName("");
+    setEmail("");
+    setPassword("");
+    setConfirmPassword("");
+    setChecked1(false);
+    setChecked2(false);
+  };
+
+  const onSave = (data: {
+    name: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    cheked1: string;
+    cheked2: string;
+  }) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Form
+        onCancel={onCancel}
+        onSave={onSave}
+        className="gap-[30px] px-[55px] pb-[40px] pt-[90px]"
+      >
+        <Form.Title>Criar Usuário</Form.Title>
+        <Form.Content>
+          <Form.Field>
+            <Form.Label>Digite o nome do funcionário</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="nome"
+              value={name}
+              setValue={setName}
+              type="text"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Digite o email de acesso</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="email"
+              value={email}
+              setValue={setEmail}
+              type="email"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Digite a senha</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="senha"
+              value={password}
+              setValue={setPassword}
+              type="password"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Confirme a senha</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="senha"
+              value={confirmPassword}
+              setValue={setConfirmPassword}
+              type="password"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field className="gap-[18px] rounded-[5px] border-[2px] border-[#D9D9D9] px-[14px] pb-[20px] pt-[16px]">
+            <Form.Label className="text-[20px] font-semibold">
+              Este usuário vai poder:
+            </Form.Label>
+            <Form.BoxSelect checked={checked1} setChecked={setChecked1}>
+              Texto1
+            </Form.BoxSelect>
+
+            <Form.BoxSelect checked={checked2} setChecked={setChecked2}>
+              Texto2
+            </Form.BoxSelect>
+          </Form.Field>
+        </Form.Content>
+        <Form.Button
+          type="submit"
+          onClick={() => console.log("criar usuario")}
+          className="border-none bg-[#34A853]"
+        >
+          Criar Usuário
+        </Form.Button>
+      </Form>
+    </div>
+  );
+};