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/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,
+      };
+    },
+  }));