design-angular-kit 1.1.4 → 1.2.1

package/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "it",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "it",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

package/karma.conf.js

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-coverage'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeNoSandbox: {
+        base: 'Chrome',
+        flags: ['--no-sandbox'],
+      },
+    },
+    singleRun: false,
+  });
+};

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design-angular-kit",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "assets": ["assets/**/*.json"]
+}

package/ng-package.prod.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design-angular-kit",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "assets": ["assets/**/*.json"]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-angular-kit",
   "description": "Un toolkit Angular conforme alle linee guida di design per i servizi web della PA",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "license": "BSD-3-Clause",
   "keywords": [
     "angular",
@@ -27,6 +27,10 @@
       "url": "https://www.net-serv.it/"
     }
   ],
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/schema.json schematics/*/files/** schematics/collection.json ../../dist/my-lib/"
+  },
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"
@@ -42,20 +46,11 @@
     "@angular/router": "^18.0.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.8.8"
+    "bootstrap-italia": "^2.13.4"
   },
   "sideEffects": false,
-  "module": "fesm2022/design-angular-kit.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/design-angular-kit.mjs",
-      "esm": "./esm2022/design-angular-kit.mjs",
-      "default": "./fesm2022/design-angular-kit.mjs"
-    }
+  "devDependencies": {
+    "copyfiles": "file:../../node_modules/copyfiles",
+    "typescript": "file:../../node_modules/typescript"
   }
 }

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

@@ -0,0 +1,45 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import { Schema as SchematicOptions } from './schema';
+
+describe(`ng add design-angular-kit`, () => {
+  const collectionPath = path.join(__dirname, '../collection.json');
+  const runner = new SchematicTestRunner('schematics', collectionPath);
+
+  const defaultOptions: SchematicOptions = {
+    project: 'test-project', // Set your default project name
+  };
+
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    // Simulate an Angular workspace project before running the schematic
+    appTree = await runner.runExternalSchematic('@schematics/angular', 'workspace', {
+      name: 'workspace',
+      version: '6.0.0',
+      newProjectRoot: 'projects',
+    });
+
+    appTree = await runner.runExternalSchematic(
+      '@schematics/angular',
+      'application',
+      {
+        name: defaultOptions.project,
+        standalone: false,
+      },
+      appTree
+    );
+  });
+
+  it('should add DesignAngularKitModule to package.json', async () => {
+    const tree = await runner.runSchematic('ng-add', defaultOptions, appTree);
+
+    // Check if the package.json file exists
+    const packageJsonPath = '/package.json';
+    expect(tree.files).toContain(packageJsonPath);
+
+    // Check if the correct dependency was added
+    const content = tree.readContent(packageJsonPath);
+    expect(content).toContain(`"design-angular-kit"`);
+  });
+});

package/schematics/ng-add/index.ts

@@ -0,0 +1,36 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask, RunSchematicTask } from '@angular-devkit/schematics/tasks';
+
+import { Schema } from './schema';
+import { addPackageToPackageJson, getPackageVersionFromPackageJson, toSemVerObject } from './utils';
+import { getPackageVersion } from './versions-helper';
+
+const DESIGN_ANGULAR_KIT_PACKAGE_NAME = 'design-angular-kit';
+const NG_LATEST_VERSION = '19.0.0';
+
+export default function (options: Schema): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    // Get the version of `@angular/core`
+    // This tag should be preferred because all Angular dependencies should  have the same version tag if possible.
+    const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
+    const designAngularKitVersionRange = getPackageVersionFromPackageJson(host, DESIGN_ANGULAR_KIT_PACKAGE_NAME);
+    const angularDependencyVersion = ngCoreVersionTag || NG_LATEST_VERSION;
+
+    const { major: angularMajorVersion } = toSemVerObject(angularDependencyVersion);
+
+    const designAngularKitPackageVersion = getPackageVersion({ angularMajorVersion });
+
+    // The CLI inserts `design-angular-kit` into the `package.json` before this schematic runs.
+    // This means that we do not need to insert Design Angular Kit into `package.json` files again.
+    if (designAngularKitVersionRange === null) {
+      addPackageToPackageJson(host, DESIGN_ANGULAR_KIT_PACKAGE_NAME, designAngularKitPackageVersion);
+    }
+
+    addPackageToPackageJson(host, '@angular/cdk', angularDependencyVersion);
+    addPackageToPackageJson(host, '@angular/animations', angularDependencyVersion);
+
+    const installTaskId = context.addTask(new NodePackageInstallTask());
+
+    context.addTask(new RunSchematicTask('ng-add-setup-project', options), [installTaskId]);
+  };
+}

package/schematics/ng-add/rules/setup-project/add-animations.ts

@@ -0,0 +1,7 @@
+import { callRule, noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+export function addAnimations(): Rule {
+  //this dependency should be provided at application level instead of lib level. ref: provideDesignAngularKit
+  //provideAnimationsAsync(),
+  return (host: Tree, context: SchematicContext) => callRule(noop(), host, context);
+}

package/schematics/ng-add/rules/setup-project/add-assets.ts

@@ -0,0 +1,45 @@
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
+import { Rule, Tree } from '@angular-devkit/schematics';
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const ASSETS_CONFIG = {
+  glob: '**/*',
+  input: './node_modules/bootstrap-italia/',
+  output: '/bootstrap-italia/',
+};
+
+export function addAssets(options: Schema): Rule {
+  return async (host: Tree) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    addAssetsToAngularJson(project);
+    await writeWorkspace(host, workspace);
+  };
+}
+
+function addAssetsToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const assets = targetOptions.assets as JsonArray | undefined;
+  if (!assets) {
+    targetOptions.assets = [ASSETS_CONFIG];
+  } else {
+    const existingAssets = assets.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, input] of existingAssets.entries()) {
+      if (input === ASSETS_CONFIG.input) {
+        return;
+      }
+    }
+    assets.push(ASSETS_CONFIG);
+  }
+}

package/schematics/ng-add/rules/setup-project/add-design-angular-kit.ts

@@ -0,0 +1,40 @@
+import { Rule, SchematicContext, Tree, callRule } from '@angular-devkit/schematics';
+import { isStandaloneApp } from '@angular/cdk/schematics';
+import { addRootImport, addRootProvider, readWorkspace } from '@schematics/angular/utility';
+import { getMainFilePath } from '@schematics/angular/utility/standalone/util';
+import { firstValueFrom, map } from 'rxjs';
+import { Schema } from '../../schema';
+import { NoMainFileException, NoProjectException } from './exceptions';
+
+export function addDesignAngularKit(options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await readWorkspace(host);
+    const projectName = options.project || (workspace.extensions.defaultProject as string);
+
+    // 1. getting project by name
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    // 2. getting main file for project
+    const mainFilePath = await getMainFilePath(host, projectName);
+    if (!mainFilePath || !host.read(mainFilePath)) {
+      throw new NoMainFileException(projectName);
+    }
+
+    const isNotStandaloneApp = !isStandaloneApp(host, mainFilePath);
+
+    const rule = isNotStandaloneApp
+      ? addRootImport(projectName, ({ code, external }) => code`${external('DesignAngularKitModule', 'design-angular-kit')}.forRoot()\n`)
+      : addRootProvider(projectName, ({ code, external }) => code`${external('provideDesignAngularKit', 'design-angular-kit')}()`);
+
+    return firstValueFrom(
+      callRule(rule, host, context).pipe(
+        map(() => {
+          return (): Rule => () => {};
+        })
+      )
+    );
+  };
+}

package/schematics/ng-add/rules/setup-project/add-http-client.ts

@@ -0,0 +1,7 @@
+import { Rule, SchematicContext, Tree, callRule, noop } from '@angular-devkit/schematics';
+
+export function addHttpClient(): Rule {
+  //this dependency should be provided at application level instead of lib level. ref: provideDesignAngularKit
+  //provideHttpClient(),
+  return (host: Tree, context: SchematicContext) => callRule(noop(), host, context);
+}

package/schematics/ng-add/rules/setup-project/add-import-to-style-file.ts

@@ -0,0 +1,120 @@
+import { JsonArray, JsonObject, normalize, workspaces } from '@angular-devkit/core';
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+import * as path from 'path';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const BOOTSTRAP_ITALIA_CSS_FILEPATH = 'node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css';
+const SUPPORTED_BOOTSTRAP_ITALIA_STYLE_MAP: Record<string, string> = {
+  '.sass': `
+  /* Importazione libreria SCSS di bootstrap-italia */
+  @import 'bootstrap-italia/scss/bootstrap-italia'
+  `,
+  '.scss': `
+  /* Importazione libreria SCSS di bootstrap-italia */
+  @import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';
+  `,
+};
+
+/**
+ * if supported
+ *    add to styles.scss or to style.sass
+ * else
+ *  add css to assets in angular.json
+ * @param options
+ * @returns Rule
+ */
+export function addImportToStyleFile(options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    const styleFilePath = getProjectStyleFile(project as any) || '';
+    const styleFileExtension = path.extname(styleFilePath);
+    const styleFilePatch = SUPPORTED_BOOTSTRAP_ITALIA_STYLE_MAP[styleFileExtension];
+
+    // found supported styles
+    if (styleFilePatch) {
+      return addBootstrapItaliaToStylesFile(styleFilePath, styleFilePatch);
+    } else {
+      // found some styles, but unsupported
+      if (styleFileExtension !== '.css' && styleFileExtension !== '') {
+        context.logger.warn('messages.unsupportedStyles(styleFilePath)');
+      }
+
+      // just patching 'angular.json'
+      addBootstrapItaliaToAngularJson(project as any);
+      await writeWorkspace(host, workspace);
+    }
+  };
+}
+
+function addBootstrapItaliaToStylesFile(styleFilePath: string, styleFilePatch: string): Rule {
+  return async (host: Tree) => {
+    const styleContent = host.read(styleFilePath)!.toString('utf-8');
+
+    const recorder = host.beginUpdate(styleFilePath);
+    recorder.insertRight(styleContent.length, styleFilePatch);
+
+    host.commitUpdate(recorder);
+  };
+}
+
+function addBootstrapItaliaToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const styles = targetOptions.styles as JsonArray | undefined;
+  if (!styles) {
+    targetOptions.styles = [BOOTSTRAP_ITALIA_CSS_FILEPATH];
+  } else {
+    const existingStyles = styles.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, stylePath] of existingStyles.entries()) {
+      if (stylePath === BOOTSTRAP_ITALIA_CSS_FILEPATH) {
+        return;
+      }
+    }
+    styles.unshift(BOOTSTRAP_ITALIA_CSS_FILEPATH);
+  }
+}
+
+// Regular expression that matches all possible Angular CLI default style files
+const defaultStyleFileRegex = /styles\.(c|le|sc|sa)ss/;
+
+// Regular expression that matches all files that have a proper stylesheet extension
+const validStyleFileRegex = /\.(c|le|sc|sa)ss/;
+
+function getProjectStyleFile(project: workspaces.ProjectDefinition, extension?: string): string | null {
+  const buildOptions = getProjectTargetOptions(project, 'build');
+
+  if (buildOptions.styles && Array.isArray(buildOptions.styles) && buildOptions.styles.length) {
+    const styles = buildOptions.styles.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    // Look for the default style file that is generated for new projects by the Angular CLI. This
+    // default style file is usually called `styles.ext` unless it has been changed explicitly.
+    const defaultMainStylePath = styles.find(file => (extension ? file === `styles.${extension}` : defaultStyleFileRegex.test(file)));
+
+    if (defaultMainStylePath) {
+      return normalize(defaultMainStylePath);
+    }
+
+    // If no default style file could be found, use the first style file that matches the given
+    // extension. If no extension specified explicitly, we look for any file with a valid style
+    // file extension.
+    const fallbackStylePath = styles.find(file => (extension ? file.endsWith(`.${extension}`) : validStyleFileRegex.test(file)));
+
+    if (fallbackStylePath) {
+      return normalize(fallbackStylePath);
+    }
+  }
+
+  return null;
+}

package/schematics/ng-add/rules/setup-project/add-localisation.ts

@@ -0,0 +1,45 @@
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
+import { Rule, Tree } from '@angular-devkit/schematics';
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const LOCALISATION_CONFIG = {
+  glob: '**/*',
+  input: './node_modules/design-angular-kit/assets/i18n',
+  output: '/bootstrap-italia/i18n/',
+};
+
+export function addLocalisation(options: Schema): Rule {
+  return async (host: Tree) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    addLocalisationToAngularJson(project);
+    await writeWorkspace(host, workspace);
+  };
+}
+
+function addLocalisationToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const assets = targetOptions.assets as JsonArray | undefined;
+  if (!assets) {
+    targetOptions.assets = [LOCALISATION_CONFIG];
+  } else {
+    const existingAssets = assets.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, input] of existingAssets.entries()) {
+      if (input === LOCALISATION_CONFIG.input) {
+        return;
+      }
+    }
+    assets.push(LOCALISATION_CONFIG);
+  }
+}

package/schematics/ng-add/rules/setup-project/angular-json-helper.ts

@@ -0,0 +1,11 @@
+import { workspaces } from '@angular-devkit/core';
+import { SchematicsException } from '@angular-devkit/schematics';
+
+export function getProjectTargetOptions(project: workspaces.ProjectDefinition, buildTarget: string) {
+  const buildTargetObject = project.targets.get(buildTarget);
+  if (buildTargetObject && buildTargetObject.options) {
+    return buildTargetObject.options;
+  }
+
+  throw new SchematicsException(`Cannot determine project target configuration for: ${buildTarget}.`);
+}

package/schematics/ng-add/rules/setup-project/exceptions.ts

@@ -0,0 +1,13 @@
+import { SchematicsException } from '@angular-devkit/schematics';
+
+export class NoProjectException extends SchematicsException {
+  constructor(project: string) {
+    super(`Unable to find project '${project}' in the workspace`);
+  }
+}
+
+export class NoMainFileException extends SchematicsException {
+  constructor(project: string) {
+    super(`Unable to find 'build.options.main' file path for project "${project}`);
+  }
+}

package/schematics/ng-add/{schema.d.ts → schema.ts}

@@ -1,3 +1,3 @@
 export interface Schema {
-    project: string;
+  project: string;
 }