@phsa.tec/design-system-react 0.1.0

package/src/components/dataDisplay/Tabs/Tabs.tsx

@@ -0,0 +1,53 @@
+import {
+  Tabs as TabsShadcn,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../components/ui/tabs";
+import { useCallback } from "react";
+
+export type TabsProps = {
+  data: {
+    label: string;
+    value: string;
+    content: JSX.Element;
+  }[];
+  defaultValue: string;
+  className?: string;
+  onSelectTab?: (value: string) => void;
+  value?: string;
+};
+
+export function Tabs({
+  data,
+  className,
+  value,
+  onSelectTab = () => {},
+}: TabsProps) {
+  const renderTabsTrigger = useCallback(() => {
+    return data.map(({ label, value }, index) => (
+      <TabsTrigger key={index} value={value} onClick={() => onSelectTab(value)}>
+        {label}
+      </TabsTrigger>
+    ));
+  }, [data, onSelectTab]);
+
+  const renderTabsContent = useCallback(() => {
+    return data.map(({ value, content }, index) => (
+      <TabsContent key={index} value={value}>
+        {content}
+      </TabsContent>
+    ));
+  }, [data]);
+
+  return (
+    <TabsShadcn defaultValue={value} className={className}>
+      {data?.length && (
+        <TabsList className="grid w-full grid-cols-2">
+          {renderTabsTrigger()}
+        </TabsList>
+      )}
+      {data?.length && renderTabsContent()}
+    </TabsShadcn>
+  );
+}

package/src/components/dataDisplay/Tabs/index.ts

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

package/src/components/dataDisplay/Text/Text.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Text } from "./Text";
+
+const meta: Meta<typeof Text> = {
+  title: "DataDisplay/Text",
+  component: Text,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["display", "title", "subtitle", "body", "caption", "muted"],
+    },
+    align: {
+      control: "select",
+      options: ["left", "center", "right", "justify"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Display: Story = {
+  args: {
+    variant: "display",
+    children: "Cabeçalho Principal (Display)",
+  },
+};
+
+export const Title: Story = {
+  args: {
+    variant: "title",
+    children: "Título da Seção",
+  },
+};
+
+export const Subtitle: Story = {
+  args: {
+    variant: "subtitle",
+    children: "Subtítulo explicativo",
+  },
+};
+
+export const Normal: Story = {
+  args: {
+    variant: "normal",
+    children: "Texto de corpo padrão",
+  },
+};
+
+export const Caption: Story = {
+  args: {
+    variant: "caption",
+    children: "Texto de legenda",
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    variant: "muted",
+    children: "Texto desativado ou informativo",
+  },
+};

package/src/components/dataDisplay/Text/Text.tsx

@@ -0,0 +1,56 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../..//lib/utils";
+
+// Definição das variantes com pesos adequados
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      display: "text-5xl font-extrabold tracking-tight",
+      title: "text-3xl font-bold tracking-tight",
+      subtitle: "text-2xl font-semibold",
+      normal: "text-base font-normal",
+      caption: "text-sm font-medium",
+      muted: "text-sm font-normal text-muted-foreground",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify",
+    },
+  },
+  defaultVariants: {
+    variant: "normal",
+    align: "left",
+  },
+});
+
+// Mapeia variantes para as tags HTML corretas
+const tagMap = {
+  display: "h1",
+  title: "h2",
+  subtitle: "h3",
+  normal: "p",
+  caption: "small",
+  muted: "p",
+} as const;
+
+type TextProps = VariantProps<typeof textVariants> & {
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function Text({
+  variant = "normal",
+  align,
+  className,
+  children,
+}: TextProps) {
+  const Tag = tagMap[variant || "normal"] || "p";
+
+  return (
+    <Tag className={cn(textVariants({ variant, align }), className)}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/dataDisplay/Text/index.ts

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

package/src/components/dataDisplay/index.ts

@@ -0,0 +1,8 @@
+export * from "./Table";
+export * from "./Badge";
+export * from "./Icon";
+export * from "./Card";
+export * from "./Avatar";
+export * from "./DropDownMenu";
+export * from "./DataPairList";
+export * from "./Text";

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

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

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

@@ -0,0 +1,100 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Input } from "../index";
+import { FormProvider, useForm } from "react-hook-form";
+
+// Componente wrapper para testar o Input dentro de um formulário
+const FormWrapper = ({ children }: { children: React.ReactNode }) => {
+  const methods = useForm();
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe("Componente Input", () => {
+  it("deve renderizar com label", () => {
+    render(
+      <FormWrapper>
+        <Input label="Nome" name="name" />
+      </FormWrapper>
+    );
+
+    expect(screen.getByLabelText("Nome")).toBeInTheDocument();
+  });
+
+  it("deve renderizar sem formulário quando withoutForm é true", () => {
+    render(<Input label="Email" name="email" withoutForm={true} />);
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+  });
+
+  it("deve exibir mensagem de erro quando fornecida", () => {
+    render(
+      <FormWrapper>
+        <Input label="Senha" name="password" error="Senha é obrigatória" />
+      </FormWrapper>
+    );
+
+    expect(screen.getByText("Senha é obrigatória")).toBeInTheDocument();
+  });
+
+  it("deve aplicar data-testid quando fornecido", () => {
+    render(
+      <FormWrapper>
+        <Input label="Telefone" name="phone" data-testid="phone-input" />
+      </FormWrapper>
+    );
+
+    expect(screen.getByTestId("phone-input")).toBeInTheDocument();
+  });
+
+  it("deve lidar corretamente com a entrada do usuário", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <FormWrapper>
+        <Input label="Usuário" name="username" />
+      </FormWrapper>
+    );
+
+    const input = screen.getByLabelText("Usuário");
+    await user.type(input, "testuser");
+
+    expect(input).toHaveValue("testuser");
+  });
+
+  it("deve passar props adicionais para o elemento input", () => {
+    render(
+      <FormWrapper>
+        <Input
+          label="Código"
+          name="code"
+          placeholder="Digite o código"
+          maxLength={6}
+        />
+      </FormWrapper>
+    );
+
+    const input = screen.getByLabelText("Código");
+    expect(input).toHaveAttribute("placeholder", "Digite o código");
+    expect(input).toHaveAttribute("maxLength", "6");
+  });
+
+  it("deve chamar o onChange quando usado sem formulário", async () => {
+    const handleChange = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Input
+        label="Comentário"
+        name="comment"
+        withoutForm={true}
+        onChange={handleChange}
+      />
+    );
+
+    const input = screen.getByLabelText("Comentário");
+    await user.type(input, "a");
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,257 @@
+import React from "react";
+import { Label } from "../../../../ui/label";
+import { useFormContext } from "react-hook-form";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../../../components/ui/form";
+import { InputBase, InputBaseProps } from "./InputBase";
+import { ErrorMessage } from "../../../../../components/dataDisplay/ErrorMessage";
+import { cn } from "@/lib/utils";
+
+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;
+};
+
+export const Input = ({
+  label,
+  withoutForm,
+  component,
+  name,
+  error,
+  leftIcon,
+  rightIcon,
+  helperText,
+  floatingLabel = false,
+  "data-testid": testId,
+  className,
+  required,
+  placeholder,
+  ...props
+}: InputProps) => {
+  const form = useFormContext();
+  const hasForm = !withoutForm && !!form && !!name;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [hasValue, setHasValue] = React.useState(false);
+
+  const containerClasses = cn("relative w-full", className);
+
+  if (!hasForm)
+    return (
+      <div className={containerClasses}>
+        <div className="relative">
+          {/* Floating Label ou Label Normal */}
+          {label && !floatingLabel && (
+            <Label
+              htmlFor={name || "input"}
+              className={cn(
+                "block text-sm font-medium mb-1.5 transition-colors duration-200",
+                error ? "text-destructive" : "text-foreground"
+              )}
+            >
+              {label}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+          )}
+
+          {/* Input Container */}
+          <div className="relative">
+            {leftIcon && (
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
+                {leftIcon}
+              </div>
+            )}
+
+            <InputBase
+              {...props}
+              placeholder={floatingLabel ? " " : placeholder}
+              className={cn(
+                "w-full px-4 py-3 border border-border rounded-xl",
+                "bg-background transition-all duration-200",
+                "focus:border-primary focus:ring-4 focus:ring-primary/20",
+                "placeholder:text-muted-foreground",
+                "disabled:bg-muted disabled:text-muted-foreground",
+                leftIcon && "pl-10",
+                rightIcon && "pr-10",
+                error &&
+                  "border-destructive focus:border-destructive focus:ring-destructive/20",
+                floatingLabel && "pt-6 pb-2"
+              )}
+              onFocus={(e) => {
+                setIsFocused(true);
+                props.onFocus?.(e);
+              }}
+              onBlur={(e) => {
+                setIsFocused(false);
+                setHasValue(!!e.target.value);
+                props.onBlur?.(e);
+              }}
+            />
+
+            {/* Floating Label */}
+            {label && floatingLabel && (
+              <Label
+                htmlFor={name || "input"}
+                className={cn(
+                  "absolute left-4 transition-all duration-200 pointer-events-none",
+                  "text-muted-foreground",
+                  isFocused || hasValue
+                    ? "top-2 text-xs font-medium"
+                    : "top-1/2 transform -translate-y-1/2 text-base",
+                  isFocused && !error && "text-primary",
+                  error && "text-destructive"
+                )}
+              >
+                {label}
+                {required && <span className="text-destructive ml-1">*</span>}
+              </Label>
+            )}
+
+            {rightIcon && (
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
+                {rightIcon}
+              </div>
+            )}
+
+            {component && (
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 z-10">
+                {component}
+              </div>
+            )}
+          </div>
+
+          {/* Helper Text */}
+          {helperText && !error && (
+            <p className="mt-2 text-xs text-muted-foreground">{helperText}</p>
+          )}
+
+          {/* Error Message */}
+          {error && (
+            <div className="mt-2">
+              <ErrorMessage>{error}</ErrorMessage>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field: { onChange, value, ...rest } }) => (
+        <FormItem
+          className={containerClasses}
+          data-testid={testId ? `form-item-${testId}` : undefined}
+        >
+          <div className="relative">
+            {/* Label Normal */}
+            {label && !floatingLabel && (
+              <FormLabel
+                htmlFor={name}
+                className={cn(
+                  "block text-sm font-medium mb-1.5 transition-colors duration-200",
+                  "text-foreground data-[invalid]:text-destructive"
+                )}
+                data-testid={testId ? `form-label-${testId}` : undefined}
+              >
+                {label}
+                {required && <span className="text-destructive ml-1">*</span>}
+              </FormLabel>
+            )}
+
+            <FormControl>
+              <div className="relative">
+                {leftIcon && (
+                  <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
+                    {leftIcon}
+                  </div>
+                )}
+
+                <InputBase
+                  {...props}
+                  {...rest}
+                  value={value}
+                  onChangeText={onChange}
+                  placeholder={floatingLabel ? " " : placeholder}
+                  className={cn(
+                    "w-full px-4 py-3 border border-border rounded-xl",
+                    "bg-background transition-all duration-200",
+                    "focus:border-primary focus:ring-4 focus:ring-primary/20",
+                    "placeholder:text-muted-foreground",
+                    "disabled:bg-muted disabled:text-muted-foreground",
+                    leftIcon && "pl-10",
+                    rightIcon && "pr-10",
+                    floatingLabel && "pt-6 pb-2"
+                  )}
+                  onFocus={(e) => {
+                    setIsFocused(true);
+                    props.onFocus?.(e);
+                  }}
+                  onBlur={(e) => {
+                    setIsFocused(false);
+                    setHasValue(!!value);
+                    props.onBlur?.(e);
+                  }}
+                />
+
+                {/* Floating Label */}
+                {label && floatingLabel && (
+                  <FormLabel
+                    htmlFor={name}
+                    className={cn(
+                      "absolute left-4 transition-all duration-200 pointer-events-none",
+                      "text-muted-foreground",
+                      isFocused || hasValue || value
+                        ? "top-2 text-xs font-medium"
+                        : "top-1/2 transform -translate-y-1/2 text-base",
+                      isFocused && "text-primary"
+                    )}
+                  >
+                    {label}
+                    {required && (
+                      <span className="text-destructive ml-1">*</span>
+                    )}
+                  </FormLabel>
+                )}
+
+                {rightIcon && (
+                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
+                    {rightIcon}
+                  </div>
+                )}
+
+                {component && (
+                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 z-10">
+                    {component}
+                  </div>
+                )}
+              </div>
+            </FormControl>
+
+            {/* Helper Text */}
+            {helperText && (
+              <p className="mt-2 text-xs text-muted-foreground">{helperText}</p>
+            )}
+
+            <FormMessage
+              role="alert"
+              className="mt-2"
+              data-testid={testId ? `form-message-${testId}` : undefined}
+            />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+};