nessar
26ab037084
- Introduced a new `BrandMark` component for branding purposes. - Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo. - Added styles for the dashboard page to enhance user experience. - Implemented a settings page with theme preferences and session management features. - Developed a sign-in page with branding and user-friendly design. - Established a workspace navigation component for easy access to different sections of the application. - Implemented an `ApartmentService` for managing apartment data with corresponding unit tests. - Created a `ConfigService` for loading application configuration. - Added a `ThemeService` to manage user theme preferences dynamically.
80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
# LmnpFrontend
|
|
|
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.6.
|
|
|
|
## Development server
|
|
|
|
To start a local development server, run:
|
|
|
|
```bash
|
|
bun run start
|
|
```
|
|
|
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
|
|
|
## Code scaffolding
|
|
|
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
|
|
```bash
|
|
ng generate component component-name
|
|
```
|
|
|
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
|
|
```bash
|
|
ng generate --help
|
|
```
|
|
|
|
## Building
|
|
|
|
To build the project run:
|
|
|
|
```bash
|
|
ng build
|
|
```
|
|
|
|
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
|
|
|
## Running unit tests
|
|
|
|
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
|
|
|
|
```bash
|
|
bun run test -- --watch=false
|
|
```
|
|
|
|
## Component design
|
|
|
|
Build components around a cohesive, user-visible responsibility: a page section, a reusable control,
|
|
or an independently testable interaction. Do not split a component merely to reduce its line count.
|
|
|
|
- Keep `App` responsible for application-level orchestration, authentication, and cross-feature state.
|
|
- Prefer presentational components: accept data through inputs and report user intent through outputs.
|
|
A component may inject a service only when it owns a self-contained feature and its data lifecycle.
|
|
- Keep transient interaction state with the component that owns it. For example, a form owns its field
|
|
values and validation, then emits a validated draft.
|
|
- Give non-trivial components their own directory and co-locate the TypeScript class, template,
|
|
component-specific styles, and tests. Shared primitives may stay as single files.
|
|
- Add focused unit tests for components with behavior: input transformation, conditional UI, validation,
|
|
or emitted actions. Do not add tests solely for static wrapper markup.
|
|
|
|
Component-specific styles belong beside the component and use Angular's default view encapsulation.
|
|
Keep [`src/styles.scss`](./src/styles.scss) for design tokens, reset rules, and reusable visual primitives.
|
|
|
|
## Running end-to-end tests
|
|
|
|
For end-to-end (e2e) testing, run:
|
|
|
|
```bash
|
|
bunx playwright install chromium
|
|
bun run e2e
|
|
```
|
|
|
|
The Playwright suite starts the Angular development server automatically and runs against the
|
|
360 px mobile, 768 px tablet, and 1280 px desktop projects defined in `playwright.config.ts`.
|
|
|
|
## Additional Resources
|
|
|
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|