tailjng 0.0.62 → 0.1.1

package/cli/templates/app.generator.js

@@ -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,
+};