mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
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
This commit is contained in:
Lorenz Hilpert
@@ -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
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user