@rainersoft/design-tokens 1.0.5 → 2.0.0

package/README.md

@@ -2,14 +2,15 @@
 
 <div align="center">
 
-![Version](https://img.shields.io/badge/version-1.0.5-blue)
+![Version](https://img.shields.io/badge/version-2.0.0-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)
+![Tests](https://img.shields.io/badge/tests-320%20passing-success)
 ![Size](https://img.shields.io/badge/size-<5KB-success)
 
 **Enterprise-grade design tokens for modern design systems**
 
-[Getting Started](#-installation) • [Documentation](#-documentation) • [Storybook](#-storybook---visualização-dos-tokens) • [Roadmap](./docs/roadmap.md)
+[Getting Started](#-installation) • [Documentation](#-documentation) • [Storybook](#-storybook---visualização-dos-tokens) • [Roadmap](./docs/14-roadmap.md)
 
 </div>
 
@@ -31,6 +32,12 @@
 - 🎭 **Cyberpunk Theme** - Dark mode com efeitos neon
 - 🎬 **Animações** - Keyframes e animações prontas (accordion, slide-in, fade-in)
 - 📚 **Storybook** - Documentação visual interativa de todos os tokens
+- ✏️ **Token Editor** - Interface web completa para editar tokens visualmente
+  - ✅ Validação de schema JSON
+  - ✅ Preview visual dos tokens
+  - ✅ Histórico de alterações (undo/redo)
+  - ✅ Geração de formatos: CSS, Tailwind, Figma, Android XML, iOS Swift (100% local no navegador)
+- 🧪 **Testes Completos** - 302 testes com 100% de cobertura do Token Editor
 
 ---
 
@@ -50,35 +57,6 @@ yarn add @rainersoft/design-tokens
 
 ---
 
-## 🔄 Migração do Pacote Antigo
-
-Se você estava usando `rainer-design-tokens` ou `@rainer/design-tokens`, migre para o novo escopo da organização:
-
-```bash
-# Remover pacote antigo
-pnpm remove rainer-design-tokens
-# ou
-pnpm remove @rainer/design-tokens
-
-# Instalar novo pacote
-pnpm add @rainersoft/design-tokens
-```
-
-**Atualizar importações:**
-```typescript
-// Antes
-import { tokens } from 'rainer-design-tokens';
-// ou
-import { tokens } from '@rainer/design-tokens';
-
-// Depois
-import { tokens } from '@rainersoft/design-tokens';
-```
-
-> **Nota**: O pacote antigo continuará disponível por um período de transição, mas recomendamos migrar para `@rainersoft/design-tokens` para receber atualizações futuras.
-
----
-
 ## 🎯 Quick Start
 
 ### TypeScript/JavaScript
@@ -146,7 +124,7 @@ Acesse `http://localhost:6006` para explorar:
 - 🌑 **Shadows** - Sombras e efeitos glow
 - 🎬 **Animations** - Animações e keyframes (accordion, slide-in, fade-in)
 
-> **Nota**: Componentes UI (Button, Card, etc.) devem estar no Storybook do frontend, não aqui. Veja [Estrutura do Storybook](./docs/ESTRUTURA_STORYBOOK.md) para mais detalhes.
+> **Nota**: Componentes UI (Button, Card, etc.) devem estar no Storybook do frontend, não aqui. Veja [Estrutura do Storybook](./docs/06-ESTRUTURA_STORYBOOK.md) para mais detalhes.
 
 ---
 
@@ -232,20 +210,20 @@ Acesse `http://localhost:6006` para explorar:
 │   └── *.map                      # Source maps
 │
 └── 📖 docs/                       # Documentação completa
-    ├── INDICE.md                  # Índice geral da documentação
-    ├── ESTRUTURA.md               # Estrutura detalhada da biblioteca
-    ├── ESTRUTURA_STORYBOOK.md     # Estrutura do Storybook
-    ├── SISTEMA_BUILD.md           # Sistema de build automatizado
-    ├── guidelines.md              # Guidelines de uso
-    ├── GUIA_TOKENS_EXPANDIDOS.md  # Guia dos tokens expandidos
-    ├── GUIA_MIGRACAO.md           # Guia de migração
-    ├── PUBLICACAO.md              # Guia de publicação
-    ├── CONFIGURACAO_PNPM.md       # Configuração pnpm
+    ├── 00-INDICE.md               # Índice geral da documentação
+    ├── 03-ESTRUTURA.md            # Estrutura detalhada da biblioteca
+    ├── 06-ESTRUTURA_STORYBOOK.md  # Estrutura do Storybook
+    ├── 04-SISTEMA_BUILD.md        # Sistema de build automatizado
+    ├── 01-guidelines.md           # Guidelines de uso
+    ├── 07-GUIA_TOKENS_EXPANDIDOS.md  # Guia dos tokens expandidos
+    ├── 15-GUIA_MIGRACAO.md        # Guia de migração
+    ├── 11-PUBLICACAO.md           # Guia de publicação
+    ├── 09-CONFIGURACAO_PNPM.md    # Configuração pnpm
     ├── CONTRIBUINDO.md            # Guia de contribuição
-    ├── STORYBOOK.md               # Documentação do Storybook
-    ├── RESUMO_ESTRUTURA.md        # Resumo da estrutura
-    ├── HISTORICO_MUDANCAS.md      # Histórico de mudanças
-    └── roadmap.md                 # Roadmap do projeto
+    ├── 05-STORYBOOK.md            # Documentação do Storybook
+    ├── 02-RESUMO_ESTRUTURA.md     # Resumo da estrutura
+    ├── 12-HISTORICO_MUDANCAS.md   # Histórico de mudanças
+    └── 14-roadmap.md              # Roadmap do projeto
 ```
 
 ### 🎯 Princípio: JSON como Fonte Única de Verdade
@@ -325,27 +303,27 @@ function ThemeToggle() {
 
 ## 📚 Documentation
 
-📖 **[Documentação Completa](./docs/INDICE.md)** - Índice geral de toda a documentação
+📖 **[Documentação Completa](./docs/00-INDICE.md)** - Índice geral de toda a documentação
 
 ### Guias Principais
 
-- [**Guidelines**](./docs/guidelines.md) - Como usar os tokens
-- [**ESTRUTURA.md**](./docs/ESTRUTURA.md) - Estrutura detalhada da biblioteca
-- [**SISTEMA_BUILD.md**](./docs/SISTEMA_BUILD.md) - Sistema de build automatizado
-- [**Roadmap**](./docs/roadmap.md) - Futuras features e versões
-- [**GUIA_TOKENS_EXPANDIDOS**](./docs/GUIA_TOKENS_EXPANDIDOS.md) - Guia dos tokens expandidos (cores e tipografia)
-- [**GUIA_MIGRACAO**](./docs/GUIA_MIGRACAO.md) - Guia de migração para v3.0.0
-- [**PUBLICACAO**](./docs/PUBLICACAO.md) - Guia de publicação no GitHub/npm
+- [**Guidelines**](./docs/01-guidelines.md) - Como usar os tokens
+- [**ESTRUTURA.md**](./docs/03-ESTRUTURA.md) - Estrutura detalhada da biblioteca
+- [**SISTEMA_BUILD.md**](./docs/04-SISTEMA_BUILD.md) - Sistema de build automatizado
+- [**Roadmap**](./docs/14-roadmap.md) - Futuras features e versões
+- [**GUIA_TOKENS_EXPANDIDOS**](./docs/07-GUIA_TOKENS_EXPANDIDOS.md) - Guia dos tokens expandidos (cores e tipografia)
+- [**GUIA_MIGRACAO**](./docs/15-GUIA_MIGRACAO.md) - Guia de migração para v2.0.0
+- [**PUBLICACAO**](./docs/11-PUBLICACAO.md) - Guia de publicação no GitHub/npm
 
 ### Storybook
 
-- [**STORYBOOK.md**](./docs/STORYBOOK.md) - Documentação visual dos tokens
-- [**ESTRUTURA_STORYBOOK.md**](./docs/ESTRUTURA_STORYBOOK.md) - Separação entre tokens e componentes
+- [**STORYBOOK.md**](./docs/05-STORYBOOK.md) - Documentação visual dos tokens
+- [**ESTRUTURA_STORYBOOK.md**](./docs/06-ESTRUTURA_STORYBOOK.md) - Separação entre tokens e componentes
 
 ### Referência Rápida
 
-- [**RESUMO_ESTRUTURA.md**](./docs/RESUMO_ESTRUTURA.md) - Resumo da estrutura
-- [**HISTORICO_MUDANCAS.md**](./docs/HISTORICO_MUDANCAS.md) - Histórico de mudanças
+- [**RESUMO_ESTRUTURA.md**](./docs/02-RESUMO_ESTRUTURA.md) - Resumo da estrutura
+- [**HISTORICO_MUDANCAS.md**](./docs/12-HISTORICO_MUDANCAS.md) - Histórico de mudanças
 
 ---
 
@@ -404,7 +382,7 @@ import '@rainersoft/design-tokens/formats/css-vars.css';
 
 ```typescript
 // Use tokens as base for shadcn/ui theming
-import { tokens } from '@rainer/design-tokens';
+import { tokens } from '@rainersoft/design-tokens';
 
 export const shadcnTheme = {
   primary: tokens.colors.light.primary.base,
@@ -420,7 +398,7 @@ export const shadcnTheme = {
 
 ```typescript
 // Main tokens
-import { tokens } from '@rainer/design-tokens';
+import { tokens } from '@rainersoft/design-tokens';
 
 // Individual token categories
 import { 
@@ -441,6 +419,16 @@ import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.confi
 
 ---
 
+## 🎨 Token Editor (Editor Visual Local)
+
+Para editar os design tokens visualmente, sem servidor, use o **Token Editor** incluso no repositório:
+
+1. Localize a pasta `token-editor/` na raiz do projeto.
+2. Abra o arquivo `token-editor/index.html` diretamente no navegador (duplo clique ou arrastar/soltar).
+3. Carregue um arquivo JSON de tokens, edite visualmente ou via código e salve/gera formatos **100% local**, direto no navegador.
+
+---
+
 ## 🧪 Development
 
 ```bash
@@ -485,7 +473,62 @@ pnpm run clean:all          # Remove node_modules, lock, dist, etc.
 5. **Compile o TypeScript**: `pnpm run build` (já inclui build:formats + tsup)
 6. **Visualize no Storybook**: `pnpm run storybook` para ver todos os tokens de forma interativa
 7. **Execute testes**: `pnpm test` antes de commitar
-8. **⚠️ IMPORTANTE**: Sempre commit `dist/` após build (veja [PUBLICACAO.md](./docs/PUBLICACAO.md#-por-que-dist-está-commitado))
+8. **⚠️ IMPORTANTE**: Sempre commit `dist/` após build (veja [PUBLICACAO.md](./docs/11-PUBLICACAO.md#-por-que-dist-está-commitado))
+
+### ✏️ Token Editor - Editor Visual de Tokens
+
+Interface web **100% local** para editar tokens visualmente, sem necessidade de servidor.
+
+**Localização**: `token-editor/`
+
+**Características:**
+- 🚀 **100% Local** - Funciona abrindo HTML diretamente no navegador
+- 🎨 **Editor Visual** - Edite propriedades com inputs HTML (evita erros de sintaxe)
+- 📝 **Editor de Código** - Edição tradicional de JSON
+- ✅ **Validação em Tempo Real** - Detecta erros instantaneamente
+- 💾 **Download de Arquivos** - Salve JSON diretamente (sem servidor)
+- 🔄 **Auto-backup** - Salva automaticamente no localStorage
+- 🎯 **Zero Dependencies** - Apenas HTML, CSS e JavaScript puro
+
+**Como usar (Modo Local - Recomendado):**
+```bash
+# Simplesmente abra o arquivo HTML no navegador:
+# Windows: Clique duas vezes em token-editor/index.html
+# Mac/Linux: open token-editor/index.html
+```
+
+**Funcionalidades:**
+- 📂 Carregar arquivos JSON do computador
+- ✏️ Editar tokens com editor visual ou código
+- ✅ Validação JSON em tempo real
+- 💾 Salvar/Download de arquivos JSON
+- 🔨 Gerar formatos (requer servidor backend - opcional)
+- 👁️ Preview dos arquivos gerados
+- ⌨️ Atalhos de teclado (Ctrl+S, Ctrl+Shift+F, Ctrl+B)
+
+**Documentação completa**: Veja [Token Editor README](./token-editor/README.md)
+
+### 🧪 Testes
+
+Suíte completa de testes com **302 casos de teste** cobrindo toda a funcionalidade, incluindo **100% de cobertura do Token Editor** (168 testes específicos + testes E2E).
+
+**Executar testes:**
+```bash
+pnpm test              # Executa todos os testes
+pnpm test:watch        # Modo watch (desenvolvimento)
+pnpm test:coverage     # Com relatório de cobertura
+```
+
+**Cobertura:**
+- ✅ Tokens estrutura e exportações
+- ✅ Tokens utilitários (Tailwind classes)
+- ✅ Utilitários de acessibilidade (WCAG)
+- ✅ Estrutura de temas (light/dark)
+- ✅ **Token Editor (100% de cobertura - 168 testes + E2E)**
+- ✅ TypeScript types
+- ✅ Casos de uso reais
+
+Veja [Testes README](./tests/README.md) para mais detalhes.
 
 ### 📚 Storybook - Visualização dos Tokens
 
@@ -502,9 +545,9 @@ O Storybook da lib documenta **apenas design tokens**, não componentes UI.
 
 **Separação de responsabilidades:**
 - ✅ **Este Storybook**: Apenas tokens (cores, tipografia, espaçamento, etc.)
-- ✅ **Storybook do Frontend**: Componentes UI (Button, Card, Input, etc.)
+- ✅ **Storybook do Frontend**: Componentes UI (Button, Card, etc.)
 
-Para mais detalhes sobre a estrutura, consulte [**Estrutura do Storybook**](./docs/ESTRUTURA_STORYBOOK.md).
+Para mais detalhes sobre a estrutura, consulte [**Estrutura do Storybook**](./docs/06-ESTRUTURA_STORYBOOK.md).
 
 ---