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

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>
-  );
-};

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

@@ -1,70 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  NumericFormat,
-  NumericFormatProps,
-  SourceInfo,
-} from "react-number-format";
-import { InputBase } from "../InputBase";
-import { Input } from "../../../../ui/input";
-import { InputProps } from "../Input/types";
-import { useCallback, useMemo } from "react";
-import { useConditionalController } from "@/hooks/use-conditional-controller";
-
-export type NumberInputProps = Omit<NumericFormatProps, "onChange"> &
-  InputProps;
-
-export const NumberInput = (props: NumberInputProps) => {
-  const formData = useConditionalController({
-    name: props.name || "",
-    withoutForm: props.withoutForm,
-  });
-
-  const inputProps = useMemo(() => {
-    return {
-      ...formData,
-      ...props,
-    };
-  }, [formData, props]);
-
-  const onValueChange = useCallback(
-    (
-      data: {
-        value: string;
-        floatValue: number | undefined;
-        formattedValue: string;
-      },
-      sourceInfo: SourceInfo
-    ) => {
-      const syntheticEvent = {
-        target: {
-          value: data.formattedValue,
-          name: props.name,
-        },
-        currentTarget: {
-          value: data.formattedValue,
-          name: props.name,
-        },
-      } as React.ChangeEvent<HTMLInputElement>;
-
-      props.onChange?.(syntheticEvent);
-      props.onValueChange?.(data, sourceInfo);
-      if (formData.onChange) {
-        formData.onChange(data.formattedValue);
-      }
-    },
-    [props, formData]
-  );
-
-  return (
-    <InputBase {...props}>
-      <NumericFormat
-        {...inputProps}
-        customInput={Input}
-        value={props.value}
-        onValueChange={onValueChange}
-      />
-    </InputBase>
-  );
-};

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

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

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

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