@jvxtor-react/cli 1.0.2 → 1.0.3

package/bin/index.js

@@ -1,45 +1,102 @@
-#!/usr/bin/env node
-import { cancel, intro, isCancel, log, outro, select } from "@clack/prompts";
-import { detectPM, install } from "../src/utils.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 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);
-}
-
-try {
-  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"',
-    );
-  }
-
-  outro("Pronto!");
-} catch (err) {
-  log.error(err.message);
-  process.exit(1);
-}
+#!/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.2",
+  "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).")
+}