2025-08-19 10:58:54 +02:00
|
|
|
# Storybook Setup
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
## Issues Fixed
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
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';
|
|
|
|
```
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
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
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
## Remaining Issues
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
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)
|
2025-08-14 12:18:20 +02:00
|
|
|
|
|
|
|
```bash
|
2025-08-19 10:58:54 +02:00
|
|
|
# Install NVM if you don't have it already
|
|
|
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
# Install the required Node.js version
|
|
|
|
nvm install 20.19
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
# Use the installed version
|
|
|
|
nvm use 20.19
|
|
|
|
```
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
### Using Package Manager
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
#### For Ubuntu/Debian:
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
```bash
|
|
|
|
# Add NodeSource repository
|
|
|
|
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
# Install Node.js
|
|
|
|
sudo apt-get install -y nodejs
|
|
|
|
```
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
#### For macOS (using Homebrew):
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
```bash
|
|
|
|
brew update
|
|
|
|
brew install node@20
|
|
|
|
```
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
After upgrading Node.js, run the following commands to reinstall dependencies and start Storybook:
|
2025-08-14 12:18:20 +02:00
|
|
|
|
2025-08-19 10:58:54 +02:00
|
|
|
```bash
|
|
|
|
npm install
|
|
|
|
npm run storybook
|
|
|
|
```
|