Merge pull request #197 from Human-Connection/add-styleguide-dev-mode

Add styleguide dev mode

README.md

@@ -42,13 +42,16 @@ $ yarn start
 
 ## Styleguide
 
-All reusable Components (for example avatar) should be done inside the styleguide directory.
+All reusable Components (for example avatar) should be done inside the [Nitro-Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) repository.
 
 ![Styleguide Screenshot](screenshot-styleguide.png)
 
 More information can be found here: https://github.com/Human-Connection/Nitro-Styleguide
 
 
+If you need to change something in the styleguide and want to see the effects on the frontend immediately, then we have you covered.
+You need to clone the styleguide to the parent directory `../Nitro-Styleguide` and run `yarn && yarn run dev`. After that you run `yarn run dev:styleguide` instead of `yarn run dev` and you will see your changes reflected inside the fronten!
+
 ## Internationalization (i18n)
 
 You can help translating the interface by joining us on [lokalise.co](https://lokalise.co/public/556252725c18dd752dd546.13222042/).

nuxt.config.js

@@ -1,7 +1,14 @@
 const pkg = require('./package')
 const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
-const path = require('path')
+
+const styleguidePath = '../Nitro-Styleguide'
+const styleguideStyles = process.env.STYLEGUIDE_DEV
+  ? [
+      `${styleguidePath}/src/system/styles/main.scss`,
+      `${styleguidePath}/src/system/styles/shared.scss`
+    ]
+  : '@human-connection/styleguide/dist/shared.scss'
 
 module.exports = {
   mode: 'universal',
@@ -9,7 +16,7 @@ module.exports = {
   dev: dev,
   debug: dev ? 'nuxt:*,app' : null,
 
-  modern: 'server',
+  modern: !dev ? 'server' : false,
 
   transition: {
     name: 'slide-up',
@@ -66,11 +73,22 @@ module.exports = {
   ** Global CSS
   */
   css: ['~assets/styles/main.scss'],
+
+  /*
+  ** Global processed styles
+  */
+  styleResources: {
+    scss: styleguideStyles
+  },
+
   /*
   ** Plugins to load before mounting the App
   */
   plugins: [
-    { src: '~/plugins/styleguide.js', ssr: true },
+    {
+      src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
+      ssr: true
+    },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
@@ -102,10 +120,6 @@ module.exports = {
     'portal-vue/nuxt'
   ],
 
-  styleResources: {
-    scss: ['@human-connection/styleguide/dist/shared.scss']
-  },
-
   /*
   ** Axios module configuration
   */
@@ -180,6 +194,20 @@ module.exports = {
           exclude: /(node_modules)/
         })
       }
+      if (process.env.STYLEGUIDE_DEV) {
+        const path = require('path')
+        config.resolve.alias['@@'] = path.resolve(
+          __dirname,
+          `${styleguidePath}/src/system`
+        )
+        config.module.rules.push({
+          resourceQuery: /blockType=docs/,
+          loader: require.resolve(
+            `${styleguidePath}/src/loader/docs-trim-loader.js`
+          )
+        })
+      }
+
       const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
       svgRule.test = /\.(png|jpe?g|gif|webp)$/
       config.module.rules.push({

package.json

@@ -6,12 +6,11 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn dev",
     "build": "nuxt build",
     "start": "cross-env node server/index.js",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue .",
-    "styleguide": "echo 'Command styleguide is Deprecated!'",
-    "styleguide:build": "echo 'Command styleguide:build is Deprecated!'",
     "test": "jest",
     "precommit": "yarn lint"
   },
@@ -52,7 +51,7 @@
     "nuxt": "~2.4.5",
     "nuxt-env": "~0.1.0",
     "portal-vue": "~1.5.1",
-    "@human-connection/styleguide": "~0.5.0",
+    "@human-connection/styleguide": "~0.5.2",
     "v-tooltip": "~2.0.0-rc.33",
     "vue-count-to": "~1.0.13",
     "string-hash": "^1.1.3",

plugins/styleguide-dev.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Styleguide from '@@'
+
+Vue.use(Styleguide)

plugins/styleguide.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Styleguide from '@human-connection/styleguide'
 import '@human-connection/styleguide/dist/system.css'
-// import '@human-connection/styleguide/dist/shared.scss'
 
 Vue.use(Styleguide)

yarn.lock

@@ -876,10 +876,10 @@
     fs-extra "7.0.0"
     watchify "3.11.0"
 
-"@human-connection/styleguide@~0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.0.tgz#14d5f696461996708b25126dc1e9e900c3a841cf"
-  integrity sha512-xR8iqGnjxGABoSI3AIq2R9YibZi4TTIe5R6/A9cEbWo3XqD/82+tNBjyKhv84Op4KJTgedR6IJtIIOh3H0aeOg==
+"@human-connection/styleguide@~0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.2.tgz#a7d05b612562cfbe4377032bdf32df4a8f0e3f45"
+  integrity sha512-8RSQDv6hRvdToQKtOGv+aNA/lfrNu+eNDy/JBaynJN7bB7veNgQ0XGt9Otq1KmdW2nthWrwsnZLTRaUaGqyAZw==
   dependencies:
     portal-vue "~1.5.1"
     vue "~2.6.7"