@phsa.tec/design-system-react 0.1.0

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

@@ -0,0 +1,95 @@
+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");
+  });
+});

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

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

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

@@ -0,0 +1,76 @@
+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$ "
+          description="Digite o preço do produto"
+        />
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { NumericFormat, NumericFormatProps } from "react-number-format";
+import { InputBase, InputBaseProps } from "../InputBase";
+import { Input } from "../../../../ui/input";
+
+export type NumberInputProps = Omit<
+  NumericFormatProps,
+  "onChange" | "onValueChange"
+> &
+  Omit<InputBaseProps, "children"> & {
+    onChange?: (value: number) => void;
+    "data-testid"?: string;
+    component?: React.ReactNode;
+  };
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (props, ref) => {
+    const {
+      name,
+      label,
+      error,
+      className,
+      withoutForm,
+      onChange,
+      "data-testid": testId,
+      component,
+      ...inputProps
+    } = props;
+
+    const baseTestId = testId || name || "";
+
+    return (
+      <InputBase
+        label={label}
+        error={error}
+        className={className}
+        name={name}
+        withoutForm={withoutForm}
+        data-testid={baseTestId}
+      >
+        {({ onChange: onBaseChange, value }) => (
+          <div
+            className="flex w-full gap-3"
+            data-testid={`number-input-wrapper-${baseTestId}`}
+          >
+            <NumericFormat
+              value={value as number}
+              customInput={Input}
+              getInputRef={ref}
+              onValueChange={({ floatValue }) => {
+                const numberValue = floatValue;
+                onBaseChange?.(numberValue);
+                onChange?.(numberValue as number);
+              }}
+              data-testid={`${baseTestId}-number-input`}
+              {...inputProps}
+            />
+            {component}
+          </div>
+        )}
+      </InputBase>
+    );
+  }
+);
+
+NumberInput.displayName = "NumberInput";

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

@@ -0,0 +1,4 @@
+export * from "./components/Input";
+export * from "./components/NumberInput";
+export * from "./components/MaskInput";
+export * from "./components/MultipleInput";

package/src/components/dataInput/Select/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { MultiSelect } from "./index";
+import { useState } from "react";
+import { Form } from "../../form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof MultiSelect> = {
+  title: "Data Input/MultiSelect",
+  component: MultiSelect,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+
+const options = [
+  { label: "Next.js", value: "nextjs" },
+  { label: "SvelteKit", value: "sveltekit" },
+  { label: "Nuxt.js", value: "nuxtjs" },
+  { label: "Remix", value: "remix" },
+  { label: "Astro", value: "astro" },
+];
+
+const MultiSelectWithHooks = () => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      label="MultiSelect"
+      options={options}
+      selected={selected}
+      onChange={setSelected}
+      placeholder="Select frameworks..."
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <MultiSelectWithHooks />,
+};
+
+export const Preselected: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>(["nextjs", "nuxtjs"]);
+
+    return (
+      <MultiSelect
+        options={options}
+        selected={selected}
+        onChange={setSelected}
+        placeholder="Select frameworks..."
+      />
+    );
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+
+    return (
+      <MultiSelect
+        options={options}
+        selected={selected}
+        onChange={setSelected}
+        placeholder="Choose your favorite frameworks..."
+      />
+    );
+  },
+};
+
+export const ManyOptions: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    const manyOptions = [
+      ...options,
+      { label: "React", value: "react" },
+      { label: "Vue", value: "vue" },
+      { label: "Angular", value: "angular" },
+      { label: "Solid", value: "solid" },
+      { label: "Qwik", value: "qwik" },
+      { label: "Ember", value: "ember" },
+      { label: "Preact", value: "preact" },
+      { label: "Alpine", value: "alpine" },
+    ];
+
+    return (
+      <MultiSelect
+        options={manyOptions}
+        selected={selected}
+        onChange={setSelected}
+        placeholder="Select frameworks..."
+      />
+    );
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    name: "multiSelect",
+    options: [{ label: "Next.js", value: "nextjs" }],
+    label: "MultiSelect",
+    required: true,
+  },
+  decorators: [
+    (Story: React.ComponentType) => {
+      const form = useForm({
+        defaultValues: {
+          multiSelect: ["nextjs"],
+        },
+      });
+      return (
+        <Form {...form}>
+          <Story />
+        </Form>
+      );
+    },
+  ],
+};

package/src/components/dataInput/Select/MultiSelect/MultiSelectBase.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../../../../lib/utils";
+import * as Popover from "@radix-ui/react-popover";
+
+export type MultiSelectBaseProps = {
+  options: { label: string; value: string }[];
+  selected?: string[];
+  onChange?: (values: string[]) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export function MultiSelectBase({
+  options = [],
+  selected = [],
+  onChange = () => {},
+  placeholder = "Select frameworks...",
+  className,
+}: MultiSelectBaseProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleRemoveItem = (valueToRemove: string) => {
+    onChange(selected.filter((value) => value !== valueToRemove));
+  };
+
+  const handleSelectItem = (value: string) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((v) => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <div
+          className={cn(
+            "flex min-h-[40px] w-full flex-wrap gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            className
+          )}
+        >
+          {selected.map((value) => {
+            const option = options.find((o) => o.value === value);
+            if (!option) return null;
+
+            return (
+              <div
+                key={value}
+                className="flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-sm text-secondary-foreground"
+              >
+                {option.label}
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleRemoveItem(value);
+                  }}
+                  className="rounded-full hover:bg-secondary-foreground/20"
+                >
+                  <X className="h-3 w-3" />
+                  <span className="sr-only">Remove {option.label}</span>
+                </button>
+              </div>
+            );
+          })}
+          <div className="flex-1">
+            {selected.length === 0 && (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+          </div>
+        </div>
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content
+          className="w-[--radix-popover-trigger-width] z-50 mt-1 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+          align="start"
+          sideOffset={4}
+        >
+          <div className="flex items-center border-b border-border px-3 py-2">
+            <Search className="h-4 w-4 text-muted-foreground" />
+            <input
+              ref={inputRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Search..."
+              className="flex-1 bg-transparent px-2 outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+          <div className="max-h-[200px] overflow-auto">
+            {filteredOptions.length === 0 ? (
+              <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+                No results found.
+              </div>
+            ) : (
+              filteredOptions.map((option) => (
+                <div
+                  key={option.value}
+                  onClick={() => handleSelectItem(option.value)}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 px-4 py-2 text-sm hover:bg-accent",
+                    selected.includes(option.value) && "bg-accent"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "flex h-4 w-4 items-center justify-center rounded border border-primary",
+                      selected.includes(option.value) &&
+                        "bg-primary text-primary-foreground"
+                    )}
+                  >
+                    {selected.includes(option.value) && (
+                      <span className="text-[10px]">✓</span>
+                    )}
+                  </div>
+                  {option.label}
+                </div>
+              ))
+            )}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/dataInput/Select/MultiSelect/index.tsx

@@ -0,0 +1,75 @@
+"use client";
+import React from "react";
+import { Label } from "../../../../components/dataDisplay/Label";
+import { MultiSelectBase, MultiSelectBaseProps } from "./MultiSelectBase";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../../components/ui/form";
+import { useFormContext } from "react-hook-form";
+
+type MultiSelectProps = MultiSelectBaseProps & {
+  label?: string;
+  name?: string;
+  withoutForm?: boolean;
+  className?: string;
+  required?: boolean;
+  "data-testid"?: string;
+};
+
+export function MultiSelect({
+  label,
+  name,
+  withoutForm,
+  className,
+  required,
+  "data-testid": testId,
+  ...props
+}: MultiSelectProps) {
+  const form = useFormContext();
+  const hasForm = !withoutForm && !!form && !!name;
+
+  if (!hasForm)
+    return (
+      <div className="grid w-full items-center gap-3">
+        {label && <Label htmlFor={name}>{label}</Label>}
+        <MultiSelectBase {...props} />
+      </div>
+    );
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field: { value, ...rest } }) => {
+        return (
+          <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>
+              <div className="flex w-full items-center space-x-2">
+                <MultiSelectBase {...props} {...rest} selected={value} />
+              </div>
+            </FormControl>
+            <FormMessage
+              role="alert"
+              data-testid={testId ? `form-message-${testId}` : undefined}
+            />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Select } from "./index";
+import { useForm } from "react-hook-form";
+import { Button } from "../../../components/actions";
+import { Form } from "../form";
+
+const meta: Meta<typeof Select> = {
+  title: "Data Input/Select",
+  component: Select,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    options: { control: "object" },
+    placeholder: { control: "text" },
+    label: { control: "text" },
+    value: { control: "text" },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  args: {
+    options: [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+    ],
+    placeholder: "Select an option",
+    label: "Select Label",
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    options: [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+    ],
+    placeholder: "Select an option",
+    label: "Select Label",
+    name: "select",
+  },
+  render: (args) => {
+    const form = useForm();
+    const onSubmit = (data: unknown) => console.log(data);
+    return (
+      <Form {...form}>
+        <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
+          <Select {...args} />
+          <Button type="button" onClick={() => console.log(form.getValues())}>
+            Submit
+          </Button>
+        </form>
+      </Form>
+    );
+  },
+};