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

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";

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

@@ -1,96 +0,0 @@
-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",
-    withoutForm: true,
-    onAdd: (data: string) => {
-      console.log("Added:", data);
-    },
-    onRemove: (index: number) => {
-      console.log("Removed index:", index);
-    },
-  },
-};
-
-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",
-    withoutForm: true,
-    onAdd: (data: string) => {
-      console.log("Added:", data);
-    },
-    onRemove: (index: number) => {
-      console.log("Removed index:", index);
-    },
-  },
-};
-
-export const WithForm: Story = {
-  args: {
-    label: "Multiple Input",
-    name: "client",
-    placeholder: "Multiple Input",
-  },
-  decorators: [
-    (Story: React.ComponentType) => {
-      const form = useForm({
-        defaultValues: {
-          client: ["Item 1", "Item 2", "Item 3"],
-        },
-      });
-
-      return (
-        <Form {...form}>
-          <Story />
-        </Form>
-      );
-    },
-  ],
-};
-
-export const WithMaskAndForm: Story = {
-  args: {
-    label: "Phone Numbers",
-    name: "phoneNumbers",
-    placeholder: "Enter phone number",
-    mask: "(99) 99999-9999",
-  },
-  decorators: [
-    (Story: React.ComponentType) => {
-      const form = useForm({
-        defaultValues: {
-          phoneNumbers: ["(11) 99999-9999", "(21) 88888-8888"],
-        },
-      });
-
-      return (
-        <Form {...form}>
-          <Story />
-        </Form>
-      );
-    },
-  ],
-};

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

@@ -1,175 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { NumberInput } from "../number-input";
-
-describe("NumberInput", () => {
-  it("should render label", () => {
-    render(<NumberInput label="test" data-testid="number-input" />);
-    const label = screen.getByTestId("number-input-label");
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent("test");
-  });
-
-  it("should render error", () => {
-    render(<NumberInput error="test" data-testid="number-input" />);
-    const error = screen.getByTestId("number-input-error-label");
-    expect(error).toBeInTheDocument();
-    expect(error).toHaveTextContent("test");
-  });
-
-  it("should be disabled", () => {
-    render(<NumberInput disabled data-testid="number-input" />);
-    const input = screen.getByTestId("number-input");
-    expect(input).toBeDisabled();
-  });
-
-  it("should be required", () => {
-    render(<NumberInput required data-testid="number-input" label="test" />);
-    const label = screen.getByTestId("number-input-label");
-    expect(label).toHaveTextContent("test *");
-  });
-
-  it("should handle placeholder", () => {
-    render(
-      <NumberInput data-testid="number-input" placeholder="Digite um número" />
-    );
-    const input = screen.getByTestId("number-input");
-
-    expect(input).toHaveAttribute("placeholder", "Digite um número");
-  });
-
-  it("should handle name attribute", () => {
-    render(<NumberInput data-testid="number-input" name="amount" />);
-    const input = screen.getByTestId("number-input");
-
-    expect(input).toHaveAttribute("name", "amount");
-  });
-
-  it("should format numbers with thousands separator", async () => {
-    const user = userEvent.setup();
-    render(<NumberInput data-testid="number-input" thousandSeparator={true} />);
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "1234567");
-
-    expect(input).toHaveValue("1,234,567");
-  });
-
-  it("should format currency values", async () => {
-    const user = userEvent.setup();
-    render(
-      <NumberInput
-        data-testid="number-input"
-        thousandSeparator={true}
-        prefix="R$ "
-        decimalScale={2}
-        fixedDecimalScale={true}
-      />
-    );
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "1234.56");
-
-    expect(input).toHaveValue("R$ 1,234.56");
-  });
-
-  it("should limit decimal places", async () => {
-    const user = userEvent.setup();
-    render(<NumberInput data-testid="number-input" decimalScale={2} />);
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "123.456789");
-
-    expect(input).toHaveValue("123.45");
-  });
-
-  it("should handle percentage format", async () => {
-    const user = userEvent.setup();
-    render(
-      <NumberInput data-testid="number-input" suffix="%" decimalScale={2} />
-    );
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "15.75");
-
-    expect(input).toHaveValue("15.75%");
-  });
-
-  it("should call onChange with synthetic event", async () => {
-    const user = userEvent.setup();
-    const mockOnChange = jest.fn();
-    render(
-      <NumberInput
-        data-testid="number-input"
-        onChange={mockOnChange}
-        name="testInput"
-      />
-    );
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "123");
-
-    expect(mockOnChange).toHaveBeenCalled();
-    const lastCall =
-      mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
-    expect(lastCall.target.name).toBe("testInput");
-    expect(lastCall.target.value).toBe("123");
-  });
-
-  it("should call onValueChange with formatted data", async () => {
-    const user = userEvent.setup();
-    const mockOnValueChange = jest.fn();
-    render(
-      <NumberInput
-        data-testid="number-input"
-        onValueChange={mockOnValueChange}
-        thousandSeparator={true}
-      />
-    );
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "1234");
-
-    expect(mockOnValueChange).toHaveBeenCalled();
-    const lastCall =
-      mockOnValueChange.mock.calls[mockOnValueChange.mock.calls.length - 1][0];
-    expect(lastCall.value).toBe("1234");
-    expect(lastCall.floatValue).toBe(1234);
-    expect(lastCall.formattedValue).toBe("1,234");
-  });
-
-  it("should handle negative numbers", async () => {
-    const user = userEvent.setup();
-    render(<NumberInput data-testid="number-input" allowNegative={true} />);
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "-123");
-
-    expect(input).toHaveValue("-123");
-  });
-
-  it("should prevent negative numbers when allowNegative is false", async () => {
-    const user = userEvent.setup();
-    render(<NumberInput data-testid="number-input" allowNegative={false} />);
-    const input = screen.getByTestId("number-input");
-
-    await user.type(input, "-123");
-
-    expect(input).toHaveValue("123");
-  });
-
-  it("should handle controlled value", () => {
-    render(<NumberInput data-testid="number-input" value="1000" />);
-    const input = screen.getByTestId("number-input");
-
-    expect(input).toHaveValue("1000");
-  });
-
-  it("should handle empty value", () => {
-    render(<NumberInput data-testid="number-input" value="" />);
-    const input = screen.getByTestId("number-input");
-
-    expect(input).toHaveValue("");
-  });
-});

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

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

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

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { NumberInput } from "./number-input";
-import { useForm } from "react-hook-form";
-import { Form } from "../../../../../components/ui/form";
-
-const meta = {
-  title: "Data Input/Input/NumberInput",
-  component: NumberInput,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof NumberInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "0,00",
-    label: "Valor",
-  },
-};
-
-export const Currency: Story = {
-  args: {
-    placeholder: "0,00",
-    label: "Preço",
-    prefix: "R$ ",
-    decimalScale: 2,
-    fixedDecimalScale: false,
-    value: 1234.56,
-  },
-};
-
-export const Percentage: Story = {
-  args: {
-    placeholder: "0,00",
-    label: "Porcentagem",
-    suffix: "%",
-    decimalScale: 1,
-    fixedDecimalScale: true,
-    value: 85.5,
-  },
-};
-
-export const CustomFormat: Story = {
-  args: {
-    placeholder: "0",
-    label: "Número",
-    thousandSeparator: ",",
-    decimalSeparator: ".",
-    value: 1234567.89,
-  },
-};
-
-export const WithForm = () => {
-  const form = useForm({
-    defaultValues: {
-      price: 99.99,
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className="space-y-6">
-        <NumberInput
-          name="price"
-          label="Preço"
-          prefix="R$ "
-          placeholder="Digite o preço do produto"
-        />
-      </form>
-    </Form>
-  );
-};