From e00de7598dfdb9aad41549c09bbf6ded1ce62c42 Mon Sep 17 00:00:00 2001 From: Lorenz Hilpert Date: Thu, 11 Sep 2025 20:13:56 +0200 Subject: [PATCH] feat(crm): add crm-data-access library with initial component and tests - Introduced the crm-data-access library with a basic component. - Added necessary configuration files, including ESLint and TypeScript settings. - Implemented unit tests for the component to ensure functionality. Refs: #5254 --- .vscode/settings.json | 9 +- docs/tech-stack.md | 264 +++++++++--------- libs/crm/data-access/README.md | 7 + libs/crm/data-access/eslint.config.cjs | 34 +++ libs/crm/data-access/project.json | 20 ++ libs/crm/data-access/src/index.ts | 1 + .../crm-data-access.component.css | 0 .../crm-data-access.component.html | 1 + .../crm-data-access.component.spec.ts | 21 ++ .../crm-data-access.component.ts | 10 + libs/crm/data-access/src/test-setup.ts | 13 + libs/crm/data-access/tsconfig.json | 30 ++ libs/crm/data-access/tsconfig.lib.json | 27 ++ libs/crm/data-access/tsconfig.spec.json | 29 ++ libs/crm/data-access/vite.config.mts | 27 ++ tsconfig.base.json | 1 + 16 files changed, 364 insertions(+), 130 deletions(-) create mode 100644 libs/crm/data-access/README.md create mode 100644 libs/crm/data-access/eslint.config.cjs create mode 100644 libs/crm/data-access/project.json create mode 100644 libs/crm/data-access/src/index.ts create mode 100644 libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.css create mode 100644 libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.html create mode 100644 libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.spec.ts create mode 100644 libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.ts create mode 100644 libs/crm/data-access/src/test-setup.ts create mode 100644 libs/crm/data-access/tsconfig.json create mode 100644 libs/crm/data-access/tsconfig.lib.json create mode 100644 libs/crm/data-access/tsconfig.spec.json create mode 100644 libs/crm/data-access/vite.config.mts diff --git a/.vscode/settings.json b/.vscode/settings.json index aab4c8d4e..1a198cb36 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -87,6 +87,11 @@ } ], "nxConsole.generateAiAgentRules": true, - "chat.mcp.enabled": true, - "chat.mcp.discovery.enabled": true + "chat.mcp.discovery.enabled": { + "claude-desktop": true, + "windsurf": true, + "cursor-global": true, + "cursor-workspace": true + }, + "chat.mcp.access": "all" } diff --git a/docs/tech-stack.md b/docs/tech-stack.md index 987bbc755..cc22171b8 100644 --- a/docs/tech-stack.md +++ b/docs/tech-stack.md @@ -1,128 +1,136 @@ -# Tech Stack Documentation - -## Core Technologies - -### Frontend Framework - -- **[Angular](https://angular.dev/overview)** (Latest Version) - - Modern web framework for building scalable single-page applications - - Leverages TypeScript for enhanced type safety and developer experience - -### State Management - -- **[NgRx](https://ngrx.io/docs)** - - Redux-inspired state management for Angular applications - - Provides predictable state container and powerful dev tools - - Used for managing complex application state and side effects - -### Styling - -- **[Tailwind CSS](https://tailwindcss.com/)** - - Utility-first CSS framework - - Enables rapid UI development with pre-built classes - - Highly customizable through configuration - -## Development Tools - -### Language - -- **[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)** - - Strongly typed programming language - - Provides enhanced IDE support and compile-time error checking - - Used throughout the entire application - -### Runtime - -- **[Node.js](https://nodejs.org/docs/latest-v22.x/api/index.html)** - - JavaScript runtime environment - - Used for development server and build tools - - Required for running npm scripts and development tools - -### Testing Framework - -- **[Jest](https://jestjs.io/docs/getting-started)** - - - Primary testing framework - - Used for unit and integration tests - - Provides snapshot testing capabilities - -- **[Spectator](https://ngneat.github.io/spectator/)** - - Angular testing utility library - - Simplifies component testing - - Reduces boilerplate in test files - -### UI Development - -- **[Storybook](https://storybook.js.org/docs/get-started/frameworks/angular)** - - UI component development environment - - Enables isolated component development - - Serves as living documentation for components - -### Utilities - -- **[date-fns](https://date-fns.org/docs/Getting-Started)** - - Modern JavaScript date utility library - - Used for consistent date formatting and manipulation - - Tree-shakeable to optimize bundle size -- **[Lodash](https://lodash.com/)** - - Utility library for common JavaScript tasks -- **[UUID](https://www.npmjs.com/package/uuid)** - - Generates unique identifiers -- **[Zod](https://github.com/colinhacks/zod)** - - TypeScript-first schema validation library - -## Additional Technical Areas - -### Authentication & Authorization - -- **[angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)** - - Simplifies implementing OAuth2 and OIDC authentication in Angular. -- **[angular-oauth2-oidc-jwks](https://github.com/manfredsteyer/angular-oauth2-oidc)** - - Adds JWKS support for secure token management. - -### Real-Time Communication - -- **[@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)** - - Provides real-time communication between client and server components. - -### Barcode Scanning - -- **[Scandit Web Data Capture Barcode](https://www.scandit.com/documentation/web/)** - - Robust barcode scanning capabilities integrated into the application. -- **[Scandit Web Data Capture Core](https://www.scandit.com/documentation/web/)** - - Core library supporting the barcode scanning features. - -### Tooling - -- **[Nx](https://nx.dev/)** - - Powerful monorepo tool for Angular and other frontend applications. -- **[Husky](https://typicode.github.io/husky/#/)** - - Manages Git hooks for consistent developer workflows. -- **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)** - - Linting and formatting tools to maintain consistent code quality. -- **[Storybook](https://storybook.js.org/)** - - Isolated component development and living documentation environment. - -## Development Environment Setup - -1. **Required Software** - - - Node.js (Latest LTS version) - - npm (comes with Node.js) - - Git - -2. **IDE Recommendations** - - - Visual Studio Code with following extensions: - - Angular Language Service - - ESLint - - Prettier - - Tailwind CSS IntelliSense - -3. **Getting Started** - ```bash - npm install # Install dependencies - npm run start # Start development server - npm run test # Run tests - npm run storybook # Start Storybook - ``` +# Tech Stack Documentation + +## Core Technologies + +### Frontend Framework + +- **[Angular](https://angular.dev/overview)** (Latest Version) + - Modern web framework for building scalable single-page applications + - Leverages TypeScript for enhanced type safety and developer experience + +### State Management + +- **[NgRx](https://ngrx.io/docs)** + - Redux-inspired state management for Angular applications + - Provides predictable state container and powerful dev tools + - Used for managing complex application state and side effects + +### Styling + +- **[Tailwind CSS](https://tailwindcss.com/)** + - Utility-first CSS framework + - Enables rapid UI development with pre-built classes + - Highly customizable through configuration + +## Development Tools + +### Language + +- **[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)** + - Strongly typed programming language + - Provides enhanced IDE support and compile-time error checking + - Used throughout the entire application + +### Runtime + +- **[Node.js](https://nodejs.org/docs/latest-v22.x/api/index.html)** + - JavaScript runtime environment + - Used for development server and build tools + - Required for running npm scripts and development tools + +### Testing Framework + +- **[Jest](https://jestjs.io/docs/getting-started)** + + - Primary testing framework + - Used for unit and integration tests + - Provides snapshot testing capabilities + +- **[Spectator](https://ngneat.github.io/spectator/)** + - Angular testing utility library + - Simplifies component testing + - Reduces boilerplate in test files + +### UI Development + +- **[Storybook](https://storybook.js.org/docs/get-started/frameworks/angular)** + - UI component development environment + - Enables isolated component development + - Serves as living documentation for components + +### Utilities + +- **[date-fns](https://date-fns.org/docs/Getting-Started)** + - Modern JavaScript date utility library + - Used for consistent date formatting and manipulation + - Tree-shakeable to optimize bundle size +- **[Lodash](https://lodash.com/)** + - Utility library for common JavaScript tasks +- **[UUID](https://www.npmjs.com/package/uuid)** + - Generates unique identifiers +- **[Zod](https://github.com/colinhacks/zod)** + - TypeScript-first schema validation library + +## Additional Technical Areas + +### Authentication & Authorization + +- **[angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)** + - Simplifies implementing OAuth2 and OIDC authentication in Angular. +- **[angular-oauth2-oidc-jwks](https://github.com/manfredsteyer/angular-oauth2-oidc)** + - Adds JWKS support for secure token management. + +### Real-Time Communication + +- **[@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)** + - Provides real-time communication between client and server components. + +### Barcode Scanning + +- **[Scandit Web Data Capture Barcode](https://www.scandit.com/documentation/web/)** + - Robust barcode scanning capabilities integrated into the application. +- **[Scandit Web Data Capture Core](https://www.scandit.com/documentation/web/)** + - Core library supporting the barcode scanning features. + +### Tooling + +- **[Nx](https://nx.dev/)** + - Powerful monorepo tool for Angular and other frontend applications. +- **[Husky](https://typicode.github.io/husky/#/)** + - Manages Git hooks for consistent developer workflows. +- **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)** + - Linting and formatting tools to maintain consistent code quality. +- **[Storybook](https://storybook.js.org/)** + - Isolated component development and living documentation environment. + +## Domain Libraries + +### Customer Relationship Management (CRM) + +- **`@isa/crm/data-access`** + - Handles data access logic for customer-related features. + - Contains services for fetching and managing customer data. + +## Development Environment Setup + +1. **Required Software** + + - Node.js (Latest LTS version) + - npm (comes with Node.js) + - Git + +2. **IDE Recommendations** + + - Visual Studio Code with following extensions: + - Angular Language Service + - ESLint + - Prettier + - Tailwind CSS IntelliSense + +3. **Getting Started** + ```bash + npm install # Install dependencies + npm run start # Start development server + npm run test # Run tests + npm run storybook # Start Storybook + ``` diff --git a/libs/crm/data-access/README.md b/libs/crm/data-access/README.md new file mode 100644 index 000000000..9791bf9e3 --- /dev/null +++ b/libs/crm/data-access/README.md @@ -0,0 +1,7 @@ +# crm-data-access + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test crm-data-access` to execute the unit tests. diff --git a/libs/crm/data-access/eslint.config.cjs b/libs/crm/data-access/eslint.config.cjs new file mode 100644 index 000000000..daee78101 --- /dev/null +++ b/libs/crm/data-access/eslint.config.cjs @@ -0,0 +1,34 @@ +const nx = require('@nx/eslint-plugin'); +const baseConfig = require('../../../eslint.config.js'); + +module.exports = [ + ...baseConfig, + ...nx.configs['flat/angular'], + ...nx.configs['flat/angular-template'], + { + files: ['**/*.ts'], + rules: { + '@angular-eslint/directive-selector': [ + 'error', + { + type: 'attribute', + prefix: 'crm', + style: 'camelCase', + }, + ], + '@angular-eslint/component-selector': [ + 'error', + { + type: 'element', + prefix: 'crm', + style: 'kebab-case', + }, + ], + }, + }, + { + files: ['**/*.html'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/libs/crm/data-access/project.json b/libs/crm/data-access/project.json new file mode 100644 index 000000000..fb4201819 --- /dev/null +++ b/libs/crm/data-access/project.json @@ -0,0 +1,20 @@ +{ + "name": "crm-data-access", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/crm/data-access/src", + "prefix": "crm", + "projectType": "library", + "tags": [], + "targets": { + "test": { + "executor": "@nx/vite:test", + "outputs": ["{options.reportsDirectory}"], + "options": { + "reportsDirectory": "../../../coverage/libs/crm/data-access" + } + }, + "lint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/libs/crm/data-access/src/index.ts b/libs/crm/data-access/src/index.ts new file mode 100644 index 000000000..94d054993 --- /dev/null +++ b/libs/crm/data-access/src/index.ts @@ -0,0 +1 @@ +export * from './lib/crm-data-access/crm-data-access.component'; diff --git a/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.css b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.html b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.html new file mode 100644 index 000000000..6a276cd12 --- /dev/null +++ b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.html @@ -0,0 +1 @@ +

CrmDataAccess works!

diff --git a/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.spec.ts b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.spec.ts new file mode 100644 index 000000000..ce52fa294 --- /dev/null +++ b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CrmDataAccessComponent } from './crm-data-access.component'; + +describe('CrmDataAccessComponent', () => { + let component: CrmDataAccessComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CrmDataAccessComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(CrmDataAccessComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.ts b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.ts new file mode 100644 index 000000000..03503c1fc --- /dev/null +++ b/libs/crm/data-access/src/lib/crm-data-access/crm-data-access.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'crm-crm-data-access', + imports: [CommonModule], + templateUrl: './crm-data-access.component.html', + styleUrl: './crm-data-access.component.css', +}) +export class CrmDataAccessComponent {} diff --git a/libs/crm/data-access/src/test-setup.ts b/libs/crm/data-access/src/test-setup.ts new file mode 100644 index 000000000..cebf5ae72 --- /dev/null +++ b/libs/crm/data-access/src/test-setup.ts @@ -0,0 +1,13 @@ +import '@angular/compiler'; +import '@analogjs/vitest-angular/setup-zone'; + +import { + BrowserTestingModule, + platformBrowserTesting, +} from '@angular/platform-browser/testing'; +import { getTestBed } from '@angular/core/testing'; + +getTestBed().initTestEnvironment( + BrowserTestingModule, + platformBrowserTesting(), +); diff --git a/libs/crm/data-access/tsconfig.json b/libs/crm/data-access/tsconfig.json new file mode 100644 index 000000000..3268ed4dc --- /dev/null +++ b/libs/crm/data-access/tsconfig.json @@ -0,0 +1,30 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "importHelpers": true, + "moduleResolution": "bundler", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "typeCheckHostBindings": true, + "strictTemplates": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/crm/data-access/tsconfig.lib.json b/libs/crm/data-access/tsconfig.lib.json new file mode 100644 index 000000000..312ee86bb --- /dev/null +++ b/libs/crm/data-access/tsconfig.lib.json @@ -0,0 +1,27 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/**/*.spec.ts", + "src/test-setup.ts", + "jest.config.ts", + "src/**/*.test.ts", + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx" + ], + "include": ["src/**/*.ts"] +} diff --git a/libs/crm/data-access/tsconfig.spec.json b/libs/crm/data-access/tsconfig.spec.json new file mode 100644 index 000000000..5785a8a5f --- /dev/null +++ b/libs/crm/data-access/tsconfig.spec.json @@ -0,0 +1,29 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": [ + "vitest/globals", + "vitest/importMeta", + "vite/client", + "node", + "vitest" + ] + }, + "include": [ + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ], + "files": ["src/test-setup.ts"] +} diff --git a/libs/crm/data-access/vite.config.mts b/libs/crm/data-access/vite.config.mts new file mode 100644 index 000000000..0348b8eb1 --- /dev/null +++ b/libs/crm/data-access/vite.config.mts @@ -0,0 +1,27 @@ +/// +import { defineConfig } from 'vite'; +import angular from '@analogjs/vite-plugin-angular'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; + +export default defineConfig(() => ({ + root: __dirname, + cacheDir: '../../../node_modules/.vite/libs/crm/data-access', + plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])], + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + test: { + watch: false, + globals: true, + environment: 'jsdom', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + setupFiles: ['src/test-setup.ts'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../../coverage/libs/crm/data-access', + provider: 'v8' as const, + }, + }, +})); diff --git a/tsconfig.base.json b/tsconfig.base.json index 344fe3490..6d602de3f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -48,6 +48,7 @@ "@isa/core/notifications": ["libs/core/notifications/src/index.ts"], "@isa/core/storage": ["libs/core/storage/src/index.ts"], "@isa/core/tabs": ["libs/core/tabs/src/index.ts"], + "@isa/crm/data-access": ["libs/crm/data-access/src/index.ts"], "@isa/icons": ["libs/icons/src/index.ts"], "@isa/oms/data-access": ["libs/oms/data-access/src/index.ts"], "@isa/oms/feature/return-details": [