├── README.md ├── babel.config.js ├── .gitignore ├── stories ├── EnvironmentVariables.stories.jsx ├── EnvironmentVariables.jsx ├── Header.stories.jsx ├── Page.stories.jsx ├── header.css ├── Button.stories.jsx ├── button.css ├── assets │ ├── direction.svg │ ├── flow.svg │ ├── code-brackets.svg │ ├── comments.svg │ ├── repo.svg │ ├── plugin.svg │ ├── stackalt.svg │ └── colors.svg ├── page.css ├── Button.jsx ├── Header.jsx ├── Page.jsx └── Introduction.stories.mdx ├── .storybook └── main.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # example-storybook-vite-babel-error 2 | Example of storybook with vite and babel error 3 | 4 | ## Reproduction 5 | 6 | ``` 7 | yarn 8 | yarn build-storybook 9 | ``` 10 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ["@babel/preset-env", { targets: { node: "current" } }], 4 | "@babel/preset-typescript", 5 | "@babel/preset-react", 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | storybook-static 3 | .idea 4 | 5 | 6 | # Yarn stuff 7 | /**/.yarn/* 8 | !/**/.yarn/releases 9 | !/**/.yarn/plugins 10 | !/**/.yarn/sdks 11 | !/**/.yarn/versions 12 | /**/.pnp.* 13 | .DS_STORE 14 | -------------------------------------------------------------------------------- /stories/EnvironmentVariables.stories.jsx: -------------------------------------------------------------------------------- 1 | import {EnvironmentVariables} from './EnvironmentVariables'; 2 | 3 | export default { 4 | title: 'Environment Variables', 5 | component: EnvironmentVariables 6 | }; 7 | 8 | export const Info = () => ; 9 | -------------------------------------------------------------------------------- /stories/EnvironmentVariables.jsx: -------------------------------------------------------------------------------- 1 | 2 | export function EnvironmentVariables() { 3 | return ( 4 |
5 |

import . meta . env:

6 |
{JSON.stringify(import.meta.env, null, 2)}
7 |

import . meta . env . STORYBOOK:

8 |
{import.meta.env.STORYBOOK}
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /stories/Header.stories.jsx: -------------------------------------------------------------------------------- 1 | import { Header } from './Header'; 2 | 3 | export default { 4 | title: 'Example/Header', 5 | component: Header, 6 | }; 7 | 8 | const Template = (args) =>
; 9 | 10 | export const LoggedIn = Template.bind({}); 11 | LoggedIn.args = { 12 | user: {}, 13 | }; 14 | 15 | export const LoggedOut = Template.bind({}); 16 | LoggedOut.args = {}; 17 | -------------------------------------------------------------------------------- /stories/Page.stories.jsx: -------------------------------------------------------------------------------- 1 | import { Page } from './Page'; 2 | import * as HeaderStories from './Header.stories'; 3 | 4 | export default { 5 | title: 'Example/Page', 6 | component: Page, 7 | }; 8 | 9 | const Template = (args) => ; 10 | 11 | export const LoggedIn = Template.bind({}); 12 | LoggedIn.args = { 13 | ...HeaderStories.LoggedIn.args, 14 | }; 15 | 16 | export const LoggedOut = Template.bind({}); 17 | LoggedOut.args = { 18 | ...HeaderStories.LoggedOut.args, 19 | }; 20 | -------------------------------------------------------------------------------- /stories/header.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } 27 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const macrosPlugin = require("vite-plugin-babel-macros"); 2 | 3 | module.exports = { 4 | stories: [ 5 | "../stories/**/*.stories.mdx", 6 | "../stories/**/*.stories.@(js|jsx|ts|tsx)", 7 | ], 8 | addons: [ 9 | "@storybook/addon-a11y", 10 | "@storybook/addon-links", 11 | "@storybook/addon-essentials", 12 | ], 13 | core: { 14 | builder: "storybook-builder-vite", 15 | }, 16 | async viteFinal(config, { configType }) { 17 | // customize the Vite config here 18 | config.plugins = [...(config.plugins ?? []), macrosPlugin.default()]; 19 | 20 | return config; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /stories/Button.stories.jsx: -------------------------------------------------------------------------------- 1 | import { Button } from './Button'; 2 | 3 | export default { 4 | title: 'Example/Button', 5 | component: Button, 6 | argTypes: { 7 | backgroundColor: { control: 'color' }, 8 | }, 9 | }; 10 | 11 | const Template = (args) => 24 | ); 25 | }; 26 | 27 | Button.propTypes = { 28 | /** 29 | * Is this the principal call to action on the page? 30 | */ 31 | primary: PropTypes.bool, 32 | /** 33 | * What background color to use 34 | */ 35 | backgroundColor: PropTypes.string, 36 | /** 37 | * How large should the button be? 38 | */ 39 | size: PropTypes.oneOf(['small', 'medium', 'large']), 40 | /** 41 | * Button contents 42 | */ 43 | label: PropTypes.string.isRequired, 44 | /** 45 | * Optional click handler 46 | */ 47 | onClick: PropTypes.func, 48 | }; 49 | 50 | Button.defaultProps = { 51 | backgroundColor: null, 52 | primary: false, 53 | size: 'medium', 54 | onClick: undefined, 55 | }; 56 | -------------------------------------------------------------------------------- /stories/assets/comments.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /stories/assets/repo.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /stories/assets/plugin.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /stories/Header.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | 3 | import { Button } from './Button'; 4 | import './header.css'; 5 | 6 | export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( 7 |
8 |
9 |
10 | 16 | 17 | 21 | 25 | 29 | 30 | 31 |

Acme

32 |
33 |
34 | {user ? ( 35 |
48 |
49 |
50 | ); 51 | 52 | Header.propTypes = { 53 | user: PropTypes.shape({}), 54 | onLogin: PropTypes.func.isRequired, 55 | onLogout: PropTypes.func.isRequired, 56 | onCreateAccount: PropTypes.func.isRequired, 57 | }; 58 | 59 | Header.defaultProps = { 60 | user: null, 61 | }; 62 | -------------------------------------------------------------------------------- /stories/assets/stackalt.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /stories/Page.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | 3 | import { Header } from './Header'; 4 | import './page.css'; 5 | 6 | export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( 7 |
8 |
14 | 15 |
16 |

Pages in Storybook

17 |

18 | We recommend building UIs with a{' '} 19 | 24 | component-driven 25 | {' '} 26 | process starting with atomic components and ending with pages. 27 |

28 |

29 | Render pages with mock data. This makes it easy to build and 30 | review page states without needing to navigate to them in your 31 | app. Here are some handy patterns for managing page data in 32 | Storybook: 33 |

34 |
    35 |
  • 36 | Use a higher-level connected component. Storybook helps you 37 | compose such data from the "args" of child component stories 38 |
    • 39 |
  • 40 | Assemble data in the page component from your services. You 41 | can mock these services out using Storybook. 42 |
    • 43 |
44 |

45 | Get a guided tutorial on component-driven development at{' '} 46 | 51 | Storybook tutorials 52 | 53 | . Read more in the{' '} 54 | 59 | docs 60 | 61 | . 62 |

63 |
64 | Tip Adjust the width of the canvas 65 | with the{' '} 66 | 72 | 73 | 78 | 79 | 80 | Viewports addon in the toolbar 81 |
82 |
83 |
84 | ); 85 | Page.propTypes = { 86 | user: PropTypes.shape({}), 87 | onLogin: PropTypes.func.isRequired, 88 | onLogout: PropTypes.func.isRequired, 89 | onCreateAccount: PropTypes.func.isRequired, 90 | }; 91 | 92 | Page.defaultProps = { 93 | user: null, 94 | }; 95 | -------------------------------------------------------------------------------- /stories/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | import Code from './assets/code-brackets.svg'; 3 | import Colors from './assets/colors.svg'; 4 | import Comments from './assets/comments.svg'; 5 | import Direction from './assets/direction.svg'; 6 | import Flow from './assets/flow.svg'; 7 | import Plugin from './assets/plugin.svg'; 8 | import Repo from './assets/repo.svg'; 9 | import StackAlt from './assets/stackalt.svg'; 10 | 11 | 12 | 13 | 116 | 117 | # Welcome to Storybook 118 | 119 | Storybook helps you build UI components in isolation from your app's business logic, data, and context. 120 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. 121 | 122 | Browse example stories now by navigating to them in the sidebar. 123 | View their code in the `src/stories` directory to learn how they work. 124 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. 125 | 126 |
Configure
127 | 128 |
129 | 134 | plugin 135 | 136 | Presets for popular tools 137 | Easy setup for TypeScript, SCSS and more. 138 | 139 | 140 | 145 | Build 146 | 147 | Build configuration 148 | How to customize webpack and Babel 149 | 150 | 151 | 156 | colors 157 | 158 | Styling 159 | How to load and configure CSS libraries 160 | 161 | 162 | 167 | flow 168 | 169 | Data 170 | Providers and mocking for data libraries 171 | 172 | 173 |
174 | 175 |
Learn
176 | 177 |
178 | 183 | repo 184 | 185 | Storybook documentation 186 | Configure, customize, and extend 187 | 188 | 189 | 194 | direction 195 | 196 | In-depth guides 197 | Best practices from leading teams 198 | 199 | 200 | 205 | code 206 | 207 | GitHub project 208 | View the source and add issues 209 | 210 | 211 | 216 | comments 217 | 218 | Discord chat 219 | Chat with maintainers and the community 220 | 221 | 222 |
223 | 224 |
225 | TipEdit the Markdown in{' '} 226 | src/stories/Introduction.stories.mdx 227 |
228 | -------------------------------------------------------------------------------- /stories/assets/colors.svg: -------------------------------------------------------------------------------- 1 | illustration/colors --------------------------------------------------------------------------------