Install Storybook. farmOS#410

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -12,7 +12,9 @@
     "lint-files": "node --eval 'process.argv.reduce((acc, cur) => `${acc} ${cur}`, ``)' | eslint --color",
     "build:web": "node build/build.js",
     "build:native": "node build/build.js --native",
-    "test": "mocha-webpack --webpack-config build/webpack.test.conf.js --require test-setup.js 'src/**/*.test.js' --watch"
+    "test": "mocha-webpack --webpack-config build/webpack.test.conf.js --require test-setup.js 'src/**/*.test.js' --watch",
+    "storybook": "NODE_PATH=src start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@turf/turf": "^5.1.6",
@@ -39,6 +41,10 @@
     "@babel/plugin-syntax-jsx": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-essentials": "^6.0.21",
+    "@storybook/addon-links": "^6.0.21",
+    "@storybook/vue": "^6.0.21",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
     "@vue/test-utils": "^1.0.0-beta.30",
@@ -50,6 +56,7 @@
     "chalk": "^2.4.2",
     "commander": "^2.20.3",
     "copy-webpack-plugin": "^6.0.3",
+    "core-js": "^3.0.1",
     "css-loader": "^3.2.1",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
@@ -77,6 +84,7 @@
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.6",
     "postcss-url": "^7.3.2",
+    "react-is": "^16.13.1",
     "rimraf": "^2.7.1",
     "semver": "^5.7.1",
     "shelljs": "^0.7.6",

src/stories/Button.stories.js

@@ -0,0 +1,39 @@
+import MyButton from './Button.vue';
+
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyButton },
+  template: '<my-button @onClick="onClick" v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

src/stories/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'storybook-button': true,
+        'storybook-button--primary': this.primary,
+        'storybook-button--secondary': !this.primary,
+        [`storybook-button--${this.size}`]: true,
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

src/stories/Header.stories.js

@@ -0,0 +1,21 @@
+import MyHeader from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyHeader },
+  template:
+    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

src/stories/Header.vue

@@ -0,0 +1,59 @@
+<template>
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
+        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
+        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import './header.css';
+import MyButton from './Button.vue';
+
+export default {
+  name: 'my-header',
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+
+  methods: {
+    onLogin() {
+      this.$emit('onLogin');
+    },
+    onLogout() {
+      this.$emit('onLogout');
+    },
+    onCreateAccount() {
+      this.$emit('onCreateAccount');
+    },
+  },
+};
+</script>