Bump up to 0.3.0

.postcssrc.js

@@ -1,8 +1,8 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 module.exports = {
-  "plugins": {
+  plugins: {
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
+    autoprefixer: {}
   }
-}
+};

README.md

@@ -46,17 +46,18 @@ Even though this is a system prototyping tool first and foremost, it has all the
 ## Roadmap
 
 - [ ] Implement an automated kitchen sink test view for each component.
-- [ ] Create compiler config for style guide.
-- [ ] Cleanup style guide CSS.
 - [ ] Create a tutorial on why and what you can/should do with the tool.
 - [ ] Add a few more example default elements (like button f.ex.) with sensible default `props` for type, style, etc. for prototyping.
+- [ ] Add a configurable base grid.
 - [ ] Automated accessibility tests.
 - [ ] Consider showing all tokens under a separate category in living documentation.
+- [ ] Split sections in living documentation into separate views.
+- [ ] Implement isolated mode for components.
 
 
 ## Changelog
 
-* `0.2.6` is the latest release.
+* `0.3.0` is the latest release.
 * See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 

build/build.js

@@ -1,41 +1,45 @@
-'use strict'
-require('./check-versions')()
+"use strict";
+require("./check-versions")();
 
-process.env.NODE_ENV = 'production'
+process.env.NODE_ENV = "production";
 
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
+const ora = require("ora");
+const rm = require("rimraf");
+const path = require("path");
+const chalk = require("chalk");
+const webpack = require("webpack");
+const config = require("../config");
+const webpackConfig = require("./webpack.prod.conf");
 
-const spinner = ora('building for production...')
-spinner.start()
+const spinner = ora("building for production...");
+spinner.start();
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
+  if (err) throw err;
+  webpack(webpackConfig, function(err, stats) {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false
+      }) + "\n\n"
+    );
 
     if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
+      console.log(chalk.red("  Build failed with errors.\n"));
+      process.exit(1);
     }
 
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})
+    console.log(chalk.cyan("  Build complete.\n"));
+    console.log(
+      chalk.yellow(
+        "  Tip: built files are meant to be served over an HTTP server.\n" +
+          "  Opening index.html over file:// won't work.\n"
+      )
+    );
+  });
+});

build/check-versions.js

@@ -1,49 +1,59 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+"use strict";
+const chalk = require("chalk");
+const semver = require("semver");
+const packageConfig = require("../package.json");
+const shell = require("shelljs");
+function exec(cmd) {
+  return require("child_process")
+    .execSync(cmd)
+    .toString()
+    .trim();
 }
 
 const versionRequirements = [
   {
-    name: 'node',
+    name: "node",
     currentVersion: semver.clean(process.version),
     versionRequirement: packageConfig.engines.node
   }
-]
+];
 
-if (shell.which('npm')) {
+if (shell.which("npm")) {
   versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
+    name: "npm",
+    currentVersion: exec("npm --version"),
     versionRequirement: packageConfig.engines.npm
-  })
+  });
 }
 
-module.exports = function () {
-  const warnings = []
+module.exports = function() {
+  const warnings = [];
   for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
+    const mod = versionRequirements[i];
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
+      warnings.push(
+        mod.name +
+          ": " +
+          chalk.red(mod.currentVersion) +
+          " should be " +
+          chalk.green(mod.versionRequirement)
+      );
     }
   }
 
   if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
+    console.log("");
+    console.log(
+      chalk.yellow(
+        "To use this template, you must update following to modules:"
+      )
+    );
+    console.log();
     for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
+      const warning = warnings[i];
+      console.log("  " + warning);
     }
-    console.log()
-    process.exit(1)
+    console.log();
+    process.exit(1);
   }
-}
+};

build/dev-client.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
-'use strict'
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+"use strict";
+require("eventsource-polyfill");
+var hotClient = require("webpack-hot-middleware/client?noInfo=true&reload=true");
 
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
+hotClient.subscribe(function(event) {
+  if (event.action === "reload") {
+    window.location.reload();
   }
-})
+});

build/dev-server.js

@@ -1,38 +1,38 @@
-'use strict'
-require('./check-versions')()
+"use strict";
+require("./check-versions")();
 
-const config = require('../config')
+const config = require("../config");
 if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV);
 }
 
-const opn = require('opn')
-const path = require('path')
-const express = require('express')
-const webpack = require('webpack')
-const proxyMiddleware = require('http-proxy-middleware')
-const webpackConfig = require('./webpack.dev.conf')
+const opn = require("opn");
+const path = require("path");
+const express = require("express");
+const webpack = require("webpack");
+const proxyMiddleware = require("http-proxy-middleware");
+const webpackConfig = require("./webpack.dev.conf");
 
 // default port where dev server listens for incoming traffic
-const port = process.env.PORT || config.dev.port
+const port = process.env.PORT || config.dev.port;
 // automatically open browser, if not set will be false
-const autoOpenBrowser = !!config.dev.autoOpenBrowser
+const autoOpenBrowser = !!config.dev.autoOpenBrowser;
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
-const proxyTable = config.dev.proxyTable
+const proxyTable = config.dev.proxyTable;
 
-const app = express()
-const compiler = webpack(webpackConfig)
+const app = express();
+const compiler = webpack(webpackConfig);
 
-const devMiddleware = require('webpack-dev-middleware')(compiler, {
+const devMiddleware = require("webpack-dev-middleware")(compiler, {
   publicPath: webpackConfig.output.publicPath,
   quiet: true
-})
+});
 
-const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+const hotMiddleware = require("webpack-hot-middleware")(compiler, {
   log: false,
   heartbeat: 2000
-})
+});
 // force page reload when html-webpack-plugin template changes
 // currently disabled until this is resolved:
 // https://github.com/jantimon/html-webpack-plugin/issues/680
@@ -45,61 +45,64 @@ const hotMiddleware = require('webpack-hot-middleware')(compiler, {
 
 // enable hot-reload and state-preserving
 // compilation error display
-app.use(hotMiddleware)
+app.use(hotMiddleware);
 
 // proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  let options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
+Object.keys(proxyTable).forEach(function(context) {
+  let options = proxyTable[context];
+  if (typeof options === "string") {
+    options = { target: options };
   }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
+  app.use(proxyMiddleware(options.filter || context, options));
+});
 
 // handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
+app.use(require("connect-history-api-fallback")());
 
 // serve webpack bundle output
-app.use(devMiddleware)
+app.use(devMiddleware);
 
 // serve pure static assets
-const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
+const staticPath = path.posix.join(
+  config.dev.assetsPublicPath,
+  config.dev.assetsSubDirectory
+);
+app.use(staticPath, express.static("./static"));
 
-const uri = 'http://localhost:' + port
+const uri = "http://localhost:" + port;
 
-var _resolve
-var _reject
+var _resolve;
+var _reject;
 var readyPromise = new Promise((resolve, reject) => {
-  _resolve = resolve
-  _reject = reject
-})
+  _resolve = resolve;
+  _reject = reject;
+});
 
-var server
-var portfinder = require('portfinder')
-portfinder.basePort = port
+var server;
+var portfinder = require("portfinder");
+portfinder.basePort = port;
 
-console.log('> Starting dev server...')
+console.log("> Starting dev server...");
 devMiddleware.waitUntilValid(() => {
   portfinder.getPort((err, port) => {
     if (err) {
-      _reject(err)
+      _reject(err);
     }
-    process.env.PORT = port
-    var uri = 'http://localhost:' + port
-    console.log('> Listening at ' + uri + '\n')
+    process.env.PORT = port;
+    var uri = "http://localhost:" + port;
+    console.log("> Listening at " + uri + "\n");
     // when env is testing, don't need open it
-    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-      opn(uri)
+    if (autoOpenBrowser && process.env.NODE_ENV !== "testing") {
+      opn(uri);
     }
-    server = app.listen(port)
-    _resolve()
-  })
-})
+    server = app.listen(port);
+    _resolve();
+  });
+});
 
 module.exports = {
   ready: readyPromise,
   close: () => {
-    server.close()
+    server.close();
   }
-}
+};