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

package/src/components/dataDisplay/Table/table.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Table } from "./Table";
-import { ColumnDef } from "@tanstack/react-table";
-
-const meta: Meta<typeof Table> = {
-  title: "DataDisplay/Table",
-  component: Table,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Table<User>>;
-
-type User = {
-  id: number;
-  name: string;
-  email: string;
-  role: string;
-};
-
-const mockData: User[] = [
-  {
-    id: 1,
-    name: "John Doe",
-    email: "john@example.com",
-    role: "Admin",
-  },
-  {
-    id: 2,
-    name: "Jane Smith",
-    email: "jane@example.com",
-    role: "User",
-  },
-  {
-    id: 3,
-    name: "Bob Johnson",
-    email: "bob@example.com",
-    role: "Editor",
-  },
-  {
-    id: 4,
-    name: "Alice Brown",
-    email: "alice@example.com",
-    role: "User",
-  },
-  {
-    id: 5,
-    name: "Charlie Wilson",
-    email: "charlie@example.com",
-    role: "Editor",
-  },
-  {
-    id: 6,
-    name: "Diana Miller",
-    email: "diana@example.com",
-    role: "User",
-  },
-];
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "id",
-    header: "ID",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "name",
-    header: "Name",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "role",
-    header: "Role",
-  },
-];
-
-export const Default: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 5,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const SmallPageSize: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 3,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const StartingFromPage2: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 1, // Starts from second page
-      pageSize: 3,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const EmptyTable: Story = {
-  args: {
-    data: [],
-    columns: columns,
-  },
-};
-
-export const SingleRow: Story = {
-  args: {
-    data: [mockData[0]],
-    columns: columns,
-  },
-};

package/src/components/dataDisplay/Table/types.ts

@@ -1,15 +0,0 @@
-export interface Column<T> {
-  header: string;
-  accessorKey: keyof T;
-  cell?: (row: T) => React.ReactNode;
-  sortable?: boolean;
-  filterable?: boolean;
-}
-
-export interface TableProps<T> {
-  data: T[];
-  columns: Column<T>[];
-  className?: string;
-  filters?: React.ReactNode;
-  onSort?: (field: keyof T, direction: "asc" | "desc") => void;
-}

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

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-
-import { Tabs } from "./Tabs";
-
-const meta = {
-  title: "DataDisplay/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: [
-      {
-        label: "Tab 1",
-        value: "tab1",
-        content: <div>Tab 1 content</div>,
-      },
-      {
-        label: "Tab 2",
-        value: "tab2",
-        content: <div>Tab 2 content</div>,
-      },
-    ],
-    defaultValue: "tab1",
-    onSelectTab: (value) => console.log(value),
-  },
-};

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

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

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

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

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

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

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

package/src/components/dataDisplay/index.ts

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

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