ngwr 6.0.0 → 7.0.0

package/schematics/ng-add/schema.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngwr-ng-add",
+  "title": "ngwr ng-add",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Target Angular project name. Defaults to the workspace default project.",
+      "$default": { "$source": "projectName" }
+    },
+    "styles": {
+      "type": "string",
+      "enum": ["all", "none"],
+      "default": "all",
+      "description": "How to wire ngwr styles. `all` appends `@use 'ngwr';` to the project's global stylesheet. `none` skips — opt in per-component later via `ng g ngwr:component-style <name>`.",
+      "x-prompt": {
+        "message": "How should ngwr styles be wired?",
+        "type": "list",
+        "items": [
+          { "value": "all", "label": "All — one `@use 'ngwr';` import (recommended)" },
+          { "value": "none", "label": "None — opt in per-component later" }
+        ]
+      }
+    },
+    "dateAdapter": {
+      "type": "string",
+      "enum": ["none", "native", "date-fns", "luxon"],
+      "default": "none",
+      "description": "Wire a date adapter for calendar / date-picker. `none` skips. `native` uses the built-in Date adapter (no extra deps). `date-fns` / `luxon` auto-install the corresponding peer.",
+      "x-prompt": {
+        "message": "Wire a date adapter? (Used by calendar / date-picker.)",
+        "type": "list",
+        "items": [
+          { "value": "none", "label": "None — skip (you can add later)" },
+          { "value": "native", "label": "Native — built-in Date, no extra deps" },
+          { "value": "date-fns", "label": "date-fns — small, modular" },
+          { "value": "luxon", "label": "Luxon — Intl-backed, locale-rich" }
+        ]
+      }
+    },
+    "density": {
+      "type": "string",
+      "enum": ["none", "comfortable", "compact"],
+      "default": "none",
+      "description": "Density preset wired via `provideWrDensity()`. `none` uses lib defaults.",
+      "x-prompt": {
+        "message": "Pick a density preset",
+        "type": "list",
+        "items": [
+          { "value": "none", "label": "None — use lib defaults" },
+          { "value": "comfortable", "label": "Comfortable — relaxed spacing" },
+          { "value": "compact", "label": "Compact — tight spacing" }
+        ]
+      }
+    },
+    "theme": {
+      "type": "string",
+      "enum": ["none", "light", "dark", "system"],
+      "default": "none",
+      "description": "Theme starter for `data-wr-theme` on `<html>`. `system` auto-switches via `prefers-color-scheme`.",
+      "x-prompt": {
+        "message": "Theme starter?",
+        "type": "list",
+        "items": [
+          { "value": "none", "label": "None — stay on lib defaults" },
+          { "value": "light", "label": "Light" },
+          { "value": "dark", "label": "Dark" },
+          { "value": "system", "label": "System — auto-switch via prefers-color-scheme" }
+        ]
+      }
+    },
+    "skipPeerInstall": {
+      "type": "boolean",
+      "default": false,
+      "description": "Skip running the package manager install task — useful in monorepos where you manage installs yourself."
+    }
+  },
+  "required": []
+}

package/schematics/page/index.js

@@ -0,0 +1,63 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const templates_1 = require("./templates");
+function page(options) {
+    return async (tree, context) => {
+        const preset = options.preset;
+        if (!preset)
+            throw new schematics_1.SchematicsException('ngwr:page: missing `preset` (form / table / dashboard).');
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const projectName = options.project ?? workspace.extensions.defaultProject;
+        const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
+        if (!project)
+            throw new schematics_1.SchematicsException('ngwr:page: no Angular project found.');
+        const sourceRoot = project.sourceRoot ?? `${project.root || ''}/src`.replace(/^\//, '');
+        const parentDir = options.path ?? `${sourceRoot}/app/pages`;
+        const dashName = dasherize(options.name ?? preset);
+        const pascalName = `${pascalize(dashName)}Page`;
+        const dir = `${parentDir}/${dashName}`;
+        const tsPath = `${dir}/${dashName}.ts`;
+        const htmlPath = `${dir}/${dashName}.html`;
+        const scssPath = `${dir}/${dashName}.scss`;
+        for (const path of [tsPath, htmlPath, scssPath]) {
+            if (tree.exists(path)) {
+                throw new schematics_1.SchematicsException(`ngwr:page: ${path} already exists. Pick a different --name or remove the existing file.`);
+            }
+        }
+        const out = (0, templates_1.render)(preset, dashName, pascalName);
+        tree.create(tsPath, out.ts);
+        tree.create(htmlPath, out.html);
+        if (out.scss)
+            tree.create(scssPath, out.scss);
+        context.logger.info(`✓ Created ${preset} page under ${dir}/`);
+        context.logger.info(`  • ${tsPath}`);
+        context.logger.info(`  • ${htmlPath}`);
+        if (out.scss)
+            context.logger.info(`  • ${scssPath}`);
+        context.logger.info(`\nAdd it to your routes:\n  { path: '${dashName}', loadComponent: () => import('./pages/${dashName}/${dashName}') }`);
+        return tree;
+    };
+}
+function dasherize(value) {
+    return value
+        .trim()
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+}
+function pascalize(dashName) {
+    return dashName
+        .split('-')
+        .filter(Boolean)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+exports.default = page;

package/{alert/public-api.d.ts → schematics/page/schema.js}

@@ -1,8 +1,8 @@
+"use strict";
 /**
  * @license
  *
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-export * from './alert-type';
-export * from './alert.component';
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/page/schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngwr-page",
+  "title": "ngwr page",
+  "type": "object",
+  "properties": {
+    "preset": {
+      "type": "string",
+      "enum": ["form", "table", "dashboard"],
+      "description": "Starter shape.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": {
+        "message": "Page preset?",
+        "type": "list",
+        "items": [
+          { "value": "form", "label": "form — wr-form-field + wr-input + wr-button" },
+          { "value": "table", "label": "table — wr-table + sort + pagination" },
+          { "value": "dashboard", "label": "dashboard — wr-card grid + wr-statistic" }
+        ]
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "Component dir name (e.g. `signup`). Defaults to the preset name.",
+      "$default": { "$source": "argv", "index": 1 }
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "Parent directory. Defaults to `<sourceRoot>/app/pages`."
+    },
+    "project": {
+      "type": "string",
+      "description": "Target Angular project.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["preset"]
+}

package/schematics/page/templates.js

@@ -0,0 +1,198 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = render;
+/** Render a starter page for the given preset + dasherized name. */
+function render(preset, dashName, pascalName) {
+    switch (preset) {
+        case 'form':
+            return renderForm(dashName, pascalName);
+        case 'table':
+            return renderTable(dashName, pascalName);
+        case 'dashboard':
+            return renderDashboard(dashName, pascalName);
+    }
+}
+function renderForm(dashName, pascalName) {
+    const ts = `import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { WrButton } from 'ngwr/button';
+import { WrFormField, WrLabel, WrErrorMessage } from 'ngwr/form';
+import { WrInput } from 'ngwr/input';
+
+@Component({
+  selector: 'app-${dashName}',
+  templateUrl: './${dashName}.html',
+  styleUrl: './${dashName}.scss',
+  imports: [FormsModule, WrButton, WrFormField, WrLabel, WrErrorMessage, WrInput],
+})
+export default class ${pascalName} {
+  protected readonly name = signal('');
+  protected readonly email = signal('');
+  protected readonly submitting = signal(false);
+
+  protected async onSubmit(): Promise<void> {
+    this.submitting.set(true);
+    try {
+      await fetch('/api/${dashName}', {
+        method: 'POST',
+        body: JSON.stringify({ name: this.name(), email: this.email() }),
+      });
+    } finally {
+      this.submitting.set(false);
+    }
+  }
+}
+`;
+    const html = `<form class="${dashName}" (ngSubmit)="onSubmit()">
+  <h1>${titleCase(pascalName)}</h1>
+
+  <wr-form-field>
+    <wr-label>Name</wr-label>
+    <input wrInput [(ngModel)]="name" name="name" required />
+  </wr-form-field>
+
+  <wr-form-field>
+    <wr-label>Email</wr-label>
+    <input wrInput type="email" [(ngModel)]="email" name="email" required />
+  </wr-form-field>
+
+  <button wr-btn color="primary" type="submit" [loading]="submitting()">
+    Submit
+  </button>
+</form>
+`;
+    const scss = `.${dashName} {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 28rem;
+  margin: 2rem auto;
+  padding: 1.5rem;
+}
+`;
+    return { ts, html, scss };
+}
+function renderTable(dashName, pascalName) {
+    const ts = `import { Component, signal } from '@angular/core';
+
+import { WrTable } from 'ngwr/table';
+import { WrPagination } from 'ngwr/pagination';
+
+interface Row {
+  readonly id: number;
+  readonly name: string;
+  readonly status: 'active' | 'archived';
+}
+
+@Component({
+  selector: 'app-${dashName}',
+  templateUrl: './${dashName}.html',
+  styleUrl: './${dashName}.scss',
+  imports: [WrTable, WrPagination],
+})
+export default class ${pascalName} {
+  protected readonly columns = ['id', 'name', 'status'] as const;
+
+  protected readonly rows = signal<readonly Row[]>([
+    { id: 1, name: 'Alpha', status: 'active' },
+    { id: 2, name: 'Bravo', status: 'archived' },
+    { id: 3, name: 'Charlie', status: 'active' },
+  ]);
+
+  protected readonly page = signal(1);
+  protected readonly pageSize = signal(10);
+  protected readonly total = signal(3);
+}
+`;
+    const html = `<section class="${dashName}">
+  <h1>${titleCase(pascalName)}</h1>
+
+  <wr-table [data]="rows()" [columns]="columns" />
+
+  <wr-pagination
+    [(page)]="page"
+    [pageSize]="pageSize()"
+    [total]="total()"
+  />
+</section>
+`;
+    const scss = `.${dashName} {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+`;
+    return { ts, html, scss };
+}
+function renderDashboard(dashName, pascalName) {
+    const ts = `import { Component, signal } from '@angular/core';
+
+import { WrCard } from 'ngwr/card';
+import { WrStatistic } from 'ngwr/statistic';
+import { WrCountUp } from 'ngwr/counter';
+
+@Component({
+  selector: 'app-${dashName}',
+  templateUrl: './${dashName}.html',
+  styleUrl: './${dashName}.scss',
+  imports: [WrCard, WrStatistic, WrCountUp],
+})
+export default class ${pascalName} {
+  protected readonly users = signal(1284);
+  protected readonly revenue = signal(45_320);
+  protected readonly active = signal(372);
+}
+`;
+    const html = `<section class="${dashName}">
+  <h1>${titleCase(pascalName)}</h1>
+
+  <div class="${dashName}__grid">
+    <wr-card>
+      <wr-statistic title="Users">
+        <wr-count-up [to]="users()" />
+      </wr-statistic>
+    </wr-card>
+
+    <wr-card>
+      <wr-statistic title="Revenue" prefix="$">
+        <wr-count-up [to]="revenue()" />
+      </wr-statistic>
+    </wr-card>
+
+    <wr-card>
+      <wr-statistic title="Active">
+        <wr-count-up [to]="active()" />
+      </wr-statistic>
+    </wr-card>
+  </div>
+</section>
+`;
+    const scss = `.${dashName} {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: 1rem;
+  }
+}
+`;
+    return { ts, html, scss };
+}
+function titleCase(value) {
+    return value
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, c => c.toUpperCase())
+        .trim();
+}

package/schematics/provider/index.js

@@ -0,0 +1,126 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const PROVIDERS = {
+    overlay: { subpath: 'ngwr/overlay', factory: 'provideWrOverlay', call: 'provideWrOverlay()' },
+    icons: {
+        subpath: 'ngwr/icon',
+        factory: 'provideWrIcons',
+        call: 'provideWrIcons([plus, trash])',
+        extras: [['plus, trash', 'ngwr/icon']],
+    },
+    toast: { subpath: 'ngwr/toast', factory: 'provideWrToast', call: 'provideWrToast()' },
+    i18n: { subpath: 'ngwr/i18n', factory: 'provideWrI18n', call: 'provideWrI18n()' },
+    'date-adapter': {
+        subpath: 'ngwr/date-adapter',
+        factory: 'provideWrDateAdapter',
+        call: 'provideWrDateAdapter()',
+    },
+    density: { subpath: 'ngwr/density', factory: 'provideWrDensity', call: 'provideWrDensity()' },
+    'loading-bar': {
+        subpath: 'ngwr/loading-bar',
+        factory: 'provideWrLoadingBar',
+        call: 'provideWrLoadingBar()',
+    },
+    cookie: { subpath: 'ngwr/cookie', factory: 'provideWrCookie', call: 'provideWrCookie()' },
+    storage: { subpath: 'ngwr/storage', factory: 'provideWrStorage', call: 'provideWrStorage()' },
+    theme: { subpath: 'ngwr/theme', factory: 'provideWrTheme', call: 'provideWrTheme()' },
+};
+function provider(options) {
+    return async (tree, context) => {
+        const spec = PROVIDERS[options.name];
+        if (!spec)
+            throw new schematics_1.SchematicsException(`ngwr:provider: unknown provider "${options.name}".`);
+        const filePath = await resolveMainFile(tree, options);
+        if (!filePath) {
+            context.logger.info(printSnippet(spec));
+            return tree;
+        }
+        const original = tree.readText(filePath);
+        let next = original;
+        next = ensureImport(next, spec.factory, spec.subpath);
+        if (options.name === 'icons') {
+            next = ensureImport(next, 'plus', 'ngwr/icon');
+            next = ensureImport(next, 'trash', 'ngwr/icon');
+        }
+        next = ensureProviderCall(next, spec.call);
+        if (next === original) {
+            context.logger.info(`ngwr:provider: ${filePath} already has ${spec.factory} — no changes.`);
+            return tree;
+        }
+        tree.overwrite(filePath, next);
+        context.logger.info(`✓ Added ${spec.call} to ${filePath}.`);
+        return tree;
+    };
+}
+async function resolveMainFile(tree, options) {
+    if (options.path && tree.exists(options.path))
+        return options.path;
+    const workspace = await (0, workspace_1.getWorkspace)(tree);
+    const projectName = options.project ?? workspace.extensions.defaultProject;
+    const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
+    if (!project)
+        return null;
+    const main = project.targets.get('build')?.options?.main;
+    const browser = project.targets.get('build')?.options?.browser;
+    const candidate = main ?? browser ?? `${project.sourceRoot ?? 'src'}/main.ts`;
+    return tree.exists(candidate) ? candidate : null;
+}
+function ensureImport(source, symbol, subpath) {
+    if (new RegExp(`\\bimport\\s*\\{[^}]*\\b${symbol}\\b[^}]*\\}\\s*from`).test(source))
+        return source;
+    const sameRe = new RegExp(`(import\\s*\\{)([^}]*)(\\}\\s*from\\s*['"]${escapeRegExp(subpath)}['"])`, 'm');
+    const sameMatch = sameRe.exec(source);
+    if (sameMatch) {
+        const head = sameMatch[1];
+        const body = sameMatch[2].trim().replace(/,\s*$/, '');
+        const tail = sameMatch[3];
+        const merged = body ? `${head} ${body}, ${symbol} ${tail}` : `${head} ${symbol} ${tail}`;
+        return source.replace(sameMatch[0], merged);
+    }
+    const blockRe = /(^|\n)(import\s[^;]+;\s*\n)+/m;
+    const block = blockRe.exec(source);
+    const newLine = `import { ${symbol} } from '${subpath}';\n`;
+    if (block) {
+        const end = (block.index ?? 0) + block[0].length;
+        return `${source.slice(0, end)}${newLine}${source.slice(end)}`;
+    }
+    return `${newLine}${source}`;
+}
+function ensureProviderCall(source, call) {
+    // Splice into the providers array of bootstrapApplication / ApplicationConfig.
+    const arrayRe = /(\bproviders\s*:\s*\[)([\s\S]*?)(\])/m;
+    const match = arrayRe.exec(source);
+    if (!match)
+        return source;
+    // Already present?
+    const callBase = call.split('(')[0];
+    if (new RegExp(`\\b${escapeRegExp(callBase)}\\s*\\(`).test(match[2]))
+        return source;
+    const trimmed = match[2].replace(/\s+$/, '');
+    const sep = trimmed.length && !trimmed.endsWith(',') ? ', ' : trimmed.length ? ' ' : '';
+    const replaced = `${match[1]}${trimmed}${sep}${call}${match[3]}`;
+    return source.replace(match[0], replaced);
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function printSnippet(spec) {
+    return `
+ngwr:provider — copy this into your bootstrap:
+
+  import { ${spec.factory} } from '${spec.subpath}';
+
+  bootstrapApplication(AppComponent, {
+    providers: [/* …, */ ${spec.call}],
+  });
+`;
+}
+exports.default = provider;

package/schematics/provider/schema.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/provider/schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngwr-provider",
+  "title": "ngwr provider",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "enum": [
+        "overlay",
+        "icons",
+        "toast",
+        "i18n",
+        "date-adapter",
+        "density",
+        "loading-bar",
+        "cookie",
+        "storage",
+        "theme"
+      ],
+      "description": "Provider to add.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": {
+        "message": "Which provider?",
+        "type": "list",
+        "items": [
+          { "value": "overlay", "label": "overlay — required for every overlay-backed component" },
+          { "value": "icons", "label": "icons — register a tree-shaken icon set" },
+          { "value": "toast", "label": "toast — global toast service" },
+          { "value": "i18n", "label": "i18n — Transloco-class translation core" },
+          { "value": "date-adapter", "label": "date-adapter — calendar / date-picker plumbing" },
+          { "value": "density", "label": "density — comfortable / compact preset" },
+          { "value": "loading-bar", "label": "loading-bar — router-aware progress bar" },
+          { "value": "cookie", "label": "cookie — wr cookie service" },
+          { "value": "storage", "label": "storage — swappable engine + TTL" },
+          { "value": "theme", "label": "theme — light/dark/auto mode" }
+        ]
+      }
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "Main entry file to patch. Defaults to the first match in `src/main.ts`."
+    },
+    "project": {
+      "type": "string",
+      "description": "Target Angular project.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name"]
+}