chore(Storybook): make Storybook work in this repo

* Ensures Babel7 is used for Storybook * Ensures Gatsby code included in story code is transpiled * Ensure markup/markdown as well as raw CSS files go through appropriate WebPack loaders * Workaround for Storybook build failure with loading images on GH * Other misc fixes Refs carbon-design-system#313.
asudoh · Oct 24, 2018 · f7c1267 · f7c1267
1 parent 5d44cce
commit f7c1267
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 39 deletions.
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["last 1 versions", "Firefox ESR"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/.storybook/_container.scss b/.storybook/_container.scss
@@ -2,4 +2,4 @@ $bright-blue: #3c6df0;
 $dark-blue: #3057d5;
 $brand-01: $dark-blue;
 
-@import '../src/layouts/index.scss';
+@import '../src/styles/index.scss';
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,34 +1,65 @@
 const path = require('path');
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: [
-          { loader: 'style-loader' },
-          {
-            loader: 'css-loader',
-            options: { importLoaders: 2 },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                require('autoprefixer')({
-                  browsers: ['last 1 version', 'ie >= 11'],
-                }),
-              ],
+module.exports = storybookBaseConfig => {
+  const babelLoaderRule = storybookBaseConfig.module.rules.find(rule => /\/babel-loader\//i.test(rule.loader));
+  return ({
+    ...storybookBaseConfig,
+    module: {
+      ...storybookBaseConfig.module,
+      rules: [
+        ...storybookBaseConfig.module.rules.filter(rule => rule !== babelLoaderRule),
+        {
+          ...babelLoaderRule,
+            exclude: /(node_modules)[\/\\](?!(gatsby)[\/\\]).*/,
+        },
+        {
+          test: /\.css$/,
+          use: [
+            { loader: 'style-loader' },
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 2 },
             },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+          ],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            { loader: 'style-loader' },
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 2 },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: () => [
+                  require('autoprefixer')({
+                    browsers: ['last 1 version', 'ie >= 11'],
+                  }),
+                ],
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+              },
             },
+          ],
+        },
+        {
+          test: /\.md$/,
+          loaders: ['html-loader', 'markdown-loader'],
+        },
+        {
+          test: /\.(html|svg)$/,
+          loader: 'html-loader',
+          options: {
+            minimize: false,
           },
-        ],
-      },
-    ],
-  },
+        },
+      ],
+    }
+  });
 };
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "@storybook/addon-knobs": "^3.4.7",
     "@storybook/addon-options": "^3.4.7",
     "@storybook/react": "^3.4.7",
-    "babel-core": "^6.26.3",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "7.1.1",
     "cross-env": "^5.2.0",
     "fs-extra": "^7.0.0",

diff --git a/src/components/ClickableTile/ClickableTile.stories.jsx b/src/components/ClickableTile/ClickableTile.stories.jsx
@@ -5,7 +5,7 @@ import { withKnobs, text, boolean, number, color, select } from '@storybook/addo
 
 import ClickTile from './ClickableTile';
 
-const stories = storiesOf('CodeSnippet', module);
+const stories = storiesOf('ClickableTile', module);
 
 stories.addDecorator(withKnobs);
 

diff --git a/src/components/ComponentDocs/ComponentDocs.js b/src/components/ComponentDocs/ComponentDocs.js
@@ -9,8 +9,9 @@ export default class ComponentDocs extends React.Component {
   render() {
     const { component } = this.props;
 
-    let componentDocUrl;
-    componentDocUrl = require(`carbon-components/src/components/${component}/README.md`);
+    let componentDocUrl = '';
+    // Loading README.md causes Storybook build failure as of now
+    // componentDocUrl = require(`carbon-components/src/components/${component}/README.md`);
 
     return (
       <div className="page_md component-docs">

diff --git a/src/components/PageTabs/PageTabs.stories.jsx b/src/components/PageTabs/PageTabs.stories.jsx
@@ -5,7 +5,7 @@ import { withKnobs, text, boolean, number, color, select } from '@storybook/addo
 
 import PageTabs from './PageTabs';
 
-const stories = storiesOf('PageTAbs', module);
+const stories = storiesOf('PageTabs', module);
 
 stories.addDecorator(withKnobs);
 

diff --git a/src/components/SideNavToggleBtn/SideNavToggleBtn.stories.jsx b/src/components/SideNavToggleBtn/SideNavToggleBtn.stories.jsx
@@ -5,7 +5,7 @@ import { withKnobs, text, boolean, number, color, select } from '@storybook/addo
 
 import SideNavToggleBtn from './SideNavToggleBtn';
 
-const stories = storiesOf('SideNav', module);
+const stories = storiesOf('SideNavToggleBtn', module);
 
 stories.addDecorator(withKnobs);
 

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -57,8 +57,8 @@ $font-family: 'IBM Plex Sans', 'ibm-plex-sans', 'Helvetica Neue', Arial,
 //---------------------------------------
 // Syntax
 //---------------------------------------
-@import 'prism.css';
-@import 'syntax.css';
+@import 'prism';
+@import 'syntax';
 
 //---------------------------------------
 // Halloween 🎃

diff --git a/yarn.lock b/yarn.lock
@@ -1937,12 +1937,12 @@ [email protected], babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-[email protected]:
+[email protected], babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-core@^6.0.0, babel-core@^6.26.0, babel-core@^6.26.3:
+babel-core@^6.0.0, babel-core@^6.26.0:
   version "6.26.3"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
   integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==