-
Notifications
You must be signed in to change notification settings - Fork 14
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.
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
Fixed Theme UI usage in Storybook #19
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,57 @@ | ||
const path = require('path'); | ||
const modulesDir = path.join(__dirname, '../node_modules'); | ||
|
||
const updateEmotionAliases = (config) => ({ | ||
...config, | ||
resolve: { | ||
...config.resolve, | ||
alias: { | ||
...config.resolve.alias, | ||
'@components': path.resolve(__dirname, '../components'), | ||
'@emotion/core': path.join(modulesDir, '@emotion/react'), | ||
'@emotion/styled': path.join(modulesDir, '@emotion/styled'), | ||
'@emotion/styled-base': path.join(modulesDir, '@emotion/styled'), | ||
'emotion-theming': path.join(modulesDir, '@emotion/react'), | ||
}, | ||
}, | ||
}); | ||
|
||
module.exports = { | ||
core: { | ||
builder: 'webpack5', | ||
}, | ||
stories: [ | ||
'../stories/**/*.stories.mdx', | ||
'../stories/**/*.stories.@(js|jsx|ts|tsx)', | ||
], | ||
stories: ['../**/__stories__/*.stories.@(mdx|tsx)'], | ||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'], | ||
webpackFinal: async (config, { configType }) => { | ||
config.resolve = { | ||
...config.resolve, | ||
alias: { | ||
...config.resolve.alias, | ||
'@components': path.resolve(__dirname, '../components'), | ||
}, | ||
// To get Theme UI working in Storybook. See https://github.com/system-ui/theme-ui/issues/1530#issuecomment-788945510 | ||
managerWebpack: updateEmotionAliases, | ||
webpackFinal: updateEmotionAliases, | ||
babel: (config) => { | ||
const getEntryIndexByName = (type, name) => { | ||
return config[type].findIndex((entry) => { | ||
const entryName = Array.isArray(entry) ? entry[0] : entry; | ||
return entryName.includes(name); | ||
}); | ||
}; | ||
|
||
// Replace reference to v10 of the Babel plugin to v11. | ||
const emotionPluginIndex = getEntryIndexByName( | ||
'plugins', | ||
'babel-plugin-emotion', | ||
); | ||
config.plugins[emotionPluginIndex] = require.resolve( | ||
'@emotion/babel-plugin', | ||
); | ||
|
||
// Storybook's Babel config is already configured to use the new JSX runtime. | ||
// We just need to point it to Emotion's version. | ||
// https://emotion.sh/docs/css-prop#babel-preset | ||
const presetReactIndex = getEntryIndexByName( | ||
'presets', | ||
'@babel/preset-react', | ||
); | ||
// Pulling this from the @emotion/babel-preset package in project's .babelrc | ||
config.presets[presetReactIndex][1].importSource = 'theme-ui'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is fixing the babel configuration so it behaves like the babel configuration in the project. https://github.com/nickytonline/web3-starter/blob/fix-theme-ui-usage-in-storybook/.babelrc {
"presets": [
[
"next/babel",
{
"preset-react": {
"importSource": "theme-ui",
"runtime": "automatic",
"throwIfNamespace": false
}
}
]
]
} |
||
|
||
return config; | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { Meta } from '@storybook/react'; | ||
import { ExampleHeader } from '@components/Header'; | ||
|
||
const meta: Meta = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adds a sample Storybook story for a component in the project. |
||
title: 'Components/Example Header', | ||
component: ExampleHeader, | ||
argTypes: {}, | ||
}; | ||
export default meta; | ||
|
||
export const Default: React.VFC = () => { | ||
return <ExampleHeader />; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is pretty much the fix. Aliasing to the correct dependencies as per the solution mentioned in #10.