@storybook/vue3 7.0.0-alpha.5 → 7.0.0-alpha.50

package/template/components/Form.vue

@@ -0,0 +1,44 @@
+<template>
+  <form id="interaction-test-form" @submit.prevent="onSubmit">
+    <label>
+      Enter Value
+      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+    </label>
+    <button type="submit">Submit</button>
+    <p v-if="complete">Completed!!</p>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'my-form',
+
+  props: {
+    onSuccess: {
+      type: Function,
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      complete: false,
+    };
+  },
+
+  methods: {
+    setValue(event) {
+      this.value = event.target.value;
+    },
+    onSubmit() {
+      this.onSuccess(this.value);
+      setTimeout(() => {
+        this.complete = true;
+      }, 500);
+      setTimeout(() => {
+        this.complete = false;
+      }, 1500);
+    },
+  },
+};
+</script>

package/template/components/Html.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-html="content"></div>
+</template>
+
+<script>
+
+export default {
+  name: 'my-html',
+
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+
+
+  setup() { },
+};
+</script>

package/template/components/Pre.vue

@@ -0,0 +1,34 @@
+<template>
+  <pre data-testid="pre" :style="style">{{ finalText }}</pre>
+</template>
+
+<script>
+import { reactive, computed } from 'vue';
+
+export default {
+  name: 'my-pre',
+
+  props: {
+    // deepscan-disable-next-line
+    style: {
+      type: Object,
+    },
+    object: {
+      type: Object,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    props = reactive(props);
+    return {
+      finalText: computed(() =>
+        props.object ? JSON.stringify(props.object, null, 2) : props.text
+      ),
+    };
+  },
+};
+</script>

package/template/components/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/template/components/index.js

@@ -0,0 +1,9 @@
+import globalThis from 'global';
+
+import Button from './Button.vue';
+import Pre from './Pre.vue';
+import Form from './Form.vue';
+import Html from './Html.vue';
+
+globalThis.Components = { Button, Pre, Form, Html };
+globalThis.storybookRenderer = 'vue3';

package/template/stories/GlobalUsage.stories.js

@@ -0,0 +1,29 @@
+import GlobalUsage from './GlobalUsage.vue';
+
+export default {
+  component: GlobalUsage,
+  argTypes: {},
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: { GlobalUsage },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      return { args };
+    },
+    // And then the `args` are bound to your component with `v-bind="args"`
+    template: '<global-usage v-bind="args" />',
+  }),
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Globally Defined',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Globally Defined',
+  },
+};

package/template/stories/GlobalUsage.vue

@@ -0,0 +1,3 @@
+<template>
+  <global-button v-bind="$props" />
+</template>

package/template/stories/OverrideArgs.stories.js

@@ -0,0 +1,43 @@
+import OverrideArgs from './OverrideArgs.vue';
+
+// Emulate something that isn't serializable
+const icons = {
+  Primary: {
+    template: '<span>Primary Icon</span>',
+  },
+  Secondary: {
+    template: '<span>Secondary Icon</span>',
+  },
+};
+
+export default {
+  component: OverrideArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(icons),
+      },
+      defaultValue: 'Primary',
+    },
+  },
+  render: (args) => {
+    // Individual properties can be overridden by spreading the args
+    // and the replacing the key-values that need to be updated
+    args = { ...args, icon: icons[args.icon] }; // eslint-disable-line no-param-reassign
+    return {
+      // Components used in your story `template` are defined in the `components` object
+      components: { OverrideArgs },
+      // Updated `args` need to be mapped into the template through the `setup()` method
+      setup() {
+        return { args };
+      },
+      // And then the `args` are bound to your component with `v-bind="args"`
+      template: '<override-args v-bind="args" />',
+    };
+  },
+};
+
+export const TestOne = {};

package/template/stories/OverrideArgs.vue

@@ -0,0 +1,40 @@
+<template>
+  <button type="button" :class="classes" :style="style">
+    <!-- You can use <component /> with `:is` when passing a component as a prop -->
+    <component :is="icon" />
+  </button>
+</template>
+
+<script lang="typescript">
+import { h, computed, reactive } from 'vue';
+
+export default {
+  name: 'override-args',
+
+  props: {
+    icon: {
+      type: Object,
+      required: true,
+    },
+
+    backgroundColor: {
+      type: String
+    },
+  },
+
+  // @ts-expect-error (Converted from ts-ignore)
+  setup(props, { emit }) {
+    const classes = {
+      'storybook-button': true,
+      'storybook-button--primary': true,
+      'storybook-button--large': true,
+    };
+    const style = computed(() => ({
+      backgroundColor: props.backgroundColor,
+    }));
+
+    // Notice that `icon` prop component is still passed through even though it isn't mapped
+    return { classes, style, }
+  },
+};
+</script>

package/template/stories/decorators.stories.js

@@ -0,0 +1,66 @@
+import globalThis from 'global';
+import { h } from 'vue';
+
+const { Button, Pre } = globalThis.Components;
+
+export default {
+  component: Button,
+};
+
+export const ComponentTemplate = {
+  args: { label: 'With component' },
+  decorators: [
+    () => ({
+      components: {
+        Pre,
+      },
+      template: `
+        <Pre text="decorator" />
+        <story/>
+      `,
+    }),
+  ],
+};
+
+export const SimpleTemplate = {
+  args: { label: 'With border' },
+  decorators: [
+    () => ({
+      template: `
+        <div style="border: 5px solid red;">
+          <story/>
+        </div>
+        `,
+    }),
+  ],
+};
+
+export const VueWrapper = {
+  args: { label: 'With Vue wrapper' },
+  decorators: [
+    (storyFn) => {
+      // Call the `storyFn` to receive a component that Vue can render
+      const story = storyFn();
+      // Vue 3 "Functional" component as decorator
+      return () => {
+        return h('div', { style: 'border: 2px solid blue' }, h(story));
+      };
+    },
+  ],
+};
+
+export const DynamicWrapper = {
+  args: { label: 'With dynamic wrapper', primary: true },
+  argTypes: {
+    // Number type is detected, but we still want to constrain the range from 1-6
+    level: { control: { type: 'range', min: 1, max: 6 } },
+  },
+  decorators: [
+    (storyFn, { args }) => ({
+      template: `<div :style="{ borderWidth: level, borderColor: 'red', borderStyle: 'solid' }"><story /></div>`,
+      data() {
+        return { level: `${args.level}px` };
+      },
+    }),
+  ],
+};

package/template/stories/preview.js

@@ -0,0 +1,13 @@
+import globalThis from 'global';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { setup } from '@storybook/vue3';
+
+// TODO: I'd like to be able to export rather than imperatively calling an imported function
+// export const setup = (app) => {
+//   app.component('GlobalButton', Button);
+// };
+
+setup((app) => {
+  // This adds a component that can be used globally in stories
+  app.component('GlobalButton', globalThis.Components.Button);
+});

package/template/stories/vue3-mdx.stories.mdx

@@ -0,0 +1,46 @@
+import globalThis from 'global';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+<Meta title="stories/renderers/vue3/vue3-mdx" />
+
+# Vue3-specific MDX Stories
+
+export const Button = globalThis.Components.Button;
+
+export const Template = (args, { argTypes }) => ({
+  components: { MyButton: Button },
+  template: '<my-button v-bind="args" />',
+  setup() {
+    return { args };
+  },
+});
+
+## Primary
+
+<Canvas>
+  <Story name="Primary">
+    {{
+      components: { MyButton: Button },
+      template: '<my-button :primary="true" label="Primary button" />',
+    }}
+  </Story>
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story name="Secondary">
+    {{
+      components: { MyButton: Button },
+      template: '<my-button :primary="false" label="Secondary button" />',
+    }}
+  </Story>
+</Canvas>
+
+## From template
+
+<Canvas>
+  <Story name="From Template" args={{ label: 'From template' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/config.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  parameters: true,
-  argTypesEnhancers: true
-};
-Object.defineProperty(exports, "argTypesEnhancers", {
-  enumerable: true,
-  get: function () {
-    return _config.argTypesEnhancers;
-  }
-});
-exports.parameters = void 0;
-
-var _config = require("./docs/config");
-
-var _config2 = require("./preview/config");
-
-Object.keys(_config2).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _config2[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _config2[key];
-    }
-  });
-});
-const parameters = Object.assign({
-  framework: 'vue3'
-}, _config.parameters);
-exports.parameters = parameters;

package/dist/cjs/docs/config.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parameters = exports.argTypesEnhancers = void 0;
-
-var _docsTools = require("@storybook/docs-tools");
-
-var _extractArgTypes = require("./extractArgTypes");
-
-const parameters = {
-  docs: {
-    inlineStories: true,
-    extractArgTypes: _extractArgTypes.extractArgTypes,
-    extractComponentDescription: _docsTools.extractComponentDescription
-  }
-};
-exports.parameters = parameters;
-const argTypesEnhancers = [_docsTools.enhanceArgTypes];
-exports.argTypesEnhancers = argTypesEnhancers;

package/dist/cjs/docs/extractArgTypes.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extractArgTypes = void 0;
-
-var _docsTools = require("@storybook/docs-tools");
-
-const SECTIONS = ['props', 'events', 'slots'];
-
-const extractArgTypes = component => {
-  if (!(0, _docsTools.hasDocgen)(component)) {
-    return null;
-  }
-
-  const results = {};
-  SECTIONS.forEach(section => {
-    const props = (0, _docsTools.extractComponentProps)(component, section);
-    props.forEach(({
-      propDef,
-      docgenInfo,
-      jsDocTags
-    }) => {
-      const {
-        name,
-        type,
-        description,
-        defaultValue: defaultSummary,
-        required
-      } = propDef;
-      const sbType = section === 'props' ? (0, _docsTools.convert)(docgenInfo) : {
-        name: 'void'
-      };
-      results[name] = {
-        name,
-        description,
-        type: Object.assign({
-          required
-        }, sbType),
-        table: {
-          type,
-          jsDocTags,
-          defaultValue: defaultSummary,
-          category: section
-        }
-      };
-    });
-  });
-  return results;
-};
-
-exports.extractArgTypes = extractArgTypes;

package/dist/cjs/index.js

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  storiesOf: true,
-  setAddon: true,
-  addDecorator: true,
-  addParameters: true,
-  configure: true,
-  getStorybook: true,
-  forceReRender: true,
-  raw: true,
-  setup: true
-};
-Object.defineProperty(exports, "addDecorator", {
-  enumerable: true,
-  get: function () {
-    return _preview.addDecorator;
-  }
-});
-Object.defineProperty(exports, "addParameters", {
-  enumerable: true,
-  get: function () {
-    return _preview.addParameters;
-  }
-});
-Object.defineProperty(exports, "configure", {
-  enumerable: true,
-  get: function () {
-    return _preview.configure;
-  }
-});
-Object.defineProperty(exports, "forceReRender", {
-  enumerable: true,
-  get: function () {
-    return _preview.forceReRender;
-  }
-});
-Object.defineProperty(exports, "getStorybook", {
-  enumerable: true,
-  get: function () {
-    return _preview.getStorybook;
-  }
-});
-Object.defineProperty(exports, "raw", {
-  enumerable: true,
-  get: function () {
-    return _preview.raw;
-  }
-});
-Object.defineProperty(exports, "setAddon", {
-  enumerable: true,
-  get: function () {
-    return _preview.setAddon;
-  }
-});
-Object.defineProperty(exports, "setup", {
-  enumerable: true,
-  get: function () {
-    return _preview.setup;
-  }
-});
-Object.defineProperty(exports, "storiesOf", {
-  enumerable: true,
-  get: function () {
-    return _preview.storiesOf;
-  }
-});
-
-var _preview = require("./preview");
-
-var _types = require("./preview/types-6-0");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
-
-var _module, _module$hot;
-
-// optimization: stop HMR propagation in webpack
-(_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();

package/dist/cjs/preview/config.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "applyDecorators", {
-  enumerable: true,
-  get: function () {
-    return _decorateStory.decorateStory;
-  }
-});
-exports.parameters = void 0;
-Object.defineProperty(exports, "render", {
-  enumerable: true,
-  get: function () {
-    return _render.render;
-  }
-});
-Object.defineProperty(exports, "renderToDOM", {
-  enumerable: true,
-  get: function () {
-    return _render.renderToDOM;
-  }
-});
-
-var _render = require("./render");
-
-var _decorateStory = require("./decorateStory");
-
-const parameters = {
-  framework: 'vue3'
-};
-exports.parameters = parameters;