Fix decorator option name

package.json

@@ -2,16 +2,18 @@
   "name": "root",
   "repository": "git@github.com:pocka/storybook-addon-designs.git",
   "private": true,
-  "workspaces": ["packages/*"],
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "lerna": "^3.13.1",
     "prettier": "^1.16.4"
   },
   "scripts": {
     "build": "lerna run build --stream",
     "dev": "lerna run dev --stream",
-    "example": "lerna run storybook --scope examples --stream",
-    "example:build": "lerna run build-storybook --stream",
+    "example": "yarn workspace examples storybook",
+    "example:build": "yarn workspace examples build-storybook",
     "now-build": "yarn build && yarn example:build"
   },
   "prettier": {

packages/examples/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.{js,jsx}'],
+  addons: ['storybook-addon-designs/register']
+}

packages/examples/.storybook/manager.js

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/addons'
+import { create } from '@storybook/theming'
+
+import logo from '@storybook-addon-designs/assets/logo-with-text.png'
+import pkg from 'storybook-addon-designs/package.json'
+
+addons.setConfig({
+  theme: create({
+    brandTitle: 'storybook-addon-designs',
+    brandImage: logo,
+    brandUrl: pkg.homepage
+  })
+})

packages/examples/.storybook/preview.js

@@ -0,0 +1,7 @@
+import { addParameters } from '@storybook/react'
+
+addParameters({
+  options: {
+    showRoots: true
+  }
+})

packages/examples/package.json

@@ -11,11 +11,11 @@
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@babel/preset-env": "^7.4.2",
     "@storybook-addon-designs/assets": "^5.0.0",
-    "@storybook/addon-actions": "^5.0.3",
-    "@storybook/addon-links": "^5.0.3",
-    "@storybook/addons": "^5.0.3",
-    "@storybook/react": "^5.0.3",
-    "@storybook/theming": "^5.0.3",
+    "@storybook/addon-actions": "^5.3.8",
+    "@storybook/addon-links": "^5.3.8",
+    "@storybook/addons": "^5.3.8",
+    "@storybook/react": "^5.3.8",
+    "@storybook/theming": "^5.3.8",
     "babel-loader": "^8.0.5",
     "storybook-addon-designs": "^5.1.1"
   },

packages/examples/stories/examples/advanced.stories.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+import samplePdf from '@storybook-addon-designs/assets/sample.pdf'
+
+export default {
+  title: 'Examples/Advanced',
+  decorators: [withDesign]
+}
+
+export const embedMultipleDesigns = () => <Button>Button</Button>
+
+embedMultipleDesigns.story = {
+  parameters: {
+    design: config([
+      {
+        type: 'figma',
+        url:
+          'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+      },
+      {
+        type: 'pdf',
+        url: samplePdf
+      }
+    ])
+  }
+}
+
+export const setTabNames = () => <Button>Button</Button>
+
+setTabNames.story = {
+  parameters: {
+    design: config([
+      {
+        name: 'Foo',
+        type: 'figma',
+        url:
+          'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+      },
+      {
+        name: 'Bar',
+        type: 'pdf',
+        url: samplePdf
+      }
+    ])
+  }
+}

packages/examples/stories/examples/figma.stories.js

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+export default {
+  title: 'Examples/Figma',
+  decorators: [withDesign]
+}
+
+export const embedFile = () => <Button>Button</Button>
+
+embedFile.story = {
+  parameters: {
+    design: config({
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+    })
+  }
+}
+
+export const embedNode = () => <Button>Button</Button>
+
+embedNode.story = {
+  parameters: {
+    design: config({
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=2%3A5'
+    })
+  }
+}
+
+export const embedPrototype = () => <Button>Button</Button>
+
+embedPrototype.story = {
+  parameters: {
+    design: config({
+      type: 'figma',
+      url:
+        'https://www.figma.com/proto/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+    })
+  }
+}
+
+export const allowingFullscreen = () => <Button>Button</Button>
+
+allowingFullscreen.story = {
+  parameters: {
+    design: config({
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
+      allowFullscreen: true
+    })
+  }
+}

packages/examples/stories/examples/iframe.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+export default {
+  title: 'Examples/iframe',
+  decorators: [withDesign]
+}
+
+export const embedSite = () => <Button>Button</Button>
+
+embedSite.story = {
+  parameters: {
+    design: config({
+      type: 'iframe',
+      url: 'https://www.wikipedia.org/'
+    })
+  }
+}

packages/examples/stories/examples/images.stories.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+import sampleImage from '@storybook-addon-designs/assets/sample.png'
+
+export default {
+  title: 'Examples/Images',
+  decorators: [withDesign]
+}
+
+export const embedImage = () => <Button>Button</Button>
+
+embedImage.story = {
+  parameters: {
+    design: config({
+      type: 'image',
+      url: sampleImage
+    })
+  }
+}
+
+export const setScaleAndOffset = () => <Button>Button</Button>
+
+setScaleAndOffset.story = {
+  parameters: {
+    design: config({
+      type: 'image',
+      url: sampleImage,
+      offset: [-300, 140],
+      scale: 2
+    })
+  }
+}

packages/examples/stories/examples/pdf.stories.js

@@ -0,0 +1,72 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+import samplePdf from '@storybook-addon-designs/assets/sample.pdf'
+
+export default {
+  title: 'Examples/PDF',
+  decorators: [withDesign]
+}
+
+export const embedPDF = () => <Button>Button</Button>
+
+embedPDF.story = {
+  parameters: {
+    design: config({
+      type: 'pdf',
+      url: samplePdf
+    })
+  }
+}
+
+export const setScale = () => <Button>Button</Button>
+
+setScale.story = {
+  parameters: {
+    design: config({
+      type: 'pdf',
+      url: samplePdf,
+      scale: 2
+    })
+  }
+}
+
+export const setOffset = () => <Button>Button</Button>
+
+setOffset.story = {
+  parameters: {
+    design: config({
+      type: 'pdf',
+      url: samplePdf,
+      offset: [-100, -100]
+    })
+  }
+}
+
+export const setPage = () => <Button>Button</Button>
+
+setPage.story = {
+  parameters: {
+    design: config({
+      type: 'pdf',
+      url: samplePdf,
+      page: 2
+    })
+  }
+}
+
+export const setBothScaleAndOffset = () => <Button>Button</Button>
+
+setBothScaleAndOffset.story = {
+  parameters: {
+    design: config({
+      type: 'pdf',
+      url: samplePdf,
+      offset: [-300, 140],
+      scale: 2
+    })
+  }
+}