@jvxtor-react/cli 1.0.1 → 1.0.3

package/bin/index.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+import { cancel, intro, isCancel, log, multiselect, outro, select } from "@clack/prompts";
+import { detectPM, install } from "../src/utils.js";
+import { setupAxios, setupFetch } from "../src/http.js";
+import { setupReactRouter } from "../src/router.js";
+import { setupShadcn } from "../src/shadcn.js";
+
+const comando = process.argv[2];
+
+if (comando !== "init") {
+  console.log("Uso: npx @jvxtor-react/cli init");
+  process.exit(0);
+}
+
+intro("@jvxtor-react/cli");
+
+const categorias = await multiselect({
+  message: "O que você quer instalar?",
+  options: [
+    { value: "estilizacao", label: "Estilização" },
+    { value: "http", label: "Cliente HTTP" },
+    { value: "roteamento", label: "Roteamento" },
+  ],
+  required: true,
+});
+
+if (isCancel(categorias)) {
+  cancel("Cancelado.");
+  process.exit(0);
+}
+
+try {
+  if (categorias.includes("estilizacao")) {
+    const escolha = await select({
+      message: "Qual lib de estilização você quer instalar?",
+      options: [
+        { value: "shadcn", label: "shadcn + Tailwind CSS" },
+        { value: "antd", label: "Ant Design" },
+        { value: "bootstrap", label: "Bootstrap" },
+      ],
+    });
+
+    if (isCancel(escolha)) {
+      cancel("Cancelado.");
+      process.exit(0);
+    }
+
+    if (escolha === "shadcn") setupShadcn();
+
+    if (escolha === "antd") install(detectPM(), ["antd"]);
+
+    if (escolha === "bootstrap") {
+      install(detectPM(), ["bootstrap"]);
+      log.info(
+        'Importe no seu main: import "bootstrap/dist/css/bootstrap.min.css"',
+      );
+    }
+  }
+
+  if (categorias.includes("http")) {
+    const cliente = await select({
+      message: "Qual cliente HTTP você quer usar?",
+      options: [
+        { value: "axios", label: "axios (recomendado)" },
+        { value: "fetch", label: "fetch" },
+      ],
+    });
+
+    if (isCancel(cliente)) {
+      cancel("Cancelado.");
+      process.exit(0);
+    }
+
+    if (cliente === "axios") setupAxios();
+
+    if (cliente === "fetch") setupFetch();
+  }
+
+  if (categorias.includes("roteamento")) {
+    const roteador = await select({
+      message: "Qual lib de roteamento você quer usar?",
+      options: [
+        { value: "react-router", label: "React Router (recomendado)" },
+        { value: "tanstack-router", label: "TanStack Router" },
+      ],
+    });
+
+    if (isCancel(roteador)) {
+      cancel("Cancelado.");
+      process.exit(0);
+    }
+
+    if (roteador === "react-router") setupReactRouter();
+
+    // TODO: implementar TanStack Router
+  }
+
+  outro("Pronto!");
+} catch (err) {
+  log.error(err.message);
+  process.exit(1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvxtor-react/cli",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "CLI para configurar a lib de estilização em projetos React + Vite",
   "type": "module",
   "bin": {

package/src/http.js

@@ -0,0 +1,110 @@
+import fs from "node:fs"
+import path from "node:path"
+import { log } from "@clack/prompts"
+import { detectPM, install } from "./utils.js"
+
+const API_TS = `import axios from "axios"
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  timeout: 10000,
+  headers: { "Content-Type": "application/json" },
+})
+
+// Interceptor de requisição (ex.: anexar token)
+api.interceptors.request.use(
+  (config) => {
+    // const token = localStorage.getItem("token")
+    // if (token) config.headers.Authorization = \`Bearer \${token}\`
+    return config
+  },
+  (error) => Promise.reject(error),
+)
+
+// Interceptor de resposta (tratamento global de erros)
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // const status = error.response?.status
+    // if (status === 401) {
+    //   localStorage.removeItem("token")
+    //   window.location.href = "/login"
+    // }
+    // if (status === 403) { /* sem permissão */ }
+    // if (status >= 500) { /* erro no servidor */ }
+    return Promise.reject(error)
+  },
+)
+`
+
+const ENDPOINTS_TS = `// Configuração central dos endpoints
+// import { api } from "./api"
+
+// export const endpoints = {
+//   users: "/users",
+//   userById: (id: string | number) => \`/users/\${id}\`,
+//   login: "/auth/login",
+// }
+
+// Exemplo de uso:
+// export const getUsers = () => api.get(endpoints.users)
+`
+
+const FETCH_TS = `const BASE_URL = import.meta.env.VITE_API_URL
+
+export async function api<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const res = await fetch(BASE_URL + path, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...options.headers },
+  })
+
+  if (!res.ok) throw new Error(\`Erro \${res.status}\`)
+  return res.json()
+}
+`
+
+const toJs = (src) =>
+  src
+    .replace(/: string \| number/g, "")
+
+function writeServices(cwd, files, ts) {
+  const ext = ts ? "ts" : "js"
+  const dir = path.join(cwd, "src", "services")
+  fs.mkdirSync(dir, { recursive: true })
+
+  for (const [base, content] of Object.entries(files)) {
+    const name = `${base}.${ext}`
+    const file = path.join(dir, name)
+    if (fs.existsSync(file)) {
+      log.warn(`src/services/${name} já existe, pulando.`)
+      continue
+    }
+    fs.writeFileSync(file, content)
+  }
+
+  const env = path.join(cwd, ".env")
+  if (!fs.existsSync(env)) {
+    fs.writeFileSync(env, "VITE_API_URL=http://localhost:3000\n")
+  }
+  log.info("Criado src/services e .env com VITE_API_URL.")
+}
+
+export function setupFetch(cwd = process.cwd()) {
+  const ts = fs.existsSync(path.join(cwd, "tsconfig.json"))
+  const js = FETCH_TS.replace("<T>", "")
+    .replace(": string", "")
+    .replace(": RequestInit", "")
+    .replace(": Promise<T>", "")
+  writeServices(cwd, { api: ts ? FETCH_TS : js }, ts)
+}
+
+export function setupAxios(cwd = process.cwd()) {
+  install(detectPM(cwd), ["axios"], { cwd })
+
+  const ts = fs.existsSync(path.join(cwd, "tsconfig.json"))
+  writeServices(
+    cwd,
+    { api: API_TS, endpoints: ts ? ENDPOINTS_TS : toJs(ENDPOINTS_TS) },
+    ts,
+  )
+}

package/src/router.js

@@ -0,0 +1,85 @@
+import fs from "node:fs"
+import path from "node:path"
+import { log } from "@clack/prompts"
+import { detectPM, install } from "./utils.js"
+
+const ROUTER = `import { createBrowserRouter } from "react-router"
+import Home from "./pages/Home"
+import NotFound from "./pages/NotFound"
+
+export const router = createBrowserRouter([
+  { path: "/", element: <Home /> },
+  { path: "*", element: <NotFound /> },
+])
+`
+
+const HOME = `export default function Home() {
+  return (
+    <div>
+      <h1>Página inicial</h1>
+    </div>
+  )
+}
+`
+
+const NOT_FOUND = `import { Link } from "react-router"
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>404</h1>
+      <p>Página não encontrada.</p>
+      <Link to="/">Voltar para o início</Link>
+    </div>
+  )
+}
+`
+
+function writeIfMissing(file, content, cwd) {
+  const rel = path.relative(cwd, file)
+  if (fs.existsSync(file)) {
+    log.warn(`${rel} já existe, pulando.`)
+    return
+  }
+  fs.mkdirSync(path.dirname(file), { recursive: true })
+  fs.writeFileSync(file, content)
+}
+
+// Troca <App /> por <RouterProvider /> no main
+function patchMain(cwd, ext) {
+  const file = path.join(cwd, "src", `main.${ext}`)
+  if (!fs.existsSync(file)) {
+    log.warn(`src/main.${ext} não encontrado. Use <RouterProvider router={router} /> manualmente.`)
+    return
+  }
+
+  let src = fs.readFileSync(file, "utf8")
+  if (src.includes("RouterProvider")) return
+
+  src = src
+    .replace(/^import App from .*\r?\n/m, "")
+    .replace(/<App\s*\/>/, "<RouterProvider router={router} />")
+
+  const imports =
+    'import { RouterProvider } from "react-router/dom"\nimport { router } from "./router"\n'
+  const lastImport = [...src.matchAll(/^import .*\r?\n/gm)].pop()
+  const at = lastImport ? lastImport.index + lastImport[0].length : 0
+  src = src.slice(0, at) + imports + src.slice(at)
+
+  fs.writeFileSync(file, src)
+}
+
+export function setupReactRouter(cwd = process.cwd()) {
+  install(detectPM(cwd), ["react-router"], { cwd })
+
+  const ts = fs.existsSync(path.join(cwd, "tsconfig.json"))
+  const ext = ts ? "tsx" : "jsx"
+  const src = path.join(cwd, "src")
+
+  writeIfMissing(path.join(src, `router.${ext}`), ROUTER, cwd)
+  writeIfMissing(path.join(src, "pages", `Home.${ext}`), HOME, cwd)
+  writeIfMissing(path.join(src, "pages", `NotFound.${ext}`), NOT_FOUND, cwd)
+  patchMain(cwd, ext)
+
+  log.info("React Router configurado: / (Home) e * (NotFound).")
+}

package/src/shadcn.js

@@ -0,0 +1,141 @@
+import fs from "node:fs"
+import path from "node:path"
+import { applyEdits, modify } from "jsonc-parser"
+import { log } from "@clack/prompts"
+import {
+  detectPM,
+  execPackage,
+  findClosingBracket,
+  install,
+} from "./utils.js"
+
+const VITE_CONFIGS = [
+  "vite.config.ts",
+  "vite.config.mts",
+  "vite.config.js",
+  "vite.config.mjs",
+]
+
+const ALIAS_SNIPPET = `resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  }`
+
+// 2. vite.config: plugin do Tailwind + alias "@"
+export function patchViteConfig(cwd) {
+  const file = VITE_CONFIGS.map((f) => path.join(cwd, f)).find((f) =>
+    fs.existsSync(f)
+  )
+  if (!file) {
+    log.warn("vite.config não encontrado. Adicione o plugin e o alias manualmente.")
+    return
+  }
+
+  let src = fs.readFileSync(file, "utf8")
+  const imports = []
+
+  if (!/from\s+["'](node:)?path["']/.test(src)) {
+    imports.push('import path from "path"')
+  }
+  if (!src.includes("@tailwindcss/vite")) {
+    imports.push('import tailwindcss from "@tailwindcss/vite"')
+  }
+
+  const pluginsIdx = src.search(/plugins\s*:\s*\[/)
+  if (pluginsIdx === -1) {
+    log.warn(`Não achei "plugins: [...]" em ${path.basename(file)}. Adicione tailwindcss() e o alias manualmente.`)
+    return
+  }
+  const open = src.indexOf("[", pluginsIdx)
+  const close = findClosingBracket(src, open)
+  if (close === -1) {
+    log.warn(`Não consegui interpretar ${path.basename(file)}. Edite manualmente.`)
+    return
+  }
+
+  let inner = src.slice(open + 1, close)
+  if (!/tailwindcss\s*\(/.test(inner)) {
+    const trimmed = inner.trimEnd()
+    const sep = trimmed === "" ? "" : trimmed.endsWith(",") ? " " : ", "
+    inner = trimmed + sep + "tailwindcss()"
+  }
+
+  let after = src.slice(close + 1)
+  if (!/resolve\s*:/.test(src)) {
+    after = `,\n  ${ALIAS_SNIPPET}` + after
+  } else if (!/alias\s*:/.test(src)) {
+    log.warn('Já existe "resolve" no vite.config sem "alias". Adicione o alias "@" manualmente.')
+  }
+
+  src = src.slice(0, open + 1) + inner + "]" + after
+  if (imports.length) src = imports.join("\n") + "\n" + src
+
+  fs.writeFileSync(file, src)
+  log.success(`${path.basename(file)} atualizado`)
+}
+
+// 3. CSS com @import "tailwindcss"
+export function writeCss(cwd) {
+  const file = path.join(cwd, "src", "index.css")
+  fs.mkdirSync(path.dirname(file), { recursive: true })
+  fs.writeFileSync(file, '@import "tailwindcss";\n')
+  log.success("src/index.css atualizado")
+}
+
+function addAlias(file) {
+  let text = fs.readFileSync(file, "utf8")
+  const fmt = { formattingOptions: { insertSpaces: true, tabSize: 2 } }
+  text = applyEdits(text, modify(text, ["compilerOptions", "baseUrl"], ".", fmt))
+  text = applyEdits(
+    text,
+    modify(text, ["compilerOptions", "paths"], { "@/*": ["./src/*"] }, fmt)
+  )
+  fs.writeFileSync(file, text)
+  log.success(`${path.basename(file)} atualizado`)
+}
+
+// 4. Alias no TypeScript (ou jsconfig.json em projetos JS)
+export function patchTsconfig(cwd) {
+  const ts = fs.existsSync(path.join(cwd, "tsconfig.json"))
+  if (!ts) {
+    const js = path.join(cwd, "jsconfig.json")
+    if (!fs.existsSync(js)) fs.writeFileSync(js, "{}\n")
+    addAlias(js)
+    return
+  }
+  addAlias(path.join(cwd, "tsconfig.json"))
+  const app = path.join(cwd, "tsconfig.app.json")
+  if (fs.existsSync(app)) addAlias(app)
+}
+
+export function setupShadcn(cwd = process.cwd()) {
+  const pkgPath = path.join(cwd, "package.json")
+  if (!fs.existsSync(pkgPath)) {
+    throw new Error("package.json não encontrado. Rode o comando na raiz do projeto.")
+  }
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"))
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies }
+  if (!deps.vite) {
+    throw new Error("Este projeto não parece usar Vite.")
+  }
+
+  const pm = detectPM(cwd)
+  const isTs = fs.existsSync(path.join(cwd, "tsconfig.json"))
+
+  log.step("1/5 Instalando Tailwind e o plugin do Vite")
+  install(pm, ["tailwindcss", "@tailwindcss/vite"], { cwd })
+  if (isTs) install(pm, ["@types/node"], { dev: true, cwd })
+
+  log.step("2/5 Configurando vite.config")
+  patchViteConfig(cwd)
+
+  log.step("3/5 Configurando o CSS")
+  writeCss(cwd)
+
+  log.step("4/5 Configurando o alias @")
+  patchTsconfig(cwd)
+
+  log.step("5/5 Inicializando o shadcn")
+  execPackage(pm, "shadcn@latest init", { cwd })
+}

package/src/utils.js

@@ -0,0 +1,44 @@
+import fs from "node:fs"
+import path from "node:path"
+import { execSync } from "node:child_process"
+
+export function detectPM(cwd = process.cwd()) {
+  const has = (f) => fs.existsSync(path.join(cwd, f))
+  if (has("pnpm-lock.yaml")) return "pnpm"
+  if (has("yarn.lock")) return "yarn"
+  if (has("bun.lockb") || has("bun.lock")) return "bun"
+  return "npm"
+}
+
+const COMMANDS = {
+  npm: { add: "npm install", addDev: "npm install -D", exec: "npx" },
+  pnpm: { add: "pnpm add", addDev: "pnpm add -D", exec: "pnpm dlx" },
+  yarn: { add: "yarn add", addDev: "yarn add -D", exec: "npx" },
+  bun: { add: "bun add", addDev: "bun add -d", exec: "bunx" },
+}
+
+export function run(cmd, cwd = process.cwd()) {
+  execSync(cmd, { stdio: "inherit", cwd })
+}
+
+export function install(pm, packages, { dev = false, cwd } = {}) {
+  const base = dev ? COMMANDS[pm].addDev : COMMANDS[pm].add
+  run(`${base} ${packages.join(" ")}`, cwd)
+}
+
+export function execPackage(pm, command, { cwd } = {}) {
+  run(`${COMMANDS[pm].exec} ${command}`, cwd)
+}
+
+// Acha o índice do "]" que fecha o "[" em openIndex (considera colchetes aninhados)
+export function findClosingBracket(src, openIndex) {
+  let depth = 0
+  for (let i = openIndex; i < src.length; i++) {
+    if (src[i] === "[") depth++
+    if (src[i] === "]") {
+      depth--
+      if (depth === 0) return i
+    }
+  }
+  return -1
+}