From 9a7e2b55d7a56f13be5e4169bd1b75ce307df990 Mon Sep 17 00:00:00 2001 From: Betsy Haibel Date: Thu, 28 Dec 2017 12:50:33 -0500 Subject: [PATCH 1/3] KSS runs --- .gitignore | 3 +- app/assets/src/stylesheets/00-base/_base.scss | 1 - .../_buttons.scss => 01-atoms/buttons.scss} | 12 +++ config/webpack/development.js | 5 ++ package.json | 2 + yarn.lock | 88 +++++++++++++++++-- 6 files changed, 103 insertions(+), 8 deletions(-) rename app/assets/src/stylesheets/{00-base/_buttons.scss => 01-atoms/buttons.scss} (85%) diff --git a/.gitignore b/.gitignore index ff5f2cb..9b42f2b 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,7 @@ /public/packs /public/packs-test /node_modules - /coverage +/styleguide + .env diff --git a/app/assets/src/stylesheets/00-base/_base.scss b/app/assets/src/stylesheets/00-base/_base.scss index 8576a85..7739bea 100644 --- a/app/assets/src/stylesheets/00-base/_base.scss +++ b/app/assets/src/stylesheets/00-base/_base.scss @@ -5,7 +5,6 @@ @import "variables"; -@import "buttons"; @import "forms"; @import "layout"; @import "lists"; diff --git a/app/assets/src/stylesheets/00-base/_buttons.scss b/app/assets/src/stylesheets/01-atoms/buttons.scss similarity index 85% rename from app/assets/src/stylesheets/00-base/_buttons.scss rename to app/assets/src/stylesheets/01-atoms/buttons.scss index ec455f1..74a87e2 100644 --- a/app/assets/src/stylesheets/00-base/_buttons.scss +++ b/app/assets/src/stylesheets/01-atoms/buttons.scss @@ -1,3 +1,15 @@ +// Button +// +// Your standard button suitable for clicking. +// +// :hover - Highlights when hovering. +// +// Markup: +// +// +// Style guide: components.button + + $_button-background-color: $action-color; $_button-background-color-hover: shade($action-color, 20%); $_button-text-color: $white; diff --git a/config/webpack/development.js b/config/webpack/development.js index 81269f6..e51c1ec 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -1,3 +1,8 @@ const environment = require('./environment') +const KssWebpackPlugin = require('kss-webpack-plugin') + +environment.plugins.prepend('Kss', new KssWebpackPlugin({ + source: 'app/assets/src/stylesheets' +})) module.exports = environment.toWebpackConfig() diff --git a/package.json b/package.json index 90ae24e..2f64d2e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "lodash": "^4.17.4", "rails-ujs": "^5.1.4", "webpack": "^3.10.0", + "kss": "^3.0.0-beta.18", + "kss-webpack-plugin": "^1.2.0", "webpack-dev-server": "^2.9.7" } } diff --git a/yarn.lock b/yarn.lock index d54b0e3..78e9a53 100644 --- a/yarn.lock +++ b/yarn.lock @@ -246,7 +246,7 @@ async@2.4.1: dependencies: lodash "^4.14.0" -async@^1.5.2: +async@^1.4.0, async@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" @@ -840,7 +840,7 @@ block-stream@*: dependencies: inherits "~2.0.0" -bluebird@^3.5.0: +bluebird@^3.3.3, bluebird@^3.5.0: version "3.5.1" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9" @@ -2319,6 +2319,10 @@ foreach@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99" +foreachasync@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/foreachasync/-/foreachasync-3.0.0.tgz#5502987dc8714be3392097f32e0071c9dee07cf6" + forever-agent@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" @@ -2364,6 +2368,13 @@ fs-extra@^0.30.0: path-is-absolute "^1.0.0" rimraf "^2.2.8" +fs-extra@^2.0.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35" + dependencies: + graceful-fs "^4.1.2" + jsonfile "^2.1.0" + fs-write-stream-atomic@^1.0.8: version "1.0.10" resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9" @@ -2535,6 +2546,16 @@ handle-thing@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" +handlebars@^4.0.0: + version "4.0.11" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" + dependencies: + async "^1.4.0" + optimist "^0.6.1" + source-map "^0.4.4" + optionalDependencies: + uglify-js "^2.6" + har-schema@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e" @@ -3180,6 +3201,24 @@ klaw@^1.0.0: optionalDependencies: graceful-fs "^4.1.9" +kss-webpack-plugin@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/kss-webpack-plugin/-/kss-webpack-plugin-1.2.0.tgz#3ffb6aa82035cac42fc7067252a34904e6df4cf9" + dependencies: + kss "^3.0.0 || ^3.0.0-beta.14" + +"kss@^3.0.0 || ^3.0.0-beta.14", kss@^3.0.0-beta.18: + version "3.0.0-beta.18" + resolved "https://registry.yarnpkg.com/kss/-/kss-3.0.0-beta.18.tgz#832a23bda4cabecf5426b93892c1b618db7ea24e" + dependencies: + bluebird "^3.3.3" + fs-extra "^2.0.0" + glob "^7.0.3" + handlebars "^4.0.0" + marked "^0.3.6" + twig "^0.10.2" + yargs "^6.0.0" + lazy-cache@^0.2.3: version "0.2.7" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65" @@ -3239,6 +3278,10 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" +locutus@^2.0.5: + version "2.0.9" + resolved "https://registry.yarnpkg.com/locutus/-/locutus-2.0.9.tgz#e265af1e85fd19173e74386373888560783a02fc" + lodash._reinterpolate@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -3342,6 +3385,10 @@ map-obj@^1.0.0, map-obj@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" +marked@^0.3.6: + version "0.3.9" + resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.9.tgz#54ce6a57e720c3ac6098374ec625fcbcc97ff290" + math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac" @@ -3452,7 +3499,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" -"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2: +"minimatch@2 || 3", minimatch@3.0.x, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" dependencies: @@ -3466,6 +3513,10 @@ minimist@^1.1.3, minimist@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" +minimist@~0.0.1: + version "0.0.10" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" + mississippi@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.0.tgz#d201583eb12327e3c5c1642a404a9cacf94e34f5" @@ -3749,6 +3800,13 @@ opn@^5.1.0: dependencies: is-wsl "^1.1.0" +optimist@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" + dependencies: + minimist "~0.0.1" + wordwrap "~0.0.2" + optionator@^0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64" @@ -5206,7 +5264,7 @@ source-map-support@^0.4.15: dependencies: source-map "^0.5.6" -source-map@^0.4.2: +source-map@^0.4.2, source-map@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" dependencies: @@ -5540,6 +5598,14 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0: version "0.14.5" resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" +twig@^0.10.2: + version "0.10.3" + resolved "https://registry.yarnpkg.com/twig/-/twig-0.10.3.tgz#67604e08e1920ebf2faf80a901e256189c8a3c67" + dependencies: + locutus "^2.0.5" + minimatch "3.0.x" + walk "2.3.x" + type-check@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72" @@ -5557,7 +5623,7 @@ typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" -uglify-js@^2.8.29: +uglify-js@^2.6, uglify-js@^2.8.29: version "2.8.29" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" dependencies: @@ -5695,6 +5761,12 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +walk@2.3.x: + version "2.3.9" + resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.9.tgz#31b4db6678f2ae01c39ea9fb8725a9031e558a7b" + dependencies: + foreachasync "^3.0.0" + watchpack@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac" @@ -5835,6 +5907,10 @@ wordwrap@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" +wordwrap@~0.0.2: + version "0.0.3" + resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" + wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" @@ -5886,7 +5962,7 @@ yargs-parser@^7.0.0: dependencies: camelcase "^4.1.0" -yargs@^6.6.0: +yargs@^6.0.0, yargs@^6.6.0: version "6.6.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: From 551291d48988625b1cd10253f260be669a05fedc Mon Sep 17 00:00:00 2001 From: Betsy Haibel Date: Thu, 28 Dec 2017 17:19:01 -0500 Subject: [PATCH 2/3] Generated styleguide now loads application styles --- .gitignore | 2 +- app/assets/src/stylesheets/application.scss | 1 + config/webpack/development.js | 22 +++++++++++++++++++-- package.json | 7 ++++--- yarn.lock | 21 ++++++++++++++++++++ 5 files changed, 47 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 9b42f2b..b2c3ea3 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,6 @@ /public/packs-test /node_modules /coverage -/styleguide +/design/styleguide .env diff --git a/app/assets/src/stylesheets/application.scss b/app/assets/src/stylesheets/application.scss index f88772c..d0e963a 100644 --- a/app/assets/src/stylesheets/application.scss +++ b/app/assets/src/stylesheets/application.scss @@ -1,5 +1,6 @@ @import "bourbon"; @import "00-base/base"; +@import "01-atoms/buttons"; @import "02-molecules/forms"; @import "03-organisms/header"; @import "04-templates/templates"; \ No newline at end of file diff --git a/config/webpack/development.js b/config/webpack/development.js index e51c1ec..54e9801 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -1,8 +1,26 @@ const environment = require('./environment') +const path = require('path') const KssWebpackPlugin = require('kss-webpack-plugin') -environment.plugins.prepend('Kss', new KssWebpackPlugin({ - source: 'app/assets/src/stylesheets' +function railsRootJoin (pathname) { + return path.join(__dirname, '..', '..', pathname) +} + +function styleguideRelativePath (pathname) { + return path.join(environment.config.output.path, pathname) +} + +// Since KssWebpackPlugin needs filenames at configure-time, +// we can't include the hash in development filenames +environment.config.set('output.filename', '[name].js') +const extractTextPlugin = environment.plugins.get('ExtractText') +extractTextPlugin.filename = '[name].css' + +environment.plugins.prepend('KSS', new KssWebpackPlugin({ + source: railsRootJoin('app/assets/src/stylesheets'), + destination: railsRootJoin('design/styleguide'), + css: styleguideRelativePath('application.css'), + js: styleguideRelativePath('application.js') })) module.exports = environment.toWebpackConfig() diff --git a/package.json b/package.json index 2f64d2e..eb85cf4 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,13 @@ }, "private": true, "scripts": { - "lint": "eslint app/assets" + "lint": "eslint app/assets config/webpack" }, "dependencies": { "@rails/webpacker": "^3.2.0", "bourbon": "^5.0.0-beta.8", "caniuse-lite": "^1.0.30000784", + "connect": "^3.6.5", "eslint": "^4.13.1", "eslint-config-standard": "^11.0.0-beta.0", "eslint-plugin-import": "^2.8.0", @@ -18,11 +19,11 @@ "eslint-plugin-promise": "^3.6.0", "eslint-plugin-standard": "^3.0.1", "eyeglass": "^1.3.0", + "kss": "^3.0.0-beta.18", + "kss-webpack-plugin": "^1.2.0", "lodash": "^4.17.4", "rails-ujs": "^5.1.4", "webpack": "^3.10.0", - "kss": "^3.0.0-beta.18", - "kss-webpack-plugin": "^1.2.0", "webpack-dev-server": "^2.9.7" } } diff --git a/yarn.lock b/yarn.lock index 78e9a53..2b15880 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1331,6 +1331,15 @@ connect-history-api-fallback@^1.3.0: version "1.5.0" resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a" +connect@^3.6.5: + version "3.6.5" + resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.5.tgz#fb8dde7ba0763877d0ec9df9dac0b4b40e72c7da" + dependencies: + debug "2.6.9" + finalhandler "1.0.6" + parseurl "~1.3.2" + utils-merge "1.0.1" + console-browserify@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10" @@ -2242,6 +2251,18 @@ fill-range@^2.1.0: repeat-element "^1.1.2" repeat-string "^1.5.2" +finalhandler@1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f" + dependencies: + debug "2.6.9" + encodeurl "~1.0.1" + escape-html "~1.0.3" + on-finished "~2.3.0" + parseurl "~1.3.2" + statuses "~1.3.1" + unpipe "~1.0.0" + finalhandler@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5" From 1962791a5595a12c200ec3f81e222412ce51ba75 Mon Sep 17 00:00:00 2001 From: Betsy Haibel Date: Thu, 28 Dec 2017 17:53:42 -0500 Subject: [PATCH 3/3] Style guide runs in dev environment --- app/assets/README.md | 4 ++++ config/webpack/development.js | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/assets/README.md b/app/assets/README.md index 411df15..55f8919 100644 --- a/app/assets/README.md +++ b/app/assets/README.md @@ -16,6 +16,10 @@ TL;DR: if you only run `bin/rails s` in local development when you want to work Asset gems don't work; look for equivalent npm packages instead. +## Styleguide + +While running BOTH `bin/rails s` and `bin/webpack-dev-server`, if you visit `/packs/styleguide` you'll be able to view our application's design style guide. We use [kss-node](https://github.com/kss-node/kss-node) to generate it. + ## Frameworks Is `rails-ujs` plus `turbolinks` a framework? Because that's what we're using. That, and as little vanilla JavaScript as is feasible. We might add a [svelte](https://svelte.technology) component or three later if we really need them. We would prefer to design such that we don't need them. diff --git a/config/webpack/development.js b/config/webpack/development.js index 54e9801..bcc769c 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -1,5 +1,6 @@ const environment = require('./environment') const path = require('path') +const express = require('express') const KssWebpackPlugin = require('kss-webpack-plugin') function railsRootJoin (pathname) { @@ -7,7 +8,7 @@ function railsRootJoin (pathname) { } function styleguideRelativePath (pathname) { - return path.join(environment.config.output.path, pathname) + return path.join(environment.config.output.publicPath, pathname) } // Since KssWebpackPlugin needs filenames at configure-time, @@ -23,4 +24,8 @@ environment.plugins.prepend('KSS', new KssWebpackPlugin({ js: styleguideRelativePath('application.js') })) +environment.config.set('devServer.before', (app) => { + app.use('/packs/styleguide', express.static(railsRootJoin('design/styleguide'))) +}) + module.exports = environment.toWebpackConfig()