ng-implementation/airwatch

Storybook Setup

Issues Fixed

1. Fixed the import statement in .storybook/preview.ts to use the correct path for INITIAL_VIEWPORTS:

   // 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:

     // 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:

     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:

     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)

# 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:

# 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):

brew update
brew install node@20

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

npm install
npm run storybook