@hmcts/opal-frontend-common 0.0.27 → 0.0.28

package/README.md

@@ -183,3 +183,58 @@ The following commands are available in the `package.json`:
 
 - `yarn prettier:fix`  
   Automatically formats files using Prettier.
+
+## Angular code LLM prompts
+
+https://angular.dev/ai/develop-with-ai
+
+Paste the following prompt into your AI assistant of choice.
+
+```markdown
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- DO NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/opal-frontend-common",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^18.2.0 || ^19.0.0 || ^20.0.0",

package/styles/styles.scss

@@ -1,7 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* ==========================================================================
+   Library Dependencies
+   ==========================================================================
+   These imports include external styles used across the application.
+*/
 @import 'govuk-frontend/dist/govuk/all.scss';
-@import './custom/_custom-section_break.scss';
+@import '@ministryofjustice/frontend/moj/all.scss';
+@import 'accessible-autocomplete/dist/accessible-autocomplete.min.css';
 @import 'home-office-kit/sass/_loadingSpinner.scss';
+
+/* ==========================================================================
+   Custom Component Styles
+   ==========================================================================
+   Custom Component Styles authored within the OPAL Frontend Common UI Library.
+*/
+@import './custom/_custom-section_break.scss';
 @import './custom/custom-scrollable-panes';
 
 html,