Skip to content

Commit

Permalink
Enable React Fast Refresh and Strict Mode for Storybook
Browse files Browse the repository at this point in the history
Enable React Fast Refresh for more efficient hot reloading of changes
to React components while doing a better job of maintaining state.

Enable Strict Mode to catch potential issues earlier. This is enabled
by explicity adding a `React.StrictMode` wrapper in the root decorator
instead of in the Storybook config due to an incompatibility with our
current combination of addons.
  • Loading branch information
AlanGreene authored and tekton-robot committed Jan 10, 2022
1 parent 05a33e0 commit 000de84
Show file tree
Hide file tree
Showing 4 changed files with 1,638 additions and 1,524 deletions.
15 changes: 12 additions & 3 deletions .storybook/Container.js
@@ -1,5 +1,5 @@
/*
Copyright 2019-2021 The Tekton Authors
Copyright 2019-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Expand All @@ -20,13 +20,22 @@ import messages from '../src/nls/messages_en.json';

import './Container.scss';

export default function Container({ notes, path = '/', route = '/', story }) {
export default function Container({
notes,
path = '/',
route = '/',
story: Story
}) {
return (
<IntlProvider locale="en" defaultLocale="en" messages={messages['en']}>
{notes && <p>{notes}</p>}
<div data-floating-menu-container role="main">
<Router history={createMemoryHistory({ initialEntries: [route] })}>
<Route path={path}>{() => story()}</Route>
<Route path={path}>
<React.StrictMode>
<Story />
</React.StrictMode>
</Route>
</Router>
</div>
</IntlProvider>
Expand Down
6 changes: 5 additions & 1 deletion .storybook/main.js
@@ -1,5 +1,5 @@
/*
Copyright 2020-2021 The Tekton Authors
Copyright 2020-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Expand All @@ -21,6 +21,10 @@ module.exports = {
core: {
builder: 'webpack5'
},
reactOptions: {
fastRefresh: true,
strictMode: false // set in the decorator instead to workaround Storybook issue 12977
},
stories: [
'../src/**/*.stories.js',
'../packages/components/src/**/*.stories.js'
Expand Down

0 comments on commit 000de84

Please sign in to comment.