Skip to content

feat: add Storybook starter #2381

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

Closed
wants to merge 11 commits into from
Closed

feat: add Storybook starter #2381

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fec8004
Add Storybook starter
DustinJSilk Dec 6, 2022
e53e6e0
Update Storybook docs with preview command
DustinJSilk Dec 6, 2022
edf8ec6
Copy the project vite plugins
DustinJSilk Dec 6, 2022
7e3ba9f
Use storybook v7 and html-vite
DustinJSilk Dec 15, 2022
4a204ba
Fix tsconfig options
DustinJSilk Dec 15, 2022
db79b81
Fix storybook.build
DustinJSilk Dec 15, 2022
7aab865
Add required react dependency
DustinJSilk Dec 15, 2022
2b8caf6
fix to working storybook version and remove QWIK_LOADER eval
DustinJSilk Dec 16, 2022
feba151
Update integration to include 3rd party library
DustinJSilk Jan 16, 2023
75a130c
Include tips on using storybook with tailwind
DustinJSilk Jan 16, 2023
433ab1f
Add documentation for running with i18n
DustinJSilk Jan 23, 2023
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
Prev Previous commit
Next Next commit
fix to working storybook version and remove QWIK_LOADER eval
  • Loading branch information
@DustinJSilk
DustinJSilk committed Jan 16, 2023
commit 2b8caf64d0db10324bff02477216bc36c60855f4
20 changes: 5 additions & 15 deletions starters/features/storybook/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,19 @@
import type { StorybookConfig } from '@storybook/builder-vite';
import { mergeConfig, UserConfig } from 'vite';
import baseConfig from '../vite.config';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
addons: ['@storybook/addon-essentials'],
addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
Copy link
Contributor

@literalpie literalpie Jan 18, 2023

Choose a reason for hiding this comment

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

The storybook cli scaffolds *.mdx for all frameworks (not *.stories.mdx). I'm guessing this is because stories.mdx is a special pattern that will make the file declare stories rather than just be documentation.
Picking up all mdx files can cause conflicts with Qwik-city mdx though, so having some explicit indicator that mdx is for storybook, not qwik city is important (because Qwik-city mdx will only work with Qwik component, and SB mdx will only work with react components).
I think a "storybook" prefix gets the explicit marking, without triggering the special behavior of stories.mdx.

Suggested change
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
stories: ['../src/**/*.storybook.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

But, because of some limitations, I'm planning on just doing *.mdx in the storybook CLI qwik integration like other frameworks. I'll need to add documentation to warn about the Qwik-city conflict potential. You could do that if you want to match how the sb cli will eventually work (based on my current guess).

Copy link
Contributor Author

@DustinJSilk DustinJSilk Jan 18, 2023

Choose a reason for hiding this comment

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

Using stories.mdx is the recommended approach to defining stories in mdx files. So this should keep it consistent with what storybook users expect and avoids adding Qwik mdx files as stories. There is of course still the issue of any mdx files in the routes folder being turned into a page but I think thats fine for now as most stories will be on a component level.

What is the special behaviour from a .stories.mdx file that we're trying to avoid by using .storybook.mdx?

Copy link
Contributor

@literalpie literalpie Jan 18, 2023

Choose a reason for hiding this comment

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

in a stories.mdx file, any story you reference will get added to the navigation. If you already declared the story in a stories.tsx file, this will cause duplicates.
with any other pattern, you can reference the stories in the mdx without adding them to the side bar.
I suppose it could go either way, but I defer to the default in storybook CLI

framework: '@storybook/html-vite',
features: {
storyStoreV7: true,
},
viteFinal: async (defaultConfig) => {
const config = mergeConfig(defaultConfig, {
viteFinal: (config) => {
return mergeConfig(config, {
build: {
target: 'es2020',
rollupOptions: {
external: ['@qwik-city-sw-register', '@qwik-city-plan'],
external: ['@qwik-city-plan'],
},
},
});

const projectConfig = (baseConfig as () => UserConfig)();

config.plugins = [...(projectConfig.plugins ?? []), ...(defaultConfig.plugins ?? [])];

return config;
},
};

Expand Down
4 changes: 1 addition & 3 deletions starters/features/storybook/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { JSXNode, render } from '@builder.io/qwik';
import { QwikCityMockProvider } from '@builder.io/qwik-city';
import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
import { QWIK_LOADER } from '@builder.io/qwik/loader/index';
import '../src/global.css';

eval(QWIK_LOADER);
import '../src/global.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
Expand Down
14 changes: 8 additions & 6 deletions starters/features/storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
{
"description": "Use Storybook with your Qwik app",
"devDependencies": {
"@storybook/addon-actions": "^7.0.0-beta.8",
"@storybook/addon-essentials": "^7.0.0-beta.8",
"@storybook/addon-interactions": "^7.0.0-beta.8",
"@storybook/addon-links": "^7.0.0-beta.8",
"@storybook/addon-a11y": "7.0.0-beta.8",
"@storybook/addon-actions": "7.0.0-beta.8",
"@storybook/addon-essentials": "7.0.0-beta.8",
"@storybook/addon-interactions": "7.0.0-beta.8",
"@storybook/addon-links": "7.0.0-beta.8",
"@storybook/builder-vite": "7.0.0-beta.8",
"@storybook/cli": "7.0.0-beta.8",
"@storybook/html": "7.0.0-beta.8",
"@storybook/html-vite": "7.0.0-beta.8",
"@storybook/node-logger": "^7.0.0-beta.8",
"@storybook/node-logger": "7.0.0-beta.8",
"@storybook/testing-library": "^0.0.14-next.1",
"@storybook/theming": "7.0.0-beta.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.0.0-beta.8"
"storybook": "7.0.0-beta.8"
},
"scripts": {
"storybook": "storybook dev -p 6006 -s public",
Expand Down