@igreen/design-system 1.0.3 → 1.0.5

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@igreen/design-system",
-  "version": "1.0.3",
-  "description": "iGreen Design System - Complete Package",
+  "version": "1.0.5",
+  "description": "iGreen Design System - Complete Package with Auto-Setup",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "postinstall.js"
   ],
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "postinstall": "node postinstall.js"
   },
   "dependencies": {
     "@igreen/themes": "^1.2.0",

package/postinstall.js

@@ -0,0 +1,253 @@
+#!/usr/bin/env node
+
+/**
+ * iGreen Design System - Postinstall Setup
+ * 
+ * Configura automaticamente o projeto após npm install
+ */
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// Detectar se está sendo instalado em um projeto (não no próprio igreen)
+const isInstallingInProject = () => {
+  const cwd = process.cwd();
+
+  // Se estamos dentro de node_modules/@igreen/design-system
+  if (cwd.includes(path.join('node_modules', '@igreen', 'design-system'))) {
+    const projectRoot = path.resolve(cwd, '..', '..', '..');
+
+    // Verificar se o projeto raiz NÃO é o igreen (verificando se tem packages/)
+    const hasPackagesDir = fs.existsSync(path.join(projectRoot, 'packages', 'design-system'));
+
+    // Se NÃO tem packages/design-system, é um projeto externo
+    return !hasPackagesDir;
+  }
+
+  return false;
+};
+
+const getProjectRoot = () => {
+  const cwd = process.cwd();
+  // Voltar 3 níveis: node_modules/@igreen/design-system -> root
+  if (cwd.includes(path.join('node_modules', '@igreen', 'design-system'))) {
+    return path.resolve(cwd, '..', '..', '..');
+  }
+  return cwd;
+};
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+async function setupProject() {
+  console.log('\n🎨 iGreen Design System Setup\n');
+
+  // Verificar se está sendo instalado em um projeto
+  if (!isInstallingInProject()) {
+    console.log('ℹ️  Instalação detectada no próprio repositório iGreen, pulando setup automático.\n');
+    rl.close();
+    return;
+  }
+
+  const projectRoot = getProjectRoot();
+
+  // Verificar se já foi configurado antes
+  const igreenConfigPath = path.join(projectRoot, '.igreen-configured');
+  if (fs.existsSync(igreenConfigPath)) {
+    console.log('✅ Projeto já configurado anteriormente.\n');
+    console.log('💡 Para reconfigurar, delete o arquivo .igreen-configured e reinstale.\n');
+    rl.close();
+    return;
+  }
+
+  console.log('🚀 Vamos configurar seu projeto iGreen!\n');
+
+  // 1. Perguntar se quer configuração automática
+  const autoSetup = await question('Deseja configurar automaticamente? (S/n): ');
+  if (autoSetup.toLowerCase() === 'n') {
+    console.log('\n📚 Configuração manual: https://github.com/seu-repo/docs\n');
+    rl.close();
+    return;
+  }
+
+  // 2. Escolher tema
+  console.log('\n📦 Temas disponíveis:');
+  console.log('  1. igreen (padrão verde)');
+  console.log('  2. solarorange (laranja vibrante)\n');
+
+  const themeChoice = await question('Escolha o tema (1-2) [1]: ');
+  const theme = themeChoice === '2' ? 'solarorange' : 'igreen';
+
+  // 3. Criar estrutura de pastas
+  console.log('\n📁 Criando estrutura de pastas...');
+
+  const appDir = path.join(projectRoot, 'app');
+  const componentsDir = path.join(projectRoot, 'components');
+  const libDir = path.join(projectRoot, 'lib');
+
+  [appDir, componentsDir, libDir].forEach(dir => {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+      console.log(`  ✅ ${path.relative(projectRoot, dir)}/`);
+    }
+  });
+
+  // 4. Criar globals.css
+  console.log('\n🎨 Configurando globals.css...');
+  const globalsCss = `@import 'tailwindcss';
+
+/* iGreen Design System está configurado! */
+/* O tema ${theme} será carregado automaticamente no layout */
+`;
+
+  fs.writeFileSync(path.join(appDir, 'globals.css'), globalsCss);
+  console.log('  ✅ app/globals.css');
+
+  // 5. Criar layout.tsx
+  console.log('  Configurando layout.tsx...');
+  const layoutContent = `import '@igreen/themes/${theme}'
+import './globals.css'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'iGreen App',
+  description: 'Created with iGreen Design System',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.Node
+}) {
+  return (
+    <html lang="pt-BR">
+      <body>{children}</body>
+    </html>
+  )
+}
+`;
+
+  fs.writeFileSync(path.join(appDir, 'layout.tsx'), layoutContent);
+  console.log('  ✅ app/layout.tsx');
+
+  // 6. Criar page.tsx exemplo
+  console.log('  Criando página de exemplo...');
+  const pageContent = `import { Button } from '@igreen/button'
+import { Input } from '@igreen/input'
+import { Label } from '@igreen/label'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen p-8">
+      <h1 className="text-3xl font-bold mb-8">
+        🎨 iGreen Design System
+      </h1>
+      
+      <div className="space-y-6 max-w-md">
+        <div>
+          <Label>Nome</Label>
+          <Input placeholder="Digite seu nome" />
+        </div>
+        
+        <div>
+          <Label>Email</Label>
+          <Input type="email" placeholder="seu@email.com" />
+        </div>
+        
+        <Button>Enviar</Button>
+      </div>
+    </main>
+  )
+}
+`;
+
+  fs.writeFileSync(path.join(appDir, 'page.tsx'), pageContent);
+  console.log('  ✅ app/page.tsx');
+
+  // 7. Criar lib/utils.ts
+  console.log('  Configurando utilitários...');
+  const utilsContent = `export { cn } from '@igreen/utils'
+`;
+
+  fs.writeFileSync(path.join(libDir, 'utils.ts'), utilsContent);
+  console.log('  ✅ lib/utils.ts');
+
+  // 8. Verificar/Criar postcss.config.mjs
+  console.log('\n⚙️  Configurando PostCSS...');
+  const postcssConfig = path.join(projectRoot, 'postcss.config.mjs');
+  if (!fs.existsSync(postcssConfig)) {
+    const postcssContent = `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+`;
+    fs.writeFileSync(postcssConfig, postcssContent);
+    console.log('  ✅ postcss.config.mjs');
+  } else {
+    console.log('  ⏭️  postcss.config.mjs já existe');
+  }
+
+  // 9. Atualizar package.json scripts (se possível)
+  console.log('\n📦 Verificando scripts...');
+  const packageJsonPath = path.join(projectRoot, 'package.json');
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+
+      if (!packageJson.scripts) {
+        packageJson.scripts = {};
+      }
+
+      if (!packageJson.scripts.dev) {
+        packageJson.scripts.dev = 'next dev';
+        packageJson.scripts.build = 'next build';
+        packageJson.scripts.start = 'next start';
+
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+        console.log('  ✅ Scripts adicionados ao package.json');
+      }
+    } catch (e) {
+      console.log('  ⚠️  Não foi possível atualizar package.json automaticamente');
+    }
+  }
+
+  // 10. Marcar como configurado
+  fs.writeFileSync(igreenConfigPath, `Configured at: ${new Date().toISOString()}\nTheme: ${theme}\n`);
+
+  // 11. Mostrar próximos passos
+  console.log('\n' + '='.repeat(60));
+  console.log('🎉 Projeto configurado com sucesso!');
+  console.log('='.repeat(60));
+  console.log(`\n📦 Tema instalado: ${theme}`);
+  console.log('\n📝 Próximos passos:\n');
+  console.log('  1. Instale as dependências do Next.js:');
+  console.log('     npm install next@latest react@latest react-dom@latest');
+  console.log('');
+  console.log('  2. Instale o Tailwind CSS v4:');
+  console.log('     npm install tailwindcss@next @tailwindcss/postcss@next');
+  console.log('');
+  console.log('  3. Inicie o servidor de desenvolvimento:');
+  console.log('     npm run dev');
+  console.log('');
+  console.log('  4. Abra http://localhost:3000\n');
+  console.log('📚 Documentação: https://github.com/seu-repo/docs');
+  console.log('💚 Componentes disponíveis:');
+  console.log('   - Button, Input, Label, Checkbox, ExampleCard\n');
+  console.log('='.repeat(60) + '\n');
+
+  rl.close();
+}
+
+// Executar setup
+setupProject().catch(error => {
+  console.error('\n❌ Erro durante configuração:', error.message);
+  console.log('\n📚 Para configuração manual: https://github.com/seu-repo/docs\n');
+  rl.close();
+  process.exit(0); // Não falhar a instalação
+});