- Storybook on hold until storybookjs/storybook#3850 and storybookjs/…

…storybook#4411 are fixed

.bitmap

@@ -1,6 +1,17 @@
 /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
 
 {
+    "wurielle.pristine/wepback/[email protected]": {
+        "files": [
+            {
+                "relativePath": "dss-webpack-plugin.js",
+                "test": false,
+                "name": "dss-webpack-plugin.js"
+            }
+        ],
+        "mainFile": "dss-webpack-plugin.js",
+        "origin": "AUTHORED"
+    },
     "wurielle.pristine/vue-components/[email protected]": {
         "files": [
             {
@@ -28,18 +39,7 @@
         "trackDir": "src/styleguide",
         "origin": "AUTHORED"
     },
-    "wurielle.pristine/wepback/[email protected]": {
-        "files": [
-            {
-                "relativePath": "dss-webpack-plugin.js",
-                "test": false,
-                "name": "dss-webpack-plugin.js"
-            }
-        ],
-        "mainFile": "dss-webpack-plugin.js",
-        "origin": "AUTHORED"
-    },
-    "wurielle.pristine/wepback/[email protected]": {
+    "wurielle.pristine/webpack/[email protected]": {
         "files": [
             {
                 "relativePath": "json-sass-webpack-plugin.js",

.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee

@@ -0,0 +1 @@
+{"value":{"success":true,"data":{"latest":{"version":"3.4.11","info":{"plain":"If you see this message in your terminal, please open a GitHub issue"}}},"time":1540539612671},"type":"Object"}

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,18 @@
+import { configure, addDecorator } from '@storybook/vue';
+// import { withInfo } from '@storybook/addon-info';
+// addDecorator(
+//     // withInfo({
+//     //     // header: false,
+//     //     // inline: true,
+//     //     // source: true,
+//     //     // propTables: false
+//     // })
+// );
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,56 @@
+const path = require("path");
+const webpack = require('webpack');
+// https://github.com/storybooks/storybook/pull/4411 POSTCSS ISSUE
+// https://github.com/storybooks/storybook/issues/3850 Vue Issue
+module.exports = {
+    resolve: {
+        alias: {
+            '@config':  path.resolve(__dirname, '../config'),
+            '@':  path.resolve(__dirname, '../src'),
+        }
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            Vue: ['vue/dist/vue.esm.js', 'default']
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                loaders: [
+                    "style-loader",
+                    {
+                        loader: 'css-loader',
+                        options: { importLoaders: 1 }
+                    },
+                    "sass-loader",
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            importLoaders: 1,
+                            config: {
+                                path: path.resolve(__dirname, '../')
+                            },
+                            plugins: () => [
+                                require('tailwindcss')(path.resolve(__dirname, '../config/theme.js')),
+                                require('autoprefixer'),
+                                require('postcss-pxtorem')({
+                                    replace: true,
+                                    propList: ['*'],
+                                })
+                            ],
+                        }
+                    }
+                ],
+                include: path.resolve(__dirname, "../")
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                include: path.resolve(__dirname, "../")
+            },
+        ],
+    }
+};

README.md

@@ -1,17 +1,25 @@
 # pristine
-## Project init
-In any CLI:
-```shell 
+## Global Dependencies
+```bash
 npm config set '@bit:registry' https://node.bitsrc.io
-npm install -g @vue/cli // For project Creation
+npm install -g @vue/cli
+npm i -g @storybook/cli
+npm 
+## Project init
+In any CLI:i -g bit-bin
+```
+
+## Create a project (requires Global Dependencies)
+```bash 
 vue create MyProject
 cd MyProject
 vue add vue-cli-plugin-build-watch // Adds watch mode to Vue-CLI
 vue add element // Adds Element UI
-npm install -g nucleus-styleguide // Adds Nucleus Styleguide Generator
-npm i tailwindcss lodash vue-codemirror [email protected] minimist postcss-pxtorem -D // Adds Dev Dependencies
-node ./node_modules/.bin/tailwind init config/theme.js // Init TailwindCSS
-nucleus init // Init Nucleus Styleguide Generator
+npm i tailwindcss lodash vue-codemirror [email protected] minimist postcss-pxtorem @storybook/addon-info -D // Adds Dev Dependencies
+npm i @bit/wurielle.pristine.webpack.dss-plugin
+npm i @bit/wurielle.pristine.webpack.json-sass-plugin
+./node_modules/.bin/tailwind init config/theme.js // Init TailwindCSS
+getstorybook
 ```
 
 Edit postcss.config.js with the following lines:
@@ -27,6 +35,42 @@ module.exports = {
   ]
 }
 ```
+
+Create a vue.config.js file containing
+```javascript
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const argv = require('minimist')(process.argv.slice(2));
+
+const DSSWebpackPlugin = require('@bit/wurielle.pristine.webpack.dss-plugin');
+const JsonSassWebpackPlugin = require('@bit/wurielle.pristine.webpack.json-sass-plugin');
+
+module.exports = {
+    baseUrl: '/',
+    configureWebpack: {
+        resolve: {
+            alias: {
+                '@config':  path.resolve(__dirname, 'config'),
+            }
+        },
+        plugins:[
+            new webpack.DefinePlugin({
+                // 'API_AUTH_USERNAME': JSON.stringify(argv.apiAuthUsername.trim()),
+                // 'API_AUTH_PASSWORD': JSON.stringify(argv.apiAuthPassword.trim()),
+                // 'SERVICE_URL': JSON.stringify(argv.domain.trim())
+            }),
+            new DSSWebpackPlugin({
+                filter: /\.s(c|a)ss/,
+                output: './src/styleguide.json',
+                watch: './src',
+                detector: '_@'
+            }),
+            new JsonSassWebpackPlugin('./config/theme.js', './config/theme.scss')
+        ]
+    }
+};
+```
 ## Project setup
 ```
 npm install

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/app',
+    '@babel/preset-env'
   ]
 }