ng-implementation/airwatch/README.md

# Storybook Setup

## Issues Fixed

1. Fixed the import statement in `.storybook/preview.ts` to use the correct path for `INITIAL_VIEWPORTS`:
   ```typescript
   // Changed from
   import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport/presets';
   
   // To
   import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
   ```

2. Removed deprecated Storybook addons:
   - Removed `@storybook/addon-backgrounds` from `.storybook/main.ts` and `package.json`
   - Removed `@storybook/addon-controls` from `.storybook/main.ts` and `package.json`
   - Kept the backgrounds and controls configuration in `.storybook/preview.ts` as these are now part of the core Storybook functionality

3. Fixed Remixicon icons not appearing in Storybook for app-source-block:
   - Added global style imports to `.storybook/preview.ts`:
     ```typescript
     // Import global styles
     import '../src/app/styles/styles.scss';
     // Import Remixicon directly to ensure it's available in Storybook
     import 'remixicon/fonts/remixicon.css';
     ```
   - This ensures that both the application's global styles (which include sae-lib styles with Remixicon) and Remixicon itself are properly loaded in Storybook

4. Fixed CSS processing issues with `@font-face` declarations:
   - Added explicit CSS loader configuration in `.storybook/main.ts`:
     ```typescript
     config.module.rules.push({
       test: /\.css$/,
       use: [
         'style-loader',
         {
           loader: 'css-loader',
           options: {
             url: true,
             import: true
           }
         }
       ]
     });
     ```
   - Enhanced font file handling to support files with query parameters:
     ```typescript
     config.module.rules.push({
       test: /\.(woff|woff2|eot|ttf|otf)(\?.*)?$/,
       type: 'asset/resource',
       generator: {filename: 'fonts/[name].[contenthash][ext]'},
     });
     ```
   - This ensures that font files referenced in `@font-face` declarations with query parameters (like `?t=1734404658139`) are properly loaded

## Remaining Issues

1. **Node.js Version Compatibility**:
   - The Angular CLI requires Node.js v20.19+ or v22.12+
   - Current Node.js version is v18.19.1
   - To fix this issue, you need to upgrade your Node.js version

## How to Upgrade Node.js

You can upgrade Node.js using one of the following methods:

### Using NVM (Node Version Manager)

```bash
# Install NVM if you don't have it already
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install the required Node.js version
nvm install 20.19

# Use the installed version
nvm use 20.19
```

### Using Package Manager

#### For Ubuntu/Debian:

```bash
# Add NodeSource repository
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# Install Node.js
sudo apt-get install -y nodejs
```

#### For macOS (using Homebrew):

```bash
brew update
brew install node@20
```

After upgrading Node.js, run the following commands to reinstall dependencies and start Storybook:

```bash
npm install
npm run storybook
```