Commit Graph

4 Commits

Author SHA1 Message Date
skyai_dev
bf67b7f955 Add comprehensive component library expansion with new UI components
This commit includes multiple new components and improvements to the UI essentials library:

## New Components Added:
- **Accordion**: Expandable/collapsible content panels with full accessibility
- **Alert**: Notification and messaging component with variants and dismiss functionality
- **Popover**: Floating content containers with positioning and trigger options
- **Timeline**: Chronological event display with customizable styling
- **Tree View**: Hierarchical data display with expand/collapse functionality
- **Toast**: Notification component (previously committed, includes style refinements)

## Component Features:
- Full TypeScript implementation with Angular 19+ patterns
- Comprehensive SCSS styling using semantic design tokens exclusively
- Multiple size variants (sm, md, lg) and color variants (primary, success, warning, danger, info)
- Accessibility support with ARIA attributes and keyboard navigation
- Responsive design with mobile-first approach
- Interactive demos showcasing all component features
- Integration with existing design system and routing

## Demo Applications:
- Created comprehensive demo components for each new component
- Interactive examples with live code demonstrations
- Integrated into main demo application routing and navigation

## Documentation:
- Added COMPONENT_CREATION_TEMPLATE.md with detailed guidelines
- Comprehensive component creation patterns and best practices
- Design token usage guidelines and validation rules

## Code Quality:
- Follows established Angular and SCSS conventions
- Uses only verified semantic design tokens
- Maintains consistency with existing component architecture
- Comprehensive error handling and edge case management

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 12:02:38 +10:00
skyai_dev
6b8352a8a0 Add comprehensive toast notification component to feedback category
- Create new toast component with full TypeScript implementation
- Add SCSS styling using semantic design tokens exclusively
- Implement size variants (sm, md, lg) and color variants (primary, success, warning, danger, info)
- Include interactive features: auto-dismiss, manual dismiss, progress bar, hover pause/resume
- Add comprehensive accessibility support with ARIA attributes and keyboard navigation
- Create engaging demo component with interactive examples and live statistics
- Integrate toast into feedback category menu and routing system
- Follow established component patterns and design system conventions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 12:01:35 +10:00
skyai_dev
6f0ab0cf5f Fix SCSS semantic token variable errors across components
- Replace incorrect semantic token names with correct ones:
  • $semantic-border-width-thin → $semantic-border-width-1
  • $semantic-color-border-default → $semantic-color-border-primary
  • $semantic-spacing-content-* → $semantic-spacing-component-*
  • $semantic-typography-body-* → $semantic-typography-font-size-*
  • $semantic-typography-caption-* → $semantic-typography-font-size-*
  • $semantic-motion-easing-standard → $semantic-easing-standard
  • $semantic-color-surface-tertiary → $semantic-color-surface-secondary
  • Various hover color tokens → base color tokens

- Fix typography map usage errors:
  • Replace heading map tokens with individual size tokens
  • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size

- Update affected components:
  • tooltip, divider, progress-circle, range-slider components
  • Related demo components and SCSS files

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 07:50:34 +10:00
skyai_dev
5983722793 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>
2025-09-03 05:38:09 +10:00