Skip to content

upgrade-storybook-v8 #904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

upgrade-storybook-v8 #904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions storybook/.storybook/main.js
View file
Open in desktop

This file was deleted.

14 changes: 2 additions & 12 deletions storybook/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: {
order: ['Basic'],
},
},
controls: { expanded: true },
layout: 'centered',
};
8 changes: 8 additions & 0 deletions storybook/.storybook/storybook.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite', // ya da '@storybook/react-webpack5'
options: {},
},
};
Comment on lines +1 to +8
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Critical: Verify that Storybook v8 recognizes storybook.config.js as the configuration file.

Storybook v8 conventionally expects the main configuration file to be named main.js (or main.ts) within the .storybook directory. Using storybook.config.js as the filename is non-standard and may cause Storybook to fail to load the configuration.

Please run the following verification to confirm whether Storybook properly loads this configuration:

If this custom filename doesn't work, consider renaming storybook.config.js to main.js:

-// storybook/.storybook/storybook.config.js
+// storybook/.storybook/main.js

🏁 Script executed:

#!/bin/bash
# Verify if storybook.config.js is recognized by checking Storybook v8 documentation
# and testing if the dev server starts correctly

cd storybook

# Check if main.js exists (it should contain this config instead)
if [ -f .storybook/main.js ]; then
  echo "=== main.js exists ==="
  cat .storybook/main.js
else
  echo "=== main.js does not exist ==="
fi

# Check Storybook documentation for config file naming
echo "=== Checking if storybook.config.js is a valid config filename ==="
fd -t f "main\.(js|ts|mjs|cjs)" .storybook

Length of output: 97

Rename storybook.config.js to main.js.

Storybook's main configuration file must be named main.js (or main.ts) and be located in the .storybook folder. Storybook needs a "main.js" file, and using a custom configuration file name is not supported—the -c flag is for specifying a custom config directory, not a custom config filename.

Rename storybook/.storybook/storybook.config.js to storybook/.storybook/main.js.

🤖 Prompt for AI Agents 
In storybook/.storybook/storybook.config.js lines 1-8, Storybook requires its
main configuration file to be named main.js (or main.ts); rename
storybook/.storybook/storybook.config.js to storybook/.storybook/main.js and
leave the exported config as-is, then update any project scripts or references
that pointed to the old filename so they now point to .storybook/main.js.

28 changes: 16 additions & 12 deletions storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,36 @@
"version": "1.0.0",
"description": "Stories for LiveCodes",
"scripts": {
"storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -o ../build/stories",
"storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build -o ../build/stories",
"typecheck": "tsc --noEmit"
},
"author": "Hatem Hosny",
"license": "MIT",
"devDependencies": {
"@babel/core": "7.20.12",
"@storybook/addon-actions": "6.5.15",
"@storybook/addon-essentials": "6.5.15",
"@storybook/addon-interactions": "6.5.15",
"@storybook/addon-links": "6.5.15",
"@storybook/addon-storysource": "6.5.15",
"@storybook/builder-webpack4": "6.5.15",
"@storybook/html": "6.5.15",
"@storybook/manager-webpack4": "6.5.15",
"@storybook/testing-library": "0.0.13",
"@chromatic-com/storybook": "^3.2.7",
"@storybook/addon-actions": "8.6.14",
"@storybook/addon-essentials": "8.6.14",
"@storybook/addon-interactions": "8.6.14",
"@storybook/addon-links": "8.6.14",
"@storybook/addon-storysource": "8.6.14",
"@storybook/html": "8.6.14",
"@storybook/html-webpack5": "^8.6.14",
Comment on lines +20 to +21
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Framework dependencies don't match the configured framework.

The package.json includes @storybook/html and @storybook/html-webpack5, but storybook.config.js specifies @storybook/react-vite as the framework. If you're building a React project with Vite, these HTML and webpack5 dependencies are unnecessary and may cause conflicts.

Ensure the dependencies align with your actual framework choice. If using React with Vite, consider removing these lines:

-    "@storybook/html": "8.6.14",
-    "@storybook/html-webpack5": "^8.6.14",

Alternatively, if you need HTML or webpack5, update the framework configuration in storybook.config.js accordingly.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"@storybook/html": "8.6.14",
"@storybook/html-webpack5": "^8.6.14",
🤖 Prompt for AI Agents 
In storybook/package.json around lines 20-21, the dependencies list includes
@storybook/html and @storybook/html-webpack5 which conflict with the configured
framework @storybook/react-vite in storybook.config.js; remove those two
HTML/webpack5 packages from package.json if the project uses React with Vite,
then run a clean install (or update lockfile) so only the React/Vite Storybook
packages remain, or alternatively change the framework in storybook.config.js to
an HTML/webpack5-based framework if you actually need those packages.

"@storybook/test": "^8.6.14",
"@storybook/theming": "8.6.14",
"@types/dedent": "0.7.0",
"@types/flat": "5.0.2",
"@types/react": "18.3.18",
"babel-loader": "8.3.0",
"cross-env": "7.0.3",
"storybook": "^8.6.14",
"typescript": "5.4.5"
},
"dependencies": {
"dedent": "0.7.0",
"flat": "5.0.2"
"flat": "5.0.2",
"js-base64": "^3.7.8",
"lz-string": "^1.5.0"
Comment on lines +35 to +36
Copy link

@coderabbitai coderabbitai bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify that the new runtime dependencies are required.

js-base64 and lz-string were added as runtime dependencies, but the PR description doesn't explain their purpose. Ensure these packages are actually used in the codebase to avoid unnecessary dependencies.

Run the following script to check usage:

🏁 Script executed:

#!/bin/bash
# Check if the new dependencies are imported/used in the codebase

echo "=== Checking usage of js-base64 ==="
rg -t js -t ts "from ['\"]js-base64['\"]|require\(['\"]js-base64['\"]" storybook/

echo ""
echo "=== Checking usage of lz-string ==="
rg -t js -t ts "from ['\"]lz-string['\"]|require\(['\"]lz-string['\"]" storybook/

Length of output: 72

🏁 Script executed:

#!/bin/bash
# Broader verification for js-base64 and lz-string usage

echo "=== Checking for any mention of js-base64 in files ==="
rg "js-base64" storybook/ --type-list

echo ""
echo "=== Checking for any mention of lz-string in files ==="
rg "lz-string" storybook/ --type-list

echo ""
echo "=== Listing storybook package.json to understand context ==="
cat storybook/package.json | grep -A 50 "dependencies"

echo ""
echo "=== Checking if there are any story files that might use encoding ==="
find storybook -name "*.stories.*" -o -name "*.story.*" | head -20

echo ""
echo "=== Checking for base64 or compression patterns in JS/TS files ==="
rg -t js -t ts "(base64|btoa|atob|LZString|compress|decompress)" storybook/ --max-count=5

Length of output: 1640

🏁 Script executed:

#!/bin/bash
# Corrected search for js-base64 and lz-string usage

echo "=== Direct string search for js-base64 in all files ==="
rg "js-base64" storybook/

echo ""
echo "=== Direct string search for lz-string in all files ==="
rg "lz-string" storybook/

echo ""
echo "=== Check if they're mentioned in any documentation or comments ==="
rg "(Base64|LZString)" storybook/ 

echo ""
echo "=== Check storybook configuration files ==="
find storybook -name ".storybook" -type d -exec find {} -type f \; | head -20

echo ""
echo "=== List all files in storybook .storybook directory if it exists ==="
ls -la storybook/.storybook/ 2>/dev/null || echo "No .storybook directory found"

echo ""
echo "=== Check if dependencies appear in main/preview config ==="
cat storybook/.storybook/main.ts 2>/dev/null || cat storybook/.storybook/main.js 2>/dev/null || echo "main config not found"

Length of output: 1383

🏁 Script executed:

#!/bin/bash
# Final comprehensive check

echo "=== Content of storybook config files ==="
echo "--- manager.js ---"
cat storybook/.storybook/manager.js

echo ""
echo "--- preview.js ---"
cat storybook/.storybook/preview.js

echo ""
echo "--- storybook.config.js ---"
cat storybook/.storybook/storybook.config.js

echo ""
echo "=== Search ALL TypeScript and JavaScript files for imports of these packages ==="
echo "Looking for imports of js-base64 or lz-string..."
find storybook -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" \) ! -path "*/node_modules/*" -exec grep -l "js-base64\|lz-string" {} \;

echo ""
echo "=== Verify: check package.json to see if these are intended as peerDependencies or for external use ==="
cat storybook/package.json

echo ""
echo "=== Check if js-base64 appears in lock file as well (to see if it's a transitive dep or direct) ==="
grep -c "js-base64" storybook/package-lock.json || echo "Not found in lock file"

Length of output: 2259

Remove unused runtime dependencies from storybook/package.json.

Verification confirms that js-base64 and lz-string are not imported or used anywhere in the storybook codebase—not in configuration files (manager.js, preview.js, storybook.config.js) or any source files. These dependencies should be removed from lines 35-36 unless they serve a documented purpose.

🤖 Prompt for AI Agents 
In storybook/package.json around lines 35-36, the deps "js-base64" and
"lz-string" are unused and should be removed; edit package.json to delete those
two entries, run your package manager (npm install or yarn install) to update
the lockfile, rebuild/test Storybook (npm run build or yarn build) to ensure
nothing breaks, and commit the updated package.json and lockfile changes with a
short message like "chore(storybook): remove unused deps js-base64 and
lz-string".

}
}
Loading