Upgrade storybook to version 5

theforeman · Mar 18, 2019 · 43ea2da · 43ea2da
1 parent 30cb538
commit 43ea2da
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 60 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,66 +1,63 @@
 let path = require('path');
 
-// Use storybook's default configuration with our customizations
-module.exports = (baseConfig, env, defaultConfig) => {
-
-  // overwrite storybook's default import rules
-  defaultConfig.module.rules = [
-    {
-      test: /\.js$/,
-      exclude: /node_modules/,
-      loader: 'babel-loader',
-      options: {
-        presets: [
-          path.join(__dirname, '..', 'node_modules/babel-preset-react'),
-          path.join(__dirname, '..', 'node_modules/babel-preset-env')
-        ],
-        plugins: [
-          path.join(__dirname, '..', 'node_modules/babel-plugin-transform-class-properties'),
-          path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-rest-spread'),
-          path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-assign'),
-          path.join(__dirname, '..', 'node_modules/babel-plugin-syntax-dynamic-import')
-        ]
-      }
-    },
-    {
-      test: /(\.png|\.gif)$/,
-      loader: 'url-loader?limit=32767'
-    },
-    {
-      test: /\.css$/,
-      loaders: ['style-loader', 'css-loader']
-    },
-    {
-      test: /\.scss$/,
-      loaders: ['style-loader', 'css-loader', {
-        loader: 'sass-loader',
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
         options: {
-          includePaths: [
-            // teach webpack to resolve patternfly dependencies
-            path.resolve(__dirname, '..', 'node_modules', 'patternfly', 'dist', 'sass'),
-            path.resolve(__dirname, '..', 'node_modules', 'bootstrap-sass', 'assets', 'stylesheets'),
-            path.resolve(__dirname, '..', 'node_modules', 'font-awesome-sass', 'assets', 'stylesheets')
+          presets: [
+            path.join(__dirname, '..', 'node_modules/babel-preset-react'),
+            path.join(__dirname, '..', 'node_modules/babel-preset-env')
+          ],
+          plugins: [
+            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-class-properties'),
+            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-rest-spread'),
+            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-assign'),
+            path.join(__dirname, '..', 'node_modules/babel-plugin-syntax-dynamic-import')
           ]
         }
-      }]
-    },
-    {
-      test: /\.md$/,
-      loaders: ['raw-loader']
-    },
-    {
-      test: /(\.ttf|\.woff|\.woff2|\.eot|\.svg|\.jpg)$/,
-      loaders: ['url-loader']
-    },
-  ]
+      },
+      {
+        test: /(\.png|\.gif)$/,
+        loader: 'url-loader?limit=32767'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', {
+          loader: 'sass-loader',
+          options: {
+            includePaths: [
+              // teach webpack to resolve patternfly dependencies
+              path.resolve(__dirname, '..', 'node_modules', 'patternfly', 'dist', 'sass'),
+              path.resolve(__dirname, '..', 'node_modules', 'bootstrap-sass', 'assets', 'stylesheets'),
+              path.resolve(__dirname, '..', 'node_modules', 'font-awesome-sass', 'assets', 'stylesheets')
+            ]
+          }
+        }]
+      },
+      {
+        test: /\.md$/,
+        loaders: ['raw-loader']
+      },
+      {
+        test: /(\.ttf|\.woff|\.woff2|\.eot|\.svg|\.jpg)$/,
+        loaders: ['url-loader']
+      },
+    ],
+  },
 
-  defaultConfig.resolve = {
+  resolve: {
     modules: [
       path.join(__dirname, '..', 'webpack'),
       path.join(__dirname, '..', 'node_modules'),
       'node_modules/',
     ],
-  };
-
-  return defaultConfig;
+  },
 };
diff --git a/package.json b/package.json
@@ -20,9 +20,9 @@
     "url": "http://projects.theforeman.org/projects/foreman-tasks/issues"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "~3.4.11",
-    "@storybook/addon-knobs": "~3.4.11",
-    "@storybook/react": "~3.4.11",
+    "@storybook/addon-actions": "^5.0.1",
+    "@storybook/addon-knobs": "^5.0.1",
+    "@storybook/react": "^5.0.1",
     "babel-cli": "^6.10.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
@@ -44,13 +44,16 @@
     "eslint": "^4.10.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-plugin-patternfly-react": "0.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest-cli": "^23.6.0",
     "jest-prop-type-error": "^1.1.0",
+    "node-sass": "^4.11.0",
     "patternfly": "^3.59.1",
     "prettier": "^1.13.5",
     "raf": "^3.4.0",
     "react-redux-test-utils": "^0.1.1",
     "react-remarkable": "^1.1.3",
+    "sass-loader": "^7.1.0",
     "stylelint": "^9.3.0",
     "stylelint-config-standard": "^18.0.0"
   },

diff --git a/webpack/stories/index.js b/webpack/stories/index.js
@@ -1,7 +1,5 @@
 import { configure } from '@storybook/react';
-
-require('patternfly/dist/css/patternfly.min.css');
-require('patternfly/dist/css/patternfly-additions.min.css');
+import './index.scss';
 
 const req = require.context('../', true, /.stories.js$/);
 

diff --git a/webpack/stories/index.scss b/webpack/stories/index.scss
@@ -0,0 +1,6 @@
+$img-path: '~patternfly/dist/img/';
+$font-path: '~patternfly/dist/fonts/';
+$icon-font-path: '~patternfly/dist/fonts/';
+
+@import '~patternfly/dist/sass/patternfly';
+@import '~patternfly-react/dist/sass/patternfly-react';