@ng-zen/cli 19.1.0 → 19.2.0-next.2

package/DEVELOPMENT.md

@@ -1,138 +0,0 @@
-# Local Development Setup
-
-This guide details setting up a local development environment for **@ng-zen/cli**. It covers the necessary tools, the project's branching strategy, and the automated workflows in place.
-
-**For a step-by-step guide specifically for external contributors submitting Pull Requests, please refer to `CONTRIBUTING.md`.**
-
-**Key Technologies & Concepts:**
-
-- **pnpm:** The required package manager (version in `package.json`). Use Corepack (`corepack enable`).
-- **Storybook:** For UI component development and visualization.
-- **Conventional Commits:** **Mandatory format** for commit messages (https://www.conventionalcommits.org/). Crucial for automation.
-- **Automated Formatting/Linting:** `husky` + `nano-staged` apply formatting and basic fixes on commit.
-- **Automated CI:** GitHub Actions (`ci.yml`) validate Pull Requests.
-- **Automated Releases:** `semantic-release` manages releases based on commits.
-- **Branching Strategy:** Detailed below.
-
-## Table of Contents
-
-- [Prerequisites & Setup](#prerequisites--setup)
-- [Branching Strategy & Workflow](#branching-strategy--workflow)
-- [Commit Messages (Crucial!)](#commit-messages-crucial)
-- [Branch Synchronization (Maintainer Task)](#branch-synchronization-maintainer-task)
-- [Working with Storybook](#working-with-storybook)
-- [Running Tests and Linting](#running-tests-and-linting)
-- [Building the Library](#building-the-library)
-- [Optional: Local Testing with Verdaccio](#optional-local-testing-with-verdaccio)
-
-## Prerequisites & Setup
-
-1.  Ensure **Node.js** is installed (use a version compatible with the project's Angular version; check CI workflows for reference).
-2.  Enable **Corepack**: `corepack enable`.
-3.  Clone the repository.
-4.  Install dependencies using **pnpm**: `pnpm install`.
-
-## Branching Strategy & Workflow
-
-This project employs a branching model designed for stability and automated releases:
-
-- **`master`**: Contains only **stable, production-ready** code. Receives merges only from `next` during official releases or for critical hotfixes. Automated stable releases (`vX.Y.Z`) are triggered from here. **Direct work is forbidden.**
-- **`next`**: The **pre-release / release candidate** branch. Code merged here from `develop` should be stable enough for final testing. Merges trigger automated pre-releases (`vX.Y.Z-next.N`) published to NPM under the `next` dist-tag.
-- **`develop`**: The main **integration branch**. All feature branches are merged here first. This branch collects changes intended for the _next_ release cycle. **Target Pull Requests here.**
-- **Feature/Fix Branches (`feature/*`, `fix/*`, etc.)**: Used for individual tasks. Always branch **off `develop`**.
-
-**General Flow:** `Feature/Fix Branch` -> **`develop`** -> `next` -> `master`
-
-## Commit Messages (Crucial!)
-
-Strict adherence to the **Conventional Commits** specification (https://www.conventionalcommits.org/) is **required**.
-
-- **Why?** Commit messages directly control automatic version bumping (`semantic-release`) and `CHANGELOG.md` generation.
-- **Format:** `<type>(<scope>): <subject>` (e.g., `feat(button): add loading spinner`).
-- **Key Types & Impact (on Stable Release):**
-- `feat`: New feature -> `minor` version bump.
-- `fix`: Bug fix -> `patch` version bump.
-- `!` (e.g., `refactor(core)!:`) or `BREAKING CHANGE:` footer -> `major` version bump.
-- Other types (`docs`, `chore`, `style`, `test`, `ci`, `build`, `refactor`, `perf`) document changes but don't trigger version bumps alone.
-- **Validation:** `husky` + `commitlint` automatically check message format upon commit. Invalid messages will fail the commit.
-
-_(See `CONTRIBUTING.md` for a concise summary focused on the commit action itself)._
-
-## Branch Synchronization (Maintainer Task)
-
-Maintain consistency across `master`, `next`, and `develop` by merging release commits and hotfixes. **Performed by maintainers.**
-
-**General Update Step:** Fetch latest remote state:
-
-```bash
-git fetch origin --prune
-```
-
-### 1. Sync `next` with `master` (After Stable Release or Hotfix)
-
-This is the most comprehensive synchronization, ensuring all development branches are aligned with the latest production code.
-
-- **Purpose:** Incorporate stable changes into the release candidate branch.
-- **Flow:** `master` -> `next`.
-
-  ```bash
-  # Update local 'next', merge 'origin/master', push 'next'
-  git switch next && git pull origin next && git merge origin/master && git push origin next
-  ```
-
-  _(Note: Merge conflicts might occur at either merge step and need manual resolution before continuing/pushing.)_
-
-### 2. Sync `develop` with `next` (After Pre-release on next OR after syncing next with master)
-
-- **Purpose:** Keep `develop` aligned with the latest pre-release state or the latest stable code propagated through next. Includes release commits (`chore(release): ...`).
-- **Flow:** `next` -> `develop`.
-
-  ```bash
-  # Update local 'next', merge 'origin/master', push 'next'
-  git switch develop && git pull origin develop && git merge origin/next && git push origin develop
-  ```
-
-  _(Note: Resolve conflicts before pushing.)_
-
----
-
-Contributors should regularly update their local `develop` branch (`git switch develop && git pull origin develop`).
-
-## Working with Storybook
-
-Develop and visualize components using Storybook.
-
-- **Start Storybook:**
-  ```bash
-  pnpm run storybook
-  ```
-- **Build Static Storybook:**
-  ```bash
-  pnpm run storybook:build
-  ```
-
-## Running Tests and Linting
-
-`nano-staged` auto-formats/fixes on commit, but manual verification is recommended before creating a PR. The CI (`ci.yml`) runs these checks automatically on PRs.
-
-- **Lint:** `pnpm run lint` (checks for errors not auto-fixed)
-- **Test:** `pnpm run test` (runs unit tests)
-
-## Building the Library
-
-Build the distributable library files:
-
-```bash
-pnpm run build
-```
-
-Output artifacts are placed in the `dist/` directory
-
-## Optional: Local Testing with Verdaccio
-
-Test your local build in a separate project before submitting a PR to develop.
-
-1. Install & Run Verdaccio: `npm install -g verdaccio` (or `pnpm add -g`), then `verdaccio`.\
-2. Build Library: `pnpm run build`.
-3. Publish Locally: `pnpm run publish:verdaccio`.
-4. Install in Test Project: `ng add @ng-zen/cli --registry http://localhost:4873/` (or pnpm add ...).

package/angular.json

@@ -1,66 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "pnpm",
-    "schematicCollections": ["angular-eslint"]
-  },
-  "newProjectRoot": "projects",
-  "schematics": {
-    "@schematics/angular:component": {
-      "style": "scss",
-      "changeDetection": "OnPush"
-    }
-  },
-  "projects": {
-    "cli": {
-      "projectType": "library",
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "zen",
-      "architect": {
-        "build": {
-          "builder": "./projects/schematic-builder:build",
-          "options": {
-            "files": ["src/**", "README.md", "package.json", "LICENSE", "CHANGELOG.md"],
-            "tsConfig": "tsconfig.schematics.json"
-          }
-        },
-        "test": {
-          "builder": "@angular-builders/jest:run",
-          "options": {
-            "configPath": "./jest.config.ts",
-            "tsConfig": "tsconfig.spec.json"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
-            "eslintConfig": "eslint.config.js"
-          }
-        },
-        "storybook": {
-          "builder": "@storybook/angular:start-storybook",
-          "options": {
-            "configDir": ".storybook",
-            "browserTarget": "cli:build",
-            "compodoc": true,
-            "compodocArgs": ["-e", "json", "-d", "./documentation/"],
-            "port": 6006
-          }
-        },
-        "build-storybook": {
-          "builder": "@storybook/angular:build-storybook",
-          "options": {
-            "configDir": ".storybook",
-            "browserTarget": "cli:build",
-            "compodoc": true,
-            "compodocArgs": ["-e", "json", "-d", "./documentation/"],
-            "outputDir": "dist/storybook"
-          }
-        }
-      }
-    }
-  }
-}

package/eslint.config.js

@@ -1,40 +0,0 @@
-// @ts-check
-const eslint = require('@eslint/js');
-const tseslint = require('typescript-eslint');
-const angular = require('angular-eslint');
-
-module.exports = tseslint.config(
-  {
-    files: ['**/*.ts'],
-    extends: [
-      eslint.configs.recommended,
-      ...tseslint.configs.recommended,
-      ...tseslint.configs.stylistic,
-      ...angular.configs.tsRecommended,
-    ],
-    processor: angular.processInlineTemplates,
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'zen',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'zen',
-          style: 'kebab-case',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.html'],
-    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
-    rules: {},
-  }
-);

package/jest.config.ts

@@ -1,20 +0,0 @@
-/**
- * For a detailed explanation regarding each configuration property, visit:
- * https://jestjs.io/docs/configuration
- */
-
-import type { Config } from 'jest';
-
-export default {
-  clearMocks: true,
-  collectCoverage: true,
-  coverageDirectory: 'coverage',
-  coverageProvider: 'v8',
-  moduleNameMapper: {
-    '^@ng-zen/cli/(.*)': '<rootDir>/src/$1',
-    '^ng-zen/components/(.*)': '<rootDir>/src/schematics/components/files/$1',
-    '^ng-zen/directives/(.*)': '<rootDir>/src/schematics/directives/files/$1',
-  },
-  preset: 'jest-preset-angular',
-  testEnvironment: 'jsdom',
-} satisfies Config;

package/projects/schematic-builder/builders/builders.json

@@ -1,9 +0,0 @@
-{
-  "builders": {
-    "build": {
-      "implementation": "./index.js",
-      "schema": "./schema.json",
-      "description": "Custom builder for angular schematics"
-    }
-  }
-}

package/projects/schematic-builder/builders/index.js

@@ -1,100 +0,0 @@
-import { createBuilder } from '@angular-devkit/architect';
-import { execa } from 'execa';
-import cpy from 'cpy';
-import path from 'node:path';
-import fs from 'fs-extra';
-
-const LOG = {
-  log: (logger, level, type, message) => {
-    const timestamp = new Date().toISOString();
-    const output = `[${timestamp}] [${type}] ${message}`;
-
-    // Use the appropriate logger method based on the log level
-    switch (level) {
-      case 'INFO':
-        logger.info(output);
-        break;
-      case 'ERROR':
-        logger.error(output);
-        break;
-      default:
-        logger.log(output);
-    }
-  },
-
-  info: (logger, type, message) => LOG.log(logger, 'INFO', type, message),
-  error: (logger, type, message) => LOG.log(logger, 'ERROR', type, message),
-};
-async function cleanOutputDirectory(outputDir, context) {
-  try {
-    if (await fs.pathExists(outputDir)) {
-      await fs.rm(outputDir, { recursive: true, force: true });
-    }
-    await fs.mkdir(outputDir, { recursive: true });
-  } catch (error) {
-    LOG.error(context.logger, 'ERROR', `Failed to clean output directory: ${error.message}`);
-    context.logger.error();
-    throw error;
-  }
-}
-
-async function getOutputDir(tsConfigPath, workspaceRoot) {
-  const fullPath = path.resolve(workspaceRoot, tsConfigPath);
-  const configContent = await fs.readFile(fullPath, 'utf-8');
-  const config = JSON.parse(configContent);
-
-  const outDir = config.compilerOptions?.outDir || 'dist';
-  const tsConfigDir = path.dirname(fullPath);
-
-  return path.resolve(tsConfigDir, outDir);
-}
-
-async function compileTypeScript(tsConfig, context) {
-  await execa('tsc', ['-p', tsConfig], {
-    stdio: 'inherit',
-    cwd: context.currentDirectory,
-  });
-}
-
-async function copyProjectFiles(files, outputDir, context) {
-  await cpy(files, outputDir, {
-    parents: true,
-    cwd: context.currentDirectory,
-  });
-}
-
-async function cleanPackageJson(outputDir) {
-  const distPackageJson = path.join(outputDir, 'package.json');
-  const pkg = await fs.readJson(distPackageJson);
-  delete pkg.scripts;
-  delete pkg.devDependencies;
-  await fs.writeJson(distPackageJson, pkg, { spaces: 2 });
-}
-
-export default createBuilder(async (options, context) => {
-  try {
-    const outputDir = await getOutputDir(options.tsConfig, context.workspaceRoot);
-    LOG.info(context.logger, 'BUILD', 'Starting build process...');
-
-    LOG.info(context.logger, 'CLEANING', `Cleaning old distribution files in ${outputDir}`);
-    await cleanOutputDirectory(outputDir, context);
-    LOG.info(context.logger, 'CLEANING', `Cleaning completed successfully.`);
-
-    LOG.info(context.logger, 'COMPILING', `Compiling TypeScript files using config: ${options.tsConfig}`);
-    await compileTypeScript(options.tsConfig, context);
-    LOG.info(context.logger, 'COMPILING', 'Compilation completed successfully.');
-
-    LOG.info(context.logger, 'COPYING', `Copying project files to: ${outputDir}`);
-    await copyProjectFiles(options.files, outputDir, context);
-    LOG.info(context.logger, 'COPYING', 'Copy completed successfully.');
-
-    LOG.info(context.logger, 'UPDATING', `Updating package.json file.`);
-    await cleanPackageJson(outputDir);
-    LOG.info(context.logger, 'UPDATING', 'Update completed successfully.');
-
-    return { success: true };
-  } catch (error) {
-    LOG.error(context.logger, 'ERROR', `Build failed: ${error.message}`);
-    return { success: false };
-  }
-});

package/projects/schematic-builder/builders/schema.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "type": "object",
-  "properties": {
-    "files": {
-      "type": "array",
-      "items": {
-        "type": "string"
-      }
-    },
-    "outputDir": {
-      "type": "string"
-    },
-    "tsConfig": {
-      "type": "string"
-    }
-  }
-}

package/projects/schematic-builder/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "schematic-builder",
-  "version": "1.0.0",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "builders": "./builders/builders.json"
-}

package/src/schematics/components/files/button/button.component.scss

@@ -1,42 +0,0 @@
-$bg-color-hover: #333;
-$bg-color: #000;
-$color: #fff;
-$padding: 8px 24px;
-$shadow-hover: 0 0 0 3px rgb(0 123 255 / 50%);
-$shadow: 0 2px 4px rgb(0 0 0 / 10%);
-$transition-duration: 0.4s;
-
-:host {
-  display: inline-block;
-  font-size: 14px;
-  font-weight: bold;
-  text-align: center;
-  cursor: pointer;
-  border: none;
-  padding: $padding;
-  border-radius: 99999px;
-  transition: all $transition-duration ease;
-  background-color: $bg-color;
-  color: $color;
-  box-shadow: $shadow;
-  text-decoration: none;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-}
-
-/* Hover state */
-:host:hover {
-  background-color: $bg-color-hover;
-}
-
-/* Focus state */
-:host:focus {
-  box-shadow: $shadow-hover;
-}
-
-/* Disabled state */
-:host[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}

package/src/schematics/ng-add/index.ts

@@ -1,14 +0,0 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
-
-import { addPathToTsconfigUtil } from '../../utils';
-import { NgZenGeneratorSchema } from './ng-zen-generator';
-
-export function ngAdd(options: NgZenGeneratorSchema): Rule {
-  return (tree: Tree, _context: SchematicContext) => {
-    _context.logger.info('Adding library to the project');
-
-    addPathToTsconfigUtil(tree, 'ng-zen/*', [`${options.path}/*`]);
-
-    return tree;
-  };
-}

package/src/schematics/ng-add/ng-zen-generator.ts

@@ -1,3 +0,0 @@
-export interface NgZenGeneratorSchema {
-  path: string;
-}

package/src/utils/add-path-to-tsconfig.util.ts

@@ -1,50 +0,0 @@
-import { SchematicsException, Tree } from '@angular-devkit/schematics';
-
-export function addPathToTsconfigUtil(tree: Tree, key: string, value: string[]): void {
-  const tsconfigPath = 'tsconfig.json';
-
-  // Check if tsconfig.json exists
-  if (!tree.exists(tsconfigPath)) {
-    throw new SchematicsException('tsconfig.json does not exist');
-  }
-
-  // Read tsconfig.json content as string
-  const tsconfigBuffer = tree.read(tsconfigPath);
-  if (!tsconfigBuffer) {
-    throw new SchematicsException('Failed to read tsconfig.json');
-  }
-  let tsconfigContent = tsconfigBuffer.toString('utf-8');
-
-  // Extract and preserve the comment
-  const commentMatch = tsconfigContent.match(/\/\*[\s\S]*?\*\//);
-  const comment = commentMatch ? commentMatch[0] : '';
-
-  // Remove comment from content to parse JSON
-  tsconfigContent = tsconfigContent.replace(comment, '');
-
-  // Parse tsconfig.json content
-  let tsconfig;
-  try {
-    tsconfig = JSON.parse(tsconfigContent);
-  } catch (e) {
-    throw new SchematicsException('Failed to parse tsconfig.json' + e);
-  }
-
-  // Modify compilerOptions.paths to add your new mapping
-  if (!tsconfig.compilerOptions) {
-    tsconfig.compilerOptions = {};
-  }
-  if (!tsconfig.compilerOptions.paths) {
-    tsconfig.compilerOptions.paths = {};
-  }
-  tsconfig.compilerOptions.paths[key] = value;
-
-  // Convert tsconfig back to JSON string
-  tsconfigContent = JSON.stringify(tsconfig, null, 2);
-
-  // Ensure the preserved comment is prepended to the JSON string
-  tsconfigContent = `${comment}\n${tsconfigContent}`;
-
-  // Write back to tsconfig.json
-  tree.overwrite(tsconfigPath, tsconfigContent);
-}

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './add-path-to-tsconfig.util';
-export * from './apply-file-template.util';

package/tsconfig.json

@@ -1,31 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "bundler",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "paths": {
-      "ng-zen/components/*": ["./src/schematics/components/files/*"],
-      "ng-zen/directives/*": ["./src/schematics/directives/files/*"]
-    }
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

package/tsconfig.lib.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true
-  },
-  "exclude": ["**/*.spec.ts"]
-}

package/tsconfig.schematics.json

@@ -1,30 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "outDir": "./dist/@ng-zen/cli/",
-    "declarationMap": false,
-    "baseUrl": "tsconfig",
-    "lib": ["es2018"],
-    "declaration": false,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedParameters": true,
-    "noUnusedLocals": true,
-    "rootDir": "src",
-    "skipDefaultLibCheck": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strictNullChecks": true,
-    "target": "es2022",
-    "types": ["jest"]
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "include": ["./src/**/*"],
-  "exclude": ["./src/schematics/*/files/**/*"]
-}

package/tsconfig.spec.json

@@ -1,9 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.schematics.json",
-  "compilerOptions": {
-    "lib": ["ES2022", "DOM"],
-    "types": ["jest", "node", "jsdom"]
-  },
-  "include": ["./src/**/*.spec.ts", "./src/**/*.d.ts"]
-}

package/{src/schematics → schematics}/components/files/checkbox/checkbox.component.ts

@@ -1,5 +1,5 @@
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * ZenCheckboxComponent is a reusable checkbox component designed to provide