From a3174c2d39baaf53f8fedb553a7e16265eb50a2c Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Tue, 26 Feb 2019 15:52:15 +0100 Subject: [PATCH 1/3] Make styleguide development inside running application possible --- nuxt.config.js | 42 ++++++++++++++++++++++++++++++++------- package.json | 5 ++--- plugins/styleguide-dev.js | 4 ++++ plugins/styleguide.js | 1 - 4 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 plugins/styleguide-dev.js diff --git a/nuxt.config.js b/nuxt.config.js index 3fab93c35..dfe6ceef8 100644 --- a/nuxt.config.js +++ b/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({ diff --git a/package.json b/package.json index dfdda5e2f..4f7554378 100644 --- a/package.json +++ b/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" }, @@ -50,7 +49,7 @@ "nuxt": "~2.4.3", "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", "vue-izitoast": "1.1.2", diff --git a/plugins/styleguide-dev.js b/plugins/styleguide-dev.js new file mode 100644 index 000000000..4cffe028f --- /dev/null +++ b/plugins/styleguide-dev.js @@ -0,0 +1,4 @@ +import Vue from 'vue' +import Styleguide from '@@' + +Vue.use(Styleguide) diff --git a/plugins/styleguide.js b/plugins/styleguide.js index 788d5dcc7..b04724c37 100644 --- a/plugins/styleguide.js +++ b/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) From cd94f003f8d6c0c08844945067413ed051abefb7 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 28 Feb 2019 10:48:52 +0100 Subject: [PATCH 2/3] Fixed yarn.lock --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 1a4847eae..bd16afc8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -866,10 +866,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" From ca3fecebb7f9ab64b7bb0f724b874e7d759aebab Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 28 Feb 2019 14:39:54 +0100 Subject: [PATCH 3/3] Document the new styleguide developmen workflow in the readme. --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 45f6e9010..d395a54e0 100644 --- a/README.md +++ b/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/).