@yberagroup/kaizen-ui 0.0.3 → 0.0.5

package/README.md

@@ -23,6 +23,7 @@ npx @yberagroup/kaizen-ui init
 O comando cria/atualiza:
 - `tailwind.config.cjs` com preset Kaizen
 - `postcss.config.cjs` com Tailwind + Autoprefixer
+- se existirem `tailwind.config.js`, `tailwind.config.mjs`, `postcss.config.js` ou `postcss.config.mjs` (ex.: template Vite), eles sao **removidos** para nao competir com os `.cjs`
 - import do tema no arquivo de entrada (`src/main.tsx`, `src/index.tsx`, `app/layout.tsx`, etc.) **ou**, no modo migracao, no seu CSS global
 
 Temas suportados no wizard:
@@ -47,12 +48,25 @@ Com **varios** candidatos e **nenhum** importado pelo entry, o wizard lista os a
 
 ## Configuracao Tailwind (consumidor)
 
+O Tailwind so gera classes que aparecem nos arquivos listados em `content`. As classes dos componentes (`text-kz-*`, `font-kz-*`, `rounded-kz-*`, etc.) ficam no **JS compilado** em `node_modules/@yberagroup/kaizen-ui/dist`. Por isso e obrigatorio incluir esse caminho; o `init` ja faz isso com `require.resolve`.
+
 No `tailwind.config.cjs`:
 
 ```js
+const path = require("path");
+
+const kaizenUiRoot = path.dirname(
+  require.resolve("@yberagroup/kaizen-ui/tailwind-preset"),
+);
+
 module.exports = {
   presets: [require("@yberagroup/kaizen-ui/tailwind-preset")],
-  content: ["./src/**/*.{js,ts,jsx,tsx}", "./index.html"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    path.join(kaizenUiRoot, "dist", "**", "*.{js,mjs}"),
+  ],
   darkMode: "class",
 };
 ```

package/bin/kaizen-ui.mjs

@@ -1,5 +1,11 @@
 #!/usr/bin/env node
-import { readFileSync, writeFileSync, existsSync, copyFileSync } from "node:fs";
+import {
+  readFileSync,
+  writeFileSync,
+  existsSync,
+  copyFileSync,
+  unlinkSync,
+} from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
 import process from "node:process";
 import { createInterface } from "node:readline/promises";
@@ -91,6 +97,39 @@ function ensureLocalCssImportInEntry(entryPath, cssAbsPath) {
   return true;
 }
 
+function escapeForRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/** Import ESM do pacote (aspas simples ou duplas). */
+function hasPackageImportOfPath(source, importPath) {
+  const esc = escapeForRegExp(importPath);
+  return new RegExp(`import\\s+["']${esc}["']`).test(source);
+}
+
+/** @import do tema dentro de CSS. */
+function cssImportsKaizenTheme(cssSource, importPath) {
+  const esc = escapeForRegExp(importPath);
+  if (new RegExp(`@import\\s+["']${esc}["']`).test(cssSource)) return true;
+  return cssSource.includes(importPath);
+}
+
+/**
+ * O tema Kaizen está acessível: import direto no entry ou @import em algum .css
+ * importado pelo entry (cadeia simples a partir do entry).
+ */
+function entryReachableKaizenTheme(entryPath, theme) {
+  const importPath = THEME_IMPORT[theme];
+  const entrySrc = readFileSync(entryPath, "utf-8");
+  if (hasPackageImportOfPath(entrySrc, importPath)) return true;
+  for (const abs of findCssImportsFromEntry(entryPath)) {
+    if (!existsSync(abs)) continue;
+    const css = readFileSync(abs, "utf-8");
+    if (cssImportsKaizenTheme(css, importPath)) return true;
+  }
+  return false;
+}
+
 function removeKaizenThemeImportsFromEntry(entryPath) {
   let source = readFileSync(entryPath, "utf-8");
   const lines = source.split("\n");
@@ -112,9 +151,9 @@ function removeKaizenThemeImportsFromEntry(entryPath) {
 
 function ensureImportInEntry(entryPath, importPath) {
   const source = readFileSync(entryPath, "utf-8");
-  const importLine = `import "${importPath}";`;
-  if (source.includes(importLine)) return false;
+  if (hasPackageImportOfPath(source, importPath)) return false;
 
+  const importLine = `import "${importPath}";`;
   const nextSource = `${importLine}\n${source}`;
   writeFileSync(entryPath, nextSource, "utf-8");
   return true;
@@ -123,12 +162,19 @@ function ensureImportInEntry(entryPath, importPath) {
 function writeTailwindConfig(cwd) {
   const file = join(cwd, "tailwind.config.cjs");
   const content = `/** @type {import('tailwindcss').Config} */
+const path = require("path");
+
+const kaizenUiRoot = path.dirname(
+  require.resolve("@yberagroup/kaizen-ui/tailwind-preset"),
+);
+
 module.exports = {
   presets: [require("@yberagroup/kaizen-ui/tailwind-preset")],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
     "./app/**/*.{js,ts,jsx,tsx}",
+    path.join(kaizenUiRoot, "dist", "**", "*.{js,mjs}"),
   ],
   darkMode: "class",
 };
@@ -148,6 +194,24 @@ function writePostcssConfig(cwd) {
   writeFileSync(file, content, "utf-8");
 }
 
+/** Remove configs legadas (.js/.mjs) para o Tailwind/PostCSS nao carregarem o arquivo errado ao lado do .cjs. */
+function removeConflictingToolingConfigs(cwd) {
+  const names = [
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "postcss.config.js",
+    "postcss.config.mjs",
+  ];
+  for (const name of names) {
+    const abs = join(cwd, name);
+    if (!existsSync(abs)) continue;
+    unlinkSync(abs);
+    logStep(
+      `Removido ${name} (evita conflito com ${name.replace(/\.(js|mjs)$/i, ".cjs")}).`,
+    );
+  }
+}
+
 async function runInit() {
   const cwd = process.cwd();
   const rl = createInterface({ input, output });
@@ -193,6 +257,8 @@ async function runInit() {
   writePostcssConfig(cwd);
   logStep("postcss.config.cjs criado/atualizado.");
 
+  removeConflictingToolingConfigs(cwd);
+
   const themeImport = THEME_IMPORT[theme];
 
   if (cssStrategy === "migrate") {
@@ -253,6 +319,15 @@ async function runInit() {
     }
   }
 
+  if (!entryReachableKaizenTheme(entryPath, theme)) {
+    const fixed = ensureImportInEntry(entryPath, themeImport);
+    if (fixed) {
+      logStep(
+        `Import do tema ${theme} garantido em ${relative(cwd, entryPath) || entryPath} (verificação final).`,
+      );
+    }
+  }
+
   rl.close();
   logStep("Concluído.");
   output.write(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yberagroup/kaizen-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "private": false,
   "scripts": {
@@ -9,7 +9,7 @@
     "prepublishOnly": "npm run build && npm run lint"
   },
   "dependencies": {
-    "@yberagroup/kaizen-tokens": "^0.0.3",
+    "@yberagroup/kaizen-tokens": "^0.0.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

package/src/styles/globals.base.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@500;600&family=Syne:wght@500;600&display=swap");
+
 @import "@yberagroup/kaizen-tokens/foundations.css";
 @tailwind base;
 @tailwind components;