@barcidev/ngx-autogen 0.1.0

package/README.md

@@ -0,0 +1,366 @@
+# ngx-autogen
+
+[![Language: English](https://img.shields.io/badge/lang-en-blue.svg)](README.md)
+[![Language: Spanish](https://img.shields.io/badge/lang-es-yellow.svg)](README.es.md)
+
+**ngx-autogen** is a set of schematics designed to optimize and standardize the workflow in Angular projects. This library provides code generation tools that follow best practices, allowing developers to save time on repetitive tasks and architecture configuration.
+
+## 🚀 Features
+
+The project is initially launched with a focus on state management, but is designed to grow:
+
+- **Store Schematic**: Our first available schematic. It allows you to automatically generate the entire structure needed for a store based on signals (NGRX-Signals), facilitating the quick and scalable integration of state management in your applications.
+
+## 📅 Coming Soon
+
+**ngx-autogen** is a project in continuous evolution. New tools and schematics will be progressively added to cover more aspects of Angular development, such as:
+
+- Generation of services and utilities.
+- Scaffolding for advanced components.
+
+## 📦 Installation
+
+You can install the package in your Angular project using Angular CLI so that the project is automatically configured with the necessary dependencies:
+
+```bash
+ng add ngx-autogen
+```
+
+## 🛠️ Usage
+
+### Generate a Store
+
+#### Properties
+
+- `name` (required): name of the store.
+- `pk` (optional): name of the primary key. If not specified, the one specified during the schematic installation process will be used; otherwise, `id` will be used.
+- `path` (optional): path of the store. If not specified, the one specified during the schematic installation process will be used; otherwise, `src/app/core` will be used.
+
+#### Example
+
+```bash
+ng g app-store --name="user" --pk="cod"
+```
+
+This will create the files `user.model.ts`, `user.service.ts`, `user.store.ts` within the `src/app/core/user` folder, the `entity.model.ts` file if it doesn't exist within the `src/app/core/common/entity` folder, and the `index.ts` file within the `src/app/core` folder.
+
+```bash
+common/
+└── entity/
+    └── entity.model.ts
+user/
+├── user.service.ts
+├── user.model.ts
+└── user.store.ts
+index.ts
+```
+
+The `index.ts` file will export everything necessary so that the store can be imported and used anywhere in the application.
+
+```bash
+/* USER */
+export * from './user/user.model';
+export * from './user/user.service';
+export * from './user/user.store';
+```
+
+The `entity.model.ts` file contains the interfaces and types necessary for state and form management.
+
+```bash
+import { FormControl } from '@angular/forms';
+
+export interface EntityStatus {
+  addError?: Error | null;
+  addLoading?: boolean;
+  removeError?: Error | null;
+  removeLoading?: boolean;
+  error: Error | null;
+  idsRemoving?: (number | string)[];
+  idSelected?: null | number | string;
+  idsUpdating?: (number | string)[];
+  loaded: boolean;
+  loading: boolean;
+  selectedError?: Error | null;
+  selectedLoading?: boolean;
+  updateError?: Error | null;
+  updateLoading?: boolean;
+}
+
+export type FormGroupType<T> = {
+  [K in keyof T]: FormControl<T[K]>;
+};
+```
+
+The `user.model.ts` file contains the data model interface.
+
+```bash
+import { FormGroupType } from '../common/form/form.model';
+
+export interface AddUser {
+}
+
+export type AddUserForm = FormGroupType<AddUser>;
+
+export interface UserDto {
+  cod: number;
+}
+
+export type UpdateUser = Partial<UserDto> & Pick<UserDto, 'cod'>;
+
+export interface UserRequest{}
+```
+
+The `user.service.ts` file contains the service responsible for business logic.
+
+```bash
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import {
+  AddUser,
+  UserDto,
+  UpdateUser
+} from './user.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  addUser$(entity: AddUser): Observable<number> {
+    return of(0);
+  }
+
+  removeUser$(cod: number): Observable<boolean> {
+    return of(true);
+  }
+
+  getUsers$(): Observable<UserDto[]> {
+    return of([]);
+  }
+
+  updateUser$(entity: UpdateUser): Observable<boolean> {
+    return of(true);
+  }
+}
+```
+
+The `user.store.ts` file contains the store responsible for state management.
+
+```bash
+import { computed, inject } from '@angular/core';
+import { patchState, signalStore, type, withComputed, withHooks, withMethods, withState } from '@ngrx/signals';
+import {
+  addEntity,
+  entityConfig,
+  removeEntity,
+  setAllEntities,
+  updateEntity,
+  withEntities
+} from '@ngrx/signals/entities';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { catchError, of, pipe, switchMap, tap } from 'rxjs';
+
+import { EntityStatus } from '../common/entity/entity.model';
+import {
+  UserDto,
+  AddUser,
+  UpdateUser
+} from './user.model';
+import { UserService } from './user.service';
+
+const initialStatus: EntityStatus = {
+  error: null,
+  loaded: false,
+  loading: false,
+};
+
+const config = entityConfig({
+  entity: type<UserDto>(),
+  selectId: (entity) => entity.cod,
+});
+
+export const UserStore = signalStore(
+  withEntities(config),
+  withState({
+    _status: initialStatus,
+  }),
+  withComputed(({ entityMap, _status }) => ({
+    users: computed(() => Object.values(entityMap())),
+    userSeleccionado: computed(() => {
+      const cod = _status().idSelected;
+      return cod ? entityMap()[cod] : null;
+    }),
+    error: computed(() => _status().error),
+    loaded: computed(() => _status().loaded),
+    loading: computed(() => _status().loading),
+    loadingRemove: computed(
+      () => (cod?: number) =>
+        (cod ? _status().idsRemoving?.includes(cod) : _status().removeLoading) || false
+    ),
+    loadingUpdate: computed(
+      () => (cod?: number) =>
+        (cod ? _status().idsUpdating?.includes(cod) : _status().updateLoading) || false
+    ),
+  })),
+  withMethods((store, userService = inject(UserService)) => ({
+    addUser: rxMethod<AddUser>(
+      pipe(
+        tap(() => {
+          patchState(store, { _status: { ...store._status(), addLoading: true } });
+        }),
+        switchMap((entity) => {
+          return userService.addUser$(entity).pipe(
+            tap((cod) => {
+              patchState(store, addEntity({ ...entity, cod }, config), {
+                _status: {
+                  ...store._status(),
+                  addLoading: false,
+                  error: null,
+                },
+              });
+            }),
+            catchError(() => {
+              patchState(store, {
+                _status: {
+                  ...store._status(),
+                  addLoading: false,
+                  error: new Error('Error adding user'),
+                },
+              });
+              return of(entity);
+            })
+          );
+        })
+      )
+    ),
+    loadUsers: rxMethod<void>(
+      pipe(
+        tap(() => {
+          patchState(store, { _status: { ...store._status(), loading: true } });
+        }),
+        switchMap(() => {
+          return userService.getUsers$().pipe(
+            tap((response) => {
+              patchState(store, setAllEntities(response, config), {
+                _status: {
+                  ...store._status(),
+                  error: null,
+                  loaded: true,
+                  loading: false,
+                },
+              });
+            }),
+            catchError(() => {
+              patchState(store, {
+                _status: {
+                  ...store._status(),
+                  error: new Error('Error loading users'),
+                  loading: false,
+                },
+              });
+              return of([]);
+            })
+          );
+        })
+      )
+    ),
+    removeUser: rxMethod<number>(
+      pipe(
+        tap((cod) => {
+          patchState(store, {
+            _status: {
+              ...store._status(),
+              removeLoading: true,
+              idsRemoving: [...(store._status().idsRemoving || []), cod],
+            },
+          });
+        }),
+        switchMap((cod) => {
+          return userService.removeUser$(cod).pipe(
+            tap((success) => {
+              if (success) {
+                const idsRemoving = store._status().idsRemoving || [];
+                patchState(store, removeEntity(cod), {
+                  _status: {
+                    ...store._status(),
+                    removeLoading: false,
+                    error: null,
+                    idsRemoving: idsRemoving.filter((idRemoving) => idRemoving !== cod),
+                  },
+                });
+              } else {
+                throw new Error('Error deleting user');
+              }
+            }),
+            catchError(() => {
+              const idsRemoving = store._status().idsRemoving || [];
+              patchState(store, {
+                _status: {
+                  ...store._status(),
+                  removeLoading: false,
+                  error: new Error('Error deleting user'),
+                  idsRemoving: idsRemoving.filter((idRemoving) => idRemoving !== cod),
+                },
+              });
+              return of(false);
+            })
+          );
+        })
+      )
+    ),
+    updateUser: rxMethod<UpdateUser>(
+      pipe(
+        tap((entity) => {
+          patchState(store, {
+            _status: {
+              ...store._status(),
+              idsUpdating: [...(store._status().idsUpdating || []), entity.cod],
+              updateLoading: true,
+            },
+          });
+        }),
+        switchMap((entity) => {
+          return userService.updateUser$(entity).pipe(
+            tap((success) => {
+              if (success) {
+                const idsUpdating = store._status().idsUpdating || [];
+                patchState(store, updateEntity({ changes: entity, id: entity.cod }, config), {
+                  _status: {
+                    ...store._status(),
+                    error: null,
+                    idsUpdating: idsUpdating.filter((idUpdating) => idUpdating !== entity.cod),
+                    updateLoading: false,
+                  },
+                });
+              } else {
+                throw new Error('Error updating user');
+              }
+            }),
+            catchError(() => {
+              const idsUpdating = store._status().idsUpdating || [];
+              patchState(store, {
+                _status: {
+                  ...store._status(),
+                  error: new Error('Error updating user'),
+                  idsUpdating: idsUpdating.filter((idUpdating) => idUpdating !== entity.cod),
+                  updateLoading: false,
+                },
+              });
+              return of(false);
+            })
+          );
+        })
+      )
+    ),
+  })),
+  withHooks({
+    onInit: (store) => {
+      store.loadUsers();
+    },
+  })
+);
+```
+
+## 📄 License
+
+This project is under the [MIT](LICENSE) license.

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@barcidev/ngx-autogen",
+  "version": "0.1.0",
+  "description": "A collection of Angular schematics for essential functionalities.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && jasmine src/**/*_spec.js",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.template",
+    "src/**/*.d.ts",
+    "src/**/schema.json",
+    "src/collection.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "angular",
+    "schematics",
+    "state-management",
+    "ngrx",
+    "signals",
+    "scaffolding"
+  ],
+  "author": "Jorge Palacio Barcinilla",
+  "license": "MIT",
+  "schematics": "./src/collection.json",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jpalacio09/ngx-autogen.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/jpalacio09/ngx-autogen#readme",
+  "bugs": {
+    "url": "https://github.com/jpalacio09/ngx-autogen/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/jpalacio09"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "@angular-devkit/core": "^20.3.13",
+    "@angular-devkit/schematics": "^20.3.13",
+    "@schematics/angular": "^21.0.4",
+    "typescript": "~5.9.2"
+  },
+  "devDependencies": {
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.17.19",
+    "copyfiles": "^2.4.1",
+    "jasmine": "^5.0.0"
+  }
+}

package/src/collection.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Ng add schematic for ngx-autogen.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "app-store": {
+      "description": "Adds NgRx Store to the Angular application with signal support.",
+      "factory": "./ngrx/store/index#signalStore",
+      "schema": "./ngrx/store/schema.json"
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import { Rule } from "@angular-devkit/schematics";
+import { NgAddSchemaOptions } from "./schema";
+export declare function ngAdd(options: NgAddSchemaOptions): Rule;

package/src/ng-add/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+function ngAdd(options) {
+    return (tree, _context) => {
+        const packagePath = "/package.json";
+        const buffer = tree.read(packagePath);
+        if (!buffer) {
+            throw new schematics_1.SchematicsException("Could not find package.json. Make sure you are in the root of an Angular project.");
+        }
+        const packageJson = JSON.parse(buffer.toString());
+        // 1. Obtener la versión de Angular Core
+        const angularCoreVer = packageJson.dependencies["@angular/core"] ||
+            packageJson.devDependencies["@angular/core"];
+        if (!angularCoreVer) {
+            throw new schematics_1.SchematicsException("The version of @angular/core could not be determined. Please ensure that Angular is installed in your project.");
+        }
+        const mainVersion = parseInt(angularCoreVer.replace(/[^\d.]/g, "").split(".")[0], 10);
+        // 2. Validación: NgRx Signals requiere Angular 16+ (v17+ recomendado)
+        if (mainVersion < 16) {
+            _context.logger.error(`❌ Error: ngx-essentials requires Angular v16 or higher. Detected: v${mainVersion}`);
+            return tree; // Stop execution
+        }
+        // 3. Mapear versión de NgRx (NgRx suele ir a la par con Angular)
+        const ngrxVersion = `^${mainVersion}.0.0`;
+        _context.logger.info(`📦 Configuring dependencies for Angular v${mainVersion}...`);
+        // 4. Modificar package.json
+        const packageName = "ngx-autogen";
+        // Inyectar dependencias compatibles
+        packageJson.dependencies = Object.assign(Object.assign({}, packageJson.dependencies), { "@ngrx/signals": ngrxVersion });
+        // Mover a devDependencies si es necesario
+        if (packageJson.dependencies[packageName]) {
+            const currentVer = packageJson.dependencies[packageName];
+            delete packageJson.dependencies[packageName];
+            packageJson.devDependencies = Object.assign(Object.assign({}, packageJson.devDependencies), { [packageName]: currentVer });
+        }
+        packageJson.dependencies = sortObjectKeys(packageJson.dependencies);
+        packageJson.devDependencies = sortObjectKeys(packageJson.devDependencies);
+        tree.overwrite(packagePath, JSON.stringify(packageJson, null, 2));
+        // 5. Configurar angular.json (Collections y Primary Key)
+        updateAngularJson(tree, options);
+        // 6. Tarea de instalación
+        _context.addTask(new tasks_1.NodePackageInstallTask());
+        return tree;
+    };
+}
+function sortObjectKeys(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((result, key) => {
+        result[key] = obj[key];
+        return result;
+    }, {});
+}
+function updateAngularJson(tree, options) {
+    const path = "/angular.json";
+    const buffer = tree.read(path);
+    if (!buffer)
+        return;
+    const workspace = JSON.parse(buffer.toString());
+    if (!workspace.cli)
+        workspace.cli = {};
+    const collections = workspace.cli.schematicCollections || [];
+    if (!collections.includes("ngx-autogen")) {
+        collections.push("ngx-autogen");
+        workspace.cli.schematicCollections = collections;
+    }
+    if (!workspace.schematics)
+        workspace.schematics = {};
+    workspace.schematics["ngx-autogen:all"] = {
+        pk: options.pk,
+    };
+    tree.overwrite(path, JSON.stringify(workspace, null, 2));
+}
+//# sourceMappingURL=index.js.map

package/src/ng-add/schema.d.ts

@@ -0,0 +1,3 @@
+export interface NgAddSchemaOptions {
+  pk: string;
+}

package/src/ng-add/schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ng-add-schema",
+  "type": "object",
+  "properties": {
+    "pk": {
+      "type": "string",
+      "description": "The name of the default Primary Key (e.g., id, cod, uuid); default is 'id'.",
+      "x-prompt": "What is the name of the default Primary Key (e.g., id, cod, uuid)?",
+      "default": "id"
+    }
+  },
+  "required": ["pk"]
+}

package/src/ngrx/store/files/entity/entity.model.ts.template

@@ -0,0 +1,22 @@
+import { FormControl } from '@angular/forms';
+
+export interface EntityStatus {
+  addError?: Error | null;
+  addLoading?: boolean;
+  error: Error | null;
+  idSelected?: null | number | string;
+  idsRemoving?: (number | string)[];
+  idsUpdating?: (number | string)[];
+  loaded: boolean;
+  loading: boolean;
+  removeError?: Error | null;
+  removeLoading?: boolean;
+  selectedError?: Error | null;
+  selectedLoading?: boolean;
+  updateError?: Error | null;
+  updateLoading?: boolean;
+}
+
+export type FormGroupType<T> = {
+  [K in keyof T]: FormControl<T[K]>;
+};

package/src/ngrx/store/files/store/__name@dasherize__.model.ts.template

@@ -0,0 +1,14 @@
+import { FormGroupType } from '../common/entity/entity.model';
+
+export interface Add<%= classify(name) %> {
+}
+
+export type Add<%= classify(name) %>Form = FormGroupType<Add<%= classify(name) %>>;
+
+export interface <%= classify(name) %>Dto {
+  <%= pk %>: number;
+}
+
+export type Update<%= classify(name) %> = Partial<<%= classify(name) %>Dto> & Pick<<%= classify(name) %>Dto, '<%= pk %>'>;
+
+export interface <%= classify(name) %>Request{}

package/src/ngrx/store/files/store/__name@dasherize__.service.ts.template

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import {
+  Add<%= classify(name) %>,
+  <%= classify(name) %>Dto,
+  Update<%= classify(name) %>
+} from './<%= dasherize(name) %>.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class <%= classify(name) %>Service {
+
+  add<%= classify(name) %>$(entity: Add<%= classify(name) %>): Observable<number> {
+    return of(0);
+  }
+
+  remove<%= classify(name) %>$(<%= pk %>: number): Observable<boolean> {
+    return of(true);
+  }
+
+  get<%= classify(pluralize(name)) %>$(): Observable<<%= classify(name) %>Dto[]> {
+    return of([]);
+  }
+
+  update<%= classify(name) %>$(entity: Update<%= classify(name) %>): Observable<boolean> {
+    return of(true);
+  }
+}