@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/atoms/Collapsible/Collapsible.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type KeyboardEvent } from 'react';
 import { useCollapsible, type UseCollapsibleOptions } from '../../hooks/useCollapsible';
+import { getColorClass, getFocusColorClass, getFocusRingClass } from '../../tokens/colors';
+import { getRadiusClass } from '../../tokens/radius';
+import { cn } from '../../utils';
 
 export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   children: ReactNode;
@@ -90,11 +93,27 @@ export default function Collapsible({
       <button
         type="button"
         onClick={toggle}
+        onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!disabled) {
+              toggle();
+            }
+          }
+        }}
         disabled={disabled}
         aria-expanded={isOpen}
         aria-controls={contentId}
         aria-disabled={disabled}
-        className="w-full text-left focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-md"
+        className={cn(
+          'w-full',
+          'text-left',
+          'focus:outline-none',
+          'focus:ring-2',
+          getFocusRingClass('primary', 'DEFAULT'),
+          'focus:ring-offset-2',
+          getRadiusClass('md')
+        )}
       >
         {trigger}
       </button>

package/src/ui/atoms/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,14 +1,33 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from '@storybook/test';
 import ErrorMessage from "./ErrorMessage";
 import { Input, Label } from "../../atoms";
 
 const meta: Meta<typeof ErrorMessage> = {
-  title: "UI/Atoms/ErrorMessage",
+  title: "Atoms/ErrorMessage",
   component: ErrorMessage,
+  tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: "A component for displaying validation error messages. Accessible with role='alert'.",
+        component: `
+## ErrorMessage
+
+A component for displaying validation error messages. Accessible with role='alert' and aria-live='polite'.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| N/A | ErrorMessage é um componente de exibição | - | Não possui eventos de interação |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`visible\` | Mensagem visível | Quando há mensagem de erro | Mensagem de erro exibida |
+| \`hidden\` | Mensagem oculta | Quando não há mensagem | Mensagem não exibida |
+        `,
       },
     },
   },
@@ -78,4 +97,42 @@ export const MultipleErrors: StoryObj<typeof ErrorMessage> = {
   ),
 };
 
+// State Stories
+export const VisibleState: StoryObj<typeof ErrorMessage> = {
+  args: {
+    message: "This field is required",
+    id: "error-message",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Visible state - error message is displayed when there is an error.',
+      },
+    },
+  },
+};
+
+export const HiddenState: StoryObj<typeof ErrorMessage> = {
+  args: {
+    message: "",
+    id: "error-message",
+  },
+  render: (args) => (
+    <div className="space-y-2 max-w-md">
+      <Label htmlFor="input" variant="required">
+        Input Field
+      </Label>
+      <Input id="input" />
+      {args.message && <ErrorMessage {...args} />}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hidden state - error message is not displayed when there is no error.',
+      },
+    },
+  },
+};
+
 export default meta;

package/src/ui/atoms/ErrorMessage/ErrorMessage.tsx

@@ -1,4 +1,9 @@
 import type { HTMLAttributes } from "react";
+import { AlertCircle } from "lucide-react";
+import { getTypographySize } from '../../tokens/typography';
+import { getColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { cn } from '../../utils';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   message: string;
@@ -23,18 +28,15 @@ export default function ErrorMessage({
   ...props
 }: Props) {
   const baseClasses = [
-    "mt-1",
-    "text-sm",
-    "text-red-600",
+    getSpacingClass('xs', 'mt'),
+    getTypographySize('bodySmall'),
+    getColorClass('error', 'DEFAULT', 'text'),
     "flex",
     "items-center",
-    "gap-1",
+    getSpacingClass('xs', 'gap'),
   ];
 
-  const classes = [
-    ...baseClasses,
-    className,
-  ].filter(Boolean).join(" ");
+  const classes = cn(...baseClasses, className);
 
   return (
     <div
@@ -44,18 +46,7 @@ export default function ErrorMessage({
       aria-live="polite"
       {...props}
     >
-      <svg
-        className="h-4 w-4 flex-shrink-0"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        aria-hidden="true"
-      >
-        <path
-          fillRule="evenodd"
-          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-          clipRule="evenodd"
-        />
-      </svg>
+      <AlertCircle className="h-4 w-4 shrink-0" aria-hidden="true" />
       <span>{message}</span>
     </div>
   );

package/src/ui/atoms/Info/Info.stories.tsx

@@ -1,15 +1,158 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from '@storybook/test';
 import Info from "./Info";
 
 const meta: Meta<typeof Info> = {
-  title: "UI/Atoms/Info",
+  title: "Atoms/Info",
   component: Info,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## Info
+
+An alert component for displaying informational messages, warnings, or errors. Uses role='alert' for accessibility.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| N/A | Info é um componente de exibição | - | Não possui eventos de interação |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`info\` | Variante informativa | \`variant="info"\` | Mensagem com estilo informativo |
+| \`warning\` | Variante aviso | \`variant="warning"\` | Mensagem com estilo de aviso |
+| \`error\` | Variante erro | \`variant="error"\` | Mensagem com estilo de erro |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["info", "warning", "error"],
+      description: "Visual variant of the info message",
+    },
+    children: {
+      control: "text",
+      description: "Message content (ReactNode)",
+    },
+  },
 };
 
-export const Primary: StoryObj<typeof Info> = {
+export default meta;
+type Story = StoryObj<typeof Info>;
+
+export const Default: Story = {
   args: {
-    children: "Hello from Storybook",
+    variant: "info",
+    children: "This is an informational message.",
   },
 };
 
-export default meta;
+export const InfoVariant: Story = {
+  args: {
+    variant: "info",
+    children: "This is an informational message. Use this variant for general information.",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "This is a warning message. Use this variant to alert users about potential issues.",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    children: "This is an error message. Use this variant to display critical errors or validation failures.",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <Info variant="info">
+        Your changes have been saved successfully.
+      </Info>
+      <Info variant="warning">
+        Please review your changes before submitting.
+      </Info>
+      <Info variant="error">
+        There was an error processing your request.
+      </Info>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <Info variant="info">
+        <strong>Tip:</strong> You can use keyboard shortcuts to navigate faster.
+      </Info>
+      <Info variant="warning">
+        <strong>Warning:</strong> This action cannot be undone.
+      </Info>
+      <Info variant="error">
+        <strong>Error:</strong> Unable to connect to the server. Please check your internet connection.
+      </Info>
+    </div>
+  ),
+};
+
+export const LongContent: Story = {
+  args: {
+    variant: "info",
+    children: "This is a longer informational message that demonstrates how the Info component handles extended content. It should wrap properly and maintain good readability.",
+  },
+};
+
+// State Stories
+export const InfoState: Story = {
+  args: {
+    variant: "info",
+    children: "This is an informational message.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info state - informational message with info variant styling.',
+      },
+    },
+  },
+};
+
+export const WarningState: Story = {
+  args: {
+    variant: "warning",
+    children: "This is a warning message.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Warning state - warning message with warning variant styling.',
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    variant: "error",
+    children: "This is an error message.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Error state - error message with error variant styling.',
+      },
+    },
+  },
+};

package/src/ui/atoms/Info/Info.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Info from './Info';
+
+describe('Info', () => {
+  it('renders info message', () => {
+    render(<Info>This is an info message</Info>);
+    expect(screen.getByText('This is an info message')).toBeInTheDocument();
+  });
+
+  it('has role="alert"', () => {
+    render(<Info>Info message</Info>);
+    const info = screen.getByRole('alert');
+    expect(info).toBeInTheDocument();
+  });
+
+  it('applies info variant classes by default', () => {
+    const { container } = render(<Info>Info message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-blue-300', 'text-blue-600', 'border-blue-500');
+  });
+
+  it('applies warning variant classes', () => {
+    const { container } = render(<Info variant="warning">Warning message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-yellow-300', 'text-yellow-600', 'border-yellow-500');
+  });
+
+  it('applies error variant classes', () => {
+    const { container } = render(<Info variant="error">Error message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-red-300', 'text-red-600', 'border-red-500');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Info className="custom-class">Info</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('custom-class');
+  });
+
+  it('passes through HTML attributes', () => {
+    render(<Info data-testid="info">Info message</Info>);
+    expect(screen.getByTestId('info')).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Info/Info.tsx

@@ -1,34 +1,43 @@
 import type { HTMLAttributes } from "react";
+import { getColorClass } from '../../tokens/colors';
+import { getRadiusClass } from '../../tokens/radius';
+import { getSpacingClass } from '../../tokens/spacing';
+import { cn } from '../../utils';
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
   variant?: "info" | "warning" | "error";
 }
 
-export default function Info({ variant = "info", className, ...props }: Props) {
-  const cls: string[] = [className || ""];
-
-  switch (variant) {
-    case "warning": {
-      cls.push("bg-yellow-100 text-yellow-800 border-yellow-500");
-      break;
-    }
-
-    case "error": {
-      cls.push("bg-red-100 text-red-800 border-red-500");
-      break;
-    }
-
-    default:
-    case "info": {
-      cls.push("bg-blue-100 text-blue-800 border-blue-500");
-      break;
-    }
-  }
+export default function Info({ variant = "info", className, ...props }: InfoProps) {
+  const variantClasses = {
+    warning: cn(
+      getColorClass('warning', 'light', 'bg'),
+      getColorClass('warning', 'dark', 'text'),
+      getColorClass('warning', 'DEFAULT', 'border')
+    ),
+    error: cn(
+      getColorClass('error', 'light', 'bg'),
+      getColorClass('error', 'dark', 'text'),
+      getColorClass('error', 'DEFAULT', 'border')
+    ),
+    info: cn(
+      getColorClass('info', 'light', 'bg'),
+      getColorClass('info', 'dark', 'text'),
+      getColorClass('info', 'DEFAULT', 'border')
+    ),
+  };
 
   return (
     <div
       role="alert"
-      className={`border px-4 py-2 rounded-lg ${cls.join(" ")}`}
+      className={cn(
+        'border',
+        getSpacingClass('base', 'px'),
+        getSpacingClass('sm', 'py'),
+        getRadiusClass('lg'),
+        variantClasses[variant],
+        className
+      )}
       {...props}
     />
   );