@igreen/design-system 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/postinstall.js +147 -140
package/package.json
CHANGED
package/postinstall.js
CHANGED
|
@@ -11,98 +11,105 @@ const path = require('path');
|
|
|
11
11
|
const readline = require('readline');
|
|
12
12
|
|
|
13
13
|
const rl = readline.createInterface({
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
input: process.stdin,
|
|
15
|
+
output: process.stdout
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
// Detectar se está sendo instalado em um projeto (não no próprio igreen)
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
const is InstallingInProject = () => {
|
|
20
|
+
// __dirname é o caminho do próprio script
|
|
21
|
+
// Se estiver em node_modules/@igreen/design-system, deve configurar o projeto
|
|
22
|
+
|
|
23
|
+
if (__dirname.includes(path.join('node_modules', '@igreen', 'design-system'))) {
|
|
24
|
+
// Projeto raiz está 3 níveis acima
|
|
25
|
+
const projectRoot = path.resolve(__dirname, '..', '..', '..');
|
|
26
|
+
|
|
27
|
+
// Verificar se NÃO é o próprio repo igreen
|
|
28
|
+
const isIgreenRepo = fs.existsSync(path.join(projectRoot, 'packages', 'design-system'));
|
|
29
|
+
|
|
30
|
+
return !isIgreenRepo; // Retorna true se NÃO for o repo igreen
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return false;
|
|
26
34
|
};
|
|
27
35
|
|
|
28
36
|
const getProjectRoot = () => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return path.resolve(cwd, '..', '..', '..');
|
|
33
|
-
}
|
|
34
|
-
return cwd;
|
|
37
|
+
// __dirname está em node_modules/@igreen/design-system
|
|
38
|
+
// Projeto raiz está 3 níveis acima
|
|
39
|
+
return path.resolve(__dirname, '..', '..', '..');
|
|
35
40
|
};
|
|
36
41
|
|
|
37
42
|
const question = (query) => new Promise((resolve) => rl.question(query, resolve));
|
|
38
43
|
|
|
39
44
|
async function setupProject() {
|
|
40
|
-
|
|
45
|
+
console.log('\n🎨 iGreen Design System Setup\n');
|
|
41
46
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
// Verificar se está sendo instalado em um projeto
|
|
48
|
+
if (!isInstallingInProject()) {
|
|
49
|
+
console.log('[DEBUG] __dirname:', __dirname);
|
|
50
|
+
console.log('[DEBUG] Skipping setup (detected as igreen repo or not in node_modules)\n');
|
|
51
|
+
rl.close();
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
48
54
|
|
|
49
|
-
|
|
55
|
+
const projectRoot = getProjectRoot();
|
|
56
|
+
console.log('[DEBUG] Project root:', projectRoot);
|
|
50
57
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
// Verificar se já foi configurado antes
|
|
59
|
+
const igreenConfigPath = path.join(projectRoot, '.igreen-configured');
|
|
60
|
+
if (fs.existsSync(igreenConfigPath)) {
|
|
61
|
+
console.log('✅ Projeto já configurado anteriormente.\n');
|
|
62
|
+
console.log('💡 Para reconfigurar, delete o arquivo .igreen-configured e reinstale.\n');
|
|
63
|
+
rl.close();
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
59
66
|
|
|
60
|
-
|
|
67
|
+
console.log('🚀 Vamos configurar seu projeto iGreen!\n');
|
|
61
68
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
// 1. Perguntar se quer configuração automática
|
|
70
|
+
const autoSetup = await question('Deseja configurar automaticamente? (S/n): ');
|
|
71
|
+
if (autoSetup.toLowerCase() === 'n') {
|
|
72
|
+
console.log('\n📚 Configuração manual: https://github.com/seu-repo/docs\n');
|
|
73
|
+
rl.close();
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
69
76
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
// 2. Escolher tema
|
|
78
|
+
console.log('\n📦 Temas disponíveis:');
|
|
79
|
+
console.log(' 1. igreen (padrão verde)');
|
|
80
|
+
console.log(' 2. solarorange (laranja vibrante)\n');
|
|
74
81
|
|
|
75
|
-
|
|
76
|
-
|
|
82
|
+
const themeChoice = await question('Escolha o tema (1-2) [1]: ');
|
|
83
|
+
const theme = themeChoice === '2' ? 'solarorange' : 'igreen';
|
|
77
84
|
|
|
78
|
-
|
|
79
|
-
|
|
85
|
+
// 3. Criar estrutura de pastas
|
|
86
|
+
console.log('\n📁 Criando estrutura de pastas...');
|
|
80
87
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
88
|
+
const appDir = path.join(projectRoot, 'app');
|
|
89
|
+
const componentsDir = path.join(projectRoot, 'components');
|
|
90
|
+
const libDir = path.join(projectRoot, 'lib');
|
|
84
91
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
[appDir, componentsDir, libDir].forEach(dir => {
|
|
93
|
+
if (!fs.existsSync(dir)) {
|
|
94
|
+
fs.mkdirSync(dir, { recursive: true });
|
|
95
|
+
console.log(` ✅ ${path.relative(projectRoot, dir)}/`);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
91
98
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
99
|
+
// 4. Criar globals.css
|
|
100
|
+
console.log('\n🎨 Configurando globals.css...');
|
|
101
|
+
const globalsCss = `@import 'tailwindcss';
|
|
95
102
|
|
|
96
103
|
/* iGreen Design System está configurado! */
|
|
97
104
|
/* O tema ${theme} será carregado automaticamente no layout */
|
|
98
105
|
`;
|
|
99
106
|
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
fs.writeFileSync(path.join(appDir, 'globals.css'), globalsCss);
|
|
108
|
+
console.log(' ✅ app/globals.css');
|
|
102
109
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
110
|
+
// 5. Criar layout.tsx
|
|
111
|
+
console.log(' Configurando layout.tsx...');
|
|
112
|
+
const layoutContent = `import '@igreen/themes/${theme}'
|
|
106
113
|
import './globals.css'
|
|
107
114
|
import type { Metadata } from 'next'
|
|
108
115
|
|
|
@@ -114,7 +121,7 @@ export const metadata: Metadata = {
|
|
|
114
121
|
export default function RootLayout({
|
|
115
122
|
children,
|
|
116
123
|
}: {
|
|
117
|
-
children: React.
|
|
124
|
+
children: React.ReactNode
|
|
118
125
|
}) {
|
|
119
126
|
return (
|
|
120
127
|
<html lang="pt-BR">
|
|
@@ -124,12 +131,12 @@ export default function RootLayout({
|
|
|
124
131
|
}
|
|
125
132
|
`;
|
|
126
133
|
|
|
127
|
-
|
|
128
|
-
|
|
134
|
+
fs.writeFileSync(path.join(appDir, 'layout.tsx'), layoutContent);
|
|
135
|
+
console.log(' ✅ app/layout.tsx');
|
|
129
136
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
137
|
+
// 6. Criar page.tsx exemplo
|
|
138
|
+
console.log(' Criando página de exemplo...');
|
|
139
|
+
const pageContent = `import { Button } from '@igreen/button'
|
|
133
140
|
import { Input } from '@igreen/input'
|
|
134
141
|
import { Label } from '@igreen/label'
|
|
135
142
|
|
|
@@ -158,88 +165,88 @@ export default function Home() {
|
|
|
158
165
|
}
|
|
159
166
|
`;
|
|
160
167
|
|
|
161
|
-
|
|
162
|
-
|
|
168
|
+
fs.writeFileSync(path.join(appDir, 'page.tsx'), pageContent);
|
|
169
|
+
console.log(' ✅ app/page.tsx');
|
|
163
170
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
171
|
+
// 7. Criar lib/utils.ts
|
|
172
|
+
console.log(' Configurando utilitários...');
|
|
173
|
+
const utilsContent = `export { cn } from '@igreen/utils'
|
|
167
174
|
`;
|
|
168
175
|
|
|
169
|
-
|
|
170
|
-
|
|
176
|
+
fs.writeFileSync(path.join(libDir, 'utils.ts'), utilsContent);
|
|
177
|
+
console.log(' ✅ lib/utils.ts');
|
|
171
178
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
179
|
+
// 8. Verificar/Criar postcss.config.mjs
|
|
180
|
+
console.log('\n⚙️ Configurando PostCSS...');
|
|
181
|
+
const postcssConfig = path.join(projectRoot, 'postcss.config.mjs');
|
|
182
|
+
if (!fs.existsSync(postcssConfig)) {
|
|
183
|
+
const postcssContent = `export default {
|
|
177
184
|
plugins: {
|
|
178
185
|
'@tailwindcss/postcss': {},
|
|
179
186
|
},
|
|
180
187
|
}
|
|
181
188
|
`;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}
|
|
189
|
+
fs.writeFileSync(postcssConfig, postcssContent);
|
|
190
|
+
console.log(' ✅ postcss.config.mjs');
|
|
191
|
+
} else {
|
|
192
|
+
console.log(' ⏭️ postcss.config.mjs já existe');
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// 9. Atualizar package.json scripts (se possível)
|
|
196
|
+
console.log('\n📦 Verificando scripts...');
|
|
197
|
+
const packageJsonPath = path.join(projectRoot, 'package.json');
|
|
198
|
+
if (fs.existsSync(packageJsonPath)) {
|
|
199
|
+
try {
|
|
200
|
+
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
|
|
201
|
+
|
|
202
|
+
if (!packageJson.scripts) {
|
|
203
|
+
packageJson.scripts = {};
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
if (!packageJson.scripts.dev) {
|
|
207
|
+
packageJson.scripts.dev = 'next dev';
|
|
208
|
+
packageJson.scripts.build = 'next build';
|
|
209
|
+
packageJson.scripts.start = 'next start';
|
|
210
|
+
|
|
211
|
+
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
|
|
212
|
+
console.log(' ✅ Scripts adicionados ao package.json');
|
|
213
|
+
}
|
|
214
|
+
} catch (e) {
|
|
215
|
+
console.log(' ⚠️ Não foi possível atualizar package.json automaticamente');
|
|
210
216
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// 10. Marcar como configurado
|
|
220
|
+
fs.writeFileSync(igreenConfigPath, `Configured at: ${new Date().toISOString()}\nTheme: ${theme}\n`);
|
|
221
|
+
|
|
222
|
+
// 11. Mostrar próximos passos
|
|
223
|
+
console.log('\n' + '='.repeat(60));
|
|
224
|
+
console.log('🎉 Projeto configurado com sucesso!');
|
|
225
|
+
console.log('='.repeat(60));
|
|
226
|
+
console.log(`\n📦 Tema instalado: ${theme}`);
|
|
227
|
+
console.log('\n📝 Próximos passos:\n');
|
|
228
|
+
console.log(' 1. Instale as dependências do Next.js:');
|
|
229
|
+
console.log(' npm install next@latest react@latest react-dom@latest');
|
|
230
|
+
console.log('');
|
|
231
|
+
console.log(' 2. Instale o Tailwind CSS v4:');
|
|
232
|
+
console.log(' npm install tailwindcss@next @tailwindcss/postcss@next');
|
|
233
|
+
console.log('');
|
|
234
|
+
console.log(' 3. Inicie o servidor de desenvolvimento:');
|
|
235
|
+
console.log(' npm run dev');
|
|
236
|
+
console.log('');
|
|
237
|
+
console.log(' 4. Abra http://localhost:3000\n');
|
|
238
|
+
console.log('📚 Documentação: https://github.com/seu-repo/docs');
|
|
239
|
+
console.log('💚 Componentes disponíveis:');
|
|
240
|
+
console.log(' - Button, Input, Label, Checkbox, ExampleCard\n');
|
|
241
|
+
console.log('='.repeat(60) + '\\n');
|
|
242
|
+
|
|
243
|
+
rl.close();
|
|
237
244
|
}
|
|
238
245
|
|
|
239
246
|
// Executar setup
|
|
240
247
|
setupProject().catch(error => {
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
248
|
+
console.error('\n❌ Erro durante configuração:', error.message);
|
|
249
|
+
console.log('\n📚 Para configuração manual: https://github.com/seu-repo/docs\n');
|
|
250
|
+
rl.close();
|
|
251
|
+
process.exit(0); // Não falhar a instalação
|
|
245
252
|
});
|