@phsa.tec/design-system-react 0.1.0

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

@@ -0,0 +1,120 @@
+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/InputBase/index.tsx

@@ -0,0 +1,89 @@
+import { useFormContext } from "react-hook-form";
+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;
+};
+
+export const InputBase = ({
+  label,
+  withoutForm,
+  className,
+  name,
+  required,
+  "data-testid": testId,
+  error,
+  children,
+  ...props
+}: 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>
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,67 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+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 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 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 render with error state", () => {
+    render(<MaskInput {...defaultProps} error="Invalid CPF" />);
+
+    expect(screen.getByText("Invalid CPF")).toBeInTheDocument();
+  });
+
+  it("should render with description", () => {
+    render(<MaskInput {...defaultProps} description="Enter your CPF number" />);
+
+    expect(screen.getByText("Enter your CPF number")).toBeInTheDocument();
+  });
+
+  it("should render with custom component", () => {
+    render(
+      <MaskInput
+        {...defaultProps}
+        component={<span data-testid="custom-component">Custom</span>}
+      />
+    );
+
+    expect(screen.getByTestId("custom-component")).toBeInTheDocument();
+  });
+});

package/src/components/dataInput/Input/components/MaskInput/index.ts

@@ -0,0 +1 @@
+export * from "./mask-input";

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { MaskInput } from "./mask-input";
+import { useForm } from "react-hook-form";
+import { Form } from "../../../../../components/ui/form";
+
+const meta = {
+  title: "Data Input/Input/MaskInput",
+  component: MaskInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MaskInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "000.000.000-00",
+    label: "CPF",
+    mask: "999.999.999-99",
+  },
+};
+
+export const Phone: Story = {
+  args: {
+    placeholder: "(99) 99999-9999",
+    label: "Telefone",
+  },
+};
+
+export const Date: Story = {
+  args: {
+    placeholder: "99/99/9999",
+    label: "Data",
+  },
+};
+
+export const WithForm = () => {
+  const form = useForm({
+    defaultValues: {
+      cpf: "999.999.999-99",
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form className="space-y-6">
+        <MaskInput
+          name="cpf"
+          label="CPF"
+          placeholder="000.000.000-00"
+          mask="999.999.999-99"
+        />
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,43 @@
+"use client";
+import * as React from "react";
+import { Input } from "../../../../ui/input";
+import { InputBase, InputBaseProps } from "../InputBase";
+
+export type MaskInputProps = Omit<InputBaseProps, "children"> & {
+  placeholder?: string;
+  className?: string;
+  withoutForm?: boolean;
+  component?: React.ReactNode;
+  "data-testid"?: string;
+  onChange?: (value: string) => void;
+};
+
+export const MaskInput = ({
+  component,
+  "data-testid": testId,
+  label,
+  name,
+  withoutForm,
+  ...props
+}: MaskInputProps) => {
+  return (
+    <InputBase
+      label={label}
+      data-testid={testId}
+      withoutForm={withoutForm}
+      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/dataInput/Input/components/MultipleInput/MultipleInput.tsx

@@ -0,0 +1,36 @@
+import { Button } from "../../../../actions/Button";
+import { Input, InputProps } from "../Input";
+import { MultipleInputBase } from "./MultipleInputBase";
+import { Icon } from "../../../../dataDisplay/Icon";
+
+export type MultipleInputProps = InputProps & {
+  data?: string[];
+  onChangeData?: (data: string[]) => void;
+  name: string;
+};
+
+export const MultipleInput = ({
+  data = [],
+  mask,
+  ...props
+}: MultipleInputProps) => {
+  return (
+    <MultipleInputBase data={data} {...props}>
+      {({ onChange, addItem, value, error }) => (
+        <Input
+          {...props}
+          mask={mask}
+          value={value}
+          onChange={onChange}
+          withoutForm
+          error={error}
+          component={
+            <Button type="button" onClick={() => addItem()}>
+              <Icon name="MdAdd" />
+            </Button>
+          }
+        />
+      )}
+    </MultipleInputBase>
+  );
+};

package/src/components/dataInput/Input/components/MultipleInput/MultipleInputBase.tsx

@@ -0,0 +1,100 @@
+import { Button } from "../../../../../components/actions";
+import { Icon } from "../../../../../components/dataDisplay";
+import { useCallback, useMemo, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import _ from "lodash";
+
+export type MultipleInputBaseProps = {
+  children: (params: {
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    addItem: () => void;
+    value: string;
+    error?: string;
+  }) => React.ReactNode;
+  data: string[];
+  name?: string;
+  onChangeData?: (data: string[]) => void;
+  error?: string;
+};
+
+export const MultipleInputBase = ({
+  children,
+  data = [],
+  name,
+  onChangeData = () => {},
+  error,
+}: MultipleInputBaseProps) => {
+  const form = useFormContext();
+  const withForm = !!form && !!name;
+  const [inputValue, setInputValue] = useState("");
+
+  const inputData = useMemo(() => {
+    if (withForm) {
+      return _.get(form.watch(), name) || [];
+    }
+    return data;
+  }, [withForm, form, name, data]);
+
+  const errorMessage = useMemo(() => {
+    if (withForm) {
+      return _.get(form.formState.errors, name)?.message as string;
+    }
+    return error;
+  }, [error, form, name, withForm]);
+
+  const updateData = useCallback(() => {
+    if (!inputValue.length) return;
+    if (withForm) {
+      form.setValue(name, [...inputData, inputValue]);
+    } else {
+      onChangeData?.(inputData.concat(inputValue));
+    }
+    setInputValue("");
+  }, [inputData, inputValue, withForm, form, name, onChangeData]);
+
+  const removeItem = useCallback(
+    (index: number) => {
+      if (withForm) {
+        form.setValue(
+          name,
+          inputData.filter((_: string, i: number) => i !== index)
+        );
+      } else {
+        onChangeData?.(inputData.filter((_: string, i: number) => i !== index));
+      }
+    },
+    [withForm, form, name, inputData, onChangeData]
+  );
+
+  const renderOptions = useCallback(() => {
+    return inputData?.map((item: string, index: number) => {
+      return (
+        <div key={index} className="flex justify-between mt-2">
+          <div>{item}</div>
+          <Button
+            onClick={() => removeItem(index)}
+            variant={"ghost"}
+            size={"icon"}
+            type="button"
+          >
+            <Icon name="MdDelete" className="fill-destructive" />
+          </Button>
+        </div>
+      );
+    });
+  }, [inputData, removeItem]);
+
+  return (
+    <div>
+      {children({
+        onChange: ({ target: { value } }) => {
+          setInputValue(value);
+        },
+        addItem: updateData,
+        value: inputValue,
+        error: errorMessage,
+      })}
+      {renderOptions()}
+    </div>
+  );
+};

package/src/components/dataInput/Input/components/MultipleInput/MultipleMaskInput.tsx

@@ -0,0 +1,35 @@
+import { Button } from "../../../../../components/actions";
+import { MaskInput, MaskInputProps } from "../MaskInput";
+import { MultipleInputBase } from "./MultipleInputBase";
+import { Icon } from "../../../../../components/dataDisplay";
+
+export type MultipleMaskInputProps = MaskInputProps & {
+  data?: string[];
+  onChangeData?: (data: string[]) => void;
+  name: string;
+};
+
+export const MultipleMaskInput = ({
+  data = [],
+  ...props
+}: MultipleMaskInputProps) => {
+  return (
+    <MultipleInputBase data={data} {...props}>
+      {({ onChange, addItem, value }) => {
+        return (
+          <MaskInput
+            {...props}
+            value={value}
+            onChange={onChange}
+            withoutForm
+            component={
+              <Button type="button" onClick={() => addItem()}>
+                <Icon name="MdAdd" />
+              </Button>
+            }
+          />
+        );
+      }}
+    </MultipleInputBase>
+  );
+};

package/src/components/dataInput/Input/components/MultipleInput/MultipleNumberInput.tsx

@@ -0,0 +1,35 @@
+import { Button } from "../../../../actions/Button";
+import { Input, InputProps } from "../Input";
+import { MultipleInputBase } from "./MultipleInputBase";
+import { Icon } from "../../../../dataDisplay/Icon";
+
+export type MultipleNumberInputProps = InputProps & {
+  data: string[];
+  onChangeData: (data: string[]) => void;
+  name: string;
+};
+
+export const MultipleNumberInput = ({
+  data,
+  ...props
+}: MultipleNumberInputProps) => {
+  return (
+    <MultipleInputBase data={data} {...props}>
+      {({ onChange, addItem, value }) => (
+        <Input
+          {...props}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+          withoutForm
+          component={
+            <Button onClick={() => addItem()}>
+              <Icon name="MdAdd" />
+            </Button>
+          }
+        />
+      )}
+    </MultipleInputBase>
+  );
+};

package/src/components/dataInput/Input/components/MultipleInput/index.ts

@@ -0,0 +1,2 @@
+export * from "./MultipleInput";
+export * from "./MultipleMaskInput";

package/src/components/dataInput/Input/components/MultipleInput/multiple-input.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { MultipleInput } from "./MultipleInput";
+import { Form } from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof MultipleInput> = {
+  title: "Data Input/Input/Multiple Input",
+  component: MultipleInput,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MultipleInput>;
+
+export const Default: Story = {
+  args: {
+    label: "Multiple Input",
+    name: "multipleInput",
+    data: ["Item 1", "Item 2", "Item 3"],
+    placeholder: "Multiple Input",
+    onChangeData: (data: string[]) => {
+      console.log(data);
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Multiple Input",
+    name: "multipleInput",
+    error: "This is an error",
+    data: ["Item 1", "Item 2", "Item 3"],
+    placeholder: "Multiple Input",
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    label: "Multiple Input",
+    name: "client.data",
+    placeholder: "Multiple Input",
+    mask: "999.999.999-99",
+  },
+  decorators: [
+    (Story: React.ComponentType) => {
+      const form = useForm({
+        defaultValues: {
+          client: {
+            data: ["Item 1", "Item 2", "Item 3"],
+          },
+        },
+        errors: {
+          client: {
+            data: {
+              message: "This is an error",
+            },
+          },
+        },
+      });
+
+      return (
+        <Form {...form}>
+          <Story />
+        </Form>
+      );
+    },
+  ],
+};