diff --git a/README.md b/README.md index ec48db1..2c794b6 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ import 'storybook-addon-figma/register' Link a Figma design to your story +## With React + ```jsx import React from 'react' import { storiesOf } from '@storybook/react' @@ -38,6 +40,23 @@ storiesOf('Button') )) ``` +## With Vue + +```jsx +import Vue from 'vue' +import { storiesOf } from '@storybook/vue' +import { WithFigma } from 'storybook-addon-figma/vue' + +storiesOf('Button') + .add('With Figma', () => ({ + components: { WithFigma }, + template: ` + + + + ` + })) +``` ## Embed a different design on each story diff --git a/package.json b/package.json index 2b4d206..b418f98 100644 --- a/package.json +++ b/package.json @@ -32,5 +32,8 @@ "babel-preset-react-app": "3.0.3", "react": "16.0.0", "react-dom": "16.0.0" + }, + "peerDependencies": { + "vue": ">= 2.0.0" } } diff --git a/src/vue.js b/src/vue.js new file mode 100644 index 0000000..1ff4dc1 --- /dev/null +++ b/src/vue.js @@ -0,0 +1,26 @@ +import Vue from "vue"; +import addons from "@storybook/addons"; +import { EVENT_ID } from "./shared"; + +export const WithFigma = Vue.component("with-figma", { + props: { + url: { type: String, required: true }, + allowFullScreen: { type: Boolean, default: true }, + embedHost: { type: String, default: "storybook" } + }, + render(el) { + addons.getChannel().emit(EVENT_ID, { + url: this.url, + allowFullScreen: this.allowFullScreen, + embedHost: this.embedHost + }); + + try { + return this.$slots.default[0]; + } catch (e) { + throw new Error("WithFigma can only render one child component."); + } + + return null; + } +}); diff --git a/vue.js b/vue.js new file mode 100644 index 0000000..05ce2d6 --- /dev/null +++ b/vue.js @@ -0,0 +1 @@ +module.exports = require("./dist/vue");