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

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

@@ -1,77 +0,0 @@
-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", () => {
-  it("should render label", () => {
-    render(
-      <MaskInput label="test" data-testid="mask-input" mask="999.999.999-99" />
-    );
-    const label = screen.getByTestId("mask-input-label");
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent("test");
-  });
-
-  it("should render error", () => {
-    render(
-      <MaskInput error="test" data-testid="mask-input" mask="999.999.999-99" />
-    );
-    const error = screen.getByTestId("mask-input-error-label");
-    expect(error).toBeInTheDocument();
-    expect(error).toHaveTextContent("test");
-  });
-
-  it("should be disabled", () => {
-    render(
-      <MaskInput disabled data-testid="mask-input" mask="999.999.999-99" />
-    );
-    const input = screen.getByTestId("mask-input");
-    expect(input).toBeDisabled();
-  });
-
-  it("should be required", () => {
-    render(
-      <MaskInput
-        required
-        data-testid="mask-input"
-        label="test"
-        mask="999.999.999-99"
-      />
-    );
-    const label = screen.getByTestId("mask-input-label");
-    expect(label).toHaveTextContent("test *");
-  });
-
-  it("should apply mask to input value", async () => {
-    const user = userEvent.setup();
-    render(<MaskInput data-testid="mask-input" mask="999.999.999-99" />);
-    const input = screen.getByTestId("mask-input");
-
-    await user.type(input, "12345678901");
-
-    expect(input).toHaveValue("123.456.789-01");
-  });
-
-  it("should handle placeholder", () => {
-    render(
-      <MaskInput
-        data-testid="mask-input"
-        mask="999.999.999-99"
-        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="999.999.999-99" name="cpf" />
-    );
-    const input = screen.getByTestId("mask-input");
-
-    expect(input).toHaveAttribute("name", "cpf");
-  });
-});

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

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

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

@@ -1,85 +0,0 @@
-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: "99999-999",
-    label: "CEP",
-    mask: "99999-999",
-  },
-};
-
-export const CPF: Story = {
-  args: {
-    placeholder: "999.999.999-99",
-    label: "CPF",
-    mask: "999.999.999-99",
-  },
-};
-
-export const Phone: Story = {
-  args: {
-    placeholder: "(99) 99999-9999",
-    label: "Telefone",
-    mask: "(99) 99999-9999",
-  },
-};
-
-export const Date: Story = {
-  args: {
-    placeholder: "99/99/9999",
-    label: "Data",
-    mask: "99/99/9999",
-  },
-};
-
-export const LettersExample: Story = {
-  args: {
-    placeholder: "AAA-9999",
-    label: "Código com Letras",
-    mask: "AAA-9999",
-  },
-};
-
-export const MixedExample: Story = {
-  args: {
-    placeholder: "A99-AAA-999",
-    label: "Código Misto",
-    mask: "A99-AAA-999",
-  },
-};
-
-export const WithForm = () => {
-  const form = useForm({
-    defaultValues: {
-      cpf: "",
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className="space-y-6">
-        <MaskInput
-          name="cpf"
-          label="CPF"
-          placeholder="999.999.999-99"
-          mask="999.999.999-99"
-        />
-      </form>
-    </Form>
-  );
-};

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

@@ -1,73 +0,0 @@
-"use client";
-import * as React from "react";
-import { Input } from "../Input";
-import { useConditionalController } from "@/hooks/use-conditional-controller";
-import { InputProps } from "../Input/types";
-import { useMask } from "@/hooks/use-mask";
-import { useRef } from "react";
-
-export type MaskInputProps = {
-  mask?: string;
-} & InputProps;
-
-export const MaskInput = ({
-  "data-testid": dataTestId,
-  withoutForm = false,
-  extraElement,
-  mask = "",
-  ...props
-}: MaskInputProps) => {
-  const formData = useConditionalController({
-    name: props.name || "",
-    withoutForm,
-  });
-
-  const inputProps = React.useMemo(() => {
-    return {
-      ...formData,
-      ...props,
-    };
-  }, [formData, props]);
-
-  const { applyMask } = useMask({ mask });
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const applyMaskToInput = React.useCallback(
-    (value: string) => {
-      if (inputRef.current && mask) {
-        const maskedValue = applyMask(value);
-        inputRef.current.value = maskedValue;
-      }
-    },
-    [applyMask, mask]
-  );
-
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const maskedValue = mask ? applyMask(e.target.value) : e.target.value;
-
-      const response = {
-        ...e,
-        target: {
-          ...e.target,
-          value: maskedValue,
-        },
-      };
-      applyMaskToInput(maskedValue);
-      return inputProps?.onChange?.(response);
-    },
-    [applyMask, inputProps, mask, applyMaskToInput]
-  );
-
-  return (
-    <Input
-      {...inputProps}
-      ref={inputRef}
-      onChange={handleChange}
-      extraElement={extraElement}
-      data-testid={dataTestId}
-      withoutForm={true}
-    />
-  );
-};

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

@@ -1,105 +0,0 @@
-import { Button } from "../../../../actions/Button";
-import { Icon } from "../../../../dataDisplay/Icon";
-import { useCallback, useMemo, useState } from "react";
-import { useConditionalController } from "@/hooks/use-conditional-controller";
-import { MaskInput, MaskInputProps } from "../MaskInput";
-
-export type MultipleInputProps = MaskInputProps & {
-  data?: string[];
-  onAdd?: (data: string) => void;
-  onRemove?: (position: number) => void;
-  name: string;
-  defaultValue?: string;
-  "data-testid"?: string;
-};
-
-export const MultipleInput = ({
-  data = [],
-  onAdd = () => {},
-  defaultValue = "",
-  onRemove = () => {},
-  withoutForm = false,
-  ...props
-}: MultipleInputProps) => {
-  const [inputValue, setInputValue] = useState(defaultValue);
-
-  const formData = useConditionalController({
-    name: props.name || "",
-    withoutForm,
-  });
-
-  const inputItems = useMemo(() => {
-    if (formData?.value) {
-      return formData.value;
-    }
-    return data;
-  }, [data, formData]);
-
-  const onAddData = useCallback(() => {
-    const trimmedValue = inputValue.trim();
-    if (trimmedValue) {
-      if (formData?.onChange) {
-        formData.onChange([...inputItems, trimmedValue]);
-      } else {
-        onAdd(trimmedValue);
-      }
-      setInputValue("");
-    }
-  }, [inputValue, formData, onAdd, inputItems]);
-
-  const onRemoveData = useCallback(
-    (index: number) => {
-      if (formData?.onChange) {
-        const newData = inputItems.filter(
-          (_: string, i: number) => i !== index
-        );
-        formData.onChange(newData);
-      } else {
-        onRemove(index);
-      }
-    },
-    [formData, inputItems, onRemove]
-  );
-
-  const renderItens = useCallback(() => {
-    return inputItems?.map((item: string, index: number) => {
-      return (
-        <div key={item} className="flex justify-between">
-          {item}
-          <Button
-            variant="ghost"
-            className="text-destructive"
-            size={"icon"}
-            onClick={() => onRemoveData(index)}
-          >
-            <Icon name="MdDelete" />
-          </Button>
-        </div>
-      );
-    });
-  }, [inputItems, onRemoveData]);
-
-  const extraElement = useMemo(
-    () => (
-      <Button type="button" onClick={onAddData} disabled={!inputValue}>
-        <Icon name="MdAdd" />
-      </Button>
-    ),
-    [onAddData, inputValue]
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <MaskInput
-        {...props}
-        withoutForm
-        extraElement={extraElement}
-        onChange={(e) => {
-          setInputValue(e.target.value);
-        }}
-        value={inputValue}
-      />
-      {renderItens()}
-    </div>
-  );
-};

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

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

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

@@ -1,35 +0,0 @@
-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/__tests__/multiple-input.test.tsx

@@ -1,152 +0,0 @@
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { MultipleInput } from "../MultipleInput";
-
-describe("MultipleInput", () => {
-  it("should render label", () => {
-    render(
-      <MultipleInput
-        label="test"
-        name="test-input"
-        data-testid="multiple-input"
-      />
-    );
-    const label = screen.getByTestId("multiple-input-label");
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent("test");
-  });
-
-  it("should render error", () => {
-    render(
-      <MultipleInput
-        error="test"
-        name="test-input"
-        data-testid="multiple-input"
-      />
-    );
-    const error = screen.getByTestId("multiple-input-error-label");
-    expect(error).toBeInTheDocument();
-    expect(error).toHaveTextContent("test");
-  });
-
-  it("should be disabled", () => {
-    render(
-      <MultipleInput disabled name="test-input" data-testid="multiple-input" />
-    );
-    const input = screen.getByTestId("multiple-input");
-    expect(input).toBeDisabled();
-  });
-
-  it("should be required", () => {
-    render(
-      <MultipleInput
-        required
-        name="test-input"
-        label="test"
-        data-testid="multiple-input"
-      />
-    );
-    const label = screen.getByTestId("multiple-input-label");
-    expect(label).toHaveTextContent("test *");
-  });
-
-  it("should change value", () => {
-    render(<MultipleInput name="test-input" data-testid="multiple-input" />);
-    const input = screen.getByTestId("multiple-input");
-    fireEvent.change(input, { target: { value: "test" } });
-    expect(input).toHaveValue("test");
-  });
-
-  it("should render add button", () => {
-    render(<MultipleInput name="test-input" data-testid="multiple-input" />);
-    const addButton = screen.getByRole("button");
-    expect(addButton).toBeInTheDocument();
-  });
-
-  it("should add item when add button is clicked", () => {
-    const mockOnAdd = jest.fn();
-    render(
-      <MultipleInput
-        name="test-input"
-        data-testid="multiple-input"
-        onAdd={mockOnAdd}
-        withoutForm
-      />
-    );
-
-    const input = screen.getByTestId("multiple-input");
-    const addButton = screen.getByRole("button");
-
-    fireEvent.change(input, { target: { value: "test item" } });
-    fireEvent.click(addButton);
-
-    expect(mockOnAdd).toHaveBeenCalledWith("test item");
-  });
-
-  it("should render with initial data", () => {
-    const initialData = ["item 1", "item 2"];
-
-    render(
-      <MultipleInput
-        name="test-input"
-        data={initialData}
-        data-testid="multiple-input"
-        withoutForm
-      />
-    );
-
-    expect(screen.getByText("item 1")).toBeInTheDocument();
-    expect(screen.getByText("item 2")).toBeInTheDocument();
-  });
-
-  it("should handle mask prop", () => {
-    render(
-      <MultipleInput
-        name="test-input"
-        mask="(99) 99999-9999"
-        data-testid="multiple-input"
-      />
-    );
-
-    const input = screen.getByTestId("multiple-input");
-    expect(input).toBeInTheDocument();
-  });
-
-  it("should remove item when remove button is clicked", () => {
-    const mockOnRemove = jest.fn();
-    const initialData = ["item 1", "item 2"];
-
-    render(
-      <MultipleInput
-        name="test-input"
-        data={initialData}
-        onRemove={mockOnRemove}
-        data-testid="multiple-input"
-        withoutForm
-      />
-    );
-
-    const removeButtons = screen.getAllByRole("button");
-    const removeButton = removeButtons.find((button) =>
-      button.querySelector('[data-icon="MdDelete"]')
-    );
-
-    if (removeButton) {
-      fireEvent.click(removeButton);
-      expect(mockOnRemove).toHaveBeenCalledWith(0);
-    }
-  });
-
-  it("should disable add button when input is empty", () => {
-    render(
-      <MultipleInput
-        name="test-input"
-        data-testid="multiple-input"
-        withoutForm
-      />
-    );
-
-    const addButton = screen.getByRole("button");
-    expect(addButton).toBeDisabled();
-  });
-});

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

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