@ng-zen/cli 22.7.0 → 22.8.0

package/README.md

@@ -60,7 +60,13 @@ ng add @ng-zen/cli
 ng generate @ng-zen/cli:ui
 ```
 
-**3. Use the generated standalone component:**
+**3. Generate layouts (interactive mode):**
+
+```bash
+ng generate @ng-zen/cli:layouts
+```
+
+**4. Use the generated standalone component:**
 
 ```typescript
 import { ZenButton } from './ui/button';
@@ -80,11 +86,12 @@ export class MyComponent {}
 2. [Features](#-features)
 3. [CLI Usage & Options](#-cli-usage--options)
 4. [Available UIs](#-available-uis)
-5. [Customization](#-customization)
-6. [ESLint Configuration](#-eslint-configuration)
-7. [Philosophy & Architecture](#-philosophy--architecture)
-8. [Community & Contributions](#-community--contributions)
-9. [Documentation & Links](#-documentation--links)
+5. [Available Layouts](#-available-layouts)
+6. [Customization](#-customization)
+7. [ESLint Configuration](#-eslint-configuration)
+8. [Philosophy & Architecture](#-philosophy--architecture)
+9. [Community & Contributions](#-community--contributions)
+10. [Documentation & Links](#-documentation--links)
 
 ## ✨ Features
 
@@ -131,6 +138,29 @@ ng generate @ng-zen/cli:ui ./src/app/shared/components --ui avatar badge card
 ng generate @ng-zen/cli:ui --ui button input --stories
 ```
 
+### Layouts
+
+Generate app-shell layouts (page-level components composed with UI components) into `src/app/layouts` by default.
+
+```bash
+ng generate @ng-zen/cli:layouts [path] --layouts <elements...> --stories
+```
+
+| Property        | Status     | Default           | Description                                                                                               |
+| :-------------- | :--------- | :---------------- | :-------------------------------------------------------------------------------------------------------- |
+| **`[path]`**    | _Optional_ | `src/app/layouts` | The directory where layouts will be generated (e.g., `./src/app/shared/layouts`).                         |
+| **`--layouts`** | _Required_ | -                 | A space-separated list of layouts to generate (e.g., `dashboard`). Interactive prompt appears if omitted. |
+| **`--stories`** | _Optional_ | `false`           | Generates `.stories.ts` files alongside the layout, instantly ready for your Storybook integration.       |
+| **`--project`** | _Optional_ | auto-detected     | Specify the target project name in a multi-project workspace.                                             |
+
+**Generate the dashboard layout with Storybook files:**
+
+```bash
+ng generate @ng-zen/cli:layouts --layouts dashboard --stories
+```
+
+> Layout stories compose generated UI components (dashboard stories use `sidenav`, `button` and `icon`). Generate those UI components at their default paths first so the story imports resolve.
+
 ## 🧩 Available UIs
 
 ### Forms & Inputs
@@ -177,6 +207,12 @@ ng generate @ng-zen/cli:ui --ui button input --stories
 | ----------- | --------------------------- | ---------------------------------------------------------------- |
 | **Sidenav** | Responsive navigation shell | Collapsible rail, mobile bottom bar, header/content/footer slots |
 
+## 🧭 Available Layouts
+
+| Layout        | Description                         | Features                                                                    |
+| ------------- | ----------------------------------- | --------------------------------------------------------------------------- |
+| **Dashboard** | Responsive app shell: nav + content | Nav slot + scrollable main, in-flow mobile bottom bar, pairs with `sidenav` |
+
 ## 🎨 Customization
 
 Every generated component utilizes CSS variables for immediate theming without touching the core logic. Overwrite them globally or locally:
@@ -208,7 +244,7 @@ ng add @ng-zen/cli
 # → Prompt: "ESLint config detected. Update it for ng-zen UI components?"
 ```
 
-It adds `@ng-zen/cli/eslint-config` to your `eslint.config.*` and spreads it into the `defineConfig` array. This enforces the `zen` prefix on component selectors and relaxes rules for `.stories.ts` / `.spec.ts` files generated inside `ui/` directories.
+It adds `@ng-zen/cli/eslint-config` to your `eslint.config.*` and spreads it into the `defineConfig` array. This enforces the `zen` prefix on component selectors and relaxes rules for `.stories.ts` / `.spec.ts` files generated inside `ui/` and `layouts/` directories.
 
 **Manual setup** (if you declined the prompt):
 
@@ -218,7 +254,7 @@ import ngZen from '@ng-zen/cli/eslint-config';
 export default defineConfig([...otherConfigs, ...ngZen]);
 ```
 
-**Custom path or rules** — use the named exports for fine-grained control:
+**Custom path or rules** — use the named exports for fine-grained control (use `layoutsFiles` the same way for generated layouts):
 
 ```ts
 import ngZen from '@ng-zen/cli/eslint-config';

package/eslint-config/index.js

@@ -2,7 +2,7 @@
 const { defineConfig } = require('eslint/config');
 
 /**
- * Config block for UI components inside a `ui/` directory.
+ * Config block for UI components and layouts inside `ui/` / `layouts/` directories.
  *
  * Enforces:
  * - `zen` prefix for component selectors (`element`, `kebab-case`)
@@ -12,7 +12,7 @@ const { defineConfig } = require('eslint/config');
  * @type {import('eslint').Linter.Config}
  */
 const uiComponent = {
-  files: ['**/ui/**/*.ts'],
+  files: ['**/ui/**/*.ts', '**/layouts/**/*.ts'],
   rules: {
     '@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'zen', style: 'camelCase' }],
     '@angular-eslint/component-selector': ['error', { type: 'element', prefix: 'zen', style: 'kebab-case' }],
@@ -30,7 +30,14 @@ const uiComponent = {
  * @type {import('eslint').Linter.Config}
  */
 const generatedFiles = {
-  files: ['**/ui/**/*.spec.ts', '**/ui/**/*.test.ts', '**/ui/**/*.stories.ts'],
+  files: [
+    '**/ui/**/*.spec.ts',
+    '**/ui/**/*.test.ts',
+    '**/ui/**/*.stories.ts',
+    '**/layouts/**/*.spec.ts',
+    '**/layouts/**/*.test.ts',
+    '**/layouts/**/*.stories.ts',
+  ],
   rules: {
     '@typescript-eslint/unbound-method': 'off',
     '@typescript-eslint/no-unsafe-return': 'off',
@@ -46,13 +53,15 @@ const generatedFiles = {
 };
 
 /**
- * Creates a custom UI component config block with a custom file glob.
+ * Creates a custom ng-zen config block with a custom file glob.
  *
  * @param {Object} [options]
  * @param {string | string[]} [options.uiFiles] - Glob pattern(s) for UI component files.
  *   Uses the same format as the `files` property in flat config.
+ * @param {string | string[]} [options.layoutsFiles] - Glob pattern(s) for layout files.
+ *   Uses the same format as the `files` property in flat config.
  * @returns {import('eslint').Linter.Config} A config block with the same rules as
- *   uiComponent but scoped to the provided file pattern.
+ *   uiComponent but scoped to the provided file patterns.
  *
  * @example
  * ```ts
@@ -60,8 +69,8 @@ const generatedFiles = {
  * ```
  */
 function createNgZenConfig(options = {}) {
-  const { uiFiles = ['**/ui/**/*.ts'] } = options;
-  return { ...uiComponent, files: [uiFiles].flat() };
+  const { uiFiles = ['**/ui/**/*.ts'], layoutsFiles = ['**/layouts/**/*.ts'] } = options;
+  return { ...uiComponent, files: [uiFiles, layoutsFiles].flat() };
 }
 
 /**
@@ -81,19 +90,20 @@ function createNgZenConfig(options = {}) {
  * |---|---|---|
  * | `.uiComponent` | `Config` | Rules for UI component files. Override `files` / `rules` via spread. |
  * | `.generatedFiles` | `Config` | Rules for generated files (stories, spec, test). |
- * | `.createNgZenConfig(opts)` | `Config` | Helper — same rules as uiComponent with a custom file glob. |
+ * | `.createNgZenConfig(opts)` | `Config` | Helper — same rules as uiComponent with custom file globs (`uiFiles`, `layoutsFiles`). |
  *
  * ## Custom path
  *
- * By default, UI component files are detected via a glob pattern targeting any `ui` directory
- * (glob: `**` + `/ui/` + `**` + `/*`). If your components live in a different location, choose one of the
+ * By default, UI component and layout files are detected via glob patterns targeting any `ui`
+ * or `layouts` directory
+ * (globs: `**` + `/ui/` + `**` + `/*` and `**` + `/layouts/` + `**` + `/*`). If your files live in different locations, choose one of the
  * approaches below instead of the default `...ngZen` spread.
  *
  * @example <caption>Custom UI path</caption>
  * ```ts
  * import ngZen from '@ng-zen/cli/eslint-config';
  * export default defineConfig([
- *   ngZen.createNgZenConfig({ uiFiles: 'src/app/shared/ui' }),
+ *   ngZen.createNgZenConfig({ uiFiles: 'src/app/shared/ui', layoutsFiles: 'src/app/shared/layouts' }),
  *   ...ngZen.generatedFiles,
  * ]);
  * ```
@@ -117,7 +127,7 @@ function createNgZenConfig(options = {}) {
  *   {
  *     uiComponent: import('eslint').Linter.Config,
  *     generatedFiles: import('eslint').Linter.Config,
- *     createNgZenConfig: (options?: { uiFiles?: string | string[] }) => import('eslint').Linter.Config
+ *     createNgZenConfig: (options?: { uiFiles?: string | string[]; layoutsFiles?: string | string[] }) => import('eslint').Linter.Config
  *   }
  * }
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.7.0",
+  "version": "22.8.0",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -48,6 +48,8 @@
     "theming",
     "angular schematics generator",
     "ui components cli",
+    "layouts",
+    "dashboard",
     "alert",
     "avatar",
     "badge",

package/schematics/collection.json

@@ -11,6 +11,12 @@
       "factory": "./ui/index#uiGenerator",
       "schema": "./ui/schema.json",
       "aliases": ["c", "component", "components"]
+    },
+    "layouts": {
+      "description": "This schematic generates layouts",
+      "factory": "./layouts/index#layoutsGenerator",
+      "schema": "./layouts/schema.json",
+      "aliases": ["layout", "l"]
     }
   }
 }

package/schematics/layouts/files/dashboard/dashboard.html

@@ -0,0 +1,7 @@
+<div class="dashboard-nav">
+  <ng-content select="[zenDashboardNav]" />
+</div>
+
+<main class="dashboard-main">
+  <ng-content />
+</main>

package/schematics/layouts/files/dashboard/dashboard.scss

@@ -0,0 +1,34 @@
+:host {
+  --zen-dashboard-content-padding: 1.5rem;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: flex;
+  height: 100dvh;
+}
+
+.dashboard-nav {
+  display: block;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+}
+
+.dashboard-main {
+  flex: 1;
+  min-inline-size: 0;
+  overflow-y: auto;
+  padding: var(--zen-dashboard-content-padding);
+}
+
+/* Mobile: content scrolls above an in-flow bottom nav (no overlay) */
+@media (width <= 48rem) {
+  :host {
+    flex-direction: column;
+  }
+
+  .dashboard-main {
+    min-block-size: 0;
+    order: -1;
+  }
+}

package/schematics/layouts/files/dashboard/dashboard.spec.ts

@@ -0,0 +1,39 @@
+import { Component, provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenDashboard } from './dashboard';
+
+@Component({
+  template: `
+    <zen-dashboard>
+      <nav zenDashboardNav>Nav</nav>
+      <p>Content</p>
+    </zen-dashboard>
+  `,
+  imports: [ZenDashboard],
+})
+class DashboardTestComponent {}
+
+describe('ZenDashboard', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardTestComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(DashboardTestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('zen-dashboard')).toBeTruthy();
+  });
+
+  it('should project nav and content slots', () => {
+    const fixture = TestBed.createComponent(DashboardTestComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.dashboard-nav [zenDashboardNav]')?.textContent).toBe('Nav');
+    expect(fixture.nativeElement.querySelector('.dashboard-main p')?.textContent).toBe('Content');
+  });
+});

package/schematics/layouts/files/dashboard/dashboard.stories.ts

@@ -0,0 +1,50 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenDashboard } from './dashboard';
+
+type Story = StoryObj<ZenDashboard>;
+
+const meta = {
+  title: 'Layouts/Dashboard',
+  component: ZenDashboard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [applicationConfig({ providers: [] }), moduleMetadata({ imports: [ZenDashboard] })],
+} satisfies Meta<ZenDashboard>;
+
+export default meta;
+
+const dashboardTemplate = `
+  <zen-dashboard>
+    <nav zenDashboardNav aria-label="Main navigation" style="display: flex; flex-direction: column; gap: 0.5rem; width: 14rem; height: 100%; box-sizing: border-box; padding: 1rem; background-color: #f5f5f5;">
+      <span style="font-weight: 700;">Zen</span>
+      <span>Home</span>
+      <span>Settings</span>
+    </nav>
+    <h1 style="font-size: 1.5rem; margin: 0 0 1rem;">Dashboard</h1>
+    <p style="margin: 0 0 1rem;">Nav slot hosts the navigation; this content scrolls internally while the nav stays visible.</p>
+    <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));">
+      <div style="border: 1px solid #e0e0e0; border-radius: 0.75rem; padding: 1rem;">Card one</div>
+      <div style="border: 1px solid #e0e0e0; border-radius: 0.75rem; padding: 1rem;">Card two</div>
+      <div style="border: 1px solid #e0e0e0; border-radius: 0.75rem; padding: 1rem;">Card three</div>
+    </div>
+  </zen-dashboard>
+`;
+
+export const Default: Story = {
+  render: () => ({
+    template: dashboardTemplate,
+  }),
+};
+
+export const Mobile: Story = {
+  tags: ['!autodocs'],
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: () => ({
+    template: dashboardTemplate,
+  }),
+};

package/schematics/layouts/files/dashboard/dashboard.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenDashboard is a presentational app shell: navigation + content. No business logic —
+ * nav items, auth and i18n live in the consumer (e.g. `zen-sidenav`).
+ *
+ * Slots:
+ * - `[zenDashboardNav]` — navigation (e.g. `<zen-sidenav zenDashboardNav />`)
+ * - default            — main content (e.g. `<router-outlet />`, rendered in place)
+ *
+ * Layout:
+ * ```
+ * Desktop (row):
+ * ┌──────────────┬──────────────────────────────┐
+ * │ .dashboard-  │ <main> (flex: 1,             │
+ * │  nav         │  internal scroll)            │
+ * │  (sized by   │  <router-outlet>             │
+ * │   nav itself)│                              │
+ * └──────────────┴──────────────────────────────┘
+ * Mobile (<= 48rem, column, in-flow — never fixed):
+ * ┌─────────────────────────────────────────────┐
+ * │ <main> (order: -1, scrolls internally)      │
+ * ├─────────────────────────────────────────────┤
+ * │ .dashboard-nav bottom bar                   │
+ * └─────────────────────────────────────────────┘
+ * ```
+ * Full height is self-contained: the host is a `100dvh` flex, `main` takes
+ * `flex: 1` with `min-block-size: 0` + `overflow-y: auto`, so only content
+ * scrolls and the nav is always visible without overlaying anything.
+ * Slots sit inside plain wrapper elements (`.dashboard-nav`, `main`), so
+ * `order` and sizing stay local — no `display: contents` or cross-component
+ * selectors needed.
+ *
+ * @example
+ * ```html
+ * <zen-dashboard>
+ *   <zen-sidenav zenDashboardNav [collapsed]="collapsed()">
+ *     <div zenSidenavHeader>…</div>
+ *     <nav zenSidenavContent>…</nav>
+ *     <div zenSidenavFooter>…</div>
+ *   </zen-sidenav>
+ *   <router-outlet />
+ * </zen-dashboard>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-dashboard-content-padding: 1.5rem;
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-dashboard',
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenDashboard {}

package/schematics/layouts/files/dashboard/index.ts

@@ -0,0 +1 @@
+export * from './dashboard';

package/schematics/layouts/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layoutsGenerator = layoutsGenerator;
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const utils_1 = require("../../utils");
+const DEFAULT_GENERATION_PATH = 'layouts'; // src/app/layouts
+function layoutsGenerator({ layouts: selected, project, ...options }) {
+    return async (tree) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const projectName = project ?? workspace.extensions['defaultProject'];
+        const projectObj = workspace.projects.get(projectName);
+        if (!projectObj) {
+            throw new Error(`Project "${projectName}" not found in workspace.`);
+        }
+        options.path ??= ((0, workspace_1.buildDefaultPath)(projectObj) + '/' + DEFAULT_GENERATION_PATH);
+        const workingDirectory = (0, core_1.normalize)((0, core_1.join)(options.currentDirectory, options.path));
+        return (0, schematics_1.chain)([...(0, utils_1.applyFileTemplateUtil)([...selected], { ...options, path: workingDirectory })]);
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/layouts/index.ts"],"names":[],"mappings":";;AASA,4CAgBC;AAzBD,+CAA6D;AAC7D,2DAAyD;AACzD,qEAAuF;AAEvF,uCAAoD;AAGpD,MAAM,uBAAuB,GAAG,SAAS,CAAC,CAAC,kBAAkB;AAE7D,SAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAkB;IACzF,OAAO,KAAK,EAAC,IAAI,EAAC,EAAE;QAClB,MAAM,SAAS,GAAG,MAAM,IAAA,wBAAY,EAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,OAAO,IAAK,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAY,CAAC;QAClF,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,YAAY,WAAW,2BAA2B,CAAC,CAAC;QACtE,CAAC;QAED,OAAO,CAAC,IAAI,KAAK,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QAExF,MAAM,gBAAgB,GAAG,IAAA,gBAAS,EAAC,IAAA,WAAI,EAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjF,OAAO,IAAA,kBAAK,EAAC,CAAC,GAAG,IAAA,6BAAqB,EAAC,CAAC,GAAG,QAAQ,CAAC,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IAClG,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule } from '@angular-devkit/schematics';\nimport { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';\n\nimport { applyFileTemplateUtil } from '../../utils';\nimport { Schema as LayoutsOptions } from './schema';\n\nconst DEFAULT_GENERATION_PATH = 'layouts'; // src/app/layouts\n\nexport function layoutsGenerator({ layouts: selected, project, ...options }: LayoutsOptions): Rule {\n  return async tree => {\n    const workspace = await getWorkspace(tree);\n    const projectName = project ?? (workspace.extensions['defaultProject'] as string);\n    const projectObj = workspace.projects.get(projectName);\n\n    if (!projectObj) {\n      throw new Error(`Project \"${projectName}\" not found in workspace.`);\n    }\n\n    options.path ??= (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n\n    return chain([...applyFileTemplateUtil([...selected], { ...options, path: workingDirectory })]);\n  };\n}\n"]}

package/schematics/layouts/index.ts

@@ -0,0 +1,26 @@
+import { join, normalize, Path } from '@angular-devkit/core';
+import { chain, Rule } from '@angular-devkit/schematics';
+import { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { applyFileTemplateUtil } from '../../utils';
+import { Schema as LayoutsOptions } from './schema';
+
+const DEFAULT_GENERATION_PATH = 'layouts'; // src/app/layouts
+
+export function layoutsGenerator({ layouts: selected, project, ...options }: LayoutsOptions): Rule {
+  return async tree => {
+    const workspace = await getWorkspace(tree);
+    const projectName = project ?? (workspace.extensions['defaultProject'] as string);
+    const projectObj = workspace.projects.get(projectName);
+
+    if (!projectObj) {
+      throw new Error(`Project "${projectName}" not found in workspace.`);
+    }
+
+    options.path ??= (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;
+
+    const workingDirectory = normalize(join(options.currentDirectory, options.path));
+
+    return chain([...applyFileTemplateUtil([...selected], { ...options, path: workingDirectory })]);
+  };
+}

package/schematics/layouts/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/layouts/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/layouts/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../ui/schema';\n\nexport type LayoutType = 'dashboard';\n\nexport interface Schema extends GeneratorSchemaBase {\n  layouts: LayoutType[];\n}\n"]}

package/schematics/layouts/schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NgZenCliLayouts",
+  "title": "Schema to create Zen layouts",
+  "type": "object",
+  "description": "Adds Zen layout 📐",
+  "properties": {
+    "currentDirectory": {
+      "description": "Base path from working directory",
+      "type": "string",
+      "format": "path",
+      "hidden": true,
+      "$default": {
+        "$source": "workingDirectory"
+      },
+      "readOnly": true
+    },
+    "path": {
+      "description": "The path at which to create the layout file, relative to the current workspace. If not provided, layouts will be generated in the 'layouts' folder within the project's source directory (e.g., src/app/layouts).",
+      "type": "string",
+      "format": "path",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "project": {
+      "description": "The name of the project",
+      "type": "string",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "layouts": {
+      "description": "Select elements to generate",
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": ["dashboard"]
+      },
+      "multiselect": true,
+      "minItems": 1,
+      "x-prompt": "Which layouts should be generated?"
+    },
+    "stories": {
+      "description": "Include stories for better documentation and testing",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": ["layouts"]
+}

package/schematics/layouts/schema.ts

@@ -0,0 +1,7 @@
+import { GeneratorSchemaBase } from '../ui/schema';
+
+export type LayoutType = 'dashboard';
+
+export interface Schema extends GeneratorSchemaBase {
+  layouts: LayoutType[];
+}

package/schematics/layouts/templates/README.md.template

@@ -0,0 +1,40 @@
+# <%= classify(name) %> layout
+
+![GitHub License](https://img.shields.io/github/license/kstepien3/ng-zen)
+
+Generated by `@ng-zen/cli` on <%= localeDate %>
+
+## Overview
+
+<%= classify(name) %> layout was generated by
+```bash
+ng generate @ng-zen/cli:layouts --layouts <%= name %>
+```
+
+This layout is part of a larger set of layouts aimed at enhancing and streamlining the development process in Angular applications.
+
+More information you can find here
+```bash
+ng generate @ng-zen/cli:layouts --help
+```
+
+## Installation
+
+To generate other layouts, ensure that you have the `@ng-zen/cli` library installed. You can add it to your project with the following command:
+```bash
+ng add @ng-zen/cli
+```
+
+then you can generate layouts via
+```bash
+ng generate @ng-zen/cli:layouts
+```
+
+
+## Author
+
+This layout was generated by the `@ng-zen/cli` tool developed by Konrad Stępień.
+
+This code is licensed under the BSD-2-Clause license. See the [LICENSE](https://github.com/kstepien3/ng-zen/blob/master/projects/cli/LICENSE) file for more details.
+
+Source code can be found [here](https://github.com/kstepien3/ng-zen).

package/services/selected-elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-elements.js","sourceRoot":"","sources":["../../../../src/services/selected-elements.ts"],"names":[],"mappings":";;;AAEA,qFAAqF;AACxE,QAAA,gBAAgB,GAAa,EAAE,CAAC","sourcesContent":["import { UiType } from '../schematics/ui/schema';\n\n// add selected elements to this array, then values are available in other schematics\nexport const selectedElements: UiType[] = [];\n"]}
+{"version":3,"file":"selected-elements.js","sourceRoot":"","sources":["../../../../src/services/selected-elements.ts"],"names":[],"mappings":";;;AAAA,qFAAqF;AACxE,QAAA,gBAAgB,GAAa,EAAE,CAAC","sourcesContent":["// add selected elements to this array, then values are available in other schematics\nexport const selectedElements: string[] = [];\n"]}

package/services/selected-elements.ts

@@ -1,4 +1,2 @@
-import { UiType } from '../schematics/ui/schema';
-
 // add selected elements to this array, then values are available in other schematics
-export const selectedElements: UiType[] = [];
+export const selectedElements: string[] = [];

package/utils/apply-file-template.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAkBA,sDASC;AA3BD,+CAA0D;AAC1D,2DAAsH;AAGtH,qEAAiE;AAEjE,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,IAAY,EAAU,EAAE,CAAC;IACpE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACjF,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAQ,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpH,SAAgB,qBAAqB,CAAC,OAAiB,EAAE,MAA2B;IAClF,oCAAgB,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;IAClC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,IAAc,CAAC,CAAC;QAEjE,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, Source, url } from '@angular-devkit/schematics';\n\nimport { GeneratorSchemaBase, UiType } from '../schematics/ui/schema';\nimport { selectedElements } from '../services/selected-elements';\n\nconst createTemplateRules = (folder: string, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]): Source => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean): Rule => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: UiType[], config: GeneratorSchemaBase): Rule[] {\n  selectedElements.push(...folders);\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path as string);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}
+{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAkBA,sDASC;AA3BD,+CAA0D;AAC1D,2DAAsH;AAGtH,qEAAiE;AAEjE,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,IAAY,EAAU,EAAE,CAAC;IACpE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACjF,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAQ,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpH,SAAgB,qBAAqB,CAAC,OAAiB,EAAE,MAA2B;IAClF,oCAAgB,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;IAClC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,IAAc,CAAC,CAAC;QAEjE,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, Source, url } from '@angular-devkit/schematics';\n\nimport { GeneratorSchemaBase } from '../schematics/ui/schema';\nimport { selectedElements } from '../services/selected-elements';\n\nconst createTemplateRules = (folder: string, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]): Source => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean): Rule => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: string[], config: GeneratorSchemaBase): Rule[] {\n  selectedElements.push(...folders);\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path as string);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}

package/utils/apply-file-template.util.ts

@@ -1,7 +1,7 @@
 import { normalize, strings } from '@angular-devkit/core';
 import { apply, applyTemplates, chain, filter, mergeWith, move, Rule, Source, url } from '@angular-devkit/schematics';
 
-import { GeneratorSchemaBase, UiType } from '../schematics/ui/schema';
+import { GeneratorSchemaBase } from '../schematics/ui/schema';
 import { selectedElements } from '../services/selected-elements';
 
 const createTemplateRules = (folder: string, path: string): Rule[] => [
@@ -16,7 +16,7 @@ const createTemplateRules = (folder: string, path: string): Rule[] => [
 const getTemplates = (rules: Rule[]): Source => apply(url(`./templates`), rules);
 const includeStories = (include: boolean): Rule => filter(filePath => include || !filePath.endsWith('.stories.ts'));
 
-export function applyFileTemplateUtil(folders: UiType[], config: GeneratorSchemaBase): Rule[] {
+export function applyFileTemplateUtil(folders: string[], config: GeneratorSchemaBase): Rule[] {
   selectedElements.push(...folders);
   return folders.map(folder => {
     const RULES = createTemplateRules(folder, config.path as string);