@nutin/cli 1.3.1 → 2.1.0

package/templates/base/src/libs/popover/helpers/popover-dom.helper.ts.hbs

@@ -1,75 +0,0 @@
-import { ButtonManager } from "src/core/index.js";
-
-export interface IPopoverDomElements {
-	wrapper: HTMLElement;
-	overlay: HTMLElement;
-}
-
-export class PopoverDomHelper {
-	public static createDomElements(
-		content: HTMLElement, 
-		buttonManager: ButtonManager
-	): IPopoverDomElements {
-    const overlay = this.createOverlay();
-    const wrapper = this.createWrapper();
-    content = this.createContent(content);
-
-    this.appendCloseButton(content);
-    this.appendFooterButtons(content, buttonManager);
-
-    wrapper.appendChild(content);
-    overlay.appendChild(wrapper);
-    document.body.appendChild(overlay);
-
-    return { wrapper, overlay };
-  }
-
-  public static removeDomElements(overlay: HTMLElement | null, onRemoved?: () => void): null {
-    if (overlay) {
-      const wrapper = overlay.querySelector('.popover-wrapper');
-      overlay.classList.remove('show');
-      wrapper?.classList.remove('show');
-
-      setTimeout(() => {
-        wrapper?.remove();
-        overlay?.remove();
-        onRemoved?.();
-      }, 300); // match transition duration
-    }
-    return null;
-  }
-
-  private static createOverlay(): HTMLElement {
-    const overlay = document.createElement('div');
-    overlay.className = 'popover-overlay';
-    return overlay;
-  }
-
-  private static createWrapper(): HTMLElement {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'popover-wrapper';
-    return wrapper;
-  }
-
-  private static createContent(content: HTMLElement): HTMLElement {
-    content.classList.add('popover-content');
-    return content;
-  }
-
-  private static appendCloseButton(content: HTMLElement): void {
-    const closeButton = document.createElement('button');
-    closeButton.className = 'popover-close-button';
-    closeButton.innerHTML = '×';
-    closeButton.setAttribute('aria-label', 'Close');
-    // bind method onCloseClick
-    closeButton.setAttribute('data-event', 'click:onCloseClick');
-    content.prepend(closeButton);
-  }
-
-  private static appendFooterButtons(
-  	content: HTMLElement, 
-  	buttonManager: ButtonManager
-  ): void {
-    buttonManager.appendTo(content);
-  }
-}

package/templates/base/src/libs/popover/popover.ts.hbs

@@ -1,138 +0,0 @@
-import { View, ButtonManager, BaseButton, ComponentConfig, AppPipeRegistry, CatalogConfig, AppEventBus } from '../../core/index.js';
-import { FocusTrapHelper, IFocusTrapOptions } from './helpers/focus-trap.helper.js';
-import { IPopoverDomElements, PopoverDomHelper } from './helpers/popover-dom.helper.js';
-
-export interface PopoverButton extends BaseButton {
-  // if needed for Popover-specific properties
-}
-
-export interface PopoverOptions {
-  template: string;
-  components?: ComponentConfig[];
-  catalogs?: CatalogConfig[];
-  viewName?: string;
-  onClose?: () => void;
-  buttons?: PopoverButton[];
-  focusTrapOptions?: IFocusTrapOptions;
-}
-
-export class PopoverView extends View {
-  private _onClose?: () => void;
-  private _overlay: HTMLElement | null = null;
-  private _buttonManager: ButtonManager;
-  private _prevTitle: string | undefined;
-  private _catalogs: CatalogConfig[];
-  private _focusTrap: FocusTrapHelper | null = null;
-  private _focusTrapOptions: IFocusTrapOptions;
-  private _components: ComponentConfig[];
-
-  constructor({
-    template,
-    buttons = [],
-    onClose,
-    viewName,
-    components = [],
-    catalogs = [],
-    focusTrapOptions = {}
-  }: PopoverOptions) {
-    super({ template, tagName: 'div', mountTarget: 'body' });
-    this._onClose = onClose;
-    this._components = components;
-    this._catalogs = catalogs;
-    this._buttonManager = this.createButtonManager(buttons);
-    this.setOptionalViewName(viewName);
-    this._focusTrapOptions = focusTrapOptions;
-    AppEventBus.subscribe('popover-close', () => this.destroy());
-  }
-
-  public childConfigs(): ComponentConfig[] {
-    return [
-      ...this._components,
-      ...this.catalogConfigs()
-    ];
-  }
-
-  public catalogConfigs(): ComponentConfig[] {
-    const configs: ComponentConfig[] = []
-    this._catalogs.map((catalog) => {
-      configs.push(...this.catalogConfig(catalog));
-    })
-    return configs;
-  }
-
-  public override shouldUpdateMetaContent(): boolean {
-    return false;
-  }
-
-  public override render(): HTMLElement {
-    document.documentElement.classList.add('no-scroll');
-
-    const { wrapper, overlay } = this.createPopoverDomElements();
-
-    this._focusTrap = this.createFocusTrap(wrapper, overlay);
-    this._focusTrap.activate();
-
-    AppEventBus.emit('popover-opened');
-    this._overlay = overlay;
-    return overlay;
-  }
-
-  public override destroy(): void {
-    this._focusTrap?.deactivate();
-    if (this._prevTitle) document.title = this._prevTitle;
-
-    this._overlay = PopoverDomHelper.removeDomElements(this._overlay, () => {
-      document.documentElement.classList.remove('no-scroll');
-      super.destroy();
-      if (typeof this._onClose === 'function') {
-        this._onClose();
-      }
-    });
-  }
-
-  private setOptionalViewName(viewName: string | undefined): void {
-    if (viewName) {
-      this._prevTitle = document.title;
-      document.title = AppPipeRegistry.apply('capitalize', viewName);
-    }
-  }
-
-  private createButtonManager(buttons: PopoverButton[]): ButtonManager {
-    return new ButtonManager(
-      this, 
-      buttons, 
-      { containerClassName: 'popover-buttons' }
-    );
-  }
-
-  private createPopoverDomElements(): IPopoverDomElements {
-    const content = super.render();
-    const { overlay, wrapper } = PopoverDomHelper.createDomElements(content, this._buttonManager);
-
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    this.animateIn(wrapper);
-
-    return { overlay, wrapper };
-  }
-
-  private createFocusTrap(wrapper: HTMLElement, overlay: HTMLElement): FocusTrapHelper {
-    return new FocusTrapHelper({
-      container: wrapper,
-      overlay: overlay,
-      options: this._focusTrapOptions
-    });
-  }
-
-  // Handles the close button (via data-event bound in appendCloseButton)
-  private onCloseClick(): void {
-    this.destroy();
-  }
-
-  private animateIn(wrapper: HTMLElement): void {
-    requestAnimationFrame(() => {
-      this._overlay?.classList.add('show');
-      wrapper.classList.add('show');
-    });
-  }
-}

package/templates/base/src/libs/snackbar/snackbar.ts.hbs

@@ -1,75 +0,0 @@
-import {SecurityHelper} from "../../core/base-classes/base-component/helpers/security.helper.js";
-
-export type NotifyOptions = {
-  type?: 'info' | 'success' | 'error';
-  position?: 'top' | 'bottom';
-  duration?: number;
-  actionText?: string;
-  onAction?: () => void;
-};
-
-type SnackbarItem = {
-  message: string;
-  options: NotifyOptions;
-};
-
-const queue: SnackbarItem[] = [];
-let isDisplaying = false;
-
-/**
- * ```typescript
-type NotifyOptions = {
-  type?: 'info' | 'success' | 'error';
-  position?: 'top' | 'bottom';
-  duration?: number;
-  actionText?: string;
-  onAction?: () => void;
-};
-
-type SnackbarItem = {
-  message: string;
-  options: NotifyOptions;
-};
-```
-*/
-export function notify(message: string, options: NotifyOptions = {}): void {
-  queue.push({ message, options });
-  if (!isDisplaying) {
-    displayNext();
-  }
-}
-
-function displayNext(): void {
-  if (queue.length === 0) {
-    isDisplaying = false;
-    return;
-  }
-
-  isDisplaying = true;
-  let { message, options } = queue.shift()!;
-  let { type = 'info', position = 'bottom', duration = 3000, actionText, onAction } = options;
-  message = SecurityHelper.sanitizeTemplate(message);
-  actionText = SecurityHelper.sanitizeTemplate(actionText);
-  const snackbar = document.createElement('div');
-  snackbar.className = `app-snackbar app-snackbar--${type} app-snackbar--${position}`;
-  snackbar.innerHTML = `
-    <span>${message}</span>
-    ${actionText ? `<button>${actionText}</button>` : ''}
-  `;
-
-  document.body.appendChild(snackbar);
-
-  const remove = () => {
-    snackbar.remove();
-    displayNext();
-  };
-
-  if (actionText && onAction) {
-    snackbar.querySelector('button')?.addEventListener('click', () => {
-      onAction();
-      remove();
-    });
-  }
-
-  setTimeout(remove, duration);
-}

package/templates/base/src/styles/base/_functions.scss.hbs

@@ -1,9 +0,0 @@
-@function calcul_rem($size, $base) {
-	@return 1rem * $size / $base;
-}
-
-@function strip_unit($number) {
-	@if type-of($number) == 'number' and not unitless ($number) {
-		@return $number / ($number * 0 + 1);
-	}
-}

package/templates/base/src/styles/core/_anchors.scss.hbs

@@ -1,10 +0,0 @@
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap;
-  text-decoration: none;
-  outline: none;
-}

package/templates/base/src/styles/core/_index.scss.hbs

@@ -1,6 +0,0 @@
-@forward "anchors";
-@forward "popover";
-@forward "snackbar";
-{{#if stylinNutin}}
-@forward "utilities";
-{{/if}}

package/templates/base/src/styles/core/_popover.scss.hbs

@@ -1,96 +0,0 @@
-/* Prevent scroll when popover is active */
-html.no-scroll {
-  overflow: hidden;
-}
-
-.popover-overlay {  
-  z-index: 99;
-  position: fixed;
-  inset: 0;
-  backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, .1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  animation: hide-pop 0.3s ease forwards;
-    &.show {
-    animation: show-pop 0.3s ease forwards;
-  }
-}
-
-.popover-wrapper {
-  overflow-y: auto;
-  position: relative;
-  overscroll-behavior: none;
-  border-radius: 1rem;
-  width: 90%;
-  height: 90%;
-  transform: scale(0.95);
-  opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  -moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease;
-  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
-  -o-transition: opacity 0.3s ease, -o-transform 0.3s ease;
-    &.show {
-    transform: scale(1);
-    -moz-transform: scale(1);
-    -webkit-transform: scale(1);
-    -o-transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.popover-content {
-  position: relative;
-  height: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-}
-
-.popover-close-button {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0 1rem;
-  &:focus:not(:focus-visible) {
-  }
-  &:focus-visible {
-  }
-}
-
-.popover-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-.popover-buttons button {
-  background-color: inherit;
-  transition: ease-in-out 0.3s;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  cursor: pointer;
-  &:hover {
-  }
-  @media (hover: none) {
-    &:hover { 
-    }
-  }
-}
-
-@keyframes show-pop {
-  from { opacity: 0 }
-  to { opacity: 1 }
-}
-
-@keyframes hide-pop {
-  from { opacity: 1 }
-  to { opacity: 0 }
-}

package/templates/base/src/styles/core/_snackbar.scss.hbs

@@ -1,50 +0,0 @@
-@use "sass:map";
-@use "variables" as *;
-{{#if stylinNutin}}
-@use "mixins";
-{{/if}}
-
-.app-snackbar {
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  {{#if stylinNutin}}
-  @include mixins.flex-center;
-  {{else}}
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  {{/if}}
-  background: $snack-default;
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-  gap: 1rem;
-  animation: fade-in 0.3s ease;
-  {{#if stylinNutin}}
-  @include mixins.respond-to(medium) {
-    min-width: 80%;
-  }
-  {{/if}}
-}
-
-.app-snackbar--bottom { bottom: 1rem; }
-.app-snackbar--top { top: 1rem; }
-
-.app-snackbar--success { background: $snack-success; }
-.app-snackbar--error { background: $snack-error; }
-.app-snackbar--info { background: $snack-info; }
-
-.app-snackbar button {
-  background: transparent;
-  border: none;
-  color: #fff;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
-  to { opacity: 1; transform: translateX(-50%) translateY(0); }
-}

package/templates/base/tools/builder/core/esbuild.js.hbs

@@ -1,25 +0,0 @@
-import esbuild from 'esbuild';
-import path from 'path';
-import { exit } from 'process';
-import { print, isVerbose } from '../../utils/index.js';
-import { PATHS } from './paths.js';
-import builderConfig from '../../../builder.config.js';
-
-const ENTRY_FILE = path.join(PATHS.tempApp, 'main.ts');
-const OUT_FILE = path.join(PATHS.tempSource, 'bundle.js');
-
-async function build() {
-  await esbuild.build({
-    ...builderConfig.esbuild,
-    entryPoints: [ENTRY_FILE],
-    outfile: OUT_FILE,
-    keepNames: true, // View names are used to update meta.title
-  });
-
-  if (isVerbose) print.boldInfo(`ESBuild complete.\n`);
-}
-
-build().catch((err) => {
-  print.boldError(`ESBuild failed: ${err.message}`);
-  exit(1);
-});

package/templates/base/tools/builder/core/minify-html.js.hbs

@@ -1,60 +0,0 @@
-import { minify } from 'html-minifier-terser';
-{{#unless template}}
-import fs from 'fs';
-import { exit } from 'process';
-import { getFilesRecursive, print, isProd, isVerbose } from '../../utils/index.js';
-import { PATHS } from './paths.js';
-{{/unless}}
-
-{{#if template}}export {{/if}}async function minifyHTML(html) {
-  return minify(html, {
-    collapseWhitespace: true,
-    removeComments: true,
-    removeRedundantAttributes: true,
-    removeScriptTypeAttributes: true,
-    removeStyleLinkTypeAttributes: true,
-    useShortDoctype: true,
-    keepClosingSlash: true,
-    minifyCSS: true,
-    minifyJS: true,
-  });
-}
-
-{{#unless template}}
-const TEMPLATE_REGEX =
-  /const\s+(template|templateFn)\s*=?\s*(?:\(.*?\)\s*=>\s*)?`([\s\S]*?)`/gm;
-
-async function minifyInlineHTML() {
-  const extension = isProd ? '.ts' : '.js';
-  const jsFiles = getFilesRecursive(PATHS.tempApp, extension);
-
-  for (const file of jsFiles) {
-    let code = fs.readFileSync(file, 'utf8');
-    let hasChanges = false;
-
-    const matches = [...code.matchAll(TEMPLATE_REGEX)];
-
-    if (matches.length) {
-      for (const match of matches) {
-        const [full, , html] = match;
-        const minified = await minifyHTML(html);
-        const minifiedBlock = full.replace(html, minified);
-        code = code.replace(full, minifiedBlock);
-        hasChanges = true;
-      }
-    }
-
-    if (hasChanges) {
-      fs.writeFileSync(file, code, 'utf8');
-      if (isVerbose) print.info(`Minified inline HTML in: ${file}`);
-    }
-  }
-  if (isVerbose) print.boldInfo('Inline templates minified.\n');
-}
-
-minifyInlineHTML().catch((err) => {
-  print.boldError(`Unexpected error: ${err.message}`);
-  exit(1);
-});
-
-{{/unless}}

package/templates/base/tools/builder/core/sass.js.hbs

@@ -1,22 +0,0 @@
-import * as sass from 'sass';
-import * as fs from 'fs';
-import path from 'path';
-import { isVerbose, print } from '../../utils/index.js';
-import { PATHS } from './paths.js';
-import builderConfig from '../../../builder.config.js';
-
-const stylesInput = path.join(PATHS.source, 'styles');
-const stylesOutput = path.join(PATHS.tempSource, 'main.css');
-
-const scssPath = (origin) => path.join(stylesInput, origin);
-const scssOrigins = builderConfig.sass.paths;
-
-const pathsToLoad = scssOrigins.map(origin => scssPath(origin));
-
-sass.compileAsync(path.join(stylesInput, 'main.scss'), {
-  loadPaths: [ ...pathsToLoad ],
-  style: 'compressed'
-}).then(result => {
-  fs.writeFileSync(stylesOutput, result.css);
-  if (isVerbose) print.boldInfo('Global styles compiled.\n');
-});

package/templates/base/tools/builder/core/tsc.js.hbs

@@ -1,12 +0,0 @@
-import { runCommand, print, isVerbose } from "../../utils/index.js";
-import { exit } from 'process';
-
-async function compileTS() {
-	await runCommand('tsc', ['--project', 'tsconfig.json']);
-  if (isVerbose) print.boldInfo('TypeScript compiled.\n');
-}
-
-compileTS().catch((err) => {
-  print.boldError(`Unexpected error: ${err.message}`);
-  exit(1);
-});

package/templates/base/tools/generator/templates/service.template.js.hbs

@@ -1,17 +0,0 @@
-import { getRelToCore } from "../../utils/get-rel-to-core.js";
-
-export const serviceTemplate = (name, targetPath) => {
-  const relToCore = getRelToCore(targetPath);
-
-  return `import { Service } from '${relToCore}';
-
-export class ${name.pascal} extends Service<${name.pascal}> {  
-  constructor() {
-    super();
-  }
-
-}
-
-export const ${name.pascal}Service = ${name.pascal}.getInstance();
-`;
-}

package/templates/base/tools/utils/export-flags.js.hbs

@@ -1,6 +0,0 @@
-import process from 'process';
-import builderConfig from '../../builder.config.js';
-
-export const isProd = process.env.npm_config_bundle || process.env.NODE_ENV === 'production';
-
-export const isVerbose = process.env.npm_config_log || builderConfig.verbose;

package/templates/features/deployHelper/tools/builder/core/compress-files.js.hbs

@@ -1,56 +0,0 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { gzipSync
-// BROTLI OPTIONAL
-//, brotliCompressSync, constants 
-} from 'zlib';
-import { print, getFilesRecursive, isVerbose } from '../../utils/index.js';
-import { PATHS } from './paths.js';
-import builderConfig from '../../../builder.config.js';
-
-const compress = {
-  gzip: builderConfig.compression.gzip,
-  // BROTLI OPTIONAL
-  // brotli: builderConfig.compression.brotli,
-};
-
-function compressStaticAssets() {
-  if (
-    !compress.gzip 
-    // BROTLI OPTIONAL
-    // && !compress.brotli
-  ) return;
-
-  const files = getFilesRecursive(PATHS.tempSource, ['.js', '.css', '.json', '.svg', 'ttf', 'otf', 'eot']);
-  
-  files.forEach(file => {
-    const content = readFileSync(file);
-    
-    if (compress.gzip) {
-      const gzipped = gzipSync(content, {
-        level: 9,
-        memLevel: 9,
-        windowBits: 15
-      });
-      writeFileSync(`${file}.gz`, gzipped);
-      if (isVerbose) print.info(`Gzip compression: ${file}`);
-    }
-
-    // BROTLI OPTIONAL
-    /*
-    if (compress.brotli) {
-     const brotlied = brotliCompressSync(content, {
-       params: {
-         [constants.BROTLI_PARAM_QUALITY]: 11,
-         [constants.BROTLI_PARAM_LGWIN]: 22,
-         [constants.BROTLI_PARAM_MODE]: constants.BROTLI_MODE_GENERIC,
-         [constants.BROTLI_PARAM_SIZE_HINT]: content.length
-       }
-     });
-     writeFileSync(`${file}.br`, brotlied);
-     if (isVerbose) print.info(`Brotli compression: ${file}`);
-    }
-    */
-  });
-}
-
-compressStaticAssets();