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