diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 1bcdb07..bc43d1a 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -2,7 +2,14 @@ "permissions": { "allow": [ "Bash(ng generate:*)", - "Bash(git add:*)" + "Bash(git add:*)", + "Bash(find:*)", + "Bash(ng build:*)", + "Bash(for lib in auth-client hcl-studio shared-utils ui-accessibility ui-animations ui-backgrounds ui-code-display ui-data-utils ui-design-system ui-essentials ui-font-manager ui-landing-pages)", + "Bash(do)", + "Bash(curl:*)", + "Bash(echo:*)", + "Bash(done)" ], "deny": [], "ask": [] diff --git a/CONSUMER_INTEGRATION_GUIDE.md b/CONSUMER_INTEGRATION_GUIDE.md new file mode 100644 index 0000000..263ce98 --- /dev/null +++ b/CONSUMER_INTEGRATION_GUIDE.md @@ -0,0 +1,491 @@ +# Angular Library Consumer Integration Guide + +## 🚀 Complete Guide: Creating a New Angular Project with SSuite Libraries + +This guide shows you how to create a fresh Angular project and integrate any combination of the 12 SSuite libraries using Git submodules. + +--- + +## 📋 Prerequisites + +- **Node.js 18+** and npm +- **Angular CLI** (`npm install -g @angular/cli`) +- **Git** configured with access to `git.sky-ai.com` + +--- + +## 🏗️ Step 1: Create New Angular Project + +```bash +# Create new Angular project +ng new my-awesome-app +cd my-awesome-app + +# Create libs directory for submodules +mkdir libs +``` + +--- + +## 📦 Step 2: Choose Your Libraries + +Select libraries based on your needs: + +### 🎨 **Foundation (Required for most projects)** +- **ui-design-system** - SCSS design tokens, colors, typography, fonts + +### 🛠️ **Essential Components** +- **ui-essentials** - Buttons, forms, tables, cards, navigation, etc. +- **shared-utils** - Common utilities and shared services + +### 🎯 **Specialized Libraries** +- **auth-client** - Authentication guards, services, interceptors +- **ui-landing-pages** - Hero sections, pricing tables, testimonials +- **ui-code-display** - Syntax highlighting for code blocks +- **ui-accessibility** - WCAG compliance tools and utilities +- **hcl-studio** - Advanced color management system + +### 🎭 **Enhancement Libraries** +- **ui-animations** - CSS animation utilities +- **ui-backgrounds** - Background generators and effects +- **ui-font-manager** - Advanced font management +- **ui-data-utils** - Data manipulation utilities + +--- + +## ⚡ Step 3: Add Libraries as Submodules + +**IMPORTANT**: Always add `ui-design-system` first, as other libraries depend on it. + +### Minimal Setup (Design System + Components): +```bash +# Add foundation (required) +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system + +# Add essential components +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule add https://git.sky-ai.com/jules/shared-utils.git libs/shared-utils + +# Initialize submodules +git submodule update --init --recursive +``` + +### Full-Featured Setup (All Libraries): +```bash +# Foundation (required first) +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system + +# Core libraries +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule add https://git.sky-ai.com/jules/shared-utils.git libs/shared-utils +git submodule add https://git.sky-ai.com/jules/auth-client.git libs/auth-client + +# Specialized libraries +git submodule add https://git.sky-ai.com/jules/ui-landing-pages.git libs/ui-landing-pages +git submodule add https://git.sky-ai.com/jules/ui-code-display.git libs/ui-code-display +git submodule add https://git.sky-ai.com/jules/ui-accessibility.git libs/ui-accessibility +git submodule add https://git.sky-ai.com/jules/hcl-studio.git libs/hcl-studio + +# Enhancement libraries +git submodule add https://git.sky-ai.com/jules/ui-animations.git libs/ui-animations +git submodule add https://git.sky-ai.com/jules/ui-backgrounds.git libs/ui-backgrounds +git submodule add https://git.sky-ai.com/jules/ui-font-manager.git libs/ui-font-manager +git submodule add https://git.sky-ai.com/jules/ui-data-utils.git libs/ui-data-utils + +# Initialize all submodules +git submodule update --init --recursive +``` + +--- + +## 🔨 Step 4: Build Libraries + +Build libraries in dependency order: + +```bash +# Build ui-design-system first (required by others) +cd libs/ui-design-system +npm install +npm run build +cd ../.. + +# Build other libraries +cd libs/ui-essentials && npm install && npm run build && cd ../.. +cd libs/shared-utils && npm install && npm run build && cd ../.. +cd libs/auth-client && npm install && npm run build && cd ../.. + +# Continue for other libraries as needed... +``` + +### 📜 Automation Script: +Create `build-libs.sh`: +```bash +#!/bin/bash +echo "🏗️ Building all libraries..." + +# Array of libraries in dependency order +LIBS=("ui-design-system" "shared-utils" "ui-essentials" "auth-client" "ui-landing-pages" "ui-code-display" "ui-accessibility" "hcl-studio" "ui-animations" "ui-backgrounds" "ui-font-manager" "ui-data-utils") + +for lib in "${LIBS[@]}"; do + if [ -d "libs/$lib" ]; then + echo "📦 Building $lib..." + cd libs/$lib + npm install + npm run build + cd ../.. + echo "✅ $lib built successfully" + else + echo "⚠️ Skipping $lib (not found)" + fi +done + +echo "🎉 All libraries built!" +``` + +Make executable: `chmod +x build-libs.sh && ./build-libs.sh` + +--- + +## ⚙️ Step 5: Configure TypeScript Paths + +Update `tsconfig.json`: + +```json +{ + "compilerOptions": { + "baseUrl": "./", + "paths": { + // Foundation (required) + "ui-design-system": ["./libs/ui-design-system/dist"], + "ui-design-system/*": ["./libs/ui-design-system/dist/*", "./libs/ui-design-system/src/*"], + + // Core libraries + "ui-essentials": ["./libs/ui-essentials/dist"], + "ui-essentials/*": ["./libs/ui-essentials/dist/*"], + "shared-utils": ["./libs/shared-utils/dist"], + "shared-utils/*": ["./libs/shared-utils/dist/*"], + "auth-client": ["./libs/auth-client/dist"], + "auth-client/*": ["./libs/auth-client/dist/*"], + + // Specialized libraries + "ui-landing-pages": ["./libs/ui-landing-pages/dist"], + "ui-landing-pages/*": ["./libs/ui-landing-pages/dist/*"], + "ui-code-display": ["./libs/ui-code-display/dist"], + "ui-code-display/*": ["./libs/ui-code-display/dist/*"], + "ui-accessibility": ["./libs/ui-accessibility/dist"], + "ui-accessibility/*": ["./libs/ui-accessibility/dist/*"], + "hcl-studio": ["./libs/hcl-studio/dist"], + "hcl-studio/*": ["./libs/hcl-studio/dist/*"], + + // Enhancement libraries + "ui-animations": ["./libs/ui-animations/dist"], + "ui-animations/*": ["./libs/ui-animations/dist/*"], + "ui-backgrounds": ["./libs/ui-backgrounds/dist"], + "ui-backgrounds/*": ["./libs/ui-backgrounds/dist/*"], + "ui-font-manager": ["./libs/ui-font-manager/dist"], + "ui-font-manager/*": ["./libs/ui-font-manager/dist/*"], + "ui-data-utils": ["./libs/ui-data-utils/dist"], + "ui-data-utils/*": ["./libs/ui-data-utils/dist/*"] + } + } +} +``` + +**Note**: The `ui-design-system/*` includes both `dist/*` and `src/*` to support SCSS imports. + +--- + +## 🎨 Step 6: Import Styles + +### Option A: Complete Design System +In your `src/styles.scss`: +```scss +// Complete design system (includes all tokens + fonts) +@use 'ui-design-system/src/styles' as ui; + +// Optional: Additional component styles +@use 'ui-animations/src/styles' as animations; +@use 'ui-backgrounds/src/styles' as backgrounds; +``` + +### Option B: Selective Imports +```scss +// Just semantic tokens (most common) +@use 'ui-design-system/src/styles/semantic' as tokens; + +// Or just base tokens +@use 'ui-design-system/src/styles/base' as base; + +// Add specific libraries +@use 'ui-accessibility/src/lib/utilities/a11y-utilities' as a11y; +``` + +--- + +## 💻 Step 7: Use Libraries in Your Components + +### Example Component using multiple libraries: + +```typescript +// src/app/app.component.ts +import { Component } from '@angular/core'; +import { ButtonComponent } from 'ui-essentials'; +import { AuthService } from 'auth-client'; +import { HeroSectionComponent } from 'ui-landing-pages'; +import { CodeSnippetComponent } from 'ui-code-display'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [ + ButtonComponent, + HeroSectionComponent, + CodeSnippetComponent + ], + template: ` +
+ + + + + +
+ + + Primary Action + + + + Secondary Action + + + + + +
+
+ `, + styles: [` + .app-container { + min-height: 100vh; + } + .content { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; + } + `] +}) +export class AppComponent { + isLoggedIn = false; + exampleCode = ` +import { ButtonComponent } from 'ui-essentials'; +import { AuthService } from 'auth-client'; + +// Your code here... + `; + + constructor(private auth: AuthService) { + this.isLoggedIn = this.auth.isAuthenticated(); + } + + handleClick() { + console.log('Button clicked!'); + } +} +``` + +### Component with Authentication: + +```typescript +// src/app/protected/dashboard.component.ts +import { Component } from '@angular/core'; +import { AuthGuard } from 'auth-client'; +import { TableComponent, CardComponent } from 'ui-essentials'; +import { StatisticsDisplayComponent } from 'ui-landing-pages'; + +@Component({ + selector: 'app-dashboard', + standalone: true, + imports: [TableComponent, CardComponent, StatisticsDisplayComponent], + template: ` +
+ +
+ + +
+ + + + + + +
+ `, + styles: [` + .dashboard { + padding: 1.5rem; + } + .stats-grid { + margin-bottom: 2rem; + } + `] +}) +export class DashboardComponent { + stats = [ + { label: 'Users', value: '1,234', change: '+12%' }, + { label: 'Revenue', value: '$45,678', change: '+8%' }, + { label: 'Orders', value: '892', change: '+15%' } + ]; + + userData = [ + { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' } + ]; + + tableColumns = [ + { key: 'id', label: 'ID' }, + { key: 'name', label: 'Name' }, + { key: 'email', label: 'Email' }, + { key: 'status', label: 'Status' } + ]; +} +``` + +--- + +## 🔄 Step 8: Library Management + +### Update a Single Library: +```bash +cd libs/ui-essentials +git pull origin main +npm run build +cd ../.. +``` + +### Update All Libraries: +```bash +git submodule update --remote +./build-libs.sh # Rebuild all libraries +``` + +### Lock Library to Specific Version: +```bash +cd libs/ui-essentials +git checkout v1.2.0 # Specific tag +cd ../.. +git add libs/ui-essentials +git commit -m "Lock ui-essentials to v1.2.0" +``` + +### Remove Unused Library: +```bash +git submodule deinit libs/ui-backgrounds +git rm libs/ui-backgrounds +git commit -m "Remove ui-backgrounds library" +``` + +--- + +## 📁 Final Project Structure + +``` +my-awesome-app/ +├── src/ +│ ├── app/ +│ │ ├── app.component.ts +│ │ ├── protected/ +│ │ │ └── dashboard.component.ts +│ │ └── ... +│ ├── styles.scss +│ └── ... +├── libs/ # Git submodules +│ ├── ui-design-system/ # Foundation +│ ├── ui-essentials/ # Components +│ ├── auth-client/ # Authentication +│ ├── ui-landing-pages/ # Landing components +│ └── [other-libraries]/ +├── package.json +├── tsconfig.json +├── angular.json +├── build-libs.sh # Build automation +├── .gitmodules # Auto-generated +└── README.md +``` + +--- + +## ⚡ Quick Start Commands + +### Minimal Project (Design System + Components): +```bash +ng new my-app && cd my-app +mkdir libs +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule update --init --recursive +cd libs/ui-design-system && npm install && npm run build && cd ../.. +cd libs/ui-essentials && npm install && npm run build && cd ../.. +``` + +### Add TypeScript paths and styles, then start developing! + +--- + +## 🎯 Common Patterns + +### Landing Page Project: +```bash +# Essential for marketing sites +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule add https://git.sky-ai.com/jules/ui-landing-pages.git libs/ui-landing-pages +git submodule add https://git.sky-ai.com/jules/ui-animations.git libs/ui-animations +``` + +### Documentation Site: +```bash +# Perfect for docs with code examples +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule add https://git.sky-ai.com/jules/ui-code-display.git libs/ui-code-display +git submodule add https://git.sky-ai.com/jules/ui-accessibility.git libs/ui-accessibility +``` + +### Enterprise Application: +```bash +# Full-featured business app +git submodule add https://git.sky-ai.com/jules/ui-design-system.git libs/ui-design-system +git submodule add https://git.sky-ai.com/jules/ui-essentials.git libs/ui-essentials +git submodule add https://git.sky-ai.com/jules/shared-utils.git libs/shared-utils +git submodule add https://git.sky-ai.com/jules/auth-client.git libs/auth-client +git submodule add https://git.sky-ai.com/jules/ui-data-utils.git libs/ui-data-utils +``` + +--- + +## 🚀 You're Ready! + +Your new Angular project is now set up with the SSuite library ecosystem. You have: + +- ✅ **Modular architecture** - Only include libraries you need +- ✅ **Professional design system** - Consistent styling and components +- ✅ **Independent updates** - Update libraries separately +- ✅ **Clean imports** - TypeScript paths configured +- ✅ **Version control** - Lock libraries to specific versions +- ✅ **Scalable structure** - Add/remove libraries as needed + +Happy coding! 🎉 \ No newline at end of file diff --git a/SUBMODULE_INTEGRATION_GUIDE.md b/SUBMODULE_INTEGRATION_GUIDE.md index 24d86ba..8ec33ea 100644 --- a/SUBMODULE_INTEGRATION_GUIDE.md +++ b/SUBMODULE_INTEGRATION_GUIDE.md @@ -28,12 +28,16 @@ All 12 libraries have been successfully extracted into individual repositories r ### Step 1: Add Libraries as Submodules +**IMPORTANT**: Always add `ui-design-system` first, as other libraries depend on it. + ```bash # Navigate to your project cd your-angular-project -# Add only the libraries you need +# REQUIRED: Add ui-design-system first (foundation dependency) git submodule add https://github.com/yourorg/ui-design-system.git libs/ui-design-system + +# Add other libraries you need git submodule add https://github.com/yourorg/ui-essentials.git libs/ui-essentials git submodule add https://github.com/yourorg/auth-client.git libs/auth-client @@ -44,9 +48,12 @@ git submodule update --init --recursive ### Step 2: Install Dependencies ```bash -# Install dependencies for each library +# Build ui-design-system first (required by other libraries) cd libs/ui-design-system && npm install && npm run build -cd ../ui-essentials && npm install && npm run build +cd ../.. + +# Build other libraries (they now reference ui-design-system via standardized paths) +cd libs/ui-essentials && npm install && npm run build cd ../auth-client && npm install && npm run build cd ../.. ``` @@ -58,7 +65,7 @@ cd ../.. "compilerOptions": { "paths": { "ui-design-system": ["./libs/ui-design-system/dist"], - "ui-design-system/*": ["./libs/ui-design-system/dist/*"], + "ui-design-system/*": ["./libs/ui-design-system/dist/*", "./libs/ui-design-system/src/*"], "ui-essentials": ["./libs/ui-essentials/dist"], "ui-essentials/*": ["./libs/ui-essentials/dist/*"], "auth-client": ["./libs/auth-client/dist"], @@ -68,6 +75,8 @@ cd ../.. } ``` +**Note**: The `ui-design-system/*` path includes both `dist/*` and `src/*` to support SCSS imports from source files. + ### Step 4: Use in Your Application ```typescript @@ -139,6 +148,28 @@ Each library is now an independent project: - Own CI/CD pipeline - Individual releases +## 🔧 Standardized Import System + +All libraries now use **standardized paths** instead of relative paths for ui-design-system imports: + +**Before (Problematic)**: +```scss +@use "../../../../../../ui-design-system/src/styles/semantic/index" as *; +@use '../../../../../ui-design-system/src/styles/semantic' as *; +``` + +**After (Standardized)**: +```scss +@use 'ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic' as *; +``` + +### Benefits: +- ✅ **Path independence**: Libraries work regardless of file system structure +- ✅ **Clean imports**: No more complex relative paths (`../../../..`) +- ✅ **True portability**: Each library is self-contained +- ✅ **Consumer flexibility**: Add ui-design-system at any submodule structure + ## 🎯 Benefits Achieved ### ✅ For LLM Analysis @@ -146,18 +177,21 @@ Each library is now an independent project: - **Clean APIs**: Each library has optimized public-api.ts - **Focused context**: Analyze one library at a time - **Clear boundaries**: Well-defined library responsibilities +- **Standardized imports**: 193+ import statements now use clean, consistent paths ### ✅ For Development - **Selective inclusion**: Only add libraries you need - **Independent versioning**: Lock libraries to specific versions - **Reusable across projects**: Same libraries in multiple projects - **Professional distribution**: Industry-standard submodule approach +- **Dependency management**: Clear ui-design-system foundation requirement ### ✅ for Maintenance - **Isolated changes**: Updates don't affect other libraries - **Clear ownership**: Each library can have dedicated maintainers - **Better testing**: Test libraries in isolation - **Release management**: Independent release cycles +- **Import consistency**: All SCSS imports follow the same standardized pattern ## 🔧 Next Steps diff --git a/projects/auth-client/README.md b/projects/auth-client/README.md index 2463c58..deb1349 100644 --- a/projects/auth-client/README.md +++ b/projects/auth-client/README.md @@ -1,468 +1 @@ -# Auth Client Library - -Angular client library for integrating with the Elixir-based auth service. Provides authentication, authorization, and user management capabilities. - -## Features - -- **Authentication**: Login, register, logout with JWT tokens -- **Token Management**: Automatic token refresh and storage -- **OAuth Integration**: Social authentication with multiple providers -- **Two-Factor Authentication**: TOTP and backup codes support -- **Route Guards**: Protect routes based on authentication and scopes -- **HTTP Interceptor**: Automatic token injection and refresh -- **TypeScript Support**: Fully typed interfaces and models - -## Installation - -```bash -npm install auth-client -``` - -## Setup - -### 1. Import the HTTP Client Module - -```typescript -import { HttpClientModule } from '@angular/common/http'; -import { NgModule } from '@angular/core'; - -@NgModule({ - imports: [ - HttpClientModule, - // ... other imports - ], -}) -export class AppModule {} -``` - -### 2. Configure the Auth Service - -```typescript -import { AuthService } from 'auth-client'; - -export class AppComponent { - constructor(private authService: AuthService) { - // Configure the base URL for your auth service - this.authService.configure('http://localhost:4000'); - } -} -``` - -### 3. Add HTTP Interceptor (Optional) - -```typescript -import { HTTP_INTERCEPTORS } from '@angular/common/http'; -import { AuthInterceptor } from 'auth-client'; - -@NgModule({ - providers: [ - { - provide: HTTP_INTERCEPTORS, - useClass: AuthInterceptor, - multi: true - } - ] -}) -export class AppModule {} -``` - -## Usage - -### Authentication - -#### Login - -```typescript -import { AuthService } from 'auth-client'; - -constructor(private authService: AuthService) {} - -login() { - this.authService.login({ - email: 'user@example.com', - password: 'password123' - }).subscribe({ - next: (response) => { - console.log('Login successful:', response.user); - }, - error: (error) => { - console.error('Login failed:', error); - } - }); -} -``` - -#### Register - -```typescript -register() { - this.authService.register({ - email: 'user@example.com', - password: 'password123', - first_name: 'John', - last_name: 'Doe' - }).subscribe({ - next: (response) => { - console.log('Registration successful:', response.user); - }, - error: (error) => { - console.error('Registration failed:', error); - } - }); -} -``` - -#### Logout - -```typescript -logout() { - this.authService.logout().subscribe({ - next: () => { - console.log('Logout successful'); - }, - error: (error) => { - console.error('Logout failed:', error); - } - }); -} -``` - -### Authentication State - -```typescript -import { AuthService } from 'auth-client'; - -constructor(private authService: AuthService) { - // Subscribe to authentication state - this.authService.isAuthenticated$.subscribe(isAuth => { - console.log('Is authenticated:', isAuth); - }); - - // Subscribe to current user - this.authService.currentUser$.subscribe(user => { - console.log('Current user:', user); - }); - - // Check if authenticated synchronously - const isAuth = this.authService.isAuthenticated(); -} -``` - -### Route Guards - -#### Protect Authenticated Routes - -```typescript -import { AuthGuard } from 'auth-client'; - -const routes: Routes = [ - { - path: 'dashboard', - component: DashboardComponent, - canActivate: [AuthGuard] - }, - { - path: 'admin', - component: AdminComponent, - canActivate: [AuthGuard], - data: { - requiredScopes: ['admin'], // Require admin scope - requireAllScopes: true, // Must have all scopes (default: false) - unauthorizedRedirect: '/access-denied' - } - } -]; -``` - -#### Protect Guest Routes - -```typescript -import { GuestGuard } from 'auth-client'; - -const routes: Routes = [ - { - path: 'login', - component: LoginComponent, - canActivate: [GuestGuard], // Redirect to home if already authenticated - data: { - authenticatedRedirect: '/dashboard' - } - } -]; -``` - -### OAuth Integration - -#### Get Available Providers - -```typescript -import { OAuthService } from 'auth-client'; - -constructor(private oauthService: OAuthService) {} - -getProviders() { - this.oauthService.getProviders().subscribe(providers => { - console.log('Available providers:', providers); - }); -} -``` - -#### Initiate OAuth Flow - -```typescript -// Redirect flow -loginWithGoogle() { - this.oauthService.initiateOAuthFlow('google', 'http://localhost:4200/oauth/callback'); -} - -// Popup flow -async loginWithGooglePopup() { - try { - const result = await this.oauthService.initiateOAuthPopup('google'); - console.log('OAuth successful:', result); - } catch (error) { - console.error('OAuth failed:', error); - } -} -``` - -#### Handle OAuth Callback - -```typescript -// In your callback component -ngOnInit() { - this.oauthService.completeOAuthFlow('google').subscribe({ - next: (result) => { - console.log('OAuth login successful:', result); - this.router.navigate(['/dashboard']); - }, - error: (error) => { - console.error('OAuth login failed:', error); - this.router.navigate(['/login']); - } - }); -} -``` - -### Two-Factor Authentication - -#### Setup 2FA - -```typescript -setup2FA() { - this.authService.setup2FA().subscribe({ - next: (response) => { - // Display QR code and backup codes - console.log('QR Code:', response.qr_code); - console.log('Backup codes:', response.backup_codes); - }, - error: (error) => { - console.error('2FA setup failed:', error); - } - }); -} -``` - -#### Verify 2FA Setup - -```typescript -verify2FA(token: string) { - this.authService.verify2FASetup({ token }).subscribe({ - next: () => { - console.log('2FA enabled successfully'); - }, - error: (error) => { - console.error('2FA verification failed:', error); - } - }); -} -``` - -### User Management - -#### Update Profile - -```typescript -updateProfile() { - this.authService.updateProfile({ - first_name: 'Jane', - last_name: 'Smith' - }).subscribe({ - next: (user) => { - console.log('Profile updated:', user); - }, - error: (error) => { - console.error('Profile update failed:', error); - } - }); -} -``` - -#### Change Password - -```typescript -changePassword() { - this.authService.changePassword({ - current_password: 'oldpassword', - new_password: 'newpassword', - new_password_confirmation: 'newpassword' - }).subscribe({ - next: () => { - console.log('Password changed successfully'); - }, - error: (error) => { - console.error('Password change failed:', error); - } - }); -} -``` - -### Token Management - -#### Manual Token Operations - -```typescript -import { TokenService } from 'auth-client'; - -constructor(private tokenService: TokenService) {} - -checkToken() { - // Check if token exists and is valid - const isValid = this.tokenService.isTokenValid(); - - // Get user information from token - const userId = this.tokenService.getUserId(); - const email = this.tokenService.getUserEmail(); - const scopes = this.tokenService.getUserScopes(); - - // Check scopes - const hasAdminScope = this.tokenService.hasScope('admin'); - const hasAnyScope = this.tokenService.hasAnyScope(['read', 'write']); - const hasAllScopes = this.tokenService.hasAllScopes(['read', 'write']); -} -``` - -## API Reference - -### Models - -All TypeScript interfaces are available for import: - -```typescript -import { - User, - LoginRequest, - LoginResponse, - RegisterRequest, - TokenPair, - ApiError, - // ... and more -} from 'auth-client'; -``` - -### Services - -- **AuthService**: Main authentication service -- **TokenService**: Token management and validation -- **OAuthService**: OAuth provider integration -- **AuthHttpService**: Low-level HTTP client - -### Guards - -- **AuthGuard**: Protect authenticated routes -- **GuestGuard**: Protect guest-only routes - -### Interceptors - -- **AuthInterceptor**: Automatic token injection and refresh - -## Configuration - -### Environment Variables - -You can configure the auth service URL through your environment: - -```typescript -// environment.ts -export const environment = { - authServiceUrl: 'http://localhost:4000' -}; - -// app.component.ts -constructor(private authService: AuthService) { - this.authService.configure(environment.authServiceUrl); -} -``` - -### Token Storage - -By default, tokens are stored in localStorage. The library handles: - -- Automatic token refresh before expiration -- Cross-tab synchronization -- Token validation and cleanup - -## Error Handling - -All services return Observable streams with proper error handling: - -```typescript -this.authService.login(credentials).subscribe({ - next: (response) => { - // Handle success - }, - error: (apiError: ApiError) => { - console.error('Error:', apiError.error); - - // Handle specific errors - if (apiError.requires_2fa) { - // Redirect to 2FA input - } - - if (apiError.details) { - // Handle validation errors - console.error('Validation errors:', apiError.details); - } - } -}); -``` - -## Building - -To build the library, run: - -```bash -ng build auth-client -``` - -This command will compile your project, and the build artifacts will be placed in the `dist/` directory. - -## Publishing the Library - -Once the project is built, you can publish your library by following these steps: - -1. Navigate to the `dist` directory: - ```bash - cd dist/auth-client - ``` - -2. Run the `npm publish` command to publish your library to the npm registry: - ```bash - npm publish - ``` - -## Running unit tests - -To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: - -```bash -ng test auth-client -``` - -## Contributing - -This library is designed to work with the Elixir auth service. Please ensure API compatibility when making changes. - -## License - -MIT License +Repository: auth-client diff --git a/projects/demo-ui-essentials/src/app/demos/accessibility-demo/accessibility-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/accessibility-demo/accessibility-demo.component.scss index d7e6d66..440dbc9 100644 --- a/projects/demo-ui-essentials/src/app/demos/accessibility-demo/accessibility-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/accessibility-demo/accessibility-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .accessibility-demo { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/accordion-demo/accordion-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/accordion-demo/accordion-demo.component.scss index 2cd2af9..eef3f8c 100644 --- a/projects/demo-ui-essentials/src/app/demos/accordion-demo/accordion-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/accordion-demo/accordion-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/alert-demo/alert-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/alert-demo/alert-demo.component.scss index 11ea0f5..641c8ce 100644 --- a/projects/demo-ui-essentials/src/app/demos/alert-demo/alert-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/alert-demo/alert-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { max-width: 1200px; diff --git a/projects/demo-ui-essentials/src/app/demos/aspect-ratio-demo/aspect-ratio-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/aspect-ratio-demo/aspect-ratio-demo.component.scss index dbe92c9..0ccb977 100644 --- a/projects/demo-ui-essentials/src/app/demos/aspect-ratio-demo/aspect-ratio-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/aspect-ratio-demo/aspect-ratio-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss index 9b480fb..28a10ba 100644 --- a/projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: 32px; diff --git a/projects/demo-ui-essentials/src/app/demos/backdrop-demo/backdrop-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/backdrop-demo/backdrop-demo.component.scss index a561978..f8846b4 100644 --- a/projects/demo-ui-essentials/src/app/demos/backdrop-demo/backdrop-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/backdrop-demo/backdrop-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens; +@use 'ui-design-system/src/styles/semantic/index' as tokens; .demo-container { padding: tokens.$semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/backgrounds-demo/backgrounds-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/backgrounds-demo/backgrounds-demo.component.scss index 7244260..29bb517 100644 --- a/projects/demo-ui-essentials/src/app/demos/backgrounds-demo/backgrounds-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/backgrounds-demo/backgrounds-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles' as ui; +@use 'ui-design-system/src/styles' as ui; .backgrounds-demo { padding: 2rem; diff --git a/projects/demo-ui-essentials/src/app/demos/bento-grid-demo/bento-grid-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/bento-grid-demo/bento-grid-demo.component.scss index fefa99e..b910e2c 100644 --- a/projects/demo-ui-essentials/src/app/demos/bento-grid-demo/bento-grid-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/bento-grid-demo/bento-grid-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.scss index 11056e4..4b13946 100644 --- a/projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding-bottom: 120px; // Extra space to accommodate bottom navigation examples diff --git a/projects/demo-ui-essentials/src/app/demos/box-demo/box-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/box-demo/box-demo.component.scss index 1ce2432..89325e4 100644 --- a/projects/demo-ui-essentials/src/app/demos/box-demo/box-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/box-demo/box-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/breakpoint-container-demo/breakpoint-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/breakpoint-container-demo/breakpoint-container-demo.component.scss index 55ff40f..67bb708 100644 --- a/projects/demo-ui-essentials/src/app/demos/breakpoint-container-demo/breakpoint-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/breakpoint-container-demo/breakpoint-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/carousel-demo/carousel-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/carousel-demo/carousel-demo.component.scss index be2f563..d5f7bf3 100644 --- a/projects/demo-ui-essentials/src/app/demos/carousel-demo/carousel-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/carousel-demo/carousel-demo.component.scss @@ -1,4 +1,4 @@ -@import "../../../../../ui-design-system/src/styles/semantic"; +@import 'ui-design-system/src/styles/semantic'; .carousel-demo { padding: $semantic-spacing-layout-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/center-demo/center-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/center-demo/center-demo.component.scss index 1a1fe7a..1b6c2ff 100644 --- a/projects/demo-ui-essentials/src/app/demos/center-demo/center-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/center-demo/center-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/code-display-demo/code-display-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/code-display-demo/code-display-demo.component.scss index cada4cd..b1245a5 100644 --- a/projects/demo-ui-essentials/src/app/demos/code-display-demo/code-display-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/code-display-demo/code-display-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-sm; diff --git a/projects/demo-ui-essentials/src/app/demos/color-picker-demo/color-picker-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/color-picker-demo/color-picker-demo.component.scss index e54eb3b..fb35677 100644 --- a/projects/demo-ui-essentials/src/app/demos/color-picker-demo/color-picker-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/color-picker-demo/color-picker-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/command-palette-demo/command-palette-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/command-palette-demo/command-palette-demo.component.scss index a50a0c7..fd49be4 100644 --- a/projects/demo-ui-essentials/src/app/demos/command-palette-demo/command-palette-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/command-palette-demo/command-palette-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss index 6ff6da6..55b1f4f 100644 --- a/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-wrapper { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.scss index 4ee543d..0c3ddd3 100644 --- a/projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as semantic; +@use 'ui-design-system/src/styles/semantic' as semantic; .conversion-demo { min-height: 100vh; diff --git a/projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.scss index f15b48f..f9f341e 100644 --- a/projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic/index" as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/drawer-demo/drawer-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/drawer-demo/drawer-demo.component.scss index 09d8df7..c24f690 100644 --- a/projects/demo-ui-essentials/src/app/demos/drawer-demo/drawer-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/drawer-demo/drawer-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { max-width: 1200px; diff --git a/projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.scss index 7478c65..2899db2 100644 --- a/projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/enhanced-table-demo/enhanced-table-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/enhanced-table-demo/enhanced-table-demo.component.scss index 61b5705..f6e4f8b 100644 --- a/projects/demo-ui-essentials/src/app/demos/enhanced-table-demo/enhanced-table-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/enhanced-table-demo/enhanced-table-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .enhanced-table-demo { padding: $semantic-spacing-layout-section-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/fab-menu-demo/fab-menu-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/fab-menu-demo/fab-menu-demo.component.scss index f8d3043..dd8b263 100644 --- a/projects/demo-ui-essentials/src/app/demos/fab-menu-demo/fab-menu-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/fab-menu-demo/fab-menu-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/feed-layout-demo/feed-layout-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/feed-layout-demo/feed-layout-demo.component.scss index 2d3d47c..db739ca 100644 --- a/projects/demo-ui-essentials/src/app/demos/feed-layout-demo/feed-layout-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/feed-layout-demo/feed-layout-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/file-upload-demo/file-upload-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/file-upload-demo/file-upload-demo.component.scss index d907ddf..f922986 100644 --- a/projects/demo-ui-essentials/src/app/demos/file-upload-demo/file-upload-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/file-upload-demo/file-upload-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/flex-demo/flex-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/flex-demo/flex-demo.component.scss index ee2e248..a6c7493 100644 --- a/projects/demo-ui-essentials/src/app/demos/flex-demo/flex-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/flex-demo/flex-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss index 3bb611e..eebf59b 100644 --- a/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/fontawesome-demo/fontawesome-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/fontawesome-demo/fontawesome-demo.component.scss index cde5e5c..f628e4d 100644 --- a/projects/demo-ui-essentials/src/app/demos/fontawesome-demo/fontawesome-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/fontawesome-demo/fontawesome-demo.component.scss @@ -1,4 +1,4 @@ -@import "../../../../../ui-design-system/src/styles/semantic"; +@import 'ui-design-system/src/styles/semantic'; .demo-container { padding: 2rem; max-width: 1200px; diff --git a/projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss index 746bf98..6835248 100644 --- a/projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/gallery-grid-demo/gallery-grid-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/gallery-grid-demo/gallery-grid-demo.component.scss index 681d196..bb0bb2f 100644 --- a/projects/demo-ui-essentials/src/app/demos/gallery-grid-demo/gallery-grid-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/gallery-grid-demo/gallery-grid-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/grid-container-demo/grid-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/grid-container-demo/grid-container-demo.component.scss index 7065a35..38b8001 100644 --- a/projects/demo-ui-essentials/src/app/demos/grid-container-demo/grid-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/grid-container-demo/grid-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.scss index 4526700..ba00467 100644 --- a/projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as tokens; +@use 'ui-design-system/src/styles/semantic' as tokens; .demo-container { padding: tokens.$semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/image-container-demo/image-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/image-container-demo/image-container-demo.component.scss index 1417f64..4cbbec4 100644 --- a/projects/demo-ui-essentials/src/app/demos/image-container-demo/image-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/image-container-demo/image-container-demo.component.scss @@ -1,4 +1,4 @@ -@import "../../../../../ui-design-system/src/styles/semantic"; +@import 'ui-design-system/src/styles/semantic'; // Tokens available globally via main application styles diff --git a/projects/demo-ui-essentials/src/app/demos/infinite-scroll-container-demo/infinite-scroll-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/infinite-scroll-container-demo/infinite-scroll-container-demo.component.scss index 888b1a1..7d92f35 100644 --- a/projects/demo-ui-essentials/src/app/demos/infinite-scroll-container-demo/infinite-scroll-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/infinite-scroll-container-demo/infinite-scroll-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/kanban-board-demo/kanban-board-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/kanban-board-demo/kanban-board-demo.component.scss index f94c2ac..8454680 100644 --- a/projects/demo-ui-essentials/src/app/demos/kanban-board-demo/kanban-board-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/kanban-board-demo/kanban-board-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/landing-feature-grid-demo/landing-feature-grid-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/landing-feature-grid-demo/landing-feature-grid-demo.component.scss index 78f3901..fd94d25 100644 --- a/projects/demo-ui-essentials/src/app/demos/landing-feature-grid-demo/landing-feature-grid-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/landing-feature-grid-demo/landing-feature-grid-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-section { margin-bottom: $semantic-spacing-layout-section-xl; diff --git a/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss index 78f3901..fd94d25 100644 --- a/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-section { margin-bottom: $semantic-spacing-layout-section-xl; diff --git a/projects/demo-ui-essentials/src/app/demos/landing-statistics-demo/landing-statistics-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/landing-statistics-demo/landing-statistics-demo.component.scss index 78f3901..fd94d25 100644 --- a/projects/demo-ui-essentials/src/app/demos/landing-statistics-demo/landing-statistics-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/landing-statistics-demo/landing-statistics-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-section { margin-bottom: $semantic-spacing-layout-section-xl; diff --git a/projects/demo-ui-essentials/src/app/demos/landing-testimonials-demo/landing-testimonials-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/landing-testimonials-demo/landing-testimonials-demo.component.scss index 78f3901..fd94d25 100644 --- a/projects/demo-ui-essentials/src/app/demos/landing-testimonials-demo/landing-testimonials-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/landing-testimonials-demo/landing-testimonials-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-section { margin-bottom: $semantic-spacing-layout-section-xl; diff --git a/projects/demo-ui-essentials/src/app/demos/list-detail-layout-demo/list-detail-layout-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/list-detail-layout-demo/list-detail-layout-demo.component.scss index f1c3cd5..fc8cfca 100644 --- a/projects/demo-ui-essentials/src/app/demos/list-detail-layout-demo/list-detail-layout-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/list-detail-layout-demo/list-detail-layout-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic/index" as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/menu-demo/menu-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/menu-demo/menu-demo.component.scss index 49a5516..1ca8348 100644 --- a/projects/demo-ui-essentials/src/app/demos/menu-demo/menu-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/menu-demo/menu-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/tokens" as *; +@use 'ui-design-system/src/styles/tokens' as *; // Tokens available globally via main application styles diff --git a/projects/demo-ui-essentials/src/app/demos/modal-demo/modal-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/modal-demo/modal-demo.component.scss index 6f17731..b3602cd 100644 --- a/projects/demo-ui-essentials/src/app/demos/modal-demo/modal-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/modal-demo/modal-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/overlay-container-demo/overlay-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/overlay-container-demo/overlay-container-demo.component.scss index 3a9b623..77adfde 100644 --- a/projects/demo-ui-essentials/src/app/demos/overlay-container-demo/overlay-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/overlay-container-demo/overlay-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens; +@use 'ui-design-system/src/styles/semantic/index' as tokens; .demo-container { padding: tokens.$semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/popover-demo/popover-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/popover-demo/popover-demo.component.scss index 12f65b8..17ae9b6 100644 --- a/projects/demo-ui-essentials/src/app/demos/popover-demo/popover-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/popover-demo/popover-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic/index" as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .popover-demo { padding: $semantic-spacing-layout-section-xs; diff --git a/projects/demo-ui-essentials/src/app/demos/progress-circle-demo/progress-circle-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/progress-circle-demo/progress-circle-demo.component.scss index a056dfb..8bf4859 100644 --- a/projects/demo-ui-essentials/src/app/demos/progress-circle-demo/progress-circle-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/progress-circle-demo/progress-circle-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/range-slider-demo/range-slider-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/range-slider-demo/range-slider-demo.component.scss index 73134c5..d9056a6 100644 --- a/projects/demo-ui-essentials/src/app/demos/range-slider-demo/range-slider-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/range-slider-demo/range-slider-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/scroll-container-demo/scroll-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/scroll-container-demo/scroll-container-demo.component.scss index 7c2a276..1ce2f65 100644 --- a/projects/demo-ui-essentials/src/app/demos/scroll-container-demo/scroll-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/scroll-container-demo/scroll-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/section-demo/section-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/section-demo/section-demo.component.scss index 5e97cce..fa3a250 100644 --- a/projects/demo-ui-essentials/src/app/demos/section-demo/section-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/section-demo/section-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/sidebar-layout-demo/sidebar-layout-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/sidebar-layout-demo/sidebar-layout-demo.component.scss index b2ba8a9..9d6f051 100644 --- a/projects/demo-ui-essentials/src/app/demos/sidebar-layout-demo/sidebar-layout-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/sidebar-layout-demo/sidebar-layout-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss index 8bee238..d1183c1 100644 --- a/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/spacer-demo/spacer-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/spacer-demo/spacer-demo.component.scss index d63d5d6..8c71eec 100644 --- a/projects/demo-ui-essentials/src/app/demos/spacer-demo/spacer-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/spacer-demo/spacer-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as tokens; +@use 'ui-design-system/src/styles/semantic' as tokens; .demo-container { padding: tokens.$semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss index 6f5fa36..64b9c84 100644 --- a/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/split-view-demo/split-view-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/split-view-demo/split-view-demo.component.scss index c651957..0873415 100644 --- a/projects/demo-ui-essentials/src/app/demos/split-view-demo/split-view-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/split-view-demo/split-view-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/stack-demo/stack-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/stack-demo/stack-demo.component.scss index 766394d..5a2439e 100644 --- a/projects/demo-ui-essentials/src/app/demos/stack-demo/stack-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/stack-demo/stack-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss index 041a717..284ae85 100644 --- a/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-sm; diff --git a/projects/demo-ui-essentials/src/app/demos/supporting-pane-layout-demo/supporting-pane-layout-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/supporting-pane-layout-demo/supporting-pane-layout-demo.component.scss index a110da8..84e49da 100644 --- a/projects/demo-ui-essentials/src/app/demos/supporting-pane-layout-demo/supporting-pane-layout-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/supporting-pane-layout-demo/supporting-pane-layout-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/tabs-container-demo/tabs-container-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/tabs-container-demo/tabs-container-demo.component.scss index b175ad0..1e7b1ee 100644 --- a/projects/demo-ui-essentials/src/app/demos/tabs-container-demo/tabs-container-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/tabs-container-demo/tabs-container-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/timeline-demo/timeline-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/timeline-demo/timeline-demo.component.scss index 9f04395..2bc066b 100644 --- a/projects/demo-ui-essentials/src/app/demos/timeline-demo/timeline-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/timeline-demo/timeline-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/toast-demo/toast-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/toast-demo/toast-demo.component.scss index 45b339d..705d757 100644 --- a/projects/demo-ui-essentials/src/app/demos/toast-demo/toast-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/toast-demo/toast-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic/index' as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/tooltip-demo/tooltip-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/tooltip-demo/tooltip-demo.component.scss index 0a39e27..d11025f 100644 --- a/projects/demo-ui-essentials/src/app/demos/tooltip-demo/tooltip-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/tooltip-demo/tooltip-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic/index" as *; +@use 'ui-design-system/src/styles/semantic/index' as *; .demo-container { padding: $semantic-spacing-layout-md; diff --git a/projects/demo-ui-essentials/src/app/demos/transfer-list-demo/transfer-list-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/transfer-list-demo/transfer-list-demo.component.scss index 617808e..9bc922a 100644 --- a/projects/demo-ui-essentials/src/app/demos/transfer-list-demo/transfer-list-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/transfer-list-demo/transfer-list-demo.component.scss @@ -1,4 +1,4 @@ -@import "../../../../../ui-design-system/src/styles/semantic"; +@import 'ui-design-system/src/styles/semantic'; .demo-container { padding: $semantic-spacing-layout-section-md; diff --git a/projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.scss index cb4a360..c688f00 100644 --- a/projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as *; +@use 'ui-design-system/src/styles/semantic' as *; .demo-container { padding: $semantic-spacing-component-lg; diff --git a/projects/demo-ui-essentials/src/app/demos/video-player-demo/video-player-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/video-player-demo/video-player-demo.component.scss index dbca515..01ae2ca 100644 --- a/projects/demo-ui-essentials/src/app/demos/video-player-demo/video-player-demo.component.scss +++ b/projects/demo-ui-essentials/src/app/demos/video-player-demo/video-player-demo.component.scss @@ -1,4 +1,4 @@ -@use "../../../../../ui-design-system/src/styles/semantic" as *; +@use 'ui-design-system/src/styles/semantic' as *; // ========================================================================== diff --git a/projects/demo-ui-essentials/src/app/features/dashboard/dashboard.sidebar.component.scss b/projects/demo-ui-essentials/src/app/features/dashboard/dashboard.sidebar.component.scss index f7c89c0..ef47249 100644 --- a/projects/demo-ui-essentials/src/app/features/dashboard/dashboard.sidebar.component.scss +++ b/projects/demo-ui-essentials/src/app/features/dashboard/dashboard.sidebar.component.scss @@ -1,4 +1,4 @@ -@use '../../../../../ui-design-system/src/styles/semantic' as semantic; +@use 'ui-design-system/src/styles/semantic' as semantic; .sidebar-container { padding: 1rem 0; diff --git a/projects/demo-ui-essentials/src/scss/_variables.scss b/projects/demo-ui-essentials/src/scss/_variables.scss index 819fae2..bfb584c 100644 --- a/projects/demo-ui-essentials/src/scss/_variables.scss +++ b/projects/demo-ui-essentials/src/scss/_variables.scss @@ -13,7 +13,7 @@ $base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; $base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; -@import '../../../ui-design-system/src/styles/semantic'; +@import 'ui-design-system/src/styles/semantic'; // These overrides will cascade through all semantic typography tokens // that use $base-typography-font-family-sans and $base-typography-font-family-display diff --git a/projects/demo-ui-essentials/src/styles.scss b/projects/demo-ui-essentials/src/styles.scss index f8fc6ee..9d9ea5d 100644 --- a/projects/demo-ui-essentials/src/styles.scss +++ b/projects/demo-ui-essentials/src/styles.scss @@ -5,8 +5,8 @@ $inter-font-path: "/fonts/inter/" !default; $comfortaa-font-path: "/fonts/comfortaa/" !default; // Import specific fonts we need for the demo -@import '../../ui-design-system/src/styles/fontfaces/inter'; -@import '../../ui-design-system/src/styles/fontfaces/comfortaa'; +@import 'ui-design-system/src/styles/fontfaces/inter'; +@import 'ui-design-system/src/styles/fontfaces/comfortaa'; // Import project variables (which now has semantic tokens available) @import 'scss/_variables'; diff --git a/projects/hcl-studio/README.md b/projects/hcl-studio/README.md index abaae42..e0e7b90 100644 --- a/projects/hcl-studio/README.md +++ b/projects/hcl-studio/README.md @@ -1,63 +1 @@ -# HclStudio - -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0. - -## 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 library, run: - -```bash -ng build hcl-studio -``` - -This command will compile your project, and the build artifacts will be placed in the `dist/` directory. - -### Publishing the Library - -Once the project is built, you can publish your library by following these steps: - -1. Navigate to the `dist` directory: - ```bash - cd dist/hcl-studio - ``` - -2. Run the `npm publish` command to publish your library to the npm registry: - ```bash - npm publish - ``` - -## Running unit tests - -To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: - -```bash -ng test -``` - -## Running end-to-end tests - -For end-to-end (e2e) testing, run: - -```bash -ng e2e -``` - -Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. - -## 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. +Repository: hcl-studio diff --git a/projects/shared-utils/README.md b/projects/shared-utils/README.md index 2b76a2f..180a9a6 100644 --- a/projects/shared-utils/README.md +++ b/projects/shared-utils/README.md @@ -1,63 +1 @@ -# SharedUtils - -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0. - -## 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 library, run: - -```bash -ng build shared-utils -``` - -This command will compile your project, and the build artifacts will be placed in the `dist/` directory. - -### Publishing the Library - -Once the project is built, you can publish your library by following these steps: - -1. Navigate to the `dist` directory: - ```bash - cd dist/shared-utils - ``` - -2. Run the `npm publish` command to publish your library to the npm registry: - ```bash - npm publish - ``` - -## Running unit tests - -To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: - -```bash -ng test -``` - -## Running end-to-end tests - -For end-to-end (e2e) testing, run: - -```bash -ng e2e -``` - -Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. - -## 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. +Repository: shared-utils diff --git a/projects/ui-accessibility/README.md b/projects/ui-accessibility/README.md index 2c9e01e..8981ff9 100644 --- a/projects/ui-accessibility/README.md +++ b/projects/ui-accessibility/README.md @@ -1,364 +1 @@ -# UI Accessibility - -A comprehensive Angular accessibility library that enhances your existing components with WCAG 2.1 Level AA compliant features while using semantic tokens from your design system. - -## Features - -- **🎯 Focus Management** - Advanced focus trapping, restoration, and monitoring -- **⌨️ Keyboard Navigation** - Arrow keys, roving tabindex, custom shortcuts -- **📢 Screen Reader Support** - Live announcements, ARIA enhancements -- **🎨 Design System Integration** - Uses semantic motion, color, and spacing tokens -- **♿ High Contrast & Reduced Motion** - Automatic detection and adaptation -- **🔧 Zero Rewrites Required** - Enhance existing components with directives -- **🧪 Developer Experience** - Debug modes, warnings, and comprehensive logging - -## Installation - -```bash -npm install ui-accessibility -``` - -## Quick Start - -### 1. Import the Module - -```typescript -import { UiAccessibilityModule } from 'ui-accessibility'; - -@NgModule({ - imports: [ - UiAccessibilityModule.forRoot({ - // Optional configuration - skipLinks: { enabled: true }, - keyboard: { enableArrowNavigation: true }, - development: { warnings: true } - }) - ] -}) -export class AppModule {} -``` - -### 2. Import SCSS Utilities - -```scss -// Import accessibility utilities (uses your semantic tokens) -@use 'ui-accessibility/src/lib/utilities/a11y-utilities'; -``` - -### 3. Add Skip Links - -```html - - -``` - -## Core Features - -### Focus Trap Directive - -Trap focus within containers like modals and drawers: - -```html - - -

Settings

- - - - - - -

Settings

- - - -``` - -**Features:** -- Automatic focus on first element -- Tab wrapping within container -- Focus restoration on close -- Uses semantic motion tokens for transitions - -### Arrow Navigation Directive - -Add keyboard navigation to lists, menus, and grids: - -```html - - - Profile - Settings - Logout - - - - - Profile - Settings - Logout - -``` - -**Navigation Options:** -- `vertical` - Up/Down arrows -- `horizontal` - Left/Right arrows -- `both` - All arrow keys -- `grid` - 2D navigation with column support - -### Live Announcer Service - -Announce dynamic content changes to screen readers: - -```typescript -import { LiveAnnouncerService } from 'ui-accessibility'; - -constructor(private announcer: LiveAnnouncerService) {} - -// Announce with different politeness levels -onItemAdded() { - this.announcer.announce('Item added to cart', 'polite'); -} - -onError() { - this.announcer.announce('Error: Please fix the required fields', 'assertive'); -} - -// Announce a sequence of messages -onProcessComplete() { - this.announcer.announceSequence([ - 'Processing started', - 'Validating data', - 'Processing complete' - ], 'polite', 1500); -} -``` - -### Screen Reader Components - -Hide content visually while keeping it accessible: - -```html - - - Additional context for screen readers - - - - - Press Enter to activate - - - - - Please correct the errors below - -``` - -### Keyboard Manager Service - -Register global and element-specific keyboard shortcuts: - -```typescript -import { KeyboardManagerService } from 'ui-accessibility'; - -constructor(private keyboard: KeyboardManagerService) {} - -ngOnInit() { - // Global shortcut - this.keyboard.registerGlobalShortcut('save', { - key: 's', - ctrlKey: true, - description: 'Save document', - handler: () => this.save() - }); - - // Element-specific shortcut - const element = this.elementRef.nativeElement; - this.keyboard.registerElementShortcut('close', element, { - key: 'Escape', - description: 'Close dialog', - handler: () => this.close() - }); -} -``` - -## Design System Integration - -All features use semantic tokens from your design system: - -### Focus Indicators - -```scss -// Automatic integration with your focus tokens -.my-component:focus-visible { - outline: $semantic-border-focus-width solid $semantic-color-focus; - box-shadow: $semantic-shadow-input-focus; - transition: outline-color $semantic-motion-duration-fast; -} -``` - -### Skip Links Styling - -Uses your semantic spacing, colors, and typography: - -```scss -.skip-link { - padding: $semantic-spacing-component-padding-y $semantic-spacing-component-padding-x; - background: $semantic-color-surface-primary; - color: $semantic-color-text-primary; - border-color: $semantic-color-border-focus; -} -``` - -### Motion & Animations - -Respects reduced motion preferences: - -```typescript -// Service automatically detects preference -const duration = this.highContrast.getMotionDuration('300ms', '0.01s'); - -// SCSS utilities adapt automatically -@media (prefers-reduced-motion: reduce) { - .fade-in-a11y { - animation-duration: 0.01s; - } -} -``` - -## Advanced Configuration - -### Full Configuration Example - -```typescript -UiAccessibilityModule.forRoot({ - announcer: { - defaultPoliteness: 'polite', - defaultDuration: 4000, - enabled: true - }, - focusManagement: { - trapFocus: true, - restoreFocus: true, - focusVisibleEnabled: true - }, - keyboard: { - enableShortcuts: true, - enableArrowNavigation: true, - customShortcuts: [ - { key: '/', ctrlKey: true, description: 'Search' } - ] - }, - skipLinks: { - enabled: true, - position: 'top', - links: [ - { href: '#main', text: 'Skip to main content' }, - { href: '#nav', text: 'Skip to navigation' }, - { href: '#search', text: 'Skip to search' } - ] - }, - accessibility: { - respectReducedMotion: true, - respectHighContrast: true, - injectAccessibilityStyles: true, - addBodyClasses: true - }, - development: { - warnings: true, - logging: true - } -}) -``` - -### High Contrast & Reduced Motion - -Automatic detection and CSS class application: - -```html - - - - - -``` - -## Available Directives - -| Directive | Purpose | Usage | -|-----------|---------|--------| -| `uiFocusTrap` | Trap focus within container | `
` | -| `uiArrowNavigation` | Arrow key navigation | `