Support vue 2.6 and 2.7 (#503)

This cherry-picks some commits from @heykc's PR #469, but puts them on top of #502, so that we can have multiple versions of vue examples that don't conflict with each other in the monorepo, which was one of the challenges in the original PR.

This also attempts to read the version of `vue` from the user's package.json, determine whether it's 2.6 or 2.7, and use the appropriate vite plugin, as suggested by @Djaler.

.github/workflows/ci.yml

@@ -72,7 +72,7 @@ jobs:
       matrix:
         node-version: [16.x]
         os: [ubuntu-latest, windows-latest, macOS-latest]
-        framework: [lit-ts, preact, react, react-18, react-ts, svelte, vue, workspaces]
+        framework: [lit-ts, preact, react, react-18, react-ts, svelte, vue2.6, vue2.7, vue3, workspaces]
 
     steps:
       - uses: actions/checkout@v2

examples/lit-ts/yarn.lock

@@ -2614,6 +2614,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/preact/yarn.lock

@@ -2637,6 +2637,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/react-18/yarn.lock

@@ -2693,6 +2693,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/react-ts/yarn.lock

@@ -2712,6 +2712,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/react/yarn.lock

@@ -2718,6 +2718,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/svelte/yarn.lock

@@ -2623,6 +2623,7 @@ __metadata:
     "@storybook/core-common": ^6.4.3
     "@storybook/mdx1-csf": ^0.0.4
     "@storybook/node-logger": ^6.4.3
+    "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2

examples/vue2.6/.storybook/main.cjs

@@ -0,0 +1,35 @@
+const { resolve } = require('path');
+const { mergeConfig } = require('vite');
+
+module.exports = {
+  framework: '@storybook/vue',
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+    // we don't want to muck up the data when we're working on the builder
+    disableTelemetry: true,
+  },
+  features: {
+    previewMdx2: true,
+  },
+  async viteFinal(config, { configType }) {
+    // Demonstrates use of mergeConfig and resolve.alias as an array
+    return mergeConfig(config, {
+      resolve: {
+        alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }],
+      },
+      optimizeDeps: {
+        include: [
+          '@storybook/vue/dist/esm/client/preview/config',
+          '@storybook/vue/dist/esm/client/docs/config',
+          '@storybook/addon-docs/preview.js',
+          '@storybook/addon-actions/preview.js',
+          '@storybook/addon-backgrounds/preview.js',
+          '@storybook/addon-measure/preview.js',
+          '@storybook/addon-outline/preview.js',
+        ],
+      },
+    });
+  },
+};

examples/vue2.6/README.md

@@ -0,0 +1,5 @@
+# Vue
+
+This example demonstrates storybook in a Vue 2 project.
+
+This example also demonstrates MDX2 support.

examples/vue2.6/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "example-vue2.6",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "storybook": "start-storybook --port 6011",
+    "build-storybook": "build-storybook",
+    "preview-storybook": "http-server storybook-static --port 6011 --silent",
+    "test": "wait-on tcp:6011 && test-storybook --url 'http://localhost:6011'",
+    "test-ci": "run-p --race test preview-storybook"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "vue": "2.6.x"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/builder-vite": "portal:../../packages/builder-vite",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/test-runner": "0.1.0",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/vue": "^6.5.9",
+    "http-server": "^14.1.0",
+    "jest": "^27.5.1",
+    "npm-run-all": "^4.1.5",
+    "vite": "^3.0.0-beta.9",
+    "vite-plugin-vue2": "^2.0.2",
+    "vue-loader": "^15.0.0",
+    "vue-template-compiler": "^2.7.10",
+    "wait-on": "^6.0.1"
+  }
+}

examples/vue2.6/stories/Button.stories.js

@@ -0,0 +1,43 @@
+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 }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyButton },
+  props: Object.keys(argTypes),
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: '<my-button 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',
+};

examples/vue2.6/stories/Button.vue

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

examples/vue2.6/stories/EnvironmentVariables.stories.js

@@ -0,0 +1,18 @@
+import EnvVars from './EnvironmentVariables.vue';
+
+export default {
+  title: 'Environment Variables',
+  component: EnvVars,
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { EnvVars },
+  props: Object.keys(argTypes),
+  template: '<env-vars v-bind="$props" />',
+});
+
+export const Info = Template.bind({});
+Info.args = {
+  dynamic: import.meta.env.VITE_ENV_VAR,
+};

examples/vue2.6/stories/Header.stories.js

@@ -0,0 +1,24 @@
+import MyHeader from './Header.vue';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyHeader },
+  props: Object.keys(argTypes),
+  // Then, the spread values can be accessed directly in the template
+  template: '<my-header v-bind="$props" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  user: null,
+};

examples/vue2.6/stories/Header.vue

@@ -0,0 +1,38 @@
+<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" @click="$emit('logout')" label="Log out" v-if="user" />
+        <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
+        <my-button primary size="small" @click="$emit('createAccount')" 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,
+    },
+  },
+};
+</script>

examples/vue2.6/stories/Page.stories.js

@@ -0,0 +1,25 @@
+import MyPage from './Page.vue';
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Example/Page',
+  component: MyPage,
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyPage },
+  props: Object.keys(argTypes),
+  // Then, those values can be accessed directly in the template
+  template: '<my-page v-bind="$props" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  ...HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  ...HeaderStories.LoggedOut.args,
+};