@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/RichTextEditor/rich-text-editor.tsx

@@ -0,0 +1,202 @@
+import { memo, useCallback, useEffect, useMemo } from 'react';
+
+import BulletList from '@tiptap/extension-bullet-list';
+import Document from '@tiptap/extension-document';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import Text from '@tiptap/extension-text';
+import TextAlign from '@tiptap/extension-text-align';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+import { AlignCenter, AlignLeft, Bold01, Box, Dotpoints01, Flex, Italic01, Label, Separator, Underline01 } from '@/components';
+import { useEditorActiveMarks } from '@/hooks';
+import { cn } from '@/utils';
+
+interface RichTextEditorProps {
+  editorContent: string;
+  onChange?: (content: string) => void;
+  label?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+}
+
+const RichTextEditorComponent = ({ editorContent = '', onChange, label = '', placeholder = 'Digite aqui', isDisabled = false, isRequired = false }: RichTextEditorProps) => {
+  const extensions = useMemo(() => [
+    StarterKit.configure({
+      paragraph: false,
+      document: false,
+      text: false,
+      bulletList: false,
+      orderedList: false,
+    }),
+    Document,
+    Paragraph,
+    Text,
+    Placeholder.configure({
+      placeholder,
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: false,
+    }),
+    TextAlign.configure({
+      types: [ 'heading', 'paragraph' ],
+      alignments: [ 'left', 'center' ],
+      defaultAlignment: 'left',
+    }),
+    BulletList.configure({ HTMLAttributes: { class: 'list-disc' } }),
+    OrderedList.configure({ HTMLAttributes: { class: 'list-decimal' } }),
+  ], [ placeholder ]);
+
+  const editorProps = useMemo(() => ({
+    attributes: {
+      class:
+        cn(
+          'resize-y overflow-y-hidden w-full border-gray-300 focus-visible-primary min-h-16 w-full rounded-2xl border p-4 text-base transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
+
+          '[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5',
+
+          '[&_p.is-editor-empty:first-child:before]:text-gray-500',
+          '[&_p.is-editor-empty:first-child:before]:text-base',
+          '[&_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)]',
+          '[&_p.is-editor-empty:first-child:before]:float-left',
+          '[&_p.is-editor-empty:first-child:before]:pointer-events-none',
+          '[&_p.is-editor-empty:first-child:before]:h-0',
+
+          isDisabled && 'pointer-events-none cursor-not-allowed opacity-50'
+        ),
+    },
+  }), [ isDisabled ]);
+
+  const handleUpdate = useCallback(({ editor }: { editor: import('@tiptap/react').Editor }) => {
+    onChange?.(editor.getHTML());
+  }, [ onChange ]);
+
+  const editor = useEditor({
+    extensions,
+    immediatelyRender: false,
+    editorProps,
+    content: editorContent,
+    onUpdate: handleUpdate,
+    editable: !isDisabled,
+  });
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const newContent = editorContent ?? '';
+    const currentContent = editor.getHTML();
+
+    if (currentContent !== newContent) {
+      editor.commands.setContent(newContent, { emitUpdate: false });
+    }
+  }, [ editorContent, editor ]);
+
+  const { bold, italic, underline, bulletList, align } = useEditorActiveMarks(editor);
+
+  const handleBold = useCallback(() => {
+    editor?.chain().focus().toggleBold().run();
+  }, [ editor ]);
+
+  const handleItalic = useCallback(() => {
+    editor?.chain().focus().toggleItalic().run();
+  }, [ editor ]);
+
+  const handleUnderline = useCallback(() => {
+    editor?.chain().focus().toggleUnderline().run();
+  }, [ editor ]);
+
+  const handleAlignLeft = useCallback(() => {
+    editor?.chain().focus().setTextAlign('left').run();
+  }, [ editor ]);
+
+  const handleAlignCenter = useCallback(() => {
+    editor?.chain().focus().setTextAlign('center').run();
+  }, [ editor ]);
+
+  const handleBulletList = useCallback(() => {
+    editor?.chain().focus().toggleBulletList().run();
+  }, [ editor ]);
+
+  const buttonDefaultClasses = 'p-1.5 cursor-pointer rounded hover:bg-gray-100 transition-colors disabled:pointer-events-none disabled:opacity-50';
+
+  if (!editor) return null;
+
+  return (
+    <Box className='gap-2'>
+      <Flex className='justify-between items-center w-full'>
+        <Label required={isRequired}>{label}</Label>
+
+        <Flex className="items-center">
+          <button
+            type="button"
+            onClick={handleBold}
+            title="Bold (Ctrl+B)"
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <Bold01 className={cn('size-5', bold ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+
+          <button
+            type="button"
+            onClick={handleItalic}
+            title="Italic (Ctrl+I)"
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <Italic01 className={cn('size-5', italic ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+
+          <button
+            type="button"
+            onClick={handleUnderline}
+            title="Underline (Ctrl+U)"
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <Underline01 className={cn('size-5', underline ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+
+          <Separator orientation='vertical' className='h-5! w-[1px]! mx-1.5' />
+
+          <button
+            type="button"
+            title="Align Left"
+            onClick={handleAlignLeft}
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <AlignLeft className={cn('size-5', align === 'left' ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+
+          <button
+            type="button"
+            title="Align Center"
+            onClick={handleAlignCenter}
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <AlignCenter className={cn('size-5', align === 'center' ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+
+          <button
+            type="button"
+            onClick={handleBulletList}
+            title="Bullet List"
+            className={buttonDefaultClasses}
+            disabled={isDisabled}
+          >
+            <Dotpoints01 className={cn('size-5', bulletList ? 'text-gray-700' : 'text-gray-400')} />
+          </button>
+        </Flex>
+      </Flex>
+
+      <EditorContent editor={editor} data-testid='rich-text-editor'/>
+    </Box>
+  );
+};
+
+export const RichTextEditor = memo(RichTextEditorComponent);
+

package/src/components/atoms/Separator/index.ts

@@ -0,0 +1 @@
+export { Separator } from './separator';

package/src/components/atoms/Separator/separator.stories.tsx

@@ -0,0 +1,117 @@
+import { Separator } from './separator';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Layout/Separator',
+  component: Separator,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Separator component based on `@radix-ui/react-separator`. Can be used to divide sections horizontally or vertically with accessibility and semantics.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'inline-radio',
+      options: [ 'horizontal', 'vertical' ],
+      description: 'Defines the orientation of the separator.',
+      table: {
+        category: 'Behavior',
+        type: { summary: '\'horizontal\' | \'vertical\'' },
+        defaultValue: { summary: 'horizontal' },
+      },
+    },
+    decorative: {
+      control: 'boolean',
+      description:
+        'Indicates if the separator is purely decorative. For accessibility purposes, keep `true` when the separator is purely visual.',
+      table: {
+        category: 'Accessibility',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional Tailwind classes for customization.',
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+    decorative: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default horizontal separator, typically used between sections.',
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: args => (
+    <div className="flex flex-col space-y-4 w-64">
+      <div>Primeira seção</div>
+      <Separator {...args} />
+      <div>Segunda seção</div>
+    </div>
+  ),
+  args: {
+    orientation: 'horizontal',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of separator being used to divide content in a card or section.',
+      },
+    },
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+    decorative: true,
+    className: 'h-32',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical separator, useful in side-by-side layouts.',
+      },
+    },
+  },
+};
+
+export const WithCustomStyle: Story = {
+  args: {
+    orientation: 'horizontal',
+    className: 'bg-red-500 my-4',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Separator with custom styles using Tailwind classes.',
+      },
+    },
+  },
+};

package/src/components/atoms/Separator/separator.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Separator } from './separator';
+
+describe('<Separator />', () => {
+  it('should render a horizontal separator by default', () => {
+    render(<Separator />);
+    const separator = screen.getByTestId('separator');
+
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveAttribute('data-slot', 'separator-root');
+    expect(separator).toHaveAttribute('data-orientation', 'horizontal');
+    expect(separator.className).toMatch(/h-px/);
+    expect(separator.className).toMatch(/w-full/);
+  });
+
+  it('should render a vertical separator when orientation is vertical', () => {
+    render(<Separator orientation="vertical" />);
+    const separator = screen.getByTestId('separator');
+
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveAttribute('data-orientation', 'vertical');
+    expect(separator.className).toMatch(/w-px/);
+    expect(separator.className).toMatch(/h-full/);
+  });
+
+  it('should apply custom class names', () => {
+    render(<Separator className="bg-red-500" orientation="vertical" />);
+    const separator = screen.getByTestId('separator');
+    expect(separator).toHaveClass('bg-red-500');
+  });
+
+  it('should set decorative=true by default for accessibility', () => {
+    render(<Separator aria-hidden />);
+    const separator = screen.getByTestId('separator');
+    expect(separator).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('should allow overriding decorative to false for semantic use', () => {
+    render(<Separator decorative={false} />);
+    const separator = screen.getByTestId('separator');
+    expect(separator).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Separator orientation="horizontal" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Separator/separator.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/utils';
+
+function Separator ({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      data-testid="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-gray-200 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/atoms/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './skeleton';

package/src/components/atoms/Skeleton/skeleton.stories.tsx

@@ -0,0 +1,84 @@
+import { Skeleton } from './skeleton';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Feedback/Skeleton',
+  component: Skeleton,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Skeleton component used as a visual placeholder during content loading. Uses pulse animation (`animate-pulse`) and highlight background (`bg-accent`).',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Tailwind classes to control size, shape, and color.',
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+    children: {
+      control: false,
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Circle: Story = {
+  args: {
+    className: 'w-12 h-12 rounded-full',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Skeleton in circular shape. Common for avatars or profile indicators.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    className: 'w-40 h-12',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Basic skeleton with a width of 160px and a height of 48px. Ideal for titles or text lines.',
+      },
+    },
+  },
+};
+
+export const Paragraph: Story = {
+  render: args => (
+    <div className="space-y-2">
+      <Skeleton className="w-full h-4" {...args} />
+      <Skeleton className="w-5/6 h-4" {...args} />
+      <Skeleton className="w-4/6 h-4" {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of multiple skeletons simulating a text paragraph.',
+      },
+    },
+  },
+};

package/src/components/atoms/Skeleton/skeleton.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Skeleton } from './skeleton';
+
+describe('<Skeleton />', () => {
+  it('should render a div with default classes', () => {
+    render(<Skeleton />);
+    const skeleton = screen.getByTestId('skeleton');
+
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton.tagName.toLowerCase()).toBe('div');
+    expect(skeleton).toHaveAttribute('data-slot', 'skeleton');
+    expect(skeleton.className).toMatch(/bg-accent/);
+    expect(skeleton.className).toMatch(/animate-pulse/);
+    expect(skeleton.className).toMatch(/rounded-md/);
+  });
+
+  it('should accept and merge custom class names', () => {
+    render(<Skeleton className="w-20 h-6 border" />);
+    const skeleton = screen.getByTestId('skeleton');
+
+    expect(skeleton).toHaveClass('w-20');
+    expect(skeleton).toHaveClass('h-6');
+    expect(skeleton).toHaveClass('border');
+  });
+
+  it('should render with additional props', () => {
+    render(<Skeleton aria-label="Loading content" />);
+    const skeleton = screen.getByTestId('skeleton');
+
+    expect(skeleton).toHaveAttribute('aria-label', 'Loading content');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Skeleton className="h-4 w-full" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Skeleton/skeleton.tsx

@@ -0,0 +1,14 @@
+import { cn } from '@/utils';
+
+function Skeleton ({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      data-testid="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/atoms/Slider/index.ts

@@ -0,0 +1 @@
+export * from './slider';

package/src/components/atoms/Slider/slider.stories.tsx

@@ -0,0 +1,28 @@
+import { Slider } from './slider';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Data Entry/Slider',
+  component: Slider,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Slider component based on `@radix-ui/react-slider`. Used to select a value on a scale.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/atoms/Slider/slider.test.tsx

@@ -0,0 +1,90 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Slider } from './slider';
+
+describe('<Slider />', () => {
+  it('should render the slider with the provided defaultValue', () => {
+    const defaultValue = [ faker.number.int({ min: 10, max: 30 }), faker.number.int({ min: 70, max: 90 }) ];
+    render(<Slider defaultValue={defaultValue} />);
+    const slider = screen.getByTestId('slider');
+    expect(slider).toBeInTheDocument();
+    expect(screen.getAllByRole('slider')).toHaveLength(1);
+    expect(screen.getAllByRole('slider')[0]).toHaveAttribute('aria-valuenow', defaultValue[0].toString());
+  });
+
+  it('should render the slider with the provided value (controlled component)', () => {
+    const value = [ faker.number.int({ min: 5, max: 20 }), faker.number.int({ min: 80, max: 95 }) ];
+    render(<Slider value={value} />);
+    const slider = screen.getByTestId('slider');
+    expect(slider).toBeInTheDocument();
+    expect(screen.getAllByRole('slider')).toHaveLength(1);
+    expect(screen.getAllByRole('slider')[0]).toHaveAttribute('aria-valuenow', value[0].toString());
+  });
+
+  it('should render the slider with a single thumb when value/defaultValue is a single number', () => {
+    const singleValue = faker.number.int({ min: 0, max: 100 });
+    render(<Slider value={[ singleValue ]} />);
+    const slider = screen.getByTestId('slider');
+    expect(slider).toBeInTheDocument();
+    expect(screen.getAllByRole('slider')).toHaveLength(1);
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', singleValue.toString());
+  });
+
+  it('should apply custom class name to the slider root', () => {
+    const customClassName = faker.lorem.word();
+    render(<Slider className={customClassName} />);
+    const slider = screen.getByTestId('slider');
+    expect(slider).toBeInTheDocument();
+    expect(slider).toHaveClass(customClassName);
+  });
+
+  it('should be accessible and have appropriate ARIA attributes for thumbs', () => {
+    const value = [ faker.number.int({ min: 10, max: 30 }), faker.number.int({ min: 70, max: 90 }) ];
+    render(<Slider value={value} />);
+    const thumbs = screen.getAllByRole('slider');
+    expect(thumbs).toHaveLength(1);
+    thumbs.forEach((thumb, index) => {
+      expect(thumb).toBeInTheDocument();
+      expect(thumb).toHaveAttribute('aria-valuenow', value[index].toString());
+      expect(thumb).toHaveAttribute('aria-valuemin', '0');
+      expect(thumb).toHaveAttribute('aria-valuemax', '100');
+    });
+  });
+
+  it('should call onValueChange when the slider value changes', async () => {
+    const user = userEvent.setup();
+    const mockOnValueChange = vi.fn();
+    const initialValue = [ 25 ];
+    render(<Slider value={initialValue} onValueChange={mockOnValueChange} />);
+
+    const thumb = screen.getByRole('slider');
+    expect(thumb).toHaveAttribute('aria-valuenow', '25');
+
+    await user.click(thumb);
+    await user.keyboard('{ArrowRight}');
+
+    expect(mockOnValueChange).toHaveBeenCalledTimes(1);
+    expect(mockOnValueChange).toHaveBeenCalledWith(expect.arrayContaining([ expect.any(Number) ]));
+    expect(mockOnValueChange).toHaveBeenCalledWith(expect.arrayContaining([ 26 ]));
+  });
+
+  it('matches snapshot', () => {
+    const { container: defaultSlider } = render(<Slider />);
+    expect(defaultSlider).toMatchSnapshot('default-slider');
+
+    const { container: customValueSlider } = render(<Slider value={[ 20, 80 ]} />);
+    expect(customValueSlider).toMatchSnapshot('custom-value-slider');
+
+    const { container: singleThumbSlider } = render(<Slider value={[ 50 ]} />);
+    expect(singleThumbSlider).toMatchSnapshot('single-thumb-slider');
+
+    const { container: disabledSlider } = render(<Slider disabled value={[ 30, 60 ]} />);
+    expect(disabledSlider).toMatchSnapshot('disabled-slider');
+
+    const { container: verticalSlider } = render(<Slider orientation="vertical" value={[ 40 ]} />);
+    expect(verticalSlider).toMatchSnapshot('vertical-slider');
+  });
+});