fix: replace all occurences of prefix

* fix: replace all occurences of prefix

* refactor: update imports in ngverse

* feat: update

Author: lukonik

projects/docs/src/app/blueprint/command-installation/command-installation.component.ts

@@ -9,5 +9,5 @@ import { SourceCodeComponent } from '../source-code/source-code.component';
 })
 export class CommandInstallationComponent {
   name = input.required<string>();
-  installation = computed(() => `ng g ngverse:element ${this.name()}`);
+  installation = computed(() => `ng g ngverse:add ${this.name()}`);
 }

projects/ngverse/schematics/element/index.ts projects/ngverse/schematics/add/index.ts

@@ -13,7 +13,7 @@ function getElementName(inputPath: string): string {
   return basename(normalizedPath);
 }
 
-export function element(options: Schema) {
+export function add(options: Schema) {
   return async (host: Tree) => {
     const workspace = await getWorkspace(host);
 
@@ -81,6 +81,6 @@ function prefixIsDefault(prefix?: string) {
  * @param prefix
  */
 function updatePrefix(content: string, prefix: string) {
-  const defaultSelector = 'app';
+  const defaultSelector = /\bapp\b/g; // Match 'app' as a whole word
   return content.replace(defaultSelector, prefix);
 }

projects/ngverse/schematics/element/index_spec.ts projects/ngverse/schematics/add/index_spec.ts

@@ -89,7 +89,7 @@ describe('element', () => {
 
   it('should throw error on empty name', async () => {
     await expectAsync(
-      testRunner.runSchematic('element', appTree)
+      testRunner.runSchematic('add', appTree)
     ).toBeRejectedWithError(
       InvalidInputOptions,
       /Data path "" must have required property 'name'/
@@ -100,7 +100,7 @@ describe('element', () => {
     const componentName = 'foo';
     await expectAsync(
       testRunner.runSchematic(
-        'element',
+        'add',
         { name: componentName, project: PROJECT_NAME },
         appTree
       )
@@ -113,14 +113,14 @@ describe('element', () => {
   it('should throw an exception on existing component', async () => {
     const componentName = 'button';
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME },
       appTree
     );
 
     await expectAsync(
       testRunner.runSchematic(
-        'element',
+        'add',
         { name: componentName, project: PROJECT_NAME },
         appTree
       )
@@ -133,12 +133,12 @@ describe('element', () => {
   it('should not throw an exception if --replace option is used', async () => {
     const componentName = 'button';
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME },
       appTree
     );
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME, replace: true },
       appTree
     );
@@ -147,7 +147,7 @@ describe('element', () => {
   it('should add components to project files', async () => {
     const componentName = 'button';
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME },
       appTree
     );
@@ -165,7 +165,7 @@ describe('element', () => {
   it('should not add spec file by default', async () => {
     const componentName = 'button';
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME },
       appTree
     );
@@ -176,7 +176,7 @@ describe('element', () => {
   it('should add spec file if includeTests=true', async () => {
     const componentName = 'button';
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME, includeTests: true },
       appTree
     );
@@ -196,7 +196,7 @@ describe('element', () => {
     }
 `;
     await testRunner.runSchematic(
-      'element',
+      'add',
       { name: componentName, project: PROJECT_NAME, prefix: 'demo' },
       appTree
     );

projects/ngverse/schematics/element/schema.json projects/ngverse/schematics/add/schema.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
-    "element": {
-      "description": "Generate a element in the project.",
-      "factory": "./element/index#element",
-      "schema": "./element/schema.json"
+    "add": {
+      "description": "Generate a component in the project.",
+      "factory": "./add/index#add",
+      "schema": "./add/schema.json"
     }
   }
 }

projects/ngverse/schematics/element/schema.ts projects/ngverse/schematics/add/schema.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
 import { DarkModeIconComponent } from './dark-mode-icon.component';
 import { DarkModeService } from './dark-mode.service';
+import { ButtonComponent } from '@/ui/button/button.component';
 
 @Component({
   selector: 'app-dark-mode-toggle',

projects/ngverse/schematics/collection.json

@@ -2,7 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import { effect, inject, Injectable, signal } from '@angular/core';
-import { LocalStorageService } from '../local-storage/local-storage.service';
+import { LocalStorageService } from '@/ui/local-storage/local-storage.service';
 
 const DARK_MODE_STORAGE_KEY = 'dark-mode';
 

projects/ngverse/src/lib/dark-mode/dark-mode-toggle.component.ts

@@ -1,8 +1,8 @@
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ButtonComponent } from '../../button/button.component';
 import { DIALOG_ENTER_ANIMATION } from '../dialog-animations';
 import { DialogCloseDirective } from '../dialog-close.directive';
+import { ButtonComponent } from '@/ui/button/button.component';
 
 export interface AlertDialogOption {
   title: string;

projects/ngverse/src/lib/dark-mode/dark-mode.service.ts

@@ -1,7 +1,7 @@
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ButtonComponent } from '../../button/button.component';
 import { DIALOG_ENTER_ANIMATION } from '../dialog-animations';
+import { ButtonComponent } from '@/ui/button/button.component';
 
 export interface ConfirmDialogOptions {
   title: string;

projects/ngverse/src/lib/dialog/alert-dialog/alert-dialog.component.ts

@@ -13,7 +13,7 @@ import {
   viewChildren,
 } from '@angular/core';
 import { interval, Subscription } from 'rxjs';
-import { InputDirective } from '../input/input.directive';
+import { InputDirective } from '@/ui/input/input.directive';
 
 @Component({
   selector: 'app-otp-input',

projects/ngverse/src/lib/dialog/confirm-dialog/confirm-dialog.component.ts

@@ -5,9 +5,9 @@ import {
   input,
   output,
 } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
 import { PaginationNextIconComponent } from './pagination-next-icon.component';
 import { PaginationPrevIconComponent } from './pagination-prev-icon.component';
+import { ButtonComponent } from '@/ui/button/button.component';
 
 // We will keep always 7 visible items so it will prevent the width of the pagination from changing
 const ALWAYS_VISIBLE_ITEMS = 7;

projects/ngverse/src/lib/otp-input/otp-input.component.ts

@@ -22,10 +22,10 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
-import { PopoverOriginDirective } from '../popover/popover-origin.directive';
-import { PopoverComponent } from '../popover/popover.component';
 import { OptionComponent } from './option.component';
 import { SelectIconComponent } from './select-icon.component';
+import { PopoverComponent } from '@/ui/popover/popover.component';
+import { PopoverOriginDirective } from '@/ui/popover/popover-origin.directive';
 
 type OnTouchedFunction = (() => void) | undefined;