@brcarddev/frontend-commons 1.0.2

package/README.md

@@ -0,0 +1,241 @@
+# 🧩 mblabs-brcard-frontend-commons
+
+Uma coleção de componentes e utilitários de front-end reutilizáveis, desenvolvidos com tecnologias modernas como React 19, TailwindCSS, Radix UI e muito mais. Criado para ser compartilhado entre projetos dentro do ecossistema MB Labs Brcard.
+
+---
+
+## 📦 Instalação
+
+Utilize o [pnpm](https://pnpm.io/) como gerenciador de pacotes (Node.js 22+):
+
+```bash
+pnpm add mblabs-brcard-frontend-commons
+```
+
+Certifique-se de instalar também as dependências peer:
+
+```bash
+pnpm add react@^19.0.0 react-dom@^19.0.0 react-hook-form@^7.55.0
+```
+
+---
+
+## 🚀 Como usar
+
+Importe os componentes ou utilitários diretamente do pacote:
+
+```tsx
+import { MeuComponente } from 'mblabs-brcard-frontend-commons';
+import 'mblabs-brcard-frontend-commons/css'; // estilos padrões
+```
+
+---
+
+## ✨ Destaques
+
+- ✅ Suporte ao React 19
+- 🎨 TailwindCSS 4 com variantes dinâmicas
+- ⚙️ Componentes acessíveis via Radix UI
+- 🧰 Drag & drop com DnD Kit
+- 📊 Visualizações com Recharts
+- 🧪 Totalmente tipado com TypeScript
+- 📚 Documentação interativa com Storybook
+- ⚡ Build otimizado com Vite
+
+---
+
+## 📂 Estrutura do Projeto
+
+```
+📁 src/
+ ┣ 📦 components/
+ ┣ ┣ 📦 atoms/
+ ┣ ┣ 📦 molecules/
+ ┣ ┣ 📦 organisms/
+ ┣ ┣ 📄 index.ts
+ ┣ 📦 hooks/
+ ┣ 📦 utils/
+ ┗ 📄 index.ts
+```
+
+---
+
+## 🧪 Scripts
+
+| Comando                | Descrição                                         |
+| ---------------------- | ------------------------------------------------- |
+| `pnpm build`           | Compila a lib com TypeScript e Vite               |
+| `pnpm lint`            | Lint no projeto com ESLint                        |
+| `pnpm storybook`       | Inicia o Storybook em ambiente de desenvolvimento |
+| `pnpm build-storybook` | Gera versão estática do Storybook                 |
+
+---
+
+## 📦 Adicionando novos ícones
+
+Para adicionar novos ícones ao projeto, siga este processo passo a passo:
+
+### 1. Copiar nome do ícone do Figma
+- Identifique o nome exato do ícone no design do Figma
+- Exemplo: `check-circle`, `info-circle`, `user-01`
+
+### 2. Buscar ícone no Untitled UI
+- Acesse [https://www.untitledui.com/free-icons](https://www.untitledui.com/free-icons)
+- Use a barra de pesquisa para encontrar o ícone pelo nome
+- Certifique-se de que é o ícone correto visualmente
+
+### 3. Copiar SVG
+- Clique no ícone desejado
+- Copie o código SVG fornecido
+- O SVG deve ter viewBox="0 0 24 24" e ser otimizado
+
+### 4. Criar componente reutilizável
+Crie um novo arquivo em `src/components/icons/` seguindo o padrão:
+
+```tsx
+// src/components/icons/nome-do-icone.tsx
+import { ComponentProps } from 'react';
+
+export function NomeDoIcone(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      {/* Cole o conteúdo SVG aqui */}
+    </svg>
+  );
+}
+```
+
+### 5. Corrigir propriedades CSS
+Converta propriedades kebab-case para camelCase:
+
+```tsx
+// ❌ Incorreto
+stroke-width="2" → strokeWidth="2"
+stroke-linecap="round" → strokeLinecap="round"
+stroke-linejoin="round" → strokeLinejoin="round"
+fill-rule="evenodd" → fillRule="evenodd"
+clip-rule="evenodd" → clipRule="evenodd"
+
+// ✅ Correto
+strokeWidth="2"
+strokeLinecap="round"
+strokeLinejoin="round"
+fillRule="evenodd"
+clipRule="evenodd"
+```
+
+### 6. Adicionar ao index.ts
+Adicione a exportação no arquivo `src/components/icons/index.ts`:
+
+```tsx
+// Adicione no final do arquivo, em ordem alfabética
+export * from './nome-do-icone';
+```
+
+### Exemplo Completo
+
+**Nome do ícone:** `check-circle`
+
+**Arquivo criado:** `src/components/icons/check-circle.tsx`
+
+```tsx
+import { ComponentProps } from 'react';
+
+export function CheckCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg 
+      width="100%" 
+      height="100%" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      {...props}
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+```
+
+**Adicionado ao index.ts:**
+```tsx
+export * from './check-circle';
+```
+
+### Boas Práticas
+
+- ✅ Use `currentColor` para stroke/fill para permitir customização
+- ✅ Mantenha viewBox="0 0 24 24" para consistência
+- ✅ Use width="100%" height="100%" para responsividade
+- ✅ Nomeie o componente em PascalCase
+- ✅ Nomeie o arquivo em kebab-case
+- ✅ Mantenha ordem alfabética no index.ts
+- ✅ Teste o ícone no Storybook após adicionar
+
+### Uso do Ícone
+
+Após adicionar, o ícone estará disponível para uso:
+
+```tsx
+import { CheckCircle } from '@/components/icons';
+
+// Uso básico
+<CheckCircle />
+
+// Com customização
+<CheckCircle className="w-6 h-6 text-blue-500" />
+```
+
+---
+
+## 📚 Storybook
+
+Explore e teste os componentes interativamente:
+
+```bash
+pnpm storybook
+```
+
+Ou gere a versão estática:
+
+```bash
+pnpm build-storybook
+```
+
+---
+
+## 🧩 Tecnologias Utilizadas
+
+- React 19
+- TailwindCSS
+- Radix UI
+- DnD Kit
+- Tanstack react-table
+- Tabler icons-react
+- Date fns
+- Recharts
+- React Hook Form
+- Zod
+- Storybook
+- Vite
+- TypeScript
+- ESLint
+
+---
+
+## 📝 Licença
+
+MIT © BRCard — Feito com ❤️ pelo time MB Labs.

package/eslint.config.js

@@ -0,0 +1,190 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import sortExportsPlugin from 'eslint-plugin-sort-exports';
+import sortImportsPlugin from 'eslint-plugin-import';
+
+export default tseslint.config(
+  { ignores: ['dist', 'storybook-static', 'coverage'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      'sort-exports': sortExportsPlugin,
+      'sort-imports': sortImportsPlugin,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'no-unused-expressions': ['error', { allowTernary: true }],
+      'no-useless-concat': 'error',
+      'no-useless-return': 'error',
+      'block-spacing': 'error',
+      'keyword-spacing': 'error',
+      'no-tabs': 'error',
+      'no-unneeded-ternary': 'error',
+      'no-whitespace-before-property': 'error',
+      'quote-props': ['error', 'consistent'],
+      quotes: ['error', 'single'],
+      semi: ['error', 'always'],
+      'semi-spacing': 'error',
+      'space-before-blocks': 'error',
+      'space-in-parens': 'error',
+      'space-infix-ops': 'error',
+      'space-unary-ops': 'error',
+      'arrow-spacing': 'error',
+      'no-confusing-arrow': 'error',
+      'no-var': 'error',
+      'object-shorthand': 'error',
+      'prefer-template': 'error',
+      'variable-name': 0,
+      'import-name': 0,
+      'no-param-reassign': 'off',
+      'no-trailing-spaces': 'error',
+      'prefer-const': 'warn',
+      'no-duplicate-case': 'warn',
+      'no-await-in-loop': 'warn',
+      'no-continue': 'warn',
+      'prefer-destructuring': 'warn',
+      'object-curly-spacing': ['error', 'always'],
+      'rest-spread-spacing': ['error'],
+      'key-spacing': ['error'],
+      'comma-spacing': ['error'],
+      'no-multi-spaces': 'error',
+      'lines-between-class-members': [
+        'error',
+        {
+          enforce: [
+            { blankLine: 'always', prev: '*', next: 'method' },
+            { blankLine: 'always', prev: 'method', next: '*' },
+            { blankLine: 'always', prev: 'field', next: 'field' },
+          ],
+        },
+        { exceptAfterSingleLine: true },
+      ],
+      'max-len': [
+        'warn',
+        120,
+        2,
+        {
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+        },
+      ],
+      'array-bracket-spacing': ['error', 'always'],
+      indent: [
+        'error',
+        2,
+        {
+          MemberExpression: 1,
+          SwitchCase: 1,
+        },
+      ],
+      'padding-line-between-statements': [
+        'error',
+        {
+          blankLine: 'always',
+          prev: ['if', 'for', 'while', 'block-like', 'block'],
+          next: '*',
+        },
+        {
+          blankLine: 'always',
+          prev: '*',
+          next: ['if', 'for', 'while', 'block-like', 'block'],
+        },
+      ],
+      'no-multiple-empty-lines': [
+        'error',
+        {
+          max: 1,
+          maxEOF: 1,
+          maxBOF: 0,
+        },
+      ],
+      'comma-dangle': [
+        'error',
+        {
+          arrays: 'always-multiline',
+          objects: 'always-multiline',
+          imports: 'always-multiline',
+          exports: 'always-multiline',
+          functions: 'never',
+        },
+      ],
+      'sort-exports/sort-exports': [
+        'warn',
+        { ignoreCase: true, sortExportKindFirst: 'type' },
+      ],      
+      'sort-imports/order': [
+        'warn',
+        {
+          groups: [
+            'builtin',
+            'external', 
+            'internal',
+            'parent',
+            'sibling',
+            'index',
+            'object',
+            'type',
+          ],
+          "pathGroups": [
+            { 
+              pattern: '@/components/**', 
+              group: 'internal',
+              position: 'before'
+            },
+            { 
+              pattern: '@/utils/**', 
+              group: 'internal',
+              position: 'before'
+            },
+            {
+              pattern: '@/constants/**',
+              group: 'internal',
+              position: 'before'
+            },
+            {
+              pattern: '@/hooks/**',
+              group: 'internal',
+              position: 'before'
+            },
+            {
+              "pattern": "react",
+              "group": "external",
+              "position": "before"
+            },
+            {
+              "pattern": "vite",
+              "group": "external",
+              "position": "before"
+            },
+            { 
+              pattern: '**/*.+(css)', 
+              group: 'object', 
+              patternOptions: { matchBase: true }, 
+              position: 'after' 
+            }
+          ],
+          'newlines-between': 'always',
+          'pathGroupsExcludedImportTypes': ['builtin'],
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+      'sort-imports/no-duplicates': 'warn',
+      'sort-imports/no-unresolved': 'off',
+      'sort-imports/extensions': 'off',
+    },
+  },
+);

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "@brcarddev/frontend-commons",
+  "version": "1.0.2",
+  "type": "module",
+  "engines": {
+    "node": ">=20.11.1"
+  },
+  "packageManager": "pnpm@10.11.0",
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:update": "vitest run -u",
+    "coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui --coverage.enabled=true"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mblabs-brcard-frontend-commons.js",
+      "styles": "./dist/mblabs-brcard-frontend-commons.css"
+    },
+    "./css": "./dist/mblabs-brcard-frontend-commons.css"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
+    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@radix-ui/react-toggle": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "@react-input/mask": "^2.0.4",
+    "@tabler/icons-react": "^3.31.0",
+    "@tailwindcss/vite": "^4.1.4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tiptap/extension-bullet-list": "^3.0.9",
+    "@tiptap/extension-document": "^3.0.9",
+    "@tiptap/extension-heading": "^3.0.9",
+    "@tiptap/extension-list-item": "^3.0.9",
+    "@tiptap/extension-ordered-list": "^3.0.9",
+    "@tiptap/extension-paragraph": "^3.0.9",
+    "@tiptap/extension-placeholder": "^3.0.9",
+    "@tiptap/extension-text": "^3.0.9",
+    "@tiptap/extension-text-align": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/react": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.488.0",
+    "luxon": "^3.6.1",
+    "react": "^19.1.0",
+    "react-day-picker": "^9.6.7",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.55.0",
+    "react-pdf": "^9.2.1",
+    "react-resizable-panels": "^3.0.2",
+    "react-select": "^5.10.1",
+    "react-select-async-paginate": "^0.7.11",
+    "recharts": "^2.15.2",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "tailwind-variants": "^1.0.0",
+    "tailwindcss": "^4.1.4",
+    "tw-animate-css": "^1.2.5",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "3",
+    "@eslint/js": "^9.21.0",
+    "@faker-js/faker": "^9.8.0",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/addon-styling-webpack": "1.0.1",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/experimental-addon-test": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/react-vite": "8.6.12",
+    "@storybook/test": "8.6.12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/luxon": "^3.6.2",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "3.1.2",
+    "eslint": "^9.21.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-sort-exports": "^0.9.1",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^15.15.0",
+    "jsdom": "^26.1.0",
+    "np": "^10.2.0",
+    "playwright": "^1.51.1",
+    "storybook": "8.6.12",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.55.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "description": "Uma coleção de componentes e utilitários de front-end reutilizáveis, desenvolvidos com tecnologias modernas como React 19, TailwindCSS, Radix UI e muito mais. Criado para ser compartilhado entre projetos dentro do ecossistema MB Labs Brcard.",
+  "main": "eslint.config.js",
+  "author": "MB Labs",
+  "license": "MIT"
+}

package/src/components/atoms/AudioPlayer/audio-player.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AudioPlayer } from './audio-player';
+
+const meta: Meta<typeof AudioPlayer> = {
+  title: 'Components/Data Display/AudioPlayer',
+  component: AudioPlayer,
+  tags: [ 'autodocs' ],
+  argTypes: {
+    audioUrl: {
+      control: 'text',
+      description: 'The URL of the audio to display',
+    },
+    className: {
+      control: 'text',
+      description: 'The class name of the audio player',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The AudioPlayer component displays an audio player.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AudioPlayer>;
+
+export const Default: Story = {
+  args: {
+    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+  },
+};

package/src/components/atoms/AudioPlayer/audio-player.test.tsx

@@ -0,0 +1,20 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './audio-player.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<AudioPlayer />', () => {
+  it('should render the audio player', () => {
+    render(<Default />);
+
+    expect(screen.getByTestId('audio-player')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/AudioPlayer/audio-player.tsx

@@ -0,0 +1,13 @@
+import { Box } from '@/components';
+import { cn } from '@/utils';
+
+export function AudioPlayer({ audioUrl, className }: { audioUrl: string, className?: string }) {
+  return (
+    <Box className={cn('w-full', className)} data-testid="audio-player">
+      <audio controls controlsList="nodownload" className="w-full">
+        <source src={audioUrl} type="audio/mpeg" />
+        Your browser does not support the audio tag.
+      </audio>
+    </Box>
+  );
+}

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

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