ngwr 6.1.1 → 7.1.0

package/schematics/ng-add/index.js

@@ -0,0 +1,180 @@
+"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 tasks_1 = require("@angular-devkit/schematics/tasks");
+const dependencies_1 = require("@schematics/angular/utility/dependencies");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+/** Base peers, regardless of prompt answers. */
+const BASE_PEERS = [['@angular/cdk', '>=22.0.0']];
+/** Extra peers contributed by the `dateAdapter` choice. */
+const DATE_ADAPTER_PEERS = {
+    none: [],
+    native: [],
+    'date-fns': [['date-fns', '>=3.0.0 || >=4.0.0']],
+    luxon: [['luxon', '>=3.0.0']],
+};
+/** Adapter classes named in the next-steps snippet for each choice. */
+const DATE_ADAPTER_PROVIDER = {
+    none: null,
+    native: 'provideWrDateAdapter()',
+    'date-fns': 'provideWrDateAdapter({ adapter: WrDateFnsAdapter })',
+    luxon: 'provideWrDateAdapter({ adapter: WrLuxonAdapter })',
+};
+/** Density preset → `provideWrDensity(...)` call. */
+const DENSITY_PROVIDER = {
+    none: null,
+    comfortable: "provideWrDensity({ preset: 'comfortable' })",
+    compact: "provideWrDensity({ preset: 'compact' })",
+};
+/** Theme preset → `provideWrTheme(...)` call. */
+const THEME_PROVIDER = {
+    none: null,
+    light: "provideWrTheme({ defaultMode: 'light' })",
+    dark: "provideWrTheme({ defaultMode: 'dark' })",
+    system: "provideWrTheme({ defaultMode: 'auto' })",
+};
+const STYLES_DIRECTIVE_SCSS = "@use 'ngwr';";
+const STYLES_DIRECTIVE_CSS = "@import 'ngwr';";
+function ngAdd(options) {
+    return (tree, context) => {
+        return (0, schematics_1.chain)([installPeerDeps(options, context), registerStyles(options), printNextSteps(options, context)])(tree, context);
+    };
+}
+/**
+ * Adds peer deps for the user's choices and schedules a single install
+ * task (unless `--skipPeerInstall` was passed).
+ */
+function installPeerDeps(options, context) {
+    if (options.skipPeerInstall)
+        return (tree) => tree;
+    return (tree) => {
+        const deps = [...BASE_PEERS, ...DATE_ADAPTER_PEERS[options.dateAdapter ?? 'none']];
+        if (!deps.length)
+            return tree;
+        for (const [name, version] of deps) {
+            (0, dependencies_1.addPackageJsonDependency)(tree, {
+                type: dependencies_1.NodeDependencyType.Default,
+                name,
+                version,
+                overwrite: false,
+            });
+        }
+        context.addTask(new tasks_1.NodePackageInstallTask());
+        return tree;
+    };
+}
+/**
+ * Appends `@use 'ngwr';` to the project's first global stylesheet when
+ * `styles === 'all'`. Skipped entirely when `styles === 'none'` — the
+ * user is expected to opt in per component via `ng g ngwr:component-style`.
+ */
+function registerStyles(options) {
+    if ((options.styles ?? 'all') === 'none') {
+        return (tree) => tree;
+    }
+    return async (tree, context) => {
+        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) {
+            context.logger.warn('ngwr: no Angular project found — skipping styles wiring.');
+            return tree;
+        }
+        const build = project.targets.get('build');
+        const styles = build?.options?.styles ?? [];
+        const stylesPath = typeof styles[0] === 'string' ? styles[0] : styles[0]?.input;
+        if (!stylesPath) {
+            context.logger.warn(`ngwr: no global stylesheet found for project "${project.root || '<root>'}" — add \`${STYLES_DIRECTIVE_SCSS}\` manually.`);
+            return tree;
+        }
+        if (!tree.exists(stylesPath)) {
+            context.logger.warn(`ngwr: styles file ${stylesPath} not found — add \`${STYLES_DIRECTIVE_SCSS}\` manually.`);
+            return tree;
+        }
+        const isCss = stylesPath.endsWith('.css') || stylesPath.endsWith('.less');
+        const directive = isCss ? STYLES_DIRECTIVE_CSS : STYLES_DIRECTIVE_SCSS;
+        const existing = tree.readText(stylesPath);
+        if (existing.includes(directive) || existing.includes("'ngwr'") || existing.includes('"ngwr"')) {
+            context.logger.info(`ngwr: ${stylesPath} already imports ngwr — skipping.`);
+            return tree;
+        }
+        const next = existing.length && !existing.endsWith('\n') ? `${existing}\n` : existing;
+        tree.overwrite(stylesPath, `${directive}\n${next}`);
+        context.logger.info(`ngwr: added \`${directive}\` to ${stylesPath}.`);
+        return tree;
+    };
+}
+/**
+ * Renders a tailored next-steps message — imports + provider list shaped
+ * by the prompt answers. We deliberately don't AST-edit `main.ts`; a
+ * clear copy-pasteable snippet is more robust across project shapes
+ * (standalone bootstrap, NgModule bootstrap, server entry, etc.).
+ */
+function printNextSteps(options, context) {
+    return (tree) => {
+        const adapter = options.dateAdapter ?? 'none';
+        const density = options.density ?? 'none';
+        const theme = options.theme ?? 'none';
+        const imports = [
+            "import { provideWrOverlay } from 'ngwr/overlay';",
+            "import { provideWrIcons, plus, trash } from 'ngwr/icon';",
+        ];
+        const providers = ['provideWrOverlay()', 'provideWrIcons([plus, trash])'];
+        const adapterCall = DATE_ADAPTER_PROVIDER[adapter];
+        if (adapterCall) {
+            imports.push("import { provideWrDateAdapter } from 'ngwr/date-adapter';");
+            if (adapter === 'date-fns') {
+                imports.push("import { WrDateFnsAdapter } from 'ngwr/date-adapter-fns';");
+            }
+            else if (adapter === 'luxon') {
+                imports.push("import { WrLuxonAdapter } from 'ngwr/date-adapter-luxon';");
+            }
+            providers.push(adapterCall);
+        }
+        const densityCall = DENSITY_PROVIDER[density];
+        if (densityCall) {
+            imports.push("import { provideWrDensity } from 'ngwr/density';");
+            providers.push(densityCall);
+        }
+        const themeCall = THEME_PROVIDER[theme];
+        if (themeCall) {
+            imports.push("import { provideWrTheme } from 'ngwr/theme';");
+            providers.push(themeCall);
+        }
+        const importBlock = imports.join('\n');
+        const providerBlock = providers.map(p => `      ${p},`).join('\n');
+        const message = `
+ngwr installed.
+
+Add the providers to your bootstrap (typically src/main.ts):
+
+${importBlock}
+
+  bootstrapApplication(AppComponent, {
+    providers: [
+${providerBlock}
+    ],
+  });
+
+${snapshotSummary(options)}
+Browse the full catalog at https://ngwr.dev.
+`;
+        context.logger.info(message);
+        return tree;
+    };
+}
+function snapshotSummary(options) {
+    const lines = ['Selected:'];
+    lines.push(`  • styles      = ${options.styles ?? 'all'}`);
+    lines.push(`  • dateAdapter = ${options.dateAdapter ?? 'none'}`);
+    lines.push(`  • density     = ${options.density ?? 'none'}`);
+    lines.push(`  • theme       = ${options.theme ?? 'none'}`);
+    return `${lines.join('\n')}\n\n`;
+}
+exports.default = ngAdd;

package/schematics/ng-add/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/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/schematics/page/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/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();
+}