Smart Storybook - Component Library

🚀 Quick Start - Using Components in Another Project

1. Configure Your Other Project

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["../smart-story-book/src/app/components/*"],
      "@constants": ["../smart-story-book/src/app/constants"]
    }
  }
}

angular.json:

{
  "stylePreprocessorOptions": {
    "includePaths": ["../smart-story-book/src/styles"]
  }
}

2. Install Dependencies

npm install @angular/material @angular/cdk @angular/animations

3. Use Components

import { ButtonComponent } from '@components/forms/button';
import { ICON_MAP } from '@constants';

<app-button 
  dataCy="save-button"
  title="Save"
  [icon]="ICON_MAP.check"
  color="primary"
  (onClick)="onSave()">
</app-button>

Note: dataCy is required for all components for testing purposes.

📦 Available Components

• Forms: button, checkbox, dropdown, otp-input, phone-input, radio, text-input, toggle
• Feedback: loader, popup-modal, toast, progress-bar
• Navigation: sidebar, menu, tab-group
• Data Display: card, feature-card, page-header, chip-group
• Layout: app-layout, auth-layout

🎨 Button Component

<app-button 
  dataCy="action-button"
  title="Click Me"
  [icon]="ICON_MAP.add"
  color="primary"
  size="medium"
  [disabled]="false"
  (onClick)="handleClick($event)">
</app-button>

Colors: primary, secondary-stroke, secondary-no-stroke, error
Sizes: small, medium, large, builder

Important: dataCy is required for all components.

📚 View Components

Run Storybook to see all components:

npm run storybook

🔧 Troubleshooting

Angular 19 Compatibility

This library is fully compatible with Angular 19 and follows best practices for standalone components.

Key Features:

• ✅ All components use standalone imports
• ✅ Individual directive imports instead of CommonModule (e.g., NgIf, NgFor, NgClass)
• ✅ Standard MatIconModule import pattern
• ✅ No deprecated Angular APIs

If you get "Unable to import directive NgClass" or similar errors:

This usually means your project is using an older Angular version or has a mismatch. Make sure:

# Your admin-frontend project should have Angular 19+
npm install @angular/core@^19.0.0 @angular/common@^19.0.0
npm install @angular/material@^19.0.0 @angular/cdk@^19.0.0

If you get "Unable to import component MatIcon" error:

• Make sure you have @angular/material installed in your project:

  npm install @angular/material@^19.0.0

• The components use standalone imports and should work out of the box

Dart Sass 3.0.0 Compatibility

All deprecated Sass functions have been updated to use the modern Sass module system:

• ✅ map-keys → map.keys
• ✅ map-get → map.get
• ✅ transparentize → color.adjust($color, $alpha: -N)
• ✅ darken → color.adjust($color, $lightness: -N%)

All SCSS files now use @use 'sass:map' and @use 'sass:color' modules.

Other Issues

• Can't find stylesheet: Add stylePreprocessorOptions to angular.json
• Can't find module: Add paths to tsconfig.json and restart TS server
• Styles not working: Restart ng serve