Merge pull request #114 from FluentifyJs/feature/fixing-storybook

Updating storybook configuration/setup

Author: AlexanderYW

.storybook/addons.js

@@ -0,0 +1,32 @@
+const path = require('path')
+
+module.exports = {
+  addons: [
+    '@storybook/preset-scss',
+    '@storybook/addon-actions',
+    '@storybook/addon-links'
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    },
+    {
+      test: /\.(png|svg|jpg|gif)$/,
+      use: [
+        'file-loader',
+      ],
+      include: path.resolve(__dirname, "../")
+    });
+
+    // Return the altered config
+    return config;
+  },
+};
+  

.storybook/main.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import yourTheme from './theme';
+
+addons.setConfig({
+  theme: yourTheme,
+});

.storybook/manager.js

@@ -1,17 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { configure, addParameters, addDecorator } from '@storybook/vue'
-import theme from './theme';
+import { configure, addDecorator } from '@storybook/vue'
 
-import '../src/scss/fluentify.scss'
+import '!style-loader!css-loader!sass-loader!../src/scss/fluentify.scss'
 
 const req = require.context('../src/stories', true, /.stories.js$/)
 
-addParameters({
-  options: {
-    theme: theme,
-  },
-});
-
 addDecorator(() => ({
   template: '<div style="padding:20px;"><story/></div>',
 }))

.storybook/config.js renamed to .storybook/preview.js

@@ -116,6 +116,7 @@
   "style": "dist/fluentify.css",
   "unpkg": "dist/fluentify.js",
   "dependencies": {
+    "@storybook/preset-scss": "^1.0.2",
     "vue": "^2.6.12"
   }
 }