storybook for toggle button

old-sae-airwatch/README.md

@@ -16,6 +16,43 @@
    - 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**: