npm - tailjng - Versions diffs - 0.0.62 → 0.1.0 - Mend

tailjng 0.0.62 → 0.1.0

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.

Files changed (54) hide show

package/cli/settings/project-utils.js ADDED Viewed

@@ -0,0 +1,220 @@
+const fs = require('fs');
+const path = require('path');
+const { COLORS } = require('./colors');
+function findAngularWorkspace(startDir) {
+  let dir = path.resolve(startDir);
+  while (true) {
+    const angularJsonPath = path.join(dir, 'angular.json');
+    if (fs.existsSync(angularJsonPath)) {
+      return { workspaceRoot: dir, angularJsonPath };
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+function readJson(filePath) {
+  return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+function writeJson(filePath, data) {
+  fs.writeFileSync(filePath, `${JSON.stringify(data, null, 2)}\n`, 'utf8');
+}
+function getApplicationProjects(angularJson) {
+  return Object.entries(angularJson.projects || {})
+    .filter(([, project]) => project.projectType === 'application')
+    .map(([name, project]) => ({
+      name,
+      root: project.root || '',
+      sourceRoot: project.sourceRoot || 'src',
+    }));
+}
+function resolveAppPaths(workspaceRoot, appProject) {
+  const appRoot = path.join(workspaceRoot, appProject.root);
+  const srcRoot = path.join(workspaceRoot, appProject.sourceRoot);
+  return { appRoot, srcRoot };
+}
+function getBuildOptions(angularJson, projectName) {
+  return angularJson.projects?.[projectName]?.architect?.build?.options || {};
+}
+function detectStyleLanguage(buildOptions) {
+  if (buildOptions.inlineStyleLanguage === 'scss') return 'scss';
+  const styles = buildOptions.styles || [];
+  const first = styles.find((s) => typeof s === 'string');
+  if (first && first.endsWith('.scss')) return 'scss';
+  return 'css';
+}
+function getPrimaryStyleEntry(buildOptions) {
+  const styles = buildOptions.styles || [];
+  const first = styles.find((s) => typeof s === 'string');
+  return first || 'src/styles.css';
+}
+function fileExists(filePath) {
+  return fs.existsSync(filePath);
+}
+function writeFileSafe(filePath, content, overwrite = false) {
+  if (fs.existsSync(filePath) && !overwrite) {
+    return false;
+  }
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content, 'utf8');
+  return true;
+}
+function ensureTailjngStylesInAngularJson(angularJsonPath, projectName, styleLanguage) {
+  const angularJson = readJson(angularJsonPath);
+  const buildOptions = getBuildOptions(angularJson, projectName);
+  const styles = buildOptions.styles || [];
+  const tailjngStyle = 'node_modules/tailjng/src/styles.css';
+  if (styles.includes(tailjngStyle)) {
+    return { changed: false, angularJson };
+  }
+  buildOptions.styles = [...styles, tailjngStyle];
+  angularJson.projects[projectName].architect.build.options = buildOptions;
+  writeJson(angularJsonPath, angularJson);
+  return { changed: true, angularJson };
+}
+function patchIndexHtml(indexPath) {
+  if (!fs.existsSync(indexPath)) return false;
+  let html = fs.readFileSync(indexPath, 'utf8');
+  let changed = false;
+  if (!html.includes('scroll-screen')) {
+    html = html.replace(
+      /<body([^>]*)>/i,
+      (match, attrs) => {
+        if (attrs.includes('class=')) {
+          return match.replace(
+            /class=(["'])(.*?)\1/i,
+            (_, q, classes) => `class=${q}${classes} bg-background dark:bg-dark-background transition duration-300 scroll-screen${q}`,
+          );
+        }
+        return '<body class="bg-background dark:bg-dark-background transition duration-300 scroll-screen">';
+      },
+    );
+    changed = true;
+  }
+  if (!html.includes('translate="no"')) {
+    html = html.replace(/<html([^>]*)>/i, '<html$1 translate="no">');
+    changed = true;
+  }
+  if (changed) {
+    fs.writeFileSync(indexPath, html, 'utf8');
+  }
+  return changed;
+}
+function insertLinesAfterImports(content, linesToInsert) {
+  const lines = content.split('\n');
+  let lastImport = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (lines[i].startsWith('import ')) lastImport = i;
+  }
+  const block = linesToInsert.filter(Boolean);
+  if (lastImport === -1) return `${block.join('\n')}\n${content}`;
+  lines.splice(lastImport + 1, 0, ...block);
+  return lines.join('\n');
+}
+function patchAppConfig(appConfigPath) {
+  if (!fs.existsSync(appConfigPath)) return { changed: false, created: false };
+  let content = fs.readFileSync(appConfigPath, 'utf8');
+  if (content.includes('tailjngProviders') || content.includes('TAILJNG_CONFIG')) {
+    return { changed: false, created: false };
+  }
+  content = insertLinesAfterImports(content, [
+    "import { tailjngProviders } from './config/tailjng.providers';",
+  ]);
+  if (content.includes('providers: [')) {
+    content = content.replace(/providers:\s*\[/, 'providers: [\n    ...tailjngProviders,');
+  }
+  fs.writeFileSync(appConfigPath, content, 'utf8');
+  return { changed: true, created: false };
+}
+function patchAppComponentForAlerts(appComponentTsPath, appComponentHtmlPath) {
+  if (!fs.existsSync(appComponentTsPath) || !fs.existsSync(appComponentHtmlPath)) {
+    return { changed: false };
+  }
+  let ts = fs.readFileSync(appComponentTsPath, 'utf8');
+  let html = fs.readFileSync(appComponentHtmlPath, 'utf8');
+  let changed = false;
+  const tsImports = [
+    "import { JAlertDialogComponent } from './tailjng/alert/alert-dialog/dialog-alert.component';",
+    "import { JAlertToastComponent } from './tailjng/alert/alert-toast/toast-alert.component';",
+  ];
+  for (const imp of tsImports) {
+    if (!ts.includes(imp)) {
+      ts = insertLinesAfterImports(ts, [imp]);
+      changed = true;
+    }
+  }
+  if (ts.includes('imports: [') && !/imports:\s*\[[^\]]*JAlertDialogComponent/.test(ts)) {
+    ts = ts.replace(/imports:\s*\[/, 'imports: [JAlertDialogComponent, JAlertToastComponent, ');
+    changed = true;
+  }
+  const shell = `<!-- tailjng:shell -->
+<JAlertDialog></JAlertDialog>
+<JAlertToast></JAlertToast>
+<!-- /tailjng:shell -->`;
+  if (!html.includes('tailjng:shell')) {
+    html = `${html.trim()}\n\n${shell}\n`;
+    changed = true;
+  }
+  if (changed) {
+    fs.writeFileSync(appComponentTsPath, ts, 'utf8');
+    fs.writeFileSync(appComponentHtmlPath, html, 'utf8');
+  }
+  return { changed };
+}
+function getMissingPackages(packageJson, packages) {
+  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  return Object.entries(packages).filter(([name]) => !deps[name]);
+}
+module.exports = {
+  findAngularWorkspace,
+  readJson,
+  writeJson,
+  getApplicationProjects,
+  resolveAppPaths,
+  getBuildOptions,
+  detectStyleLanguage,
+  getPrimaryStyleEntry,
+  writeFileSafe,
+  ensureTailjngStylesInAngularJson,
+  patchIndexHtml,
+  patchAppConfig,
+  patchAppComponentForAlerts,
+  getMissingPackages,
+  fileExists,
+};

package/cli/settings/prompt-utils.js CHANGED Viewed

@@ -2,6 +2,7 @@
 const readline = require("readline")
 const { COLORS } = require("./colors")
+const { getOverwritePolicy, setOverwritePolicy } = require("./overwrite-policy")
 function createReadlineInterface() {
     return readline.createInterface({
@@ -20,20 +21,80 @@ function askQuestion(question) {
     })
 }
+/**
+ * Ask once how to handle components that already exist in the project.
+ */
+async function askOverwriteStrategy(existingCount, componentNames = []) {
+    console.log("")
+    console.log(
+        `${COLORS.yellow}${COLORS.bright}⚠ [tailjng CLI]${COLORS.reset} ${COLORS.yellow}${existingCount} component(s) already exist in your project.${COLORS.reset}`,
+    )
+    if (componentNames.length > 0 && componentNames.length <= 8) {
+        console.log(`${COLORS.dim}   ${componentNames.join(", ")}${COLORS.reset}`)
+    } else if (componentNames.length > 8) {
+        console.log(`${COLORS.dim}   ${componentNames.slice(0, 8).join(", ")}... (+${componentNames.length - 8} more)${COLORS.reset}`)
+    }
+    console.log("")
+    console.log(`${COLORS.cyan}How do you want to handle existing components?${COLORS.reset}`)
+    console.log(`${COLORS.dim}  [1] Ask for each one individually (default)${COLORS.reset}`)
+    console.log(`${COLORS.dim}  [2] Overwrite all${COLORS.reset}`)
+    console.log(`${COLORS.dim}  [3] Skip all (keep your versions)${COLORS.reset}`)
+    console.log("")
+    const answer = await askQuestion(`${COLORS.cyan}Choice (1/2/3) [1]: ${COLORS.reset}`)
+    if (answer === "2" || answer === "all" || answer === "a" || answer === "y") {
+        setOverwritePolicy("all")
+        console.log(`${COLORS.green}   → Will overwrite all existing components.${COLORS.reset}\n`)
+        return
+    }
+    if (answer === "3" || answer === "skip" || answer === "s" || answer === "n") {
+        setOverwritePolicy("skip")
+        console.log(`${COLORS.yellow}   → Will keep all your existing components.${COLORS.reset}\n`)
+        return
+    }
+    setOverwritePolicy("ask")
+    console.log(`${COLORS.cyan}   → Will ask for each component individually.${COLORS.reset}\n`)
+}
 async function askOverwrite(componentName, targetPath, isDependency = false) {
-    const componentType = isDependency ? "dependency component" : "component"
+    const currentPolicy = getOverwritePolicy()
+    if (currentPolicy === "all") return true
+    if (currentPolicy === "skip") return false
+    const componentType = isDependency ? "dependency" : "component"
+    console.log("")
     console.log(
-        `${COLORS.yellow}${COLORS.bright}⚠ [tailjng CLI] WARNING:${COLORS.reset} ${COLORS.yellow}${componentType} ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}already exists!${COLORS.reset}`,
+        `${COLORS.yellow}${COLORS.bright}⚠ [tailjng CLI]${COLORS.reset} ${COLORS.yellow}The ${componentType} ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}is already installed.${COLORS.reset}`,
     )
     console.log(`${COLORS.dim}   Path: ${targetPath}${COLORS.reset}`)
     console.log(
-        `${COLORS.yellow}   This component may have been modified. Overwriting will replace your changes.${COLORS.reset}`,
+        `${COLORS.yellow}   If you modified it, overwriting will replace your changes with the library version.${COLORS.reset}`,
     )
-    const answer = await askQuestion(`${COLORS.cyan}   Do you want to overwrite it? (y/N): ${COLORS.reset}`)
+    const answer = await askQuestion(
+        `${COLORS.cyan}   Overwrite? (y/N/a=all remaining/s=skip remaining): ${COLORS.reset}`,
+    )
+    if (answer === "a" || answer === "all") {
+        setOverwritePolicy("all")
+        console.log(`${COLORS.green}   → Overwriting this and all remaining existing components.${COLORS.reset}`)
+        return true
+    }
+    if (answer === "s" || answer === "skip") {
+        setOverwritePolicy("skip")
+        console.log(`${COLORS.yellow}   → Keeping this and all remaining existing components.${COLORS.reset}`)
+        return false
+    }
     return answer === "y" || answer === "yes"
 }
-module.exports = { askOverwrite }
+module.exports = { askOverwrite, askOverwriteStrategy }

package/cli/templates/app.generator.js ADDED Viewed

@@ -0,0 +1,382 @@
+function buildDefaultThemeBlock() {
+  return `@theme {
+  --color-background: #F0F1F4;
+  --color-foreground: #18191A;
+  --color-card: #E1E4E9;
+  --color-card-foreground: #242528;
+  --color-popover: #F0F1F4;
+  --color-popover-foreground: #011231;
+  --color-primary: #405883;
+  --color-primary-foreground: #FFFFFF;
+  --color-secondary: #A5AEBF;
+  --color-secondary-foreground: #000000;
+  --color-muted: #D2DFDF;
+  --color-muted-foreground: #60646B;
+  --color-accent: #C3D4D4;
+  --color-accent-foreground: #242528;
+  --color-destructive: #BF3F3F;
+  --color-destructive-foreground: #E4E5E6;
+  --color-border: #6C7D9D;
+  --color-input: #667799;
+  --color-ring: #405883;
+  --color-radius: 0.5rem;
+  --color-dark-background: #15181D;
+  --color-dark-foreground: #E4E5E6;
+  --color-dark-card: #15181D;
+  --color-dark-card-foreground: #E4E5E6;
+  --color-dark-popover: #0A0C0E;
+  --color-dark-popover-foreground: #E4E5E6;
+  --color-dark-primary: #2d3f5e;
+  --color-dark-primary-foreground: #FFFFFF;
+  --color-dark-secondary: #2A303B;
+  --color-dark-secondary-foreground: #FFFFFF;
+  --color-dark-muted: #344A4A;
+  --color-dark-muted-foreground: #93979E;
+  --color-dark-accent: #344A4A;
+  --color-dark-accent-foreground: #E4E5E6;
+  --color-dark-destructive: #BF3F3F;
+  --color-dark-destructive-foreground: #E4E5E6;
+  --color-dark-border: #667799;
+  --color-dark-input: #667799;
+  --color-dark-ring: #405883;
+  --color-dark-radius: 0.5rem;
+}`;
+}
+function buildStylesCss() {
+  return `@import "tailwindcss";
+html,
+body {
+  font-family: 'Arial', sans-serif;
+  width: 100%;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+}
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+}
+@custom-variant dark (&:where(.dark, .dark *));
+${buildDefaultThemeBlock()}
+.dark {
+  --tw-bg-opacity: 1;
+  color: var(--white);
+}
+`;
+}
+function buildStylesScss() {
+  return `@use "tailwindcss";
+@use "./scss/scroll";
+@use "./scss/input";
+html,
+body {
+  font-family: 'Arial', sans-serif;
+  width: 100%;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+}
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+}
+@custom-variant dark (&:where(.dark, .dark *));
+${buildDefaultThemeBlock()}
+.dark {
+  --tw-bg-opacity: 1;
+  color: var(--white);
+}
+`;
+}
+function buildScrollScss() {
+  return `.scroll-element {
+  padding-right: 5px;
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--color-primary);
+    transition: 0.5s;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-dark-primary);
+  }
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
+}
+.scroll-screen {
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-dark-primary);
+    border: 3px solid var(--color-primary);
+    transition: 0.5s;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
+  }
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
+}
+.dark .scroll-screen {
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-dark-primary);
+    border: 3px solid var(--color-primary);
+    transition: 0.5s;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
+  }
+}
+`;
+}
+function buildInputScss() {
+  return `.input {
+  &:-webkit-autofill {
+    -webkit-text-fill-color: black !important;
+    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-primary) 15%, white) inset !important;
+    caret-color: var(--color-primary) !important;
+  }
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-text-fill-color: black !important;
+    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-primary) 15%, white) inset !important;
+    caret-color: var(--color-primary) !important;
+  }
+}
+.dark .input {
+  &:-webkit-autofill {
+    -webkit-text-fill-color: white !important;
+    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-dark-background) 85%, black) inset !important;
+    caret-color: var(--color-dark-primary) !important;
+  }
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-text-fill-color: white !important;
+    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-dark-background) 85%, black) inset !important;
+    caret-color: var(--color-dark-primary) !important;
+  }
+}
+.input[type="date"]::-webkit-calendar-picker-indicator,
+.input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  filter: none !important;
+  opacity: 1 !important;
+  color: black !important;
+  background-color: transparent !important;
+  -webkit-filter: brightness(0) invert(0) !important;
+}
+.dark .input[type="date"]::-webkit-calendar-picker-indicator,
+.dark .input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  filter: none !important;
+  opacity: 1 !important;
+  color: white !important;
+  background-color: transparent !important;
+  -webkit-filter: brightness(0) invert(1) !important;
+}
+`;
+}
+function buildEnvironmentTs(urlBase, socketUrl) {
+  return `export const environment = {
+  production: false,
+  urlBase: '${urlBase}',
+  socketUrl: '${socketUrl}',
+};
+`;
+}
+function buildTailjngProviders() {
+  return `import { CurrencyPipe } from '@angular/common';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { TAILJNG_CONFIG } from 'tailjng';
+import { environment } from '../../environment';
+export const tailjngProviders = [
+  provideHttpClient(),
+  provideAnimations(),
+  CurrencyPipe,
+  {
+    provide: TAILJNG_CONFIG,
+    useValue: {
+      urlBase: environment.urlBase,
+      socketUrl: environment.socketUrl,
+    },
+  },
+];
+`;
+}
+function buildAppConfigTs() {
+  return `import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { tailjngProviders } from './config/tailjng.providers';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    ...tailjngProviders,
+  ],
+};
+`;
+}
+function buildPostcssRc() {
+  return JSON.stringify(
+    {
+      plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+      },
+    },
+    null,
+    2,
+  );
+}
+function buildPathsJson(componentsPath) {
+  return JSON.stringify(
+    {
+      components: componentsPath,
+      stylesStrategy: 'angular-json-tailjng-styles',
+    },
+    null,
+    2,
+  );
+}
+function buildPathsReadme() {
+  return `# Tailjng — configuración del proyecto
+Este archivo define rutas usadas por el CLI de tailjng en este proyecto.
+- \`components\`: carpeta donde se copian los componentes UI (\`npx tailjng add\`)
+- Los servicios e interfaces se importan desde el paquete npm: \`import { ... } from 'tailjng'\`
+Generado por \`npx tailjng init:app\`.
+`;
+}
+function buildInitFiles(options) {
+  const {
+    styleLanguage,
+    primaryStylePath,
+    urlBase,
+    socketUrl,
+    componentsPath,
+    overwrite,
+  } = options;
+  const files = [
+    {
+      relativePath: '.postcssrc.json',
+      content: buildPostcssRc(),
+      appRootRelative: true,
+    },
+    {
+      relativePath: 'src/environment.ts',
+      content: buildEnvironmentTs(urlBase, socketUrl),
+    },
+    {
+      relativePath: 'src/app/config/tailjng.providers.ts',
+      content: buildTailjngProviders(),
+    },
+    {
+      relativePath: '.tailjng/paths.json',
+      content: buildPathsJson(componentsPath),
+      appRootRelative: true,
+    },
+    {
+      relativePath: '.tailjng/README.md',
+      content: buildPathsReadme(),
+      appRootRelative: true,
+    },
+  ];
+  if (styleLanguage === 'scss') {
+    files.push({
+      relativePath: primaryStylePath,
+      content: buildStylesScss(),
+    });
+    files.push({
+      relativePath: 'src/scss/_scroll.scss',
+      content: buildScrollScss(),
+    });
+    files.push({
+      relativePath: 'src/scss/_input.scss',
+      content: buildInputScss(),
+    });
+  } else {
+    files.push({
+      relativePath: primaryStylePath,
+      content: buildStylesCss(),
+    });
+  }
+  if (!options.hasAppConfig) {
+    files.push({
+      relativePath: 'src/app/app.config.ts',
+      content: buildAppConfigTs(),
+    });
+  }
+  return files.map((file) => ({ ...file, overwrite }));
+}
+module.exports = {
+  buildInitFiles,
+  buildAppConfigTs,
+};