Documentação • Storybook • NPM

✨ Features

• 🎨 14 Componentes React de alta qualidade
• 🏗️ Atomic Design - Atoms, Molecules e Organisms
• 🛡️ TypeScript - Type safety completo
• ⚡ Performance - Lazy loading e otimizações
• ♿ Acessível - ARIA labels e keyboard navigation
• 🎭 Customizável - Tailwind CSS
• 🧪 Testado - Jest + Testing Library
• 📖 Documentado - Storybook interativo
• 🔧 Hooks - Custom hooks inclusos
• 🚀 CI/CD - Husky + Git hooks

📦 Instalação

npm install star-flicks-ds
# ou
yarn add star-flicks-ds
# ou
pnpm add star-flicks-ds

Configuração

1. Tailwind CSS

Adicione ao seu tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/star-flicks-ds/**/*.{js,ts,jsx,tsx}',
  ],
  // ... resto da config
};

2. Estilos

Importe no seu CSS principal:

@import 'star-flicks-ds/styles/sf-style.css';

🏗️ Estrutura (Atomic Design)

components/
├── atoms/           # 7 componentes básicos
│   ├── SFButton     # Botões com variantes
│   ├── SFIcon       # 16+ ícones
│   ├── SFInput      # Input com máscaras (CPF, Phone)
│   ├── SFCheckbox
│   ├── SFSwitch
│   ├── SFTypography
│   └── SFRanking
│
├── molecules/       # 6 componentes compostos
│   ├── SFHeader
│   ├── SFSelect
│   ├── SFAutocomplete
│   ├── SFModal
│   ├── SFToast      # Sistema de notificações
│   └── SFTags
│
└── organisms/       # 1 componente complexo
    └── SFMoviesList # Grid responsivo com lazy loading

🚀 Quick Start

import { SFButton, SFInput, SFModal, SFToast } from 'star-flicks-ds';
import { useToast } from 'star-flicks-ds/hooks';

function App() {
  const { toasts, showSuccess, removeToast } = useToast();

  return (
    <>
      <SFInput label='Nome' size='md' placeholder='Digite seu nome' />

      <SFButton
        variant='primary'
        size='lg'
        onClick={() => showSuccess('Ação realizada!')}
      >
        Salvar
      </SFButton>

      <SFToast list={toasts} onRemove={removeToast} />
    </>
  );
}

📖 Documentação completa: Veja todos os componentes, props e exemplos no Storybook

🪝 Hook: useToast

Gerenciamento simplificado de notificações toast.

import { useToast } from 'star-flicks-ds/hooks';
import { SFToast } from 'star-flicks-ds';

function Component() {
  const {
    toasts, // Lista de toasts ativos
    showSuccess, // Toast de sucesso
    showError, // Toast de erro
    showWarning, // Toast de aviso
    showInfo, // Toast de informação
    removeToast, // Remove toast
  } = useToast();

  return (
    <>
      <button onClick={() => showSuccess('Salvo!')}>Salvar</button>

      <SFToast
        list={toasts}
        onRemove={removeToast}
        autoDismiss // Auto-fecha (padrão: true)
        autoDismissDelay={5000} // 5 segundos
      />
    </>
  );
}

🛠️ Utilitários

import { cpfMask, phoneMask, toRgba } from 'star-flicks-ds/utils';

// Máscaras
cpfMask('12345678900'); // 123.456.789-00
phoneMask('11987654321'); // (11) 98765-4321

// Conversão de cores
toRgba('#FF5733')({ opacityValue: 0.5 }); // rgba(255, 87, 51, 0.5)

🔄 Migração (v0.1.15)

Breaking Change: sizeInput → size

// ❌ Versão antiga
<SFInput sizeInput="lg" />
<SFSelect sizeInput="md" />

// ✅ Nova versão
<SFInput size="lg" />
<SFSelect size="md" />

Componentes afetados: SFInput, SFSelect, SFAutocomplete

Nova Estrutura

Imports continuam funcionando normalmente:

// ✅ Ambos funcionam
import { SFButton } from 'star-flicks-ds';
import { SFButton } from 'star-flicks-ds/atoms';

📝 Changelog (v0.1.15)

🎉 Novas Features

• Hook useToast para notificações
• Auto-dismiss configurável em SFToast
• Lazy loading em SFMoviesList
• Prop testId customizável
• Prop id em SFInput

♿ Acessibilidade

• aria-busy em botões loading
• Labels com htmlFor correto

🏗️ Arquitetura

• Reorganização em Atomic Design
• Renomeação sizeInput → size
• Barrel exports em todas as categorias

🚀 Performance

• Constantes extraídas
• Otimizações de renderização

🔧 Developer Experience

• Husky configurado (pre-commit/pre-push)
• lint-staged automático

🐛 Correções

• Removido código não utilizado
• Corrigidos imports relativos
• Removidos console.logs

🧪 Desenvolvimento

# Instalação
git clone https://github.com/filipegbessa/star-flicks-ds.git
cd star-flicks-ds
npm install

# Scripts
npm run dev              # Next.js dev server
npm run storybook        # Storybook dev
npm run test             # Testes (watch)
npm run test:ci          # Testes (CI)
npm run lint             # ESLint
npm run format:fix       # Prettier

Git Hooks

• Pre-commit: Lint + formatação automática
• Pre-push: Executa testes

🔗 Links

• 🏠 Homepage
• 📖 Storybook - Documentação Completa
• 📊 Cobertura de Testes
• 📦 NPM Package
• 🐛 Issues

🤝 Contribuindo

1. Fork o projeto
2. Crie uma branch (git checkout -b feature/AmazingFeature)
3. Commit (git commit -m 'feat: Add AmazingFeature')
4. Push (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Convenção de Commits: Conventional Commits

📄 Licença

ISC License - Veja LICENSE

Feito com ❤️ por Filipe Bessa

⭐ Se este projeto foi útil, considere dar uma estrela!