@phsa.tec/design-system-react 0.1.1 → 0.1.3

package/.github/workflows/deploy-storybook.yml

@@ -0,0 +1,54 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./storybook-static"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/README.md

@@ -2,6 +2,12 @@
 
 A comprehensive React design system built with modern tools and best practices, featuring reusable components, consistent styling, and powerful layout solutions.
 
+## 📚 Live Documentation
+
+🌐 **[View Live Documentation](https://henriques4nti4go.github.io/phsa-design-system/)**
+
+Explore all components interactively in our Storybook documentation, deployed automatically via GitHub Pages.
+
 ## ✨ Features
 
 - 🧩 **Modular Components** - Reusable React components built with TypeScript
@@ -162,7 +168,13 @@ The README is written in English as requested and provides everything a develope
 
 ## 📚 Documentation
 
-Visit our Storybook documentation to explore all available components:
+### Live Documentation
+
+Visit our live Storybook documentation: **[https://henriques4nti4go.github.io/phsa-design-system/](https://henriques4nti4go.github.io/phsa-design-system/)**
+
+### Local Development
+
+Run Storybook locally to explore all available components:
 
 ```bash
 npm run storybook

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phsa.tec/design-system-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "main": "./src/index.ts",
   "scripts": {
@@ -10,6 +10,7 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && touch storybook-static/.nojekyll",
     "test": "jest"
   },
   "dependencies": {
@@ -62,7 +63,8 @@
     "@storybook/addon-docs": "^9.0.15",
     "@storybook/addon-onboarding": "^9.0.15",
     "@storybook/nextjs": "^9.0.15",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.15",
     "@types/node": "^20",
@@ -73,7 +75,7 @@
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-storybook": "^9.0.15",
-    "jest": "^29.7.0",
+    "jest": "^30.0.4",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "react-test-renderer": "^19.0.0",
@@ -84,5 +86,13 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/henriques4nti4go/phsa-design-system"
+  },
+  "homepage": "https://github.com/henriques4nti4go/phsa-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/henriques4nti4go/phsa-design-system/issues"
   }
 }

package/src/components/dataInput/Input/components/Input/__tests__/input.test.tsx

@@ -0,0 +1,38 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Input } from "../index";
+
+describe("Input", () => {
+  it("should render label", () => {
+    render(<Input label="test" data-testid="input" />);
+    const label = screen.getByTestId("input-label");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent("test");
+  });
+
+  it("should render error", () => {
+    render(<Input error="test" data-testid="input" />);
+    const error = screen.getByTestId("input-error-label");
+    expect(error).toBeInTheDocument();
+    expect(error).toHaveTextContent("test");
+  });
+
+  it("should is disabled", () => {
+    render(<Input disabled data-testid="input" />);
+    const input = screen.getByTestId("input");
+    expect(input).toBeDisabled();
+  });
+
+  it("should is required", () => {
+    render(<Input required data-testid="input" label="test" />);
+    const label = screen.getByTestId("input-label");
+    expect(label).toHaveTextContent("test *");
+  });
+
+  it("should change value", () => {
+    render(<Input data-testid="input" />);
+    const input = screen.getByTestId("input");
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(input).toHaveValue("test");
+  });
+});

package/src/components/dataInput/Input/components/Input/index.tsx

@@ -1,257 +1,43 @@
-import React from "react";
-import { Label } from "../../../../ui/label";
-import { useFormContext } from "react-hook-form";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../../../../components/ui/form";
-import { InputBase, InputBaseProps } from "./InputBase";
-import { ErrorMessage } from "../../../../../components/dataDisplay/ErrorMessage";
+import { Input as InputUI } from "@/components/ui/input";
+import { InputProps } from "./types";
+import { useMemo } from "react";
+import { InputBase } from "../InputBase";
+import { useConditionalController } from "@/hooks/use-conditional-controller";
 import { cn } from "@/lib/utils";
 
-export type InputProps = Omit<InputBaseProps, "children"> & {
-  component?: React.ReactNode;
-  error?: string;
-  withoutForm?: boolean;
-  label?: string;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  helperText?: string;
-  floatingLabel?: boolean;
-};
-
 export const Input = ({
-  label,
-  withoutForm,
-  component,
-  name,
-  error,
-  leftIcon,
-  rightIcon,
-  helperText,
-  floatingLabel = false,
-  "data-testid": testId,
-  className,
-  required,
-  placeholder,
+  "data-testid": dataTestId,
+  withoutForm = false,
   ...props
 }: InputProps) => {
-  const form = useFormContext();
-  const hasForm = !withoutForm && !!form && !!name;
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [hasValue, setHasValue] = React.useState(false);
-
-  const containerClasses = cn("relative w-full", className);
-
-  if (!hasForm)
-    return (
-      <div className={containerClasses}>
-        <div className="relative">
-          {/* Floating Label ou Label Normal */}
-          {label && !floatingLabel && (
-            <Label
-              htmlFor={name || "input"}
-              className={cn(
-                "block text-sm font-medium mb-1.5 transition-colors duration-200",
-                error ? "text-destructive" : "text-foreground"
-              )}
-            >
-              {label}
-              {required && <span className="text-destructive ml-1">*</span>}
-            </Label>
-          )}
-
-          {/* Input Container */}
-          <div className="relative">
-            {leftIcon && (
-              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
-                {leftIcon}
-              </div>
-            )}
-
-            <InputBase
-              {...props}
-              placeholder={floatingLabel ? " " : placeholder}
-              className={cn(
-                "w-full px-4 py-3 border border-border rounded-xl",
-                "bg-background transition-all duration-200",
-                "focus:border-primary focus:ring-4 focus:ring-primary/20",
-                "placeholder:text-muted-foreground",
-                "disabled:bg-muted disabled:text-muted-foreground",
-                leftIcon && "pl-10",
-                rightIcon && "pr-10",
-                error &&
-                  "border-destructive focus:border-destructive focus:ring-destructive/20",
-                floatingLabel && "pt-6 pb-2"
-              )}
-              onFocus={(e) => {
-                setIsFocused(true);
-                props.onFocus?.(e);
-              }}
-              onBlur={(e) => {
-                setIsFocused(false);
-                setHasValue(!!e.target.value);
-                props.onBlur?.(e);
-              }}
-            />
-
-            {/* Floating Label */}
-            {label && floatingLabel && (
-              <Label
-                htmlFor={name || "input"}
-                className={cn(
-                  "absolute left-4 transition-all duration-200 pointer-events-none",
-                  "text-muted-foreground",
-                  isFocused || hasValue
-                    ? "top-2 text-xs font-medium"
-                    : "top-1/2 transform -translate-y-1/2 text-base",
-                  isFocused && !error && "text-primary",
-                  error && "text-destructive"
-                )}
-              >
-                {label}
-                {required && <span className="text-destructive ml-1">*</span>}
-              </Label>
-            )}
-
-            {rightIcon && (
-              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
-                {rightIcon}
-              </div>
-            )}
-
-            {component && (
-              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 z-10">
-                {component}
-              </div>
-            )}
-          </div>
-
-          {/* Helper Text */}
-          {helperText && !error && (
-            <p className="mt-2 text-xs text-muted-foreground">{helperText}</p>
-          )}
-
-          {/* Error Message */}
-          {error && (
-            <div className="mt-2">
-              <ErrorMessage>{error}</ErrorMessage>
-            </div>
-          )}
-        </div>
-      </div>
-    );
+  const formData = useConditionalController({
+    name: props.name || "",
+    withoutForm,
+  });
+
+  const inputProps = useMemo(() => {
+    return {
+      ...formData,
+      ...props,
+    };
+  }, [formData, props]);
 
   return (
-    <FormField
-      control={form.control}
-      name={name}
-      render={({ field: { onChange, value, ...rest } }) => (
-        <FormItem
-          className={containerClasses}
-          data-testid={testId ? `form-item-${testId}` : undefined}
-        >
-          <div className="relative">
-            {/* Label Normal */}
-            {label && !floatingLabel && (
-              <FormLabel
-                htmlFor={name}
-                className={cn(
-                  "block text-sm font-medium mb-1.5 transition-colors duration-200",
-                  "text-foreground data-[invalid]:text-destructive"
-                )}
-                data-testid={testId ? `form-label-${testId}` : undefined}
-              >
-                {label}
-                {required && <span className="text-destructive ml-1">*</span>}
-              </FormLabel>
-            )}
-
-            <FormControl>
-              <div className="relative">
-                {leftIcon && (
-                  <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
-                    {leftIcon}
-                  </div>
-                )}
-
-                <InputBase
-                  {...props}
-                  {...rest}
-                  value={value}
-                  onChangeText={onChange}
-                  placeholder={floatingLabel ? " " : placeholder}
-                  className={cn(
-                    "w-full px-4 py-3 border border-border rounded-xl",
-                    "bg-background transition-all duration-200",
-                    "focus:border-primary focus:ring-4 focus:ring-primary/20",
-                    "placeholder:text-muted-foreground",
-                    "disabled:bg-muted disabled:text-muted-foreground",
-                    leftIcon && "pl-10",
-                    rightIcon && "pr-10",
-                    floatingLabel && "pt-6 pb-2"
-                  )}
-                  onFocus={(e) => {
-                    setIsFocused(true);
-                    props.onFocus?.(e);
-                  }}
-                  onBlur={(e) => {
-                    setIsFocused(false);
-                    setHasValue(!!value);
-                    props.onBlur?.(e);
-                  }}
-                />
-
-                {/* Floating Label */}
-                {label && floatingLabel && (
-                  <FormLabel
-                    htmlFor={name}
-                    className={cn(
-                      "absolute left-4 transition-all duration-200 pointer-events-none",
-                      "text-muted-foreground",
-                      isFocused || hasValue || value
-                        ? "top-2 text-xs font-medium"
-                        : "top-1/2 transform -translate-y-1/2 text-base",
-                      isFocused && "text-primary"
-                    )}
-                  >
-                    {label}
-                    {required && (
-                      <span className="text-destructive ml-1">*</span>
-                    )}
-                  </FormLabel>
-                )}
-
-                {rightIcon && (
-                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
-                    {rightIcon}
-                  </div>
-                )}
-
-                {component && (
-                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 z-10">
-                    {component}
-                  </div>
-                )}
-              </div>
-            </FormControl>
-
-            {/* Helper Text */}
-            {helperText && (
-              <p className="mt-2 text-xs text-muted-foreground">{helperText}</p>
-            )}
-
-            <FormMessage
-              role="alert"
-              className="mt-2"
-              data-testid={testId ? `form-message-${testId}` : undefined}
-            />
-          </div>
-        </FormItem>
-      )}
-    />
+    <InputBase
+      label={props.label}
+      error={props.error}
+      required={props.required}
+      data-testid={dataTestId}
+    >
+      <InputUI
+        {...inputProps}
+        data-testid={dataTestId}
+        className={cn(
+          props.className,
+          props.error &&
+            "border-destructive focus:border-destructive focus-visible:ring-0"
+        )}
+      />
+    </InputBase>
   );
 };

package/src/components/dataInput/Input/components/Input/types.ts

@@ -0,0 +1,13 @@
+import { InputBaseProps } from "./InputBase";
+
+export type InputProps = Omit<InputBaseProps, "children"> & {
+  component?: React.ReactNode;
+  error?: string;
+  withoutForm?: boolean;
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  helperText?: string;
+  floatingLabel?: boolean;
+  "data-testid"?: string;
+};

package/src/components/dataInput/Input/components/InputBase/index.tsx

@@ -1,89 +1,31 @@
-import { useFormContext } from "react-hook-form";
+import { ErrorLabel } from "@/components/feedback/ErrorLabel";
 import { InputProps as InputPropsUI } from "../../../../ui/input";
 import { Label } from "../../../../ui/label";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../../../ui/form";
 
 export type InputBaseProps = Omit<InputPropsUI, "children"> & {
   label?: string;
-  withoutForm?: boolean;
-  "data-testid"?: string;
   error?: string;
-  children?: (
-    props: React.DetailedHTMLProps<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      HTMLInputElement
-    >
-  ) => JSX.Element;
+  required?: boolean;
+  children: React.ReactNode;
+  "data-testid"?: string;
 };
 
 export const InputBase = ({
   label,
-  withoutForm,
-  className,
-  name,
-  required,
-  "data-testid": testId,
   error,
   children,
-  ...props
+  required,
+  "data-testid": testId,
 }: InputBaseProps) => {
-  const form = useFormContext();
-  const hasForm = !withoutForm && !!form && !!name;
-
-  if (!hasForm)
-    return (
-      <div className="grid w-full items-center gap-3">
-        <Label htmlFor="email">
-          {label}
-          {required && <span>*</span>}
-        </Label>
-        {children?.({
-          ...props,
-          className,
-          name,
-          required,
-        })}
-        {error && <p className="text-red-500">{error}</p>}
-      </div>
-    );
-
   return (
-    <FormField
-      control={form.control}
-      name={name}
-      render={({ field }) => (
-        <FormItem
-          className={className}
-          data-testid={testId ? `form-item-${testId}` : undefined}
-        >
-          {label && (
-            <FormLabel
-              htmlFor={name}
-              data-testid={testId ? `form-label-${testId}` : undefined}
-            >
-              {`${label}${required ? " *" : ""}`}
-            </FormLabel>
-          )}
-          <FormControl>
-            {children?.({
-              className,
-              required,
-              ...props,
-              ...field,
-            })}
-          </FormControl>
-          <FormMessage
-            role="alert"
-            data-testid={testId ? `form-message-${testId}` : undefined}
-          />
-        </FormItem>
+    <div>
+      {label && (
+        <Label data-testid={`${testId}-label`}>
+          {`${label} ${required ? "*" : ""}`}{" "}
+        </Label>
       )}
-    />
+      {children}
+      {error && <ErrorLabel data-testid={testId}>{error}</ErrorLabel>}
+    </div>
   );
 };

package/src/components/dataInput/Input/components/MaskInput/__tests__/mask-input.test.tsx

@@ -1,67 +1,76 @@
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { MaskInput } from "../mask-input";
 
 describe("MaskInput", () => {
-  const defaultProps = {
-    options: {
-      mask: "000.000.000-00",
-    },
-    name: "cpf",
-    label: "CPF",
-  };
-
-  it("should render correctly", () => {
-    render(<MaskInput {...defaultProps} />);
-
-    expect(screen.getByTestId("input-base-cpf")).toBeInTheDocument();
-    expect(screen.getByTestId("input-wrapper-cpf")).toBeInTheDocument();
-    expect(screen.getByTestId("input-cpf")).toBeInTheDocument();
-    expect(screen.getByText("CPF")).toBeInTheDocument();
+  it("should render label", () => {
+    render(
+      <MaskInput label="test" data-testid="mask-input" mask="000.000.000-00" />
+    );
+    const label = screen.getByTestId("mask-input-label");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent("test");
   });
 
-  it("should apply mask when typing", async () => {
-    const user = userEvent.setup();
-    render(<MaskInput {...defaultProps} />);
-
-    const input = screen.getByTestId("input-cpf");
-    await user.type(input, "12345678900");
-
-    expect(input).toHaveValue("123.456.789-00");
+  it("should render error", () => {
+    render(
+      <MaskInput error="test" data-testid="mask-input" mask="000.000.000-00" />
+    );
+    const error = screen.getByTestId("mask-input-error-label");
+    expect(error).toBeInTheDocument();
+    expect(error).toHaveTextContent("test");
   });
 
-  it("should call onChange with masked value", async () => {
-    const onChange = jest.fn();
-    const user = userEvent.setup();
-    render(<MaskInput {...defaultProps} onChange={onChange} />);
-
-    const input = screen.getByTestId("input-cpf");
-    await user.type(input, "12345678900");
-
-    expect(onChange).toHaveBeenCalled();
+  it("should be disabled", () => {
+    render(
+      <MaskInput disabled data-testid="mask-input" mask="000.000.000-00" />
+    );
+    const input = screen.getByTestId("mask-input");
+    expect(input).toBeDisabled();
   });
 
-  it("should render with error state", () => {
-    render(<MaskInput {...defaultProps} error="Invalid CPF" />);
-
-    expect(screen.getByText("Invalid CPF")).toBeInTheDocument();
+  it("should be required", () => {
+    render(
+      <MaskInput
+        required
+        data-testid="mask-input"
+        label="test"
+        mask="000.000.000-00"
+      />
+    );
+    const label = screen.getByTestId("mask-input-label");
+    expect(label).toHaveTextContent("test *");
   });
 
-  it("should render with description", () => {
-    render(<MaskInput {...defaultProps} description="Enter your CPF number" />);
+  it("should apply mask to input value", async () => {
+    render(<MaskInput data-testid="mask-input" mask="000.000.000-00" />);
+    const input = screen.getByTestId("mask-input");
+
+    fireEvent.focus(input);
+    fireEvent.input(input, { target: { value: "12345678901" } });
 
-    expect(screen.getByText("Enter your CPF number")).toBeInTheDocument();
+    expect(input).toHaveValue("123.456.789-01");
   });
 
-  it("should render with custom component", () => {
+  it("should handle placeholder", () => {
     render(
       <MaskInput
-        {...defaultProps}
-        component={<span data-testid="custom-component">Custom</span>}
+        data-testid="mask-input"
+        mask="000.000.000-00"
+        placeholder="Digite seu CPF"
       />
     );
+    const input = screen.getByTestId("mask-input");
+
+    expect(input).toHaveAttribute("placeholder", "Digite seu CPF");
+  });
+
+  it("should handle name attribute", () => {
+    render(
+      <MaskInput data-testid="mask-input" mask="000.000.000-00" name="cpf" />
+    );
+    const input = screen.getByTestId("mask-input");
 
-    expect(screen.getByTestId("custom-component")).toBeInTheDocument();
+    expect(input).toHaveAttribute("name", "cpf");
   });
 });

package/src/components/dataInput/Input/components/MaskInput/mask-input.stories.tsx

@@ -16,31 +16,41 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    placeholder: "99999-999",
+    label: "CEP",
+    mask: "00000-000",
+  },
+};
+
+export const CPF: Story = {
   args: {
     placeholder: "000.000.000-00",
     label: "CPF",
-    mask: "999.999.999-99",
+    mask: "000.000.000-00",
   },
 };
 
 export const Phone: Story = {
   args: {
-    placeholder: "(99) 99999-9999",
+    placeholder: "(00) 00000-0000",
     label: "Telefone",
+    mask: "(00) 00000-0000",
   },
 };
 
 export const Date: Story = {
   args: {
-    placeholder: "99/99/9999",
+    placeholder: "00/00/0000",
     label: "Data",
+    mask: "00/00/0000",
   },
 };
 
 export const WithForm = () => {
   const form = useForm({
     defaultValues: {
-      cpf: "999.999.999-99",
+      cpf: "",
     },
   });
 
@@ -51,7 +61,7 @@ export const WithForm = () => {
           name="cpf"
           label="CPF"
           placeholder="000.000.000-00"
-          mask="999.999.999-99"
+          mask="000.000.000-00"
         />
       </form>
     </Form>

package/src/components/dataInput/Input/components/MaskInput/mask-input.tsx

@@ -1,43 +1,54 @@
 "use client";
 import * as React from "react";
-import { Input } from "../../../../ui/input";
-import { InputBase, InputBaseProps } from "../InputBase";
+import { useIMask, ReactMaskOpts } from "react-imask";
+import { Input } from "../Input";
+import { useConditionalController } from "@/hooks/use-conditional-controller";
+import { InputProps } from "../Input/types";
 
-export type MaskInputProps = Omit<InputBaseProps, "children"> & {
-  placeholder?: string;
-  className?: string;
-  withoutForm?: boolean;
-  component?: React.ReactNode;
-  "data-testid"?: string;
-  onChange?: (value: string) => void;
-};
+export type MaskInputProps = ReactMaskOpts & InputProps;
 
 export const MaskInput = ({
-  component,
-  "data-testid": testId,
-  label,
-  name,
-  withoutForm,
+  "data-testid": dataTestId,
+  withoutForm = false,
   ...props
 }: MaskInputProps) => {
+  const formData = useConditionalController({
+    name: props.name || "",
+    withoutForm,
+  });
+
+  const {
+    label,
+    error,
+    required,
+    name,
+    className,
+    placeholder,
+    ...imaskProps
+  } = props;
+
+  const { ref, value } = useIMask({
+    ...imaskProps,
+  });
+
+  React.useEffect(() => {
+    if (formData.value !== undefined && formData.value !== value) {
+      formData.onChange(value);
+    }
+  }, [formData, value]);
+
   return (
-    <InputBase
+    <Input
+      {...props}
+      ref={ref as React.RefObject<HTMLInputElement>}
+      data-testid={dataTestId}
+      withoutForm={true}
       label={label}
-      data-testid={testId}
-      withoutForm={withoutForm}
+      error={error}
+      required={required}
+      className={className}
+      placeholder={placeholder}
       name={name}
-    >
-      {({ ...rest }) => {
-        return (
-          <div
-            className="flex w-full gap-3"
-            data-testid={`input-wrapper-${testId}`}
-          >
-            <Input {...props} {...rest} />
-            {component}
-          </div>
-        );
-      }}
-    </InputBase>
+    />
   );
 };

package/src/components/feedback/ErrorLabel/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Icon } from "@/components/dataDisplay";
+import { cn } from "@/lib/utils";
+
+export type ErrorLabelProps = React.PropsWithChildren<{
+  className?: string;
+  "data-testid"?: string;
+}>;
+
+export const ErrorLabel = ({
+  children,
+  className,
+  "data-testid": dataTestId,
+}: ErrorLabelProps) => {
+  return (
+    <div
+      className={cn("flex items-center gap-2 my-2", className)}
+      data-testid={`${dataTestId}-error-label`}
+    >
+      <Icon name="MdErrorOutline" size={18} className="text-destructive" />
+      <span className="text-destructive text-sm">{children}</span>
+    </div>
+  );
+};

package/src/hooks/use-conditional-controller.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import {
+  useController,
+  useForm,
+  useFormContext,
+  ControllerRenderProps,
+  FieldValues,
+} from "react-hook-form";
+
+export const useConditionalController = ({
+  name,
+  withoutForm,
+}: {
+  name: string;
+  withoutForm?: boolean;
+}): ControllerRenderProps<FieldValues, string> | Record<string, never> => {
+  const form = useFormContext();
+
+  const hasForm = useMemo(() => {
+    return !withoutForm && !!form?.control;
+  }, [withoutForm, form]);
+
+  const tempForm = useForm();
+
+  const controlToUse = useMemo(() => {
+    return hasForm ? form.control : tempForm.control;
+  }, [tempForm, form, hasForm]);
+
+  const controller = useController({
+    control: controlToUse,
+    name: name || "temp",
+  });
+
+  return hasForm ? controller.field : {};
+};

package/src/components/dataInput/Input/components/Input/__tests__/Input.test.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Input } from "../index";
-import { FormProvider, useForm } from "react-hook-form";
-
-// Componente wrapper para testar o Input dentro de um formulário
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-  const methods = useForm();
-  return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-describe("Componente Input", () => {
-  it("deve renderizar com label", () => {
-    render(
-      <FormWrapper>
-        <Input label="Nome" name="name" />
-      </FormWrapper>
-    );
-
-    expect(screen.getByLabelText("Nome")).toBeInTheDocument();
-  });
-
-  it("deve renderizar sem formulário quando withoutForm é true", () => {
-    render(<Input label="Email" name="email" withoutForm={true} />);
-
-    expect(screen.getByLabelText("Email")).toBeInTheDocument();
-  });
-
-  it("deve exibir mensagem de erro quando fornecida", () => {
-    render(
-      <FormWrapper>
-        <Input label="Senha" name="password" error="Senha é obrigatória" />
-      </FormWrapper>
-    );
-
-    expect(screen.getByText("Senha é obrigatória")).toBeInTheDocument();
-  });
-
-  it("deve aplicar data-testid quando fornecido", () => {
-    render(
-      <FormWrapper>
-        <Input label="Telefone" name="phone" data-testid="phone-input" />
-      </FormWrapper>
-    );
-
-    expect(screen.getByTestId("phone-input")).toBeInTheDocument();
-  });
-
-  it("deve lidar corretamente com a entrada do usuário", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <FormWrapper>
-        <Input label="Usuário" name="username" />
-      </FormWrapper>
-    );
-
-    const input = screen.getByLabelText("Usuário");
-    await user.type(input, "testuser");
-
-    expect(input).toHaveValue("testuser");
-  });
-
-  it("deve passar props adicionais para o elemento input", () => {
-    render(
-      <FormWrapper>
-        <Input
-          label="Código"
-          name="code"
-          placeholder="Digite o código"
-          maxLength={6}
-        />
-      </FormWrapper>
-    );
-
-    const input = screen.getByLabelText("Código");
-    expect(input).toHaveAttribute("placeholder", "Digite o código");
-    expect(input).toHaveAttribute("maxLength", "6");
-  });
-
-  it("deve chamar o onChange quando usado sem formulário", async () => {
-    const handleChange = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <Input
-        label="Comentário"
-        name="comment"
-        withoutForm={true}
-        onChange={handleChange}
-      />
-    );
-
-    const input = screen.getByLabelText("Comentário");
-    await user.type(input, "a");
-
-    expect(handleChange).toHaveBeenCalled();
-  });
-});

package/src/components/dataInput/Input/components/InputBase/__tests__/InputBase.test.tsx

@@ -1,120 +0,0 @@
-import "@testing-library/jest-dom";
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { InputBase, CustomInputProps } from "..";
-import { Form } from "../../../../../../components/ui/form";
-import { useForm } from "react-hook-form";
-
-describe("InputBase", () => {
-  const MockInput = (props: CustomInputProps) => (
-    <input
-      data-testid="mock-input"
-      {...props}
-      onChange={(e) => props.onChange?.(e.target.value)}
-    />
-  );
-
-  it("deve renderizar sem contexto de formulário", () => {
-    render(<InputBase data-testid="test">{() => <MockInput />}</InputBase>);
-    expect(screen.getByTestId("mock-input")).toBeInTheDocument();
-  });
-
-  it("deve renderizar label e descrição", () => {
-    render(
-      <InputBase
-        label="Test Label"
-        description="Test Description"
-        data-testid="test"
-      >
-        {() => <MockInput />}
-      </InputBase>
-    );
-
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-    expect(screen.getByText("Test Description")).toBeInTheDocument();
-  });
-
-  it("deve mostrar indicador de obrigatório quando required é true", () => {
-    render(
-      <InputBase label="Test Label" required data-testid="test">
-        {() => <MockInput />}
-      </InputBase>
-    );
-
-    expect(screen.getByText("Test Label *")).toBeInTheDocument();
-  });
-
-  it("deve renderizar mensagem de erro", () => {
-    render(
-      <InputBase error="Test Error" data-testid="test">
-        {() => <MockInput />}
-      </InputBase>
-    );
-
-    expect(screen.getByText("Test Error")).toBeInTheDocument();
-  });
-
-  it("deve funcionar com contexto de formulário", () => {
-    const TestForm = () => {
-      const form = useForm();
-      return (
-        <Form {...form}>
-          <InputBase name="test" data-testid="test">
-            {() => <MockInput />}
-          </InputBase>
-        </Form>
-      );
-    };
-
-    render(<TestForm />);
-    expect(screen.getByTestId("mock-input")).toBeInTheDocument();
-  });
-
-  it("deve aplicar className customizada", () => {
-    render(
-      <InputBase className="custom-class" data-testid="test">
-        {() => <MockInput />}
-      </InputBase>
-    );
-
-    const container = screen.getByTestId("input-base-test");
-    expect(container).toHaveClass("custom-class");
-  });
-
-  it("deve lidar com estado disabled", () => {
-    render(
-      <InputBase disabled data-testid="mock-input">
-        {(props) => <MockInput {...props} />}
-      </InputBase>
-    );
-
-    expect(screen.getByTestId("mock-input")).toBeDisabled();
-  });
-
-  it("deve validar erros do React Hook Form", async () => {
-    const TestForm = () => {
-      const form = useForm({
-        defaultValues: {
-          test: "",
-        },
-      });
-
-      React.useEffect(() => {
-        form.setError("test", { message: "Test Error" });
-      }, [form]);
-
-      return (
-        <Form {...form}>
-          <InputBase name="test" data-testid="mock-input" required>
-            {(props) => <MockInput {...props} />}
-          </InputBase>
-        </Form>
-      );
-    };
-
-    render(<TestForm />);
-
-    const errorMessage = await screen.findByText("Test Error");
-    expect(errorMessage).toBeInTheDocument();
-  });
-});

package/src/components/dataInput/Input/components/NumberInput/__tests__/number-input.test.tsx

@@ -1,95 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import { NumberInput } from "../number-input";
-import userEvent from "@testing-library/user-event";
-
-describe("NumberInput", () => {
-  it("deve renderizar o input com label", () => {
-    render(<NumberInput label="Valor" data-testid="test" />);
-
-    expect(screen.getByTestId("test-number-input")).toBeInTheDocument();
-  });
-
-  it("deve renderizar a descrição quando fornecida", () => {
-    render(<NumberInput description="Digite um número" />);
-
-    expect(screen.getByText("Digite um número")).toBeInTheDocument();
-  });
-
-  it("deve exibir mensagem de erro quando fornecida", () => {
-    render(<NumberInput error="Valor inválido" />);
-
-    expect(screen.getByText("Valor inválido")).toBeInTheDocument();
-  });
-
-  it("deve chamar onValueChange com o valor numérico correto", async () => {
-    const onValueChange = jest.fn();
-    render(<NumberInput onChange={onValueChange} />);
-
-    const input = screen.getByRole("textbox");
-    await userEvent.type(input, "123.45");
-
-    expect(onValueChange).toHaveBeenCalledWith(123.45);
-  });
-
-  it("deve aceitar apenas números e separador decimal", async () => {
-    const onValueChange = jest.fn();
-    render(<NumberInput onChange={onValueChange} />);
-
-    const input = screen.getByRole("textbox");
-    await userEvent.type(input, "abc123.45def");
-
-    expect(input).toHaveValue("123.45");
-  });
-
-  it("deve renderizar componente adicional quando fornecido", () => {
-    render(
-      <NumberInput
-        component={<button data-testid="extra-component">Extra</button>}
-      />
-    );
-
-    expect(screen.getByTestId("extra-component")).toBeInTheDocument();
-  });
-
-  it("deve aplicar className customizada", () => {
-    render(<NumberInput className="custom-class" />);
-
-    expect(
-      screen.getByRole("textbox").parentElement?.parentElement
-    ).toHaveClass("custom-class");
-  });
-
-  it("deve formatar o valor inicial corretamente", () => {
-    render(
-      <NumberInput
-        value={1234.56}
-        data-testid="test"
-        thousandSeparator="."
-        decimalSeparator=","
-        fixedDecimalScale
-        decimalScale={2}
-      />
-    );
-
-    expect(screen.getByTestId("test-number-input")).toHaveValue("1.234,56");
-  });
-
-  it("deve formatar o valor conforme digitação", async () => {
-    const user = userEvent.setup();
-    render(
-      <NumberInput
-        data-testid="test"
-        thousandSeparator="."
-        decimalSeparator=","
-        fixedDecimalScale
-        decimalScale={2}
-      />
-    );
-
-    const input = screen.getByTestId("test-number-input");
-    await user.type(input, "123456");
-
-    expect(input).toHaveValue("123.456,00");
-  });
-});