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