Add Storybook to the project
nickytonline opened this issue · 3 comments
nickytonline commented
Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]
Add Storybook to the project
Describe the solution you'd like A clear and concise description of what you
want to happen.
Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.
Additional context Add any other context or screenshots about the feature
request here.
Before beginning this issue, #20 needs to be merged
Follow these steps and Storybook should setup properly.
-
Run
npx sb init -
When prompted, press
yfor yes.
🔎 checking possible migrations..
🔎 found a 'eslintPlugin' migration:
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ We've detected you are not using our eslint-plugin. │
│ │
│ In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook. │
│ │
│ More info: https://github.com/storybookjs/eslint-plugin-storybook#readme │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to run the 'eslintPlugin' migration on your project? › (y/N)
- You’ll be prompted to configure npm. Type
yfor yes
✅ Configuring eslint rules in .eslintrc.cjs
✅ Adding Storybook to extends list
✅ ran eslintPlugin migration
🔎 found a 'npm7' migration:
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ We've detected you are running npm 8.15.0 │
│ which has peer dependency semantics which Storybook is incompatible with. │
│ │
│ In order to work with Storybook's package structure, you'll need to run `npm` with the │
│ `--legacy-peer-deps=true` flag. We can generate an `.npmrc` which will do that automatically. │
│ │
│ More info: https://github.com/storybookjs/storybook/issues/18298 │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to run the 'npm7' migration on your project? › (y/N)
- The first time you run storybook via
npm run storybook, you’ll get these errors.
> connect-four@1.0.0 storybook
> start-storybook -p 6006
info @storybook/svelte v6.5.12
info
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
ERR! Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
ERR! at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
ERR! at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR! at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR! at getPreviewBuilder (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR! at buildDevStandalone (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:106:71)
ERR! at async buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
ERR! Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
ERR! at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
ERR! at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR! at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR! at getPreviewBuilder (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR! at buildDevStandalone (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:106:71)
ERR! at async buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {
ERR! code: 'ERR_REQUIRE_ESM'
ERR! }
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16
"preprocess": require("../svelte.config.js").preprocess
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nicktaylor/dev/oss/connect-four/svelte.config.js from /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs not supported.
Instead change the require of svelte.config.js in /Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/Users/nicktaylor/dev/oss/connect-four/.storybook/main.cjs:16:19)
at interopRequireDefault (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
at serverRequire (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
at getFrameworkPackage (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/presets.js:326:50)
at loadAllPresets (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-common/dist/cjs/presets.js:356:26)
at buildDev (/Users/nicktaylor/dev/oss/connect-four/node_modules/@storybook/core-server/dist/cjs/build-dev.js:209:50) {
code: 'ERR_REQUIRE_ESM'
}
- In the storybook main.cjs file make the following changes
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions'
],
framework: '@storybook/svelte',
core: {
builder: '@storybook/builder-vite'
},
svelteOptions: {
- preprocess: require('../svelte.config.js').preprocess
+ preprocess: import('../svelte.config.js').preprocess
},
features: {
storyStoreV7: true
}
};- Save the file and rerun the command to start Storybook,
npm run storybook. - Storybook loads.
YolandaHaynes commented
Hi @nickytonline I would like to give this a go!
nickytonline commented
Sounds good! I've assigned it to you @YolandaHaynes.
nickytonline commented
@YolandaHaynes, #20 has been merged, so you can start working on this. No rush though!