Add comprehensive component library and demo application

Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
2025-09-03 05:38:09 +10:00
parent c803831f60
commit 5983722793
246 changed files with 52845 additions and 25 deletions

View File

@@ -4,11 +4,12 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## Project Overview
SSuite is an Angular workspace containing three libraries designed as a modular component system:
SSuite is an Angular workspace containing three libraries and a demo application:
- **shared-ui**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
- **shared-utils**: Common utilities and shared services
- **ui-essentials**: Essential UI components and functionality
- **shared-utils**: Common utilities and shared services
- **ui-essentials**: Essential UI components with comprehensive component library (buttons, forms, data-display, navigation, media, feedback, overlays, layout)
- **demo-ui-essentials**: Demo application showcasing all components with live examples
## Development Commands
@@ -39,17 +40,29 @@ ng test ui-essentials
### Development Server
```bash
# Start development server (if main application exists)
ng serve
# Start demo application server
ng serve demo-ui-essentials
# Alternative start command
npm start
```
## Architecture
### Workspace Structure
```
projects/
├── shared-ui/ - Design system and SCSS architecture
├── shared-utils/ - Common utilities and services
├── ui-essentials/ - Component library with 8 major categories
└── demo-ui-essentials/ - Demo application with component examples
```
### Library Structure
Each library follows Angular's standard structure:
- `src/lib/` - Library source code
- `src/public-api.ts` - Public exports
- `ng-package.json` - Library packaging configuration
- `ng-package.json` - Library packaging configuration
- `package.json` - Library metadata
### TypeScript Path Mapping
@@ -62,6 +75,17 @@ Libraries are mapped in `tsconfig.json` paths:
}
```
### Component Categories (ui-essentials)
The component library is organized into these categories:
- **buttons**: Button variants and actions
- **forms**: Input, checkbox, radio, search, switch, autocomplete, date/time pickers, file upload, form fields
- **data-display**: Tables, lists, cards, chips, badges, avatars
- **navigation**: App bars, menus, pagination
- **media**: Image containers, carousels, video players
- **feedback**: Progress indicators, status badges, theme switchers, empty states, loading spinners, skeleton loaders
- **overlays**: Modals, drawers, backdrops, overlay containers
- **layout**: Containers, spacers, grid systems
### Design System (shared-ui)
Contains a comprehensive SCSS architecture:
- **Base tokens**: Colors, typography, spacing, motion, shadows
@@ -95,10 +119,22 @@ Entry points:
- Tokens: `projects/shared-ui/src/styles/tokens.scss`
- Semantic: `projects/shared-ui/src/styles/semantic/index.scss`
## Development Notes
## Development Workflow
- All libraries use Angular 19.2+ with strict TypeScript configuration
### Component Development
1. **New components**: Add to appropriate category in `ui-essentials/src/lib/components/`
2. **Export new components**: Update category `index.ts` files
3. **Demo components**: Create matching demo in `demo-ui-essentials/src/app/demos/`
4. **Routing**: Add demo routes to `demos.routes.ts`
### Build Dependencies
- Libraries must be built before being consumed by other projects
- Use `ng generate` commands within library contexts for scaffolding
- Demo application depends on built library artifacts in `dist/`
- Use watch mode (`ng build --watch`) for development iterations
### Library Development
- All libraries use Angular 19.2+ with strict TypeScript configuration
- Use `ng generate` commands within library contexts for scaffolding
- Libraries are publishable to npm after building to `dist/` directory
- Testing uses Karma with Jasmine framework
- Testing uses Karma with Jasmine framework
- FontAwesome icons integrated via `@fortawesome/angular-fontawesome`