@brcarddev/frontend-commons 1.0.2

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

@@ -0,0 +1,214 @@
+import { useState } from 'react';
+
+import { RichTextEditor } from './rich-text-editor';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof RichTextEditor> = {
+  title: 'Components/Data Entry/RichTextEditor',
+  component: RichTextEditor,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Editor de texto rico construído com TipTap, oferecendo opções de formatação como negrito, itálico, sublinhado, alinhamento e listas. Interface limpa para criação de conteúdo com suporte a HTML.',
+      },
+    },
+  },
+  argTypes: {
+    editorContent: {
+      control: { type: 'text' },
+      description: 'Conteúdo HTML inicial para o editor',
+    },
+    onChange: {
+      description: 'Função callback chamada quando o conteúdo é alterado',
+      action: 'content changed',
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Rótulo do campo',
+    },
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Texto de placeholder quando vazio',
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+      description: 'Define se o editor está desabilitado',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const InteractiveExample = () => {
+  const [ content, setContent ] = useState('<p>Digite aqui para testar o editor...</p>');
+
+  return (
+    <div className="w-[600px] space-y-4">
+      <RichTextEditor
+        label="Editor Interativo"
+        editorContent={content}
+        onChange={setContent}
+        placeholder="Comece a digitar aqui..."
+      />
+
+      <div className="mt-4">
+        <h4 className="text-sm font-medium text-gray-700 mb-2">HTML Gerado:</h4>
+        <div className="p-3 bg-gray-100 rounded border text-sm font-mono max-h-32 overflow-y-auto">
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  name: '1. Padrão',
+  args: {
+    editorContent: '<p>Conteúdo inicial do editor</p>',
+    label: 'Editor de Texto',
+    placeholder: 'Digite aqui...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Estado padrão do editor com conteúdo inicial.',
+      },
+    },
+  },
+};
+export const Disabled: Story = {
+  name: '2. Desabilitado',
+  args: {
+    editorContent: '<p>Este editor está <strong>desabilitado</strong> e não pode ser editado.</p>',
+    label: 'Editor Desabilitado',
+    isDisabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Editor no estado desabilitado - não permite edição.',
+      },
+    },
+  },
+};
+export const Empty: Story = {
+  name: '3. Vazio',
+  args: {
+    editorContent: '',
+    label: 'Editor Vazio',
+    placeholder: 'Comece a digitar...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Editor vazio mostrando o placeholder.',
+      },
+    },
+  },
+};
+export const FormattingExamples: Story = {
+  name: '4. Exemplo de Formatação',
+  args: {
+    editorContent: `
+      <p>Este texto demonstra as <strong>formatações disponíveis</strong>:</p>
+      <p><strong>Texto em negrito</strong></p>
+      <p><em>Texto em itálico</em></p>
+      <p><u>Texto sublinhado</u></p>
+      <p style="text-align: center">Texto centralizado</p>
+      <p style="text-align: left">Texto alinhado à esquerda</p>
+    `,
+    label: 'Formatações de Texto',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstra as opções de formatação de texto disponíveis.',
+      },
+    },
+  },
+};
+export const Interactive: Story = {
+  name: '5. Exemplo Interativo',
+  render: () => <InteractiveExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Editor interativo que mostra o HTML gerado em tempo real.',
+      },
+    },
+  },
+};
+export const ListExamples: Story = {
+  name: '6. Exemplo de Listas',
+  args: {
+    editorContent: `
+      <p>Exemplos de listas:</p>
+      <ul>
+        <li>Item de lista não ordenada 1</li>
+        <li>Item de lista não ordenada 2</li>
+        <li>Item de lista não ordenada 3</li>
+      </ul>
+      <p>Lista ordenada:</p>
+      <ol>
+        <li>Primeiro item</li>
+        <li>Segundo item</li>
+        <li>Terceiro item</li>
+      </ol>
+    `,
+    label: 'Listas',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstra os tipos de listas suportados pelo editor.',
+      },
+    },
+  },
+};
+export const LongContent: Story = {
+  name: '7. Conteúdo Longo',
+  args: {
+    editorContent: `
+      <p>Este é um exemplo de conteúdo mais longo para testar a performance e usabilidade do editor.</p>
+      <p><strong>Primeiro parágrafo:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <ul>
+        <li>Item importante 1</li>
+        <li>Item importante 2</li>
+        <li>Item importante 3</li>
+      </ul>
+      <p><em>Segundo parágrafo:</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <ol>
+        <li>Passo 1 do processo</li>
+        <li>Passo 2 do processo</li>
+        <li>Passo 3 do processo</li>
+      </ol>
+      <p>Parágrafo final demonstrando que o editor mantém boa performance mesmo com conteúdo substancial.</p>
+    `,
+    label: 'Conteúdo Extenso',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Teste de performance com conteúdo mais longo.',
+      },
+    },
+  },
+};
+export const WithoutLabel: Story = {
+  name: '8. Sem Rótulo',
+  args: {
+    editorContent: '<p>Editor sem rótulo</p>',
+    placeholder: 'Digite aqui...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Editor funcionando sem rótulo.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,442 @@
+import React from 'react';
+
+import { composeStories } from '@storybook/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { RichTextEditor } from './rich-text-editor';
+import * as RichTextEditorStories from './rich-text-editor.stories';
+
+const {
+  Default,
+  Disabled,
+  Empty,
+  FormattingExamples,
+  Interactive,
+  ListExamples,
+  LongContent,
+  WithoutLabel,
+} = composeStories(RichTextEditorStories);
+
+vi.mock('@/hooks', () => ({
+  useEditorActiveMarks: vi.fn(() => ({
+    bold: false,
+    italic: false,
+    underline: false,
+    bulletList: false,
+    align: 'left',
+  })),
+}));
+
+vi.mock('@/components', () => ({
+  AlignCenter: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="align-center" {...props} />,
+  AlignLeft: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="align-left" {...props} />,
+  Bold01: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="bold-icon" {...props} />,
+  Box: ({ children, className, ...props }: React.ComponentProps<'div'>) => <div className={className} {...props}>{children}</div>,
+  Dotpoints01: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="bullet-list-icon" {...props} />,
+  Flex: ({ children, className, ...props }: React.ComponentProps<'div'>) => <div className={className} {...props}>{children}</div>,
+  Italic01: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="italic-icon" {...props} />,
+  Label: ({ children, required, ...props }: React.ComponentProps<'label'> & { required?: boolean }) => (
+    <label {...props}>
+      {children}
+      {required && <span data-testid="required-asterisk">*</span>}
+    </label>
+  ),
+  Separator: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="separator" {...props} />,
+  Underline01: ({ className, ...props }: React.ComponentProps<'div'>) => <div className={className} data-testid="underline-icon" {...props} />,
+}));
+
+describe('<RichTextEditor />', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render with default props', async () => {
+      render(<RichTextEditor editorContent="<p>Test content</p>" />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+
+    it('should render label when provided', async () => {
+      render(
+        <RichTextEditor
+          editorContent="<p>Test</p>"
+          label="Rich Text Editor"
+        />
+      );
+
+      expect(screen.getByText('Rich Text Editor')).toBeInTheDocument();
+    });
+
+    it('should render required asterisk when isRequired is true', () => {
+      render(
+        <RichTextEditor
+          editorContent="<p>Test</p>"
+          label="Required Editor"
+          isRequired={true}
+        />
+      );
+
+      expect(screen.getByTestId('required-asterisk')).toBeInTheDocument();
+    });
+
+    it('should not render required asterisk when isRequired is false', () => {
+      render(
+        <RichTextEditor
+          editorContent="<p>Test</p>"
+          label="Optional Editor"
+          isRequired={false}
+        />
+      );
+
+      expect(screen.queryByTestId('required-asterisk')).not.toBeInTheDocument();
+    });
+
+    it('should render all formatting buttons', () => {
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      expect(screen.getByTestId('bold-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('italic-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('underline-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('align-left')).toBeInTheDocument();
+      expect(screen.getByTestId('align-center')).toBeInTheDocument();
+      expect(screen.getByTestId('bullet-list-icon')).toBeInTheDocument();
+    });
+
+    it('should render separator between text formatting and alignment buttons', () => {
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      expect(screen.getByTestId('separator')).toBeInTheDocument();
+    });
+  });
+
+  describe('Props Behavior', () => {
+    it('should handle editorContent prop correctly', async () => {
+      const content = '<p><strong>Bold text</strong> and normal text</p>';
+      render(<RichTextEditor editorContent={content} />);
+
+      await waitFor(() => {
+        const editor = screen.getByTestId('rich-text-editor');
+        expect(editor).toBeInTheDocument();
+      });
+    });
+
+    it('should apply placeholder when provided', () => {
+      render(
+        <RichTextEditor
+          editorContent=""
+          placeholder="Digite seu texto aqui..."
+        />
+      );
+
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should be disabled when isDisabled is true', () => {
+      render(
+        <RichTextEditor
+          editorContent="<p>Test</p>"
+          isDisabled={true}
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toBeDisabled();
+      });
+    });
+
+    it('should be enabled when isDisabled is false', () => {
+      render(
+        <RichTextEditor
+          editorContent="<p>Test</p>"
+          isDisabled={false}
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('Formatting Buttons', () => {
+    it('should have correct titles for accessibility', () => {
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      expect(screen.getByTitle('Bold (Ctrl+B)')).toBeInTheDocument();
+      expect(screen.getByTitle('Italic (Ctrl+I)')).toBeInTheDocument();
+      expect(screen.getByTitle('Underline (Ctrl+U)')).toBeInTheDocument();
+      expect(screen.getByTitle('Align Left')).toBeInTheDocument();
+      expect(screen.getByTitle('Align Center')).toBeInTheDocument();
+      expect(screen.getByTitle('Bullet List')).toBeInTheDocument();
+    });
+
+    it('should handle bold button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const boldButton = screen.getByTitle('Bold (Ctrl+B)');
+      await user.click(boldButton);
+
+      expect(boldButton).toBeInTheDocument();
+    });
+
+    it('should handle italic button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const italicButton = screen.getByTitle('Italic (Ctrl+I)');
+      await user.click(italicButton);
+
+      expect(italicButton).toBeInTheDocument();
+    });
+
+    it('should handle underline button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const underlineButton = screen.getByTitle('Underline (Ctrl+U)');
+      await user.click(underlineButton);
+
+      expect(underlineButton).toBeInTheDocument();
+    });
+
+    it('should handle align left button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const alignLeftButton = screen.getByTitle('Align Left');
+      await user.click(alignLeftButton);
+
+      expect(alignLeftButton).toBeInTheDocument();
+    });
+
+    it('should handle align center button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const alignCenterButton = screen.getByTitle('Align Center');
+      await user.click(alignCenterButton);
+
+      expect(alignCenterButton).toBeInTheDocument();
+    });
+
+    it('should handle bullet list button click', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const bulletListButton = screen.getByTitle('Bullet List');
+      await user.click(bulletListButton);
+
+      expect(bulletListButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty content', async () => {
+      render(<RichTextEditor editorContent="" />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle very long content', async () => {
+      const longContent = `<p>${'Very long text content. '.repeat(100)}</p>`;
+      render(<RichTextEditor editorContent={longContent} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle HTML with formatting', async () => {
+      const formattedContent = `
+        <p><strong>Bold text</strong></p>
+        <p><em>Italic text</em></p>
+        <ul>
+          <li>List item 1</li>
+          <li>List item 2</li>
+        </ul>
+      `;
+      render(<RichTextEditor editorContent={formattedContent} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle special characters in content', async () => {
+      const specialContent = '<p>Texto com acentos: ação, coração, não</p>';
+      render(<RichTextEditor editorContent={specialContent} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper button types', () => {
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute('type', 'button');
+      });
+    });
+
+    it('should maintain focus management', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      await waitFor(() => {
+        const editor = screen.getByTestId('rich-text-editor');
+        expect(editor).toBeInTheDocument();
+      });
+
+      const editor = screen.getByTestId('rich-text-editor');
+      await user.click(editor);
+
+      expect(editor).toBeInTheDocument();
+    });
+
+    it('should support keyboard navigation between buttons', async () => {
+      const user = userEvent.setup();
+      render(<RichTextEditor editorContent="<p>Test</p>" />);
+
+      const firstButton = screen.getByTitle('Bold (Ctrl+B)');
+      await user.tab();
+
+      expect(firstButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('should work with form integration', async () => {
+      const FormComponent = () => {
+        const [ content, setContent ] = React.useState('<p>Initial</p>');
+        return (
+          <form>
+            <RichTextEditor
+              editorContent={content}
+              onChange={setContent}
+              label="Form Editor"
+            />
+          </form>
+        );
+      };
+
+      render(<FormComponent />);
+
+      expect(screen.getByText('Form Editor')).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Storybook Stories', () => {
+    it('should render Default story correctly', () => {
+      render(<Default />);
+
+      expect(screen.getByText('Editor de Texto')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render Disabled story correctly', () => {
+      render(<Disabled />);
+
+      expect(screen.getByText('Editor Desabilitado')).toBeInTheDocument();
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toBeDisabled();
+      });
+    });
+
+    it('should render Empty story correctly', () => {
+      render(<Empty />);
+
+      expect(screen.getByText('Editor Vazio')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render FormattingExamples story correctly', () => {
+      render(<FormattingExamples />);
+
+      expect(screen.getByText('Formatações de Texto')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render Interactive story correctly', () => {
+      render(<Interactive />);
+
+      expect(screen.getByText('Editor Interativo')).toBeInTheDocument();
+      expect(screen.getByText('HTML Gerado:')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render ListExamples story correctly', () => {
+      render(<ListExamples />);
+
+      expect(screen.getByText('Listas')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render LongContent story correctly', () => {
+      render(<LongContent />);
+
+      expect(screen.getByText('Conteúdo Extenso')).toBeInTheDocument();
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+    });
+
+    it('should render WithoutLabel story correctly', () => {
+      render(<WithoutLabel />);
+
+      expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument();
+      expect(screen.queryByText('Editor de Texto')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Snapshot Tests', () => {
+    it('should match snapshot for default state', () => {
+      const { container } = render(
+        <RichTextEditor editorContent="<p>Test content</p>" label="Test Editor" />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot for disabled state', () => {
+      const { container } = render(
+        <RichTextEditor
+          editorContent="<p>Disabled content</p>"
+          label="Disabled Editor"
+          isDisabled={true}
+        />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot for required state', () => {
+      const { container } = render(
+        <RichTextEditor
+          editorContent="<p>Required content</p>"
+          label="Required Editor"
+          isRequired={true}
+        />
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+});