Storybook Example (#11494)

* 🎉 Working example of storybook and vue

* remove the older storybook version

* build storybook after client was built

* move storybook:build to npm-postintall

* remove automatically created eslint-disables + fix comment

* add back needed eslint :P + add @storybook/vue as devDep

* fix packagelock

* fix lint

* auto fixed lints + ignore dist/ node_modules/

* update package-lock.json

* add postbuild and readme

* add back customize config

* fix readme

* fix links in readme

* revert postbuild command

website/client/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   extends: [
     'habitrpg/lib/vue',
   ],
+  ignorePatterns: ['dist/', 'node_modules/'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

website/client/README.md

@@ -1,4 +1,4 @@
-# new_client
+# Habitica Client
 
 ## Project setup
 ```
@@ -27,3 +27,31 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## Storybook
+
+Storybook is mainly used while working on UI-Components to see changes faster instead of using the website.
+
+### Start Storybook
+
+```
+npm run storybook:serve
+```
+
+This will start the storybook process, every `*.stories.js`-File is searched and added to the storybook overview.
+
+### Storybook Worklow
+
+Usually when you working on `component-name.vue` you also create a `component-name.stories.js` file.
+
+Example of the stories structure - [Storybook Docs][StorybookDocsExample] - [CountBadge][CountBadgeExample]
+
+[StorybookDocsExample]: https://storybook.js.org/docs/guides/guide-vue/#step-4-write-your-stories
+[CountBadgeExample]: src/components/ui/countBadge.stories.js
+
+Each function or example of this component will be put after `storiesOf('Your Component', module)`,
+in a separate `.add('function of component', ...`
+
+### Storybook Build
+
+After each client build, storybook build is also triggered and will be available in `dist/storybook`

website/client/config/storybook/addons.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';

website/client/config/storybook/config.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { configure } from '@storybook/vue';
+import '../../src/assets/scss/index.scss';
+
+const req = require.context('../../src', true, /.stories.js$/);
+
+function loadStories () {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

website/client/package.json

@@ -5,10 +5,12 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
     "lint": "vue-cli-service lint .",
     "lint-no-fix": "vue-cli-service lint --no-fix .",
-    "postinstall": "node ./scripts/npm-postinstall.js"
+    "postinstall": "node ./scripts/npm-postinstall.js",
+    "storybook:build": "vue-cli-service storybook:build -c config/storybook -o dist/storybook",
+    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
+    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js"
   },
   "dependencies": {
     "@vue/cli-plugin-babel": "^4.1.1",
@@ -16,6 +18,11 @@
     "@vue/cli-plugin-router": "^4.1.1",
     "@vue/cli-plugin-unit-mocha": "^4.1.1",
     "@vue/cli-service": "^4.1.1",
+    "@storybook/addon-actions": "^5.0.0",
+    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/addon-links": "^5.0.0",
+    "@storybook/addon-notes": "^5.0.0",
+    "@storybook/vue": "^5.2.5",
     "@vue/test-utils": "1.0.0-beta.29",
     "amplitude-js": "^5.7.0",
     "axios": "^0.19.0",
@@ -47,6 +54,7 @@
     "uuid": "^3.3.3",
     "validator": "^11.1.0",
     "vue": "^2.6.10",
+    "vue-cli-plugin-storybook": "^0.6.1",
     "vue-mugen-scroll": "^0.2.6",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.6.10",

website/client/scripts/npm-postinstall.js

@@ -6,4 +6,8 @@ if (process.env.NODE_ENV === 'production') {
   execSync('npm run build', {
     stdio: 'inherit',
   });
+
+  execSync('npm run storybook:build', {
+    stdio: 'inherit',
+  });
 }

website/client/src/components/achievements/streak.vue

@@ -30,10 +30,10 @@
         </button>
         <div class="checkbox">
           <input
+            id="user-preferences-suppressModals-streak"
             v-model="user.preferences.suppressModals.streak"
             type="checkbox"
             @change="suppressModals"
-            id="user-preferences-suppressModals-streak"
           >
           <label for="user-preferences-suppressModals-streak">{{ $t('dontShowAgain') }}</label>
         </div>

website/client/src/components/challenges/challengeDetail.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="row">
     <challenge-modal @updatedChallenge="updatedChallenge" />
-    <leave-challenge-modal :challenge-id="challenge._id" @update-challenge="updateChallenge" />
+    <leave-challenge-modal
+      :challenge-id="challenge._id"
+      @update-challenge="updateChallenge"
+    />
     <close-challenge-modal
       :members="members"
       :challenge-id="challenge._id"

website/client/src/components/ui/countBadge.stories.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+
+import CountBadge from './countBadge.vue';
+
+storiesOf('Count Badge', module)
+  .add('simple', () => ({
+    components: { CountBadge },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <count-badge :count="2" :show="true"></count-badge>
+      </div>
+    `,
+  }))
+  .add('bind count', () => ({
+    components: { CountBadge },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <count-badge :count="count" :show="true"></count-badge>
+      </div>
+    `,
+    data () {
+      return {
+        count: 3,
+      };
+    },
+  }));

website/server/middlewares/static.js

@@ -18,6 +18,9 @@ export default function staticMiddleware (expressApp) {
   // Hash their file names and cache the entire /static folder
   expressApp.use('/static', express.static(`${BASE_DIR}/website/client/dist/static`));
 
+  // Storybook
+  expressApp.use('/storybook', express.static(`${BASE_DIR}/website/client/dist/storybook`));
+
   // Apidoc
   expressApp.use('/apidoc', express.static(`${BASE_DIR}/apidoc_build`));
 }