mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
596ae1da1b
1. Reward Shopping Cart Implementation - New shopping cart with quantity control and availability checking - Responsive shopping cart item component with improved CSS styling - Shipping address integration in cart - Customer reward card and billing/shipping address components 2. Navigation State Management Library (@isa/core/navigation) - New library with type-safe navigation context service (373 lines) - Navigation state service (287 lines) for temporary state between routes - Comprehensive test coverage (668 + 227 lines of tests) - Documentation (792 lines in README.md) - Replaces query parameters for passing temporary navigation context 3. CRM Shipping Address Services - New ShippingAddressService with fetching and validation - CustomerShippingAddressResource and CustomerShippingAddressesResource - Zod schemas for data validation 4. Additional Improvements - Enhanced searchbox accessibility with ARIA support - Availability data access rework for better fetching/mapping - Storybook tooltip variant support - Vitest JUnit and Cobertura reporting configuration Related work items: #5382, #5383, #5384
172 lines
5.4 KiB
Markdown
172 lines
5.4 KiB
Markdown
# 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.
|
|
|
|
## Core Libraries
|
|
|
|
### Navigation State Management
|
|
|
|
- **`@isa/core/navigation`**
|
|
- Type-safe navigation state management through Angular Router state
|
|
- Provides clean abstraction for passing temporary state between routes
|
|
- Eliminates URL pollution from query parameters
|
|
- Platform-agnostic using Angular's Location service
|
|
- Full documentation: [libs/core/navigation/README.md](../libs/core/navigation/README.md)
|
|
|
|
### Logging
|
|
|
|
- **`@isa/core/logging`**
|
|
- Centralized logging service for application-wide logging
|
|
- Provides contextual information for debugging
|
|
|
|
### Storage
|
|
|
|
- **`@isa/core/storage`**
|
|
- Storage providers for state persistence
|
|
- Session and local storage abstractions
|
|
|
|
### Tabs
|
|
|
|
- **`@isa/core/tabs`**
|
|
- Tab management and navigation history tracking
|
|
- Persistent tab state across sessions
|
|
|
|
### Configuration
|
|
|
|
- **`@isa/core/config`**
|
|
- Application configuration management
|
|
- Environment-specific settings
|
|
|
|
## 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
|
|
```
|