Fixed Theme UI usage in Storybook #19
Conversation
nickytonline
added
merge by any core
| ...config.resolve, | ||
| alias: { | ||
| ...config.resolve.alias, | ||
| '@components': path.resolve(__dirname, '../components'), |
There was a problem hiding this comment.
This is pretty much the fix. Aliasing to the correct dependencies as per the solution mentioned in #10.
nickytonline
force-pushed
the
fix-theme-ui-usage-in-storybook
branch
2 times, most recently
from
fdba76c
to
dd50226
Compare
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nickytonline/web3-starter/6zuXE73kEMxMmQ6HWZbj3kPcNbFW |
| import { Meta } from '@storybook/react'; | ||
| import { ExampleHeader } from '@components/Header'; | ||
|
|
||
| const meta: Meta = { |
There was a problem hiding this comment.
Adds a sample Storybook story for a component in the project.
| '@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.
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
}
}
]
]
}
nickytonline
force-pushed
the
fix-theme-ui-usage-in-storybook
branch
from
dd50226
to
6bc3f30
Compare
What type of PR is this? (check all applicable)
Description
Theme UI wasn't working in Storybook because it was conflicting with Theme UI dependencies that Storybook itself uses.
Related Tickets & Documents
Closes #10
QA Instructions, Screenshots, Recordings
yarnto install new dependenciesyarn storybook<ExampleHeader />component. It should have the styling and animation in the animated GIF below.UI accessibility concerns?
N/A
Added/updated tests?
<ExampleHeader />component that ships with the project to demonstrate that Theme UI is working properly in the context of Storybook.[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?