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

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

@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Input } from "./index";
-import { useForm } from "react-hook-form";
-import { Form } from "@/components/ui/form";
-import { Button } from "@/components/actions";
-
-const meta: Meta<typeof Input> = {
-  title: "Data Input/Input/Input",
-  component: Input,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    label: "Default Input",
-    placeholder: "Type something...",
-    name: "default",
-    mask: "999.999.999-99",
-  },
-};
-
-export const Required: Story = {
-  args: {
-    label: "Required Input",
-    placeholder: "This field is required",
-    name: "required",
-    required: true,
-  },
-};
-
-export const WithForm: Story = {
-  args: {
-    label: "Input with Form",
-    placeholder: "Standalone input",
-    name: "test",
-  },
-  decorators: [
-    (Story: React.ComponentType) => {
-      const form = useForm();
-      return (
-        <Form {...form}>
-          <Story />
-        </Form>
-      );
-    },
-  ],
-};
-
-export const WithFormMask: Story = {
-  args: {
-    label: "Input with Form",
-    placeholder: "Standalone input",
-    name: "standalone",
-    mask: "999.999.999-99",
-  },
-  decorators: [
-    (Story: React.ComponentType) => {
-      const form = useForm();
-      return (
-        <Form {...form}>
-          <Story />
-        </Form>
-      );
-    },
-  ],
-};
-
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Input",
-    placeholder: "You cannot type here",
-    name: "disabled",
-    disabled: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    label: "Error Input",
-    placeholder: "This field is required",
-    name: "error",
-    error: "This is an error message",
-  },
-};
-
-export const WithButton: Story = {
-  args: {
-    label: "Input with Button",
-    placeholder: "Type something...",
-    name: "default",
-    component: <Button>Click me</Button>,
-  },
-};

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

@@ -1,50 +0,0 @@
-import React, { forwardRef, useCallback, useImperativeHandle } from "react";
-import { Input, InputProps } from "../../../../ui/input";
-import { mask as remask } from "remask";
-import { cn } from "@/lib/utils";
-
-export type InputBaseProps = InputProps & {
-  onChangeText?: (text: string) => void;
-  mask?: string | string[];
-  "data-testid"?: string;
-};
-
-export const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(
-  ({ mask, className, ...props }, ref) => {
-    const { onChangeText = () => {}, ...rest } = props;
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    const setMask = useCallback(
-      (value?: string | number | readonly string[] | undefined) => {
-        const inputValue = value || "";
-        if (!mask) return String(inputValue);
-        return remask(String(inputValue), mask);
-      },
-      [mask]
-    );
-
-    useImperativeHandle(ref, () => inputRef.current!);
-
-    return (
-      <Input
-        {...rest}
-        ref={inputRef}
-        className={cn(
-          "border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
-          "p-0 h-auto bg-transparent",
-          className
-        )}
-        onChange={(e) => {
-          const value = setMask(e.target.value);
-          if (inputRef.current) {
-            inputRef.current.value = value;
-          }
-          props.onChange?.(e);
-          onChangeText(value);
-        }}
-      />
-    );
-  }
-);
-
-InputBase.displayName = "InputBase";

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

@@ -1,38 +0,0 @@
-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,48 +0,0 @@
-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 const Input = ({
-  "data-testid": dataTestId,
-  withoutForm = false,
-  extraElement,
-  containerClassName,
-  ...props
-}: InputProps) => {
-  const formData = useConditionalController({
-    name: props.name || "",
-    withoutForm,
-  });
-
-  const inputProps = useMemo(() => {
-    return {
-      ...formData,
-      ...props,
-    };
-  }, [formData, props]);
-
-  return (
-    <InputBase
-      label={props.label}
-      error={props.error}
-      required={props.required}
-      data-testid={dataTestId}
-    >
-      <div className={cn("flex items-center gap-2", containerClassName)}>
-        <InputUI
-          {...inputProps}
-          data-testid={dataTestId}
-          className={cn(
-            props.className,
-            props.error &&
-              "border-destructive focus:border-destructive focus-visible:ring-0"
-          )}
-        />
-        {extraElement}
-      </div>
-    </InputBase>
-  );
-};

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

@@ -1,15 +0,0 @@
-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;
-  extraElement?: React.ReactNode;
-  containerClassName?: string;
-};

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

@@ -1,31 +0,0 @@
-import { ErrorLabel } from "@/components/feedback/ErrorLabel";
-import { InputProps as InputPropsUI } from "../../../../ui/input";
-import { Label } from "../../../../ui/label";
-
-export type InputBaseProps = Omit<InputPropsUI, "children"> & {
-  label?: string;
-  error?: string;
-  required?: boolean;
-  children: React.ReactNode;
-  "data-testid"?: string;
-};
-
-export const InputBase = ({
-  label,
-  error,
-  children,
-  required,
-  "data-testid": testId,
-}: InputBaseProps) => {
-  return (
-    <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,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>
-  );
-};