feat: storybook update

.eslintrc.json

@@ -1,5 +1,8 @@
 {
-    "extends": "eslint:recommended",
+    "extends": [
+      "eslint:recommended",
+      "plugin:storybook/recommended"
+    ],
     "parser": "babel-eslint",
     "env": {
         "node": true,

.storybook/custom/components/DocsPage.js

@@ -60,14 +60,14 @@ const DocsPage = () => {
             });
             previousDirectionality.current = directionalityState;
         }
-        
+
         if (!previousTheme.current || previousTheme.current !== themeState) {
             changeDocumentTheme(themeState, context?.parameters?.components || [])
         }
     }, [themeState, directionalityState]);
 
     // do not display disabled stories (dev only)
-    const stories = context.storyStore?.getStoriesForKind(context.kind)?.filter((s) => !s.parameters?.docs?.disable);
+    const stories = context.componentStories().filter(story => story.kind === context.kind && !story.parameters?.docs?.disable);
 
     const renderInfoLabels = (tags) => {
         let infoLabels = []
@@ -87,6 +87,7 @@ const DocsPage = () => {
     return (
         <>
             <Header onThemeChange={(e) => setThemeState(e.target.value)} onDirectionalityChange={(e) => setDirectionalityState(e.target.value)} />
+
             {/* wrapping intro content in the sb-docs-intro class for appropriate text color in all themes */}
             <div className="sb-docs-intro">
                 <Title />
@@ -95,12 +96,15 @@ const DocsPage = () => {
                 {renderInfoLabels(context?.parameters?.tags)}
                 {context?.parameters?.description && <Description desc={context?.parameters?.description} />}
             </div>
+
             <Heading>Examples</Heading>
+
             {stories.map((story) => story && <DocsStory
                 key={story.id}
                 {...story}
                 expanded
                 withToolbar />)}
+
             <Community />
             <Footer />
         </>

.storybook/main.js

@@ -37,6 +37,7 @@ module.exports = {
       test: /\.stories\.js?$/,
       use: [{ loader: 'story-description-loader' }],
     });
+
     config.module.rules.push({
       test: /\.css?$/,
       use: [
@@ -46,8 +47,9 @@ module.exports = {
                 injectType: 'lazyStyleTag'
             }
         }
-    ]
+      ]
     });
+
     config.plugins.push({
       // Custom plugin to add scss files to webpack watcher
       apply: (compiler) => {
@@ -57,12 +59,14 @@ module.exports = {
             dot: true,
             absolute: true,
           });
+
           files.forEach((file) => {
             comp.fileDependencies.add(path.resolve(file));
           });
         });
       },
     });
+
     config.plugins.push({
       // Custom plugin to rebuild css styles for each scss change
       apply: (compiler) => {

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/addons';
+
+import fundamentals from './custom/fundamentals';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: false
+  },
+  theme: fundamentals
+});

.storybook/preview.js

@@ -1,16 +1,12 @@
-import fundamentals from './custom/fundamentals';
 import { withCssResources } from "@storybook/addon-cssresources";
-import { withThemeProvider } from './custom/themeProvider';
 import { DocsContainer } from '@storybook/addon-docs';
-import DocsPage from './custom/components/DocsPage';
-import { makeDecorator } from '@storybook/addons';
 import prettify from 'pretty';
 
+import { withThemeProvider } from './custom/themeProvider';
+import DocsPage from './custom/components/DocsPage';
+import fundamentals from './custom/fundamentals';
+
 export const parameters = {
-  options: {
-    showRoots: true,
-    theme: fundamentals
-  },
   cssresources: [
     {
       id: "normalize",