Merge pull request #15 from sir-alex/tech/ng-schematics-stories-generation

Verdaccio setup, NG schematics setup

Author: AlexD

package-lock.json

@@ -8,13 +8,16 @@
     "build-colors": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-colors.ts",
     "build-constants": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-constants.ts",
     "start": "ng serve",
-    "prebuild": "yarn run build-constants && yarn run build-typography && yarn run build-colors",
+    "increase-patch": "npm version patch --prefix projects/lfx-component-lib",
+    "prebuild": "npm run increase-patch && npm run build-constants && npm run build-typography && npm run build-colors",
     "build": "ng build",
+    "postbuild": "npm run build --prefix projects/lfx-component-lib",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "storybook": "ng run lfx-component-lib:storybook",
     "build-storybook": "ng run lfx-component-lib:build-storybook",
-    "chromatic": "npx chromatic --project-token=chpt_92f26893ce6e479"
+    "chromatic": "npx chromatic --project-token=chpt_92f26893ce6e479",
+    "verdaccio": "npx verdaccio"
   },
   "dependencies": {
     "@angular/animations": "^18.0.0",
@@ -48,6 +51,7 @@
     "@storybook/test": "^8.2.6",
     "@types/jasmine": "~5.1.0",
     "chromatic": "^11.7.1",
+    "copyfiles": "^2.4.1",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

package.json

@@ -2,6 +2,9 @@
 
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
 
+## Installation with NG CLI
+`ng add lfx-component-lib`
+
 ## Code scaffolding
 
 Run `ng generate component component-name --project lfx-component-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lfx-component-lib`.

projects/lfx-component-lib/README.md

@@ -1,20 +1,27 @@
 {
-  "name": "@emlimlf/lfx-component-lib",
-  "version": "0.0.10",
+  "name": "lfx-component-lib",
+  "version": "0.0.14",
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/collection.json ../../dist/lfx-component-lib/"
+  },
+  "ng-add": {
+    "save": "true"
+  },
+  "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/common": "^18.1.0",
     "@angular/core": "^18.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "devDependencies": {
+    "copyfiles": "^2.4.1"
+  },
   "sideEffects": false,
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com/@emlimlf"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/emlimlf/lfx-component-lib.git"
+    "registry": "http://localhost:4873"
   },
   "exports": {
     "./color-palette.json": {

projects/lfx-component-lib/package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add LFX Component Lib to the project",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}

projects/lfx-component-lib/schematics/collection.json

@@ -0,0 +1,10 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+export function ngAdd(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('Installing dependencies...');
+    context.addTask(new NodePackageInstallTask());
+    return tree;
+  }
+}

projects/lfx-component-lib/schematics/ng-add/index.ts

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/lfx-component-lib/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "include": [
+    "schematics/**/*"
+  ],
+  "exclude": [
+    "schematics/*/files/**/*"
+  ]
+}