104 lines
3 KiB
Markdown
104 lines
3 KiB
Markdown
# 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
|
|
```
|