# 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

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