Storybook Setup

Issues Fixed

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';

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

Remaining Issues

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

1.7 KiB Raw Blame History