From 17652f7437ab72dbdedd604c51fe6a3ef33868f2 Mon Sep 17 00:00:00 2001 From: nidkil Date: Sat, 19 Jan 2019 22:31:57 +0100 Subject: [PATCH] feat(addon_storybooksource): added storybook addon storybooksource This Storysource Addon is used to show stories source in the Storyboard addon panel. Getting it to work with Vue CLI 3 is tricky as it abstracts away the webpack config. Added instructions how to do this. --- .gitignore | 3 + README.md | 76 ++++++++++-- config/storybook/addons.js | 1 + package-lock.json | 243 +++++++++++++++++++++++++++++++++++++ package.json | 8 +- vue.config.js | 28 ++++- 6 files changed, 340 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 185e663..7e64461 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,6 @@ yarn-error.log* *.njsproj *.sln *.sw* + +# Generated resolved webpack config file +webpack.config.inspect.js diff --git a/README.md b/README.md index 876a5ea..3e2b869 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,16 @@

Setting up Storybook with Vuetify

Learn how to set and use it the proper way

-[![Build status](https://travis-ci.com/nidkil/vuetify-with-storybook.svg?branch=master)](https://travis-ci.com/nidkil/vuetify-with-storybook) +[![Build Status](https://travis-ci.com/nidkil/vuetify-with-storybook.svg?branch=master)](https://travis-ci.com/nidkil/vuetify-with-storybook) [![Vue 2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![Vue CLI 3](https://img.shields.io/badge/vue%20cli-3-brightgreen.svg)](https://cli.vuejs.org/) [![Vuetify](https://img.shields.io/badge/vuetify-1.3.x-blue.svg)](https://http://vuetifyjs.com//) [![Storybook](https://img.shields.io/badge/storybook-4.1.x-ff69b4.svg)](https://storybook.js.org/) -[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) -[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues) +[![Commitizen Friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) + +[![License MIT](https://img.shields.io/badge/license-mit-yellow.svg)](https://opensource.org/licenses/MIT) +[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues) +[![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/kentcdodds/cross-env/blob/master/other/CODE_OF_CONDUCT.md) [![HitCount](http://hits.dwyl.com/nidkil/vuetify-with-storybook.svg)](http://hits.dwyl.com/dwyl/start-here) ## Introduction @@ -27,6 +30,7 @@ I struggled to get Storybook to work with Vuetify. In this repository I have doc - [Important](#important) - [Useful links](#useful-links) - [Create project manually](#create-project-manually) +- [Addons](#addons) - [Project setup](#project-setup) - [Misc](#misc) - [Roadmap](#roadmap) @@ -335,13 +339,13 @@ The following section describes the steps that need to be execute to manually cr [Go to Table of Contents](#toc) -## Addon +## Addons This section only describes those addon's that require special instructions to work correctly with Vue or Vuetify. -### addon-backgrounds +### Backgrounds Addon -The `addon-backgrounds` is used to change background colors inside the preview in Storybook. To get the background addon to work with Vuetify requires a hack to VApp, as it sets and controls the background color. To let the background addon control the background color we need to set the background of VApp to transparent. In `./config/storybook/config.js` change the following: +The Backgrounds Addon is used to change background colors inside the preview in Storybook. To get the background addon to work with Vuetify requires a hack to VApp, as it sets and controls the background color. To let the background addon control the background color we need to set the background of VApp to transparent. In `./config/storybook/config.js` change the following: ```js addDecorator(() => ({ @@ -359,9 +363,9 @@ addDecorator(() => ({ })) ``` -### addon-viewport +### Viewport Addon -The Viewport addon allows stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook. Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes and orientations. These media types can be added to the viewports of the Viewport addon to simplify testing how Vuetify components respond to different media breakpoints. +The Viewport Addon allows stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook. Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes and orientations. These media types can be added to the viewports of the Viewport addon to simplify testing how Vuetify components respond to different media breakpoints. Add the following to the `./config/storybook/config.js` file: @@ -417,6 +421,58 @@ The Viewport addon allows stories to be displayed in different sizes and layouts **Note** Vuetify MD viewport is set as default, so that it is selected when a story is opened. +### Storysource Addon + +This Storysource Addon is used to show stories source in the Storyboard addon panel. Getting it to work with Vue CLI 3 is tricky as it abstracts away the webpack config. The internal webpack config is maintained using webpack-chain . The library provides an abstraction over the raw webpack config, with the ability to define named loader rules and named plugins, and later "tap" into those rules and modify their options. To tweak the webpack config you need to add or modify the `vue.config.js` file that is located in the project root. Add the following to this file: + +```js +module.exports = { + chainWebpack: config => { + if (process.env.STORYBOOK && process.env.STORYBOOK.trim() === 'true') { + console.info('info => Updating webpack using chain-webpack') + config.module + .rule('addon-storysource') + .enforce() + .pre() + .test(/\.stories\.jsx?$/) + .use('@storybook/addon-storysource/loader') + .loader('@storybook/addon-storysource/loader') + .options({ + semi: false, + printWidth: 120, + singleQuote: true + }) + .end() + } + } +} +``` + +**NOTE** We only want the Storysource Addon to kick in when running Storybook so we have to make the rule conditional. To do this we will check if the environment variable `STORYBOOK` is set. If it is the rule is added, otherwise it is ignored. We will set the environment variable in the storybook scripts in the `package.json` file: + +``` +{ + "scripts": { + "storybook:build": "SET STORYBOOK=true & vue-cli-service storybook:build -c config/storybook", + "storybook:serve": "SET STORYBOOK=true & vue-cli-service storybook:serve -p 6006 -c config/storybook" + } +} +``` + +**PRO TIP** `vue-cli-service` exposes the `inspect` command for inspecting the resolved webpack config. The command will print the resolved webpack config to stdout, which also contains hints on how to access rules and plugins via chaining. Add the following entry to the `scripts` section in the `package.json` file to easily call the `inspect` command: + +``` +{ + "scripts": { + "webpack:inspect": "SET STORYBOOK=true & vue inspect > webpack.config.inspect.js" + } +} +``` + +This redirects the output to the `webpack.config.inspect.js` file for easier inspection. + +[Go to Table of Contents](#toc) + ## Project setup ``` @@ -531,8 +587,8 @@ Currently the following is on the roadmap. - [ ] Add links-addon - [ ] Add notes-addon - [ ] Add options-addon -- [ ] Add storysource-addon -- [ ] Add viewport-addon +- [x] Add storysource-addon(https://github.com/storybooks/storybook/tree/master/addons/storysource) +- [x] Add [viewport-addon](https://github.com/storybooks/storybook/tree/master/addons/viewportg) Any other suggestions? Please submit an issue. diff --git a/config/storybook/addons.js b/config/storybook/addons.js index 068359f..ec9a01e 100644 --- a/config/storybook/addons.js +++ b/config/storybook/addons.js @@ -1,4 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ +import '@storybook/addon-storysource/register' import '@storybook/addon-actions/register' import '@storybook/addon-links/register' import '@storybook/addon-backgrounds/register' diff --git a/package-lock.json b/package-lock.json index b780972..9938354 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1436,6 +1436,31 @@ "prop-types": "^15.6.2" } }, + "@storybook/addon-storysource": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-4.1.7.tgz", + "integrity": "sha512-Y3lca7x37ENCREN35AtOUJz9mYiXygmxQbGSTUxprgs+68rU8ditT9YhZorIUtVIIrsZ295t3YaKZBanaCnLUA==", + "dev": true, + "requires": { + "@storybook/addons": "4.1.7", + "@storybook/components": "4.1.7", + "core-js": "^2.5.7", + "estraverse": "^4.2.0", + "loader-utils": "^1.1.0", + "prettier": "^1.14.3", + "prop-types": "^15.6.2", + "react-syntax-highlighter": "^10.0.0", + "regenerator-runtime": "^0.12.1" + }, + "dependencies": { + "prettier": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.3.tgz", + "integrity": "sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==", + "dev": true + } + } + }, "@storybook/addon-viewport": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-4.1.7.tgz", @@ -4698,6 +4723,24 @@ "supports-color": "^5.3.0" } }, + "character-entities": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz", + "integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ==", + "dev": true + }, + "character-entities-legacy": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz", + "integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA==", + "dev": true + }, + "character-reference-invalid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz", + "integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ==", + "dev": true + }, "chardet": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", @@ -4944,6 +4987,18 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "dev": true, + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "clipboardy": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz", @@ -5119,6 +5174,15 @@ "delayed-stream": "~1.0.0" } }, + "comma-separated-tokens": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz", + "integrity": "sha512-Cg90/fcK93n0ecgYTAz1jaA3zvnQ0ExlmKY1rdbyHqAx6BHxwoJc+J7HDu0iuQ7ixEs1qaa+WyQ6oeuBpYP1iA==", + "dev": true, + "requires": { + "trim": "0.0.1" + } + }, "commander": { "version": "2.17.1", "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", @@ -6931,6 +6995,13 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "dev": true, + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -8247,6 +8318,15 @@ "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", "dev": true }, + "fault": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz", + "integrity": "sha512-o2eo/X2syzzERAtN5LcGbiVQ0WwZSlN3qLtadwAz3X8Bu+XWD16dja/KMsjZLiQr+BLGPDnHGkc4yUJf1Xpkpw==", + "dev": true, + "requires": { + "format": "^0.2.2" + } + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -8595,6 +8675,12 @@ "mime-types": "^2.1.12" } }, + "format": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", + "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", + "dev": true + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -9380,6 +9466,16 @@ "slash": "^1.0.0" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "dev": true, + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "got": { "version": "9.5.1", "resolved": "https://registry.npmjs.org/got/-/got-9.5.1.tgz", @@ -9589,6 +9685,24 @@ "minimalistic-assert": "^1.0.1" } }, + "hast-util-parse-selector": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz", + "integrity": "sha512-Xyh0v+nHmQvrOqop2Jqd8gOdyQtE8sIP9IQf7mlVDqp924W4w/8Liuguk2L2qei9hARnQSG2m+wAOCxM7npJVw==", + "dev": true + }, + "hastscript": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.0.0.tgz", + "integrity": "sha512-xJtuJ8D42Xtq5yJrnDg/KAIxl2cXBXKoiIJwmWX9XMf8113qHTGl/Bf7jEsxmENJ4w6q4Tfl8s/Y6mEZo8x8qw==", + "dev": true, + "requires": { + "comma-separated-tokens": "^1.0.0", + "hast-util-parse-selector": "^2.2.0", + "property-information": "^5.0.1", + "space-separated-tokens": "^1.0.0" + } + }, "he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -9601,6 +9715,12 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=", + "dev": true + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -10271,6 +10391,22 @@ } } }, + "is-alphabetical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.2.tgz", + "integrity": "sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==", + "dev": true + }, + "is-alphanumerical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz", + "integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==", + "dev": true, + "requires": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + } + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -10356,6 +10492,12 @@ "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=", "dev": true }, + "is-decimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz", + "integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg==", + "dev": true + }, "is-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", @@ -10444,6 +10586,12 @@ "is-extglob": "^2.1.1" } }, + "is-hexadecimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz", + "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==", + "dev": true + }, "is-installed-globally": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz", @@ -12656,6 +12804,16 @@ "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "dev": true }, + "lowlight": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", + "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", + "dev": true, + "requires": { + "fault": "^1.0.2", + "highlight.js": "~9.12.0" + } + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -14143,6 +14301,20 @@ "safe-buffer": "^5.1.1" } }, + "parse-entities": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.0.tgz", + "integrity": "sha512-XXtDdOPLSB0sHecbEapQi6/58U/ODj/KWfIXmmMCJF/eRn8laX6LZbOyioMoETOOJoWRW8/qTSl5VQkUIfKM5g==", + "dev": true, + "requires": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, "parse-github-repo-url": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz", @@ -15006,6 +15178,15 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "prismjs": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", + "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==", + "dev": true, + "requires": { + "clipboard": "^2.0.0" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -15082,6 +15263,15 @@ "object-assign": "^4.1.1" } }, + "property-information": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz", + "integrity": "sha512-nAtBDVeSwFM3Ot/YxT7s4NqZmqXI7lLzf46BThvotEtYf2uk2yH0ACYuWQkJ7gxKs49PPtKVY0UlDGkyN9aJlw==", + "dev": true, + "requires": { + "xtend": "^4.0.1" + } + }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -15578,6 +15768,19 @@ "prop-types": "^15.5.4" } }, + "react-syntax-highlighter": { + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.1.2.tgz", + "integrity": "sha512-p/xy9rb13Cr+SaErdOvJWTYH8moDrlszv4LPDd314pk5PmT6OTWQYFy66tBZFWhM2xk6bh4BttTU9SYje5c75g==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "highlight.js": "~9.12.0", + "lowlight": "~1.9.1", + "prismjs": "^1.8.4", + "refractor": "^2.4.1" + } + }, "react-textarea-autosize": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-7.1.0.tgz", @@ -15749,6 +15952,17 @@ "symbol-observable": "^1.2.0" } }, + "refractor": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz", + "integrity": "sha512-AMNEGkhaXfhoa0/0mW0bHdfizDJnuHDK29/D5oQaKICf6DALQ+kDEHW/36oDHCdfva4XrZ+cdMhRvPsTI4OIjA==", + "dev": true, + "requires": { + "hastscript": "^5.0.0", + "parse-entities": "^1.1.2", + "prismjs": "~1.15.0" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -16480,6 +16694,13 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "dev": true, + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -17006,6 +17227,15 @@ "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "dev": true }, + "space-separated-tokens": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz", + "integrity": "sha512-G3jprCEw+xFEs0ORweLmblJ3XLymGGr6hxZYTYZjIlvDti9vOBUjRQa1Rzjt012aRrocKstHwdNi+F7HguPsEA==", + "dev": true, + "requires": { + "trim": "0.0.1" + } + }, "spawn-promise": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/spawn-promise/-/spawn-promise-0.1.8.tgz", @@ -17990,6 +18220,13 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-emitter": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", + "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", + "dev": true, + "optional": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -18113,6 +18350,12 @@ "punycode": "^2.1.0" } }, + "trim": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", + "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", + "dev": true + }, "trim-newlines": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz", diff --git a/package.json b/package.json index 1066273..e9753db 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,13 @@ "lint": "vue-cli-service lint --no-fix --format codeframe src tests ./config/storybook", "lint:fix": "vue-cli-service lint --fix --format codeframe src tests ./config/storybook", "lint:error-only": "vue-cli-service lint --quiet --format codeframe src tests ./config/storybook", - "storybook:build": "vue-cli-service storybook:build -c config/storybook", - "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook", + "storybook:build": "SET STORYBOOK=true & vue-cli-service storybook:build -c config/storybook", + "storybook:serve": "SET STORYBOOK=true & vue-cli-service storybook:serve -p 6006 -c config/storybook", "test:unit": "vue-cli-service test:unit --verbose", "readme:toc": "markdown-toc README.md -i --maxdepth=2 --bullets=-", "release": "nodenv --env ./.env.local --exec release-it --verbose", - "chk-pkg-upd": "ncu" + "chk-pkg-upd": "ncu", + "webpack:inspect": "SET STORYBOOK=true & vue inspect > webpack.config.inspect.js" }, "dependencies": { "vue": "^2.5.21", @@ -50,6 +51,7 @@ "@storybook/addon-actions": "^4.1.0", "@storybook/addon-backgrounds": "^4.1.7", "@storybook/addon-links": "^4.1.0", + "@storybook/addon-storysource": "^4.1.7", "@storybook/addon-viewport": "^4.1.7", "@vue/cli-plugin-babel": "^3.0.4", "@vue/cli-plugin-eslint": "^3.0.4", diff --git a/vue.config.js b/vue.config.js index 0d16f0f..57dc4b6 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,6 +1,22 @@ -const path = require('path') -module.exports = { - chainWebpack: config => { - config.resolve.alias.set('@tst', path.resolve(__dirname, 'tests')) - } -} +const path = require('path') +module.exports = { + chainWebpack: config => { + config.resolve.alias.set('@tst', path.resolve(__dirname, 'tests')) + if (process.env.STORYBOOK && process.env.STORYBOOK.trim() === 'true') { + console.info('info => Updating webpack using chain-webpack') + config.module + .rule('addon-storysource') + .enforce() + .pre() + .test(/\.stories\.jsx?$/) + .use('@storybook/addon-storysource/loader') + .loader('@storybook/addon-storysource/loader') + .options({ + semi: false, + printWidth: 120, + singleQuote: true + }) + .end() + } + } +}