Pular para conteúdo

Frontend Development Standard

Objetivo

Definir o padrão oficial para desenvolvimento Frontend da CoreFlow Platform.

Este documento é obrigatório para todos os produtos.

Stack Oficial

Framework

  • React
  • Next.js

Linguagem

  • TypeScript

Gerenciamento de Estado

  • React Query
  • Context API

Formulários

  • React Hook Form

Validação

  • Zod

Componentes

  • Material UI

Arquitetura

Todo frontend deverá seguir:

  • Component Based Architecture
  • Atomic Design
  • Separation of Concerns
  • Reutilização máxima
  • Responsividade

Estrutura

frontend/

app/

components/

features/

hooks/

layouts/

pages/

providers/

services/

stores/

styles/

types/

utils/

tests/

Componentes

Cada componente deverá possuir:

Component/

index.ts

Component.tsx

Component.test.tsx

types.ts

styles.ts

Organização

Components

Componentes reutilizáveis.

Features

Funcionalidades específicas.

Hooks

Toda lógica reutilizável.

Services

Comunicação com APIs.

Nunca acessar APIs diretamente em componentes.

Utils

Funções utilitárias.

Convenções

Componentes

PascalCase

LeadCard

Hooks

useLead()

usePermissions()

Arquivos

kebab-case

lead-card.tsx

Páginas

Cada página deverá possuir:

  • Header
  • Breadcrumb
  • Conteúdo
  • Loading
  • Empty State
  • Error State

Formulários

Obrigatório:

  • validação client-side
  • validação server-side
  • feedback visual
  • loading
  • mensagens de erro

Consumo de APIs

Toda comunicação deverá ocorrer através de:

services/

Nunca utilizar fetch diretamente em componentes.

Estados

Separar claramente:

  • Loading
  • Success
  • Error
  • Empty

Performance

Utilizar sempre:

  • Lazy Loading
  • Dynamic Import
  • Memoização
  • React Query Cache

Evitar:

  • Renderizações desnecessárias
  • Requisições duplicadas
  • Estados globais desnecessários

Responsividade

Obrigatória.

Suporte mínimo:

  • Desktop
  • Notebook
  • Tablet
  • Smartphone

Acessibilidade

Obrigatório:

  • navegação por teclado
  • labels
  • aria attributes
  • contraste adequado

Segurança

Nunca armazenar:

  • Tokens em LocalStorage
  • Senhas
  • Informações sensíveis

Utilizar:

  • Cookies HTTP Only quando aplicável
  • Refresh Token
  • Controle de sessão

UI

Toda interface deverá seguir o Design System oficial da CoreFlow Platform.

É proibido criar componentes duplicados.

Testes

Obrigatórios:

  • Componentes
  • Hooks
  • Serviços
  • Fluxos críticos

Documentação

Todo componente reutilizável deverá possuir documentação correspondente.

Anti-patterns

É proibido:

  • lógica de negócio em componentes
  • chamadas HTTP em componentes
  • componentes gigantes
  • duplicação de código
  • CSS inline sem justificativa
  • tipagem any

Objetivo Final

Garantir um frontend consistente, escalável, acessível e reutilizável para todos os produtos da CoreFlow Platform.