diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c06df4d5..00000000 --- a/.babelrc +++ /dev/null @@ -1,18 +0,0 @@ -{ - "presets": [ - ["env", { - "modules": false, - "targets": { - "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] - } - }], - "stage-2" - ], - "plugins": ["transform-runtime"], - "env": { - "test": { - "presets": ["env", "stage-2"], - "plugins": ["istanbul"] - } - } -} diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 9d08a1a8..00000000 --- a/.editorconfig +++ /dev/null @@ -1,9 +0,0 @@ -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/.postcssrc.js b/.postcssrc.js index 373f665c..24042860 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -3,6 +3,6 @@ module.exports = { plugins: { // to edit target browsers: use "browserslist" field in package.json - autoprefixer: {} - } -}; + autoprefixer: {}, + }, +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..cce02790 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +package.json +package-lock.json diff --git a/.prettierrc b/.prettierrc index 07f9f3f2..315a772a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,9 +2,21 @@ "printWidth": 120, "singleQuote": false, "trailingComma": "all", - "bracketSpacing": false, + "bracketSpacing": true, "jsxBracketSameLine": false, - "parser": "babylon", - "semi": true, - "requirePragma": false + "semi": false, + "requirePragma": false, + "insertPragma": false, + "useTabs": false, + "tabWidth": 2, + "arrowParens": "avoid", + "proseWrap": "preserve", + "overrides": [ + { + "files": "*.scss", + "options": { + "parser": "scss" + } + } + ] } diff --git a/.travis.yml b/.travis.yml index bacb3af7..7c2939f4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,4 @@ language: node_js node_js: - - "6" + - "8.6.0" - "node" diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..733eaa7d --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,12 @@ +# Contributing to Design System + +The following is a set of guidelines for contributing to Vue Design System. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. + +## How to Contribute + +1. When contributing, please first discuss the change(s) you wish to make via [an issue](https://github.com/viljamis/vue-design-system/issues/new) with Vue Design System team. +2. In most cases, we should be extending existing components instead of creating new ones. You might find [this diagram useful](https://coggle.it/diagram/V0hkiP976OIbGpy8/t/vanilla-pattern). +3. If you _really_ need to add a new component, please [review example component](https://github.com/viljamis/vue-design-system/blob/master/src/ExampleComponent.vue) first. It shows you how to structure and document your component. +4. If you wonder whether you should create an Element or a Pattern, ask yourself: _“can this be broken down into smaller pieces?”_ If the answer is yes, there’s a high chance that it should be a Pattern instead of an Element. For a more thorough explanation, [see terminology](https://github.com/viljamis/vue-design-system/wiki/terminology). +5. Components in the system are labelled with status labels that reflect their state of completion. Make sure to update the status on any component you work on. _[See an example](https://github.com/viljamis/vue-design-system/blob/master/src/ExampleComponent.vue#L8-L23)._ +6. Finally, when you’re done, submit your pull request and ask someone from Vue Design System team to review it. diff --git a/README.md b/README.md index 62e03609..c17b9321 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # Vue Design System -[Vue Design System](https://vueds.com) is an open-source tool for prototyping UI design systems. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster. +[Vue Design System](https://vueds.com) is an open-source tool for building UI design systems. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster. The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist), [Vue Webpack Template](http://vuejs-templates.github.io/webpack/) & [Theo](https://github.com/salesforce-ux/theo) and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript. @@ -12,19 +12,18 @@ Even though this is a system prototyping tool first and foremost, it has all the [![Screenshot](./preview.gif)](https://vueds.com/) - ## Features * A set of interconnected patterns & practices for you and your team. * Global design tokens that can be used inside any component. +* Design System can used as NPM dependency in another project. * Simple and sane SVG icon and @font-face defaults. * Live reloading for both the app and the system documentation. * Automatic generation of documentation. * Documentation and the app logic are separated, so you can have public docs while the app itself is private. -* Autoprefixing, SCSS, Webpack & CSS extraction included by default *(Extend with lint-on-save & unit tests).* +* Autoprefixing, SCSS, Webpack & CSS extraction included by default _(Extend with lint-on-save & unit tests)._ * And more… - ## Documentation * **[Getting Started](https://github.com/viljamis/vue-design-system/wiki/getting-started): How to install and run Vue Design System.** @@ -35,25 +34,21 @@ Even though this is a system prototyping tool first and foremost, it has all the * [Editing Living Documentation](https://github.com/viljamis/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation. * [Component Status](https://github.com/viljamis/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion. * [Component QA](https://github.com/viljamis/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high. -* [Frequently Asked Questions](https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)): How to use icons, how to use font-face, etc. - +* [Frequently Asked Questions](): How to use icons, how to use font-face, etc. ## Examples * **[Vue Design System website](https://vueds.com)** - ## Roadmap * See [Roadmap tag](https://github.com/viljamis/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues. - ## Changelog -* `0.4.3` is the latest release. +* `1.0.0` is the latest release. * See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog. - ## Authors and License [Viljami Salminen](https://viljamis.com), [Artem Sapegin](http://sapegin.me), [Rafael Escala](https://github.com/rafaesc), [react-styleguidist contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors), [vue-styleguidist contributors](https://github.com/vue-styleguidist/vue-styleguidist/graphs/contributors), [Vue.js contributors](https://github.com/vuejs/vue/graphs/contributors), [vue-webpack-boilerplate contributors](https://github.com/vuejs-templates/webpack/graphs/contributors) and & [Theo contributors](https://github.com/salesforce-ux/theo/graphs/contributors). diff --git a/build/build-system.js b/build/build-system.js new file mode 100644 index 00000000..920c4fc3 --- /dev/null +++ b/build/build-system.js @@ -0,0 +1,45 @@ +"use strict" +require("./check-versions")() + +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.system.conf") + +const spinner = ora("Building Design System Library...") +spinner.start() + +rm(path.join(config.system.assetsRoot, config.system.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 (stats.hasErrors()) { + console.log(chalk.red(" Design System Library build failed with errors.\n")) + process.exit(1) + } + + console.log(chalk.cyan(" Design System Library build complete.\n")) + console.log( + chalk.yellow( + " Tip: You can now publish your library as a private NPM module.\n" + + " Users can import it as an ES6 module: import DesignSystem from 'system'\n", + ), + ) + }) +}) diff --git a/build/build.js b/build/build.js index 2af2c0b2..7091391c 100644 --- a/build/build.js +++ b/build/build.js @@ -1,45 +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 Vue Design System for production...") +spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { - if (err) throw err; + if (err) throw err webpack(webpackConfig, function(err, stats) { - spinner.stop(); - if (err) throw err; + spinner.stop() + if (err) throw err process.stdout.write( stats.toString({ colors: true, modules: false, children: false, chunks: false, - chunkModules: false - }) + "\n\n" - ); + chunkModules: false, + }) + "\n\n", + ) if (stats.hasErrors()) { - console.log(chalk.red(" Build failed with errors.\n")); - process.exit(1); + console.log(chalk.red(" Vue Design System build failed with errors.\n")) + process.exit(1) } - console.log(chalk.cyan(" Build complete.\n")); + console.log(chalk.cyan(" Vue Design System 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" - ) - ); - }); -}); + " Opening index.html over file:// won't work.\n", + ), + ) + }) +}) diff --git a/build/check-versions.js b/build/check-versions.js index 02a0463f..ff3c8b69 100644 --- a/build/check-versions.js +++ b/build/check-versions.js @@ -1,59 +1,51 @@ -"use strict"; -const chalk = require("chalk"); -const semver = require("semver"); -const packageConfig = require("../package.json"); -const shell = require("shelljs"); +"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(); + .trim() } const versionRequirements = [ { name: "node", currentVersion: semver.clean(process.version), - versionRequirement: packageConfig.engines.node - } -]; + versionRequirement: packageConfig.engines.node, + }, +] if (shell.which("npm")) { versionRequirements.push({ name: "npm", currentVersion: exec("npm --version"), - versionRequirement: packageConfig.engines.npm - }); + versionRequirement: packageConfig.engines.npm, + }) } module.exports = function() { - const warnings = []; + 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) - ); + 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) } -}; +} diff --git a/build/dev-client.js b/build/dev-client.js index 0f188345..89b1631c 100644 --- a/build/dev-client.js +++ b/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(); + window.location.reload() } -}); +}) diff --git a/build/dev-server.js b/build/dev-server.js index fefb7c76..fcd344af 100644 --- a/build/dev-server.js +++ b/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, { publicPath: webpackConfig.output.publicPath, - quiet: true -}); + quiet: true, +}) const hotMiddleware = require("webpack-hot-middleware")(compiler, { log: false, - heartbeat: 2000 -}); + 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,64 +45,61 @@ 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]; + let options = proxyTable[context] if (typeof options === "string") { - options = { target: options }; + 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 Vue Design System...") 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("> Vue Design System listening at " + uri + "\n") // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== "testing") { - opn(uri); + opn(uri) } - server = app.listen(port); - _resolve(); - }); -}); + server = app.listen(port) + _resolve() + }) +}) module.exports = { ready: readyPromise, close: () => { - server.close(); - } -}; + server.close() + }, +} diff --git a/build/utils.js b/build/utils.js index c2e802c0..f2258502 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,37 +1,39 @@ -"use strict"; -const path = require("path"); -const config = require("../config"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +"use strict" +const path = require("path") +const config = require("../config") +const ExtractTextPlugin = require("extract-text-webpack-plugin") exports.assetsPath = function(_path) { const assetsSubDirectory = - process.env.NODE_ENV === "production" - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory; - return path.posix.join(assetsSubDirectory, _path); -}; + process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory + return path.posix.join(assetsSubDirectory, _path) +} + +exports.assetsSystemPath = function(_path) { + return path.posix.join(config.system.assetsSubDirectory, _path) +} exports.cssLoaders = function(options) { - options = options || {}; + options = options || {} const cssLoader = { loader: "css-loader", options: { minimize: process.env.NODE_ENV === "production", - sourceMap: options.sourceMap - } - }; + sourceMap: options.sourceMap, + }, + } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { - const loaders = [cssLoader]; + const loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + "-loader", options: Object.assign({}, loaderOptions, { - sourceMap: options.sourceMap - }) - }); + sourceMap: options.sourceMap, + }), + }) } // Extract CSS when that option is specified @@ -39,45 +41,41 @@ exports.cssLoaders = function(options) { if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, - fallback: "vue-style-loader" - }); + fallback: "vue-style-loader", + }) } else { - return ["vue-style-loader"].concat(loaders); + return ["vue-style-loader"].concat(loaders) } } var sassOptions = { includePaths: ["./src/assets/tokens/", "./src/styles"], - data: - '@import "tokens.scss"; @import "tokens.map.scss"; @import "styles.scss";', - outputStyle: "compressed" - }; + data: '@import "tokens.scss"; @import "tokens.map.scss"; @import "styles.scss";', + outputStyle: "compressed", + } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders("less"), - sass: generateLoaders( - "sass", - Object.assign({ indentedSyntax: true }, sassOptions) - ), + sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)), scss: generateLoaders("sass", sassOptions), stylus: generateLoaders("stylus"), - styl: generateLoaders("stylus") - }; -}; + styl: generateLoaders("stylus"), + } +} // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function(options) { - const output = []; - const loaders = exports.cssLoaders(options); + const output = [] + const loaders = exports.cssLoaders(options) for (const extension in loaders) { - const loader = loaders[extension]; + const loader = loaders[extension] output.push({ test: new RegExp("\\." + extension + "$"), - use: loader - }); + use: loader, + }) } - return output; -}; + return output +} diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js index 721b683c..1145c249 100644 --- a/build/vue-loader.conf.js +++ b/build/vue-loader.conf.js @@ -1,24 +1,22 @@ -"use strict"; -const utils = require("./utils"); -const config = require("../config"); -const isProduction = process.env.NODE_ENV === "production"; -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +"use strict" +const utils = require("./utils") +const config = require("../config") +const isProduction = process.env.NODE_ENV === "production" +const ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { loaders: utils.cssLoaders({ - sourceMap: isProduction - ? config.build.productionSourceMap - : config.dev.cssSourceMap, + sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction, css: ExtractTextPlugin.extract({ use: "css-loader", - fallback: "vue-style-loader" // <- this is a dep of vue-loader, so no need to explicitly install if using npm3 - }) + fallback: "vue-style-loader", // <- this is a dep of vue-loader, so no need to explicitly install if using npm3 + }), }), transformToRequire: { video: "src", source: "src", img: "src", - image: "xlink:href" - } -}; + image: "xlink:href", + }, +} diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 440f558b..e3536711 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,74 +1,71 @@ -"use strict"; -const path = require("path"); -const utils = require("./utils"); -const config = require("../config"); -const vueLoaderConfig = require("./vue-loader.conf"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +"use strict" +const path = require("path") +const utils = require("./utils") +const config = require("../config") +const vueLoaderConfig = require("./vue-loader.conf") +const ExtractTextPlugin = require("extract-text-webpack-plugin") function resolve(dir) { - return path.join(__dirname, "..", dir); + return path.join(__dirname, "..", dir) } module.exports = { node: { // See: https://github.com/webpack-contrib/css-loader/issues/447 - fs: "empty" + fs: "empty", }, entry: { - app: "./src/main.js" + app: "./src/main.js", }, output: { path: config.build.assetsRoot, filename: "[name].js", - publicPath: - process.env.NODE_ENV === "production" - ? config.build.assetsPublicPath - : config.dev.assetsPublicPath + publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath, }, resolve: { extensions: [".js", ".vue", ".json"], alias: { vue$: "vue/dist/vue.esm.js", - "@": resolve("src") - } + "@": resolve("src"), + }, }, module: { rules: [ { test: /\.vue$/, loader: "vue-loader", - options: vueLoaderConfig + options: vueLoaderConfig, }, { test: /\.js$/, loader: "babel-loader", - include: [resolve("src"), resolve("test")] + include: [resolve("src"), resolve("test")], }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath("img/[name].[hash:7].[ext]") - } + name: utils.assetsPath("img/[name].[hash:7].[ext]"), + }, }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath("media/[name].[hash:7].[ext]") - } + name: utils.assetsPath("media/[name].[hash:7].[ext]"), + }, }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath("fonts/[name].[hash:7].[ext]") - } - } - ] + name: utils.assetsPath("fonts/[name].[hash:7].[ext]"), + }, + }, + ], }, - plugins: [new ExtractTextPlugin("style.css")] -}; + plugins: [new ExtractTextPlugin("style.css")], +} diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 8927fb3c..70b770d1 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -1,28 +1,26 @@ -"use strict"; -const utils = require("./utils"); -const webpack = require("webpack"); -const config = require("../config"); -const merge = require("webpack-merge"); -const baseWebpackConfig = require("./webpack.base.conf"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin"); +"use strict" +const utils = require("./utils") +const webpack = require("webpack") +const config = require("../config") +const merge = require("webpack-merge") +const baseWebpackConfig = require("./webpack.base.conf") +const HtmlWebpackPlugin = require("html-webpack-plugin") +const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin") // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function(name) { - baseWebpackConfig.entry[name] = ["./build/dev-client"].concat( - baseWebpackConfig.entry[name] - ); -}); + baseWebpackConfig.entry[name] = ["./build/dev-client"].concat(baseWebpackConfig.entry[name]) +}) module.exports = merge(baseWebpackConfig, { module: { - rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }), }, // cheap-module-eval-source-map is faster for development devtool: "#cheap-module-eval-source-map", plugins: [ new webpack.DefinePlugin({ - "process.env": config.dev.env + "process.env": config.dev.env, }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), @@ -31,8 +29,8 @@ module.exports = merge(baseWebpackConfig, { new HtmlWebpackPlugin({ filename: "index.html", template: "index.html", - inject: true + inject: true, }), - new FriendlyErrorsPlugin() - ] -}); + new FriendlyErrorsPlugin(), + ], +}) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 048511fb..55075157 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -1,16 +1,17 @@ -"use strict"; -const path = require("path"); -const utils = require("./utils"); -const webpack = require("webpack"); -const config = require("../config"); -const merge = require("webpack-merge"); -const baseWebpackConfig = require("./webpack.base.conf"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); -const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); +"use strict" +const path = require("path") +const utils = require("./utils") +const webpack = require("webpack") +const config = require("../config") +const merge = require("webpack-merge") +const baseWebpackConfig = require("./webpack.base.conf") +const CopyWebpackPlugin = require("copy-webpack-plugin") +const HtmlWebpackPlugin = require("html-webpack-plugin") +const ExtractTextPlugin = require("extract-text-webpack-plugin") +const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin") +const PrerenderSpaPlugin = require("prerender-spa-plugin") -const env = config.build.env; +const env = config.build.env const webpackConfig = merge(baseWebpackConfig, { module: { @@ -76,7 +77,7 @@ const webpackConfig = merge(baseWebpackConfig, { module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0 - ); + ) }, }), // extract webpack runtime and module manifest to its own file in order to @@ -85,19 +86,17 @@ const webpackConfig = merge(baseWebpackConfig, { name: "manifest", chunks: ["vendor"], }), - // copy custom static assets - /*new CopyWebpackPlugin([ - { - from: path.resolve(__dirname, "../static"), - to: config.build.assetsSubDirectory, - ignore: [".*"] - } - ])*/ + new PrerenderSpaPlugin( + // Path to compiled app + path.join(__dirname, "../dist"), + // List of endpoints you wish to prerender + ["/"], + ), ], -}); +}) if (config.build.productionGzip) { - const CompressionWebpackPlugin = require("compression-webpack-plugin"); + const CompressionWebpackPlugin = require("compression-webpack-plugin") webpackConfig.plugins.push( new CompressionWebpackPlugin({ @@ -107,12 +106,12 @@ if (config.build.productionGzip) { threshold: 10240, minRatio: 0.8, }), - ); + ) } if (config.build.bundleAnalyzerReport) { - const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; - webpackConfig.plugins.push(new BundleAnalyzerPlugin()); + const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } -module.exports = webpackConfig; +module.exports = webpackConfig diff --git a/build/webpack.system.conf.js b/build/webpack.system.conf.js new file mode 100644 index 00000000..2844cf91 --- /dev/null +++ b/build/webpack.system.conf.js @@ -0,0 +1,74 @@ +const path = require("path") +const utils = require("./utils") +const webpack = require("webpack") +const config = require("../config") +const merge = require("webpack-merge") +const baseWebpackConfig = require("./webpack.base.conf") +const ExtractTextPlugin = require("extract-text-webpack-plugin") +const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin") + +const env = config.system.env + +baseWebpackConfig.entry = { + system: ["./src/system.js"], +} + +const webpackConfig = merge(baseWebpackConfig, { + module: { + rules: utils.styleLoaders({ + sourceMap: config.system.productionSourceMap, + extract: true, + }), + }, + devtool: config.system.productionSourceMap ? "#source-map" : false, + output: { + path: config.system.assetsRoot, + filename: utils.assetsSystemPath("[name].min.js"), + library: "[name]", + libraryTarget: "umd", + }, + plugins: [ + // http://vuejs.github.io/vue-loader/en/workflow/production.html + new webpack.DefinePlugin({ + "process.env": env, + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false, + }, + sourceMap: true, + }), + // extract css into its own file + new ExtractTextPlugin({ + filename: utils.assetsSystemPath("[name].min.css"), + }), + // Compress extracted CSS. We are using this plugin so that possible + // duplicated CSS from different components can be deduped. + new OptimizeCSSPlugin({ + cssProcessorOptions: { + safe: true, + }, + }), + ], +}) + +if (config.system.productionGzip) { + const CompressionWebpackPlugin = require("compression-webpack-plugin") + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + asset: "[path].gz[query]", + algorithm: "gzip", + test: new RegExp("\\.(" + config.system.productionGzipExtensions.join("|") + ")$"), + threshold: 10240, + minRatio: 0.8, + }), + ) +} + +if (config.system.bundleAnalyzerReport) { + const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) +} + +module.exports = webpackConfig diff --git a/config/dev.env.js b/config/dev.env.js index 20ded2b4..a3b16e45 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -1,7 +1,7 @@ -"use strict"; -const merge = require("webpack-merge"); -const prodEnv = require("./prod.env"); +"use strict" +const merge = require("webpack-merge") +const prodEnv = require("./prod.env") module.exports = merge(prodEnv, { - NODE_ENV: '"development"' -}); + NODE_ENV: '"development"', +}) diff --git a/config/index.js b/config/index.js index 7352c12c..b06d4195 100644 --- a/config/index.js +++ b/config/index.js @@ -1,8 +1,6 @@ -"use strict"; -// Template version: 1.1.3 +"use strict" // see http://vuejs-templates.github.io/webpack for documentation. - -const path = require("path"); +const path = require("path") module.exports = { build: { @@ -22,7 +20,17 @@ module.exports = { // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off - bundleAnalyzerReport: process.env.npm_config_report + bundleAnalyzerReport: process.env.npm_config_report, + }, + system: { + env: require("./prod.env"), + assetsRoot: path.resolve(__dirname, "../dist"), + assetsSubDirectory: "system", + assetsPublicPath: "/", + productionSourceMap: true, + productionGzip: false, + productionGzipExtensions: ["js", "css"], + bundleAnalyzerReport: process.env.npm_config_report, }, dev: { env: require("./dev.env"), @@ -36,6 +44,6 @@ module.exports = { // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. - cssSourceMap: false - } -}; + cssSourceMap: false, + }, +} diff --git a/config/prod.env.js b/config/prod.env.js index 1fee3245..0febd054 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,4 +1,4 @@ -"use strict"; +"use strict" module.exports = { - NODE_ENV: '"production"' -}; + NODE_ENV: '"production"', +} diff --git a/docs/components/Color.vue b/docs/components/Color.vue index 47317048..c54878b1 100644 --- a/docs/components/Color.vue +++ b/docs/components/Color.vue @@ -7,61 +7,61 @@ diff --git a/docs/components/FontSize.vue b/docs/components/FontSize.vue index ae646e24..bf09d3c4 100644 --- a/docs/components/FontSize.vue +++ b/docs/components/FontSize.vue @@ -7,49 +7,49 @@ diff --git a/docs/components/Spacing.vue b/docs/components/Spacing.vue index 7c5a79e9..c8c73ce4 100644 --- a/docs/components/Spacing.vue +++ b/docs/components/Spacing.vue @@ -1,7 +1,5 @@ diff --git a/docs/introduction.md b/docs/introduction.md index 0938b6af..3db4fbe0 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -25,6 +25,7 @@ GitHub. * A set of interconnected patterns & practices for you and your team. * Global design tokens that can be used inside any component. +* Design System can used as NPM dependency in another project. * Simple and sane SVG icon and @font-face defaults. * Live reloading for both the app and the system documentation. * Automatic generation of documentation _(the very page you’re looking at)._ @@ -53,7 +54,7 @@ GitHub. Clear labels that reflect the state of completion. * [Component QA](https://github.com/viljamis/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high. -* [Frequently Asked Questions](): +* Frequently Asked Questions: How to use icons, how to use font-face, etc. View diff --git a/docs/styleguide.helper.js b/docs/styleguide.helper.js index fac10299..b881965c 100644 --- a/docs/styleguide.helper.js +++ b/docs/styleguide.helper.js @@ -1,2 +1,8 @@ -import WebFontLoader from "../src/utils/webFontLoader"; -import statusLabels from "../src/utils/statusLabels"; +import Vue from "vue" + +import WebFontLoader from "../src/utils/webFontLoader" +import statusLabels from "../src/utils/docs/statusLabels" +import hidePrivate from "../src/utils/docs/hidePrivate" + +Vue.mixin(hidePrivate) +Vue.mixin(statusLabels) diff --git a/docs/styleguide.styles.css b/docs/styleguide.styles.css index d657361b..05acfcbf 100644 --- a/docs/styleguide.styles.css +++ b/docs/styleguide.styles.css @@ -30,16 +30,19 @@ div[class^="rsg--root"] { position: relative; } -section[class^="rsg--root"] > h1 a { +div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] { display: block; width: 100%; - font-weight: 700; - letter-spacing: -1px; padding-bottom: 1rem; margin: 3rem 0 2rem; border-bottom: 1px solid #e8e8e8; } +div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] a { + font-weight: 700; + letter-spacing: -1px; +} + @media (max-width: 400px) { section[class^="rsg--root"] > h1 a { margin: 1rem 0 1rem; @@ -48,9 +51,8 @@ section[class^="rsg--root"] > h1 a { } } -header[class^="rsg--header"] > h2 a, -h2[class^="rsg--h2"], -h2[class^="rsg--h2"] a { +h2[class^="rsg--heading"], +h2[class^="rsg--heading"] a { font-weight: 600 !important; letter-spacing: -0.5px; line-height: 1.3; @@ -92,8 +94,9 @@ div[class^="rsg--search"] input::-webkit-input-placeholder { color: rgba(150, 200, 255, 0.3); } -h1#tokens + div div[class^="rsg--preview"], -h1#tokens + article + div div[class^="rsg--preview"] { +#Color-container div[data-preview], +#FontSize-container div[data-preview], +#Spacing-container div[data-preview] { background: transparent; padding: 0; border: 0; @@ -115,18 +118,27 @@ thead[class^="rsg--tableHead"] { } } -h1#tokens + div .react-codemirror2, -h1#tokens + div div[class^="rsg--tabs"], -h1#tokens + article + div .react-codemirror2, -h1#tokens + article + div div[class^="rsg--tabs"], -h2#color div[class^="rsg--toolbar"], -h2#fontsize div[class^="rsg--toolbar"], -h2#spacing div[class^="rsg--toolbar"], -section h1[class^="rsg--root"] div[class^="rsg--toolbar"] { +#vue-design-system + div[class^="rsg--toolbar"], +#principles + div[class^="rsg--toolbar"], +#content + div[class^="rsg--toolbar"], +#guidelines + div[class^="rsg--toolbar"], +#tokens + div[class^="rsg--toolbar"], +#color + div[class^="rsg--toolbar"], +#fontsize + div[class^="rsg--toolbar"], +#spacing + div[class^="rsg--toolbar"], +#elements + div[class^="rsg--toolbar"], +#patterns + div[class^="rsg--toolbar"], +#templates + div[class^="rsg--toolbar"], +#Spacing-container div[class^="rsg--tabs"], +#Spacing-container .react-codemirror2, +#FontSize-container div[class^="rsg--tabs"], +#FontSize-container .react-codemirror2, +#Color-container div[class^="rsg--tabs"], +#Color-container .react-codemirror2 { display: none; } -section > h1 + article[class^="rsg--root"] { +section > div[class^="rsg--wrapper"] + article[class^="rsg--root"] { margin: 0 0 2.5rem !important; } @@ -142,13 +154,14 @@ div[class^="rsg--sidebar"] a:hover { a[class^="rsg--link"].button { width: 100%; text-align: center; + font-family: "Fira Sans", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; border: 1px solid #2389ee; background: #2389ee; border-radius: 3px; font-weight: 600; display: inline-block; - padding: 0.7rem 2rem; + padding: 0.85rem 2.1rem; margin: 0 0.2rem 0.4rem 0; color: #fff; } @@ -174,7 +187,7 @@ a[class^="rsg--link"].button:first-child { @media (min-width: 600px) { a[class^="rsg--link"].button { width: auto; - margin: 1.5rem 0.2rem 1rem 0; + margin: 1.5rem 0.4rem 1rem 0; } } @@ -184,8 +197,8 @@ a[class^="rsg--link"].button--secondary { color: #333; } -strong[class^="rsg--strong"] a[class^="rsg--link"] { - font-weight: 600; +strong a[class^="rsg--link"] { + font-weight: 600 !important; } /* Labels used for component statuses */ @@ -227,3 +240,16 @@ strong[class^="rsg--strong"] a[class^="rsg--link"] { background: #ed4b37; color: #fff; } + +.hide-private, +.hide-private + div, +a[href="#private-components"], +a[href="#private-components"] + ul { + display: none !important; +} + +/* Fix for Github button */ +iframe { + margin-right: 4px; + float: left; +} diff --git a/docs/styleguide.template.html b/docs/styleguide.template.html index c04fcb85..054d0208 100644 --- a/docs/styleguide.template.html +++ b/docs/styleguide.template.html @@ -37,45 +37,10 @@ - - Vue Design System
-
-

Vue Design System

-
-
-

Vue Design System is an open-source tool for prototyping UI design systems. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster.

The tool is built on top of Vue.js, Vue Styleguidist & Vue Webpack Template and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

-

Even though this is a system prototyping tool first and foremost, it has all the means to turn into your organization’s actual design system in the end.

Made by @viljamis and other contributors. Read more from the official docs on GitHub.

-

Features

-
    -
  • A set of interconnected patterns & practices for you and your team.
    • -
  • Global design tokens that can be used inside any component.
    • -
  • Simple and sane SVG icon and @font-face defaults.
    • -
  • Live reloading for both the app and the system documentation.
    • -
  • Automatic generation of documentation (the very page you’re looking at).
    • -
  • Documentation and the app logic are separated, so you can have public docs while the app itself is private.
    • -
  • Autoprefixing, SCSS, Webpack & CSS extraction included by default (Extend with lint-on-save & unit tests).
    • -
  • And more…
    • -
-

Get Started

- -

View Project on GitHub or View Documentation

-
-
-
diff --git a/index.html b/index.html index 23a274c4..b85f4155 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ - + - Design System + Vue Design System
diff --git a/package.json b/package.json index 64da94d3..f0746e47 100644 --- a/package.json +++ b/package.json @@ -1,88 +1,131 @@ { "name": "vue-design-system", - "version": "0.4.3", - "description": - "Vue Design System is an open-source tool for prototyping UI design systems.", + "version": "1.0.0", + "description": "Vue Design System is an open-source tool for prototyping UI design systems.", "author": "viljamis ", - "private": false, - "repository": { - "type": "git", - "url": "git+https://github.com/viljamis/vue-design-system.git" - }, - "keywords": ["vue", "design", "system"], + "main": "dist/system/system.min.js", "homepage": "https://vueds.com", + "private": false, "license": "MIT", "scripts": { "dev": "node build/dev-server.js", - "start": - "concurrently \"npm run styleguide\" \"onchange 'src/tokens/*.yml' -- theo src/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest src/assets/tokens\" \"theo src/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest src/assets/tokens\" \"npm run dev\"", - "build": "node build/build.js", + "start": "concurrently \"npm run styleguide\" \"onchange 'src/tokens/*.yml' -- npm run theo\" \"npm run theo\" \"npm run dev\"", + "build": "npm run theo && node build/build.js", + "build:system": "npm run theo && node build/build-system.js", "styleguide": "vue-styleguidist server", - "styleguide:build": "vue-styleguidist build", - "theo": - "theo src/tokens/tokens.yml --transform web --format map.scss,scss,json --dest src/tokens/compiled" + "styleguide:build": "npm run theo && vue-styleguidist build", + "theo": "theo src/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest src/assets/tokens", + "precommit": "pretty-quick --staged" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/viljamis/vue-design-system.git" + }, + "keywords": [ + "vue", + "design", + "system" + ], + "babel": { + "presets": [ + [ + "env", + { + "modules": false + } + ], + "stage-2" + ], + "plugins": [ + "transform-runtime" + ], + "env": { + "test": { + "presets": [ + "env", + "stage-2" + ], + "plugins": [ + "istanbul" + ] + } + } }, "dependencies": { + "ajv": "^6.1.1", "assemble": "^0.3.83", - "concurrently": "^3.5.0", + "concurrently": "^3.5.1", "grunt": "^0.4.5", - "lodash": "^4.17.4", + "lodash": "^4.17.5", "magic-string": "^0.22.4", - "onchange": "^3.2.1", + "onchange": "^3.3.0", + "prerender-spa-plugin": "^2.1.0", + "prettier": "^1.10.2", "readline": "^1.3.0", "styles": "^0.2.1", "tinycolor2": "^1.4.1", - "vue": "^2.5.2", + "vue": "^2.5.13", "vue-lodash": "^1.0.4", + "vue-meta": "^1.4.3", "vue-router": "^3.0.1", "vuex": "^2.4.1", "webfontloader": "^1.6.28" }, "devDependencies": { - "autoprefixer": "^7.1.2", + "autoprefixer": "^7.2.6", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", - "chalk": "^2.0.1", - "connect-history-api-fallback": "^1.3.0", - "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.28.0", + "chalk": "^2.3.1", + "connect-history-api-fallback": "^1.5.0", + "copy-webpack-plugin": "^4.4.1", + "css-loader": "^0.28.9", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^1.1.4", + "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^1.1.9", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "http-proxy-middleware": "^0.17.3", - "node-sass": "^4.5.3", - "opn": "^5.1.0", + "husky": "^0.14.3", + "node-sass": "^4.7.2", + "opn": "^5.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0", - "ora": "^1.2.0", + "ora": "^1.4.0", "portfinder": "^1.0.13", + "pretty-quick": "^1.4.1", "rimraf": "^2.6.0", "sass-loader": "^6.0.6", - "semver": "^5.3.0", + "semver": "^5.5.0", "shelljs": "^0.7.6", "style-loader": "^0.18.2", - "theo": "^6.0.0-beta.7", + "theo": "^6.0.0", "url-loader": "^0.5.8", - "vue-docgen-api": "^2.1.1", - "vue-loader": "^13.3.0", - "vue-style-loader": "^3.0.1", - "vue-styleguidist": "^1.3.1", - "vue-template-compiler": "^2.5.2", - "webpack": "^3.8.1", - "webpack-bundle-analyzer": "^2.9.0", - "webpack-dev-middleware": "^1.12.0", - "webpack-hot-middleware": "^2.18.2", - "webpack-merge": "^4.1.0" + "vue-docgen-api": "^2.2.4", + "vue-loader": "^13.7.1", + "vue-style-loader": "^3.1.2", + "vue-styleguidist": "^1.4.8", + "vue-template-compiler": "^2.5.13", + "webpack": "^3.11.0", + "webpack-bundle-analyzer": "^2.10.0", + "webpack-dev-middleware": "^1.12.2", + "webpack-hot-middleware": "^2.21.0", + "webpack-merge": "^4.1.1" }, "engines": { - "node": ">= 4.0.0", + "node": ">= 8.6.0", "npm": ">= 3.0.0" }, - "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"] + "browserslist": [ + "> 1%", + "last 2 versions", + "not Explorer > 0", + "not ExplorerMobile > 0", + "not BlackBerry > 0", + "not OperaMini all", + "not OperaMobile > 0" + ] } diff --git a/src/App.vue b/src/App.vue index c5cfa195..26cf9382 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,26 +6,27 @@ diff --git a/src/ExampleComponent.vue b/src/ExampleComponent.vue new file mode 100644 index 00000000..22ac5e3b --- /dev/null +++ b/src/ExampleComponent.vue @@ -0,0 +1,76 @@ + + + + + + + + ```jsx + + Docs section should have an example that is shown in the documentation. + + ``` + diff --git a/src/elements/Heading.vue b/src/elements/Heading.vue index a75c1d6b..dd62fc8c 100644 --- a/src/elements/Heading.vue +++ b/src/elements/Heading.vue @@ -17,55 +17,55 @@ export default { */ level: { type: String, - default: "h1" - } - } -}; + default: "h1", + }, + }, +} diff --git a/src/elements/SvgIcon.vue b/src/elements/SvgIcon.vue index 435e84b4..8e907e5b 100644 --- a/src/elements/SvgIcon.vue +++ b/src/elements/SvgIcon.vue @@ -4,8 +4,8 @@ diff --git a/src/elements/TextLink.vue b/src/elements/TextLink.vue index 3005234a..5d39775b 100644 --- a/src/elements/TextLink.vue +++ b/src/elements/TextLink.vue @@ -16,7 +16,7 @@ export default { */ href: { default: "#", - required: true + required: true, }, /** * Specifies where to display the linked URL. @@ -24,22 +24,22 @@ export default { */ target: { type: String, - default: "_self" - } - } -}; + default: "_self", + }, + }, +} diff --git a/src/elements/TextStyle.vue b/src/elements/TextStyle.vue index fadad6b2..2747b766 100644 --- a/src/elements/TextStyle.vue +++ b/src/elements/TextStyle.vue @@ -16,7 +16,7 @@ export default { */ type: { type: String, - default: "p" + default: "p", }, /** * Style variation to give additional meaning. @@ -24,42 +24,42 @@ export default { */ variation: { type: String, - default: "default" - } - } -}; + default: "default", + }, + }, +} diff --git a/src/elements/Wrapper.vue b/src/elements/Wrapper.vue index 4cc242ce..a0b26a76 100644 --- a/src/elements/Wrapper.vue +++ b/src/elements/Wrapper.vue @@ -16,21 +16,21 @@ export default { */ type: { type: String, - default: "div" - } - } -}; + default: "div", + }, + }, +} diff --git a/src/main.js b/src/main.js index c5330a41..094fc0c6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,32 +1,22 @@ -// VDS: The Vue build version to load with the `import` command +// Vue Design System: The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. -import Vue from "vue"; -import App from "./App"; -import router from "./router"; -import webFontLoader from "./utils/webFontLoader"; +import Vue from "vue" +import App from "@/App" +import router from "@/router" +import webFontLoader from "@/utils/webFontLoader" +import Meta from "vue-meta" -// VDS: Importing components globally -import Heading from "@/elements/Heading"; -import TextStyle from "@/elements/TextStyle"; -import TextLink from "@/elements/TextLink"; -import Wrapper from "@/elements/Wrapper"; -import SvgIcon from "@/elements/SvgIcon"; -import NavBar from "@/patterns/NavBar"; +// Vue Design System: Auto importing components globally +import DesignSystem from "@/system" +Vue.use(DesignSystem) +Vue.use(Meta) -// VDS: Registering components for local usage -Vue.component("heading", Heading); -Vue.component("text-style", TextStyle); -Vue.component("text-link", TextLink); -Vue.component("wrapper", Wrapper); -Vue.component("svg-icon", SvgIcon); -Vue.component("nav-bar", NavBar); - -Vue.config.productionTip = false; +Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: "#app", router, template: "", - components: { App } -}); + components: { App }, +}) diff --git a/src/patterns/NavBar.vue b/src/patterns/NavBar.vue index c3c11a18..e86f6d14 100644 --- a/src/patterns/NavBar.vue +++ b/src/patterns/NavBar.vue @@ -11,7 +11,7 @@ export default { name: "NavBar", model: { - prop: "active" + prop: "active", }, props: { /** @@ -19,68 +19,68 @@ export default { */ type: { type: String, - default: "nav" + default: "nav", }, /** * State which tab is active when initiated (using name of the component). */ active: { required: true, - type: String + type: String, }, /** * Menu items to be displayed on the nav bar. */ navItems: { required: true, - type: Array - } + type: Array, + }, }, computed: { localActive: { get() { - return this.active; + return this.active }, set(val) { - this.$emit("input", val); - } - } - } -}; + this.$emit("input", val) + }, + }, + }, +} diff --git a/src/router/index.js b/src/router/index.js index 432ecba3..71ae9bbe 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,21 +1,22 @@ -import Vue from "vue"; -import Router from "vue-router"; -import Index from "@/templates/Index"; -import NotFound from "@/templates/NotFound"; +import Vue from "vue" +import Router from "vue-router" +import Index from "@/templates/Index" +import NotFound from "@/templates/NotFound" -Vue.use(Router); +Vue.use(Router) export default new Router({ + mode: "history", routes: [ { path: "/", name: "Index", - component: Index + component: Index, }, { path: "*", name: "NotFound", - component: NotFound - } - ] -}); + component: NotFound, + }, + ], +}) diff --git a/src/styles/_functions.scss b/src/styles/_functions.scss index a6f185d5..b8bb9053 100644 --- a/src/styles/_functions.scss +++ b/src/styles/_functions.scss @@ -1,4 +1,3 @@ - /* GLOBAL FUNCTIONS --------------------------------------------- */ @@ -51,11 +50,11 @@ @function rem($value) { $unit: unit($value); - @if $unit == 'rem' { + @if $unit == "rem" { @return $value; - } @else if $unit == 'px' { + } @else if $unit == "px" { @return $value / $font-size-base * 1rem; - } @else if $unit == 'em' { + } @else if $unit == "em" { @return $unit / 1em * 1rem; } @else { @error 'Value must be in px, em, or rem.'; @@ -68,11 +67,11 @@ @function px($value) { $unit: unit($value); - @if $unit == 'px' { + @if $unit == "px" { @return $value; - } @else if $unit == 'em' { + } @else if $unit == "em" { @return ($value / 1em) * $font-size-base; - } @else if $unit == 'rem' { + } @else if $unit == "rem" { @return ($value / 1rem) * $font-size-base; } @else { @error 'Value must be in rem, em, or px.'; @@ -84,28 +83,28 @@ /// @param {Number} $map - The level of depth to get names from. /// @return {String} The list of names in the map. @function available-names($map, $level: 1) { - @if type-of($map) != 'map' { + @if type-of($map) != "map" { @return null; } - $output: ''; - $newline: '\A '; + $output: ""; + $newline: "\A "; @if $level == 1 { @each $key, $value in $map { - $output: $output + '#{$newline}- #{$key} #{available-names($value, $level + 1)}'; + $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}"; } } @else { - $output: '('; + $output: "("; $i: 1; @each $key, $value in $map { - $sep: if($i < length($map), ', ', ''); - $output: $output + '#{$key}#{$sep}#{available-names($value, $level + 1)}'; + $sep: if($i < length($map), ", ", ""); + $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}"; $i: $i + 1; } - $output: $output + ')'; + $output: $output + ")"; } @return $output; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 83f8b58e..3d9e6f1e 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,4 +1,3 @@ - /* GLOBAL MIXINS --------------------------------------------- */ @@ -16,7 +15,7 @@ */ @mixin responsive-font($responsive, $min, $max: false, $fallback: false) { $responsive-unitless: $responsive / ($responsive - $responsive + 1); - $dimension: if(unit($responsive) == 'vh', 'height', 'width'); + $dimension: if(unit($responsive) == "vh", "height", "width"); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#{$dimension}: #{$min-breakpoint}) { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index abbdd865..e24608e0 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,3 +1,2 @@ - /* GLOBAL VARIABLES --------------------------------------------- */ diff --git a/src/styles/styles.scss b/src/styles/styles.scss index bc1bdb8d..fdb23ee3 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,4 +1,3 @@ - /* GLOBAL: INCLUDES * * It is recommended to only include variables, diff --git a/src/system.js b/src/system.js new file mode 100644 index 00000000..3d57475a --- /dev/null +++ b/src/system.js @@ -0,0 +1,17 @@ +import instance from "@/utils/vueInstance" + +// Defines contexts to require +const contexts = [require.context("@/elements/", true, /\.vue$/), require.context("@/patterns/", true, /\.vue$/)] + +const components = [] +contexts.forEach(context => { + context.keys().forEach(key => components.push(context(key).default)) +}) + +export default { + install(Vue, options) { + components.forEach(c => Vue.component(c.name, c)) + }, +} + +export { instance } diff --git a/src/templates/Index.vue b/src/templates/Index.vue index ac92cc4d..5194a152 100644 --- a/src/templates/Index.vue +++ b/src/templates/Index.vue @@ -1,7 +1,7 @@