Addon API: Preview wrapper devkit example (#7939)

Addon API: Preview wrapper devkit example

Co-authored-by: Norbert de Langen <ndelangen@me.com>

dev-kits/addon-preview-wrapper/README.md

@@ -0,0 +1,8 @@
+# example addon: preview wrapper
+
+This addon adds a wrapper around the preview iframe
+
+This can be useful to display some information around the story preview
+
+Uses include:
+- showing a edit this page link to the story

dev-kits/addon-preview-wrapper/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@storybook/addon-preview-wrapper",
+  "version": "5.3.0-alpha.41",
+  "description": "preview wrapper addon for storybook",
+  "keywords": [
+    "addon",
+    "devkit",
+    "storybook",
+    "types"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybookjs/storybook.git",
+    "directory": "dev-kit/addon-preview-wrappe"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.3.0-alpha.41",
+    "react": "^16.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

dev-kits/addon-preview-wrapper/register.js

@@ -0,0 +1 @@
+require('./dist/register');

dev-kits/addon-preview-wrapper/src/constants.ts

@@ -0,0 +1 @@
+export const ADDON_ID = 'storybook/preview-wrapper';

dev-kits/addon-preview-wrapper/src/register.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from 'react';
+import { addons, types } from '@storybook/addons';
+import { ADDON_ID } from './constants';
+
+const PreviewWrapper: FunctionComponent<{}> = p => (
+  <div className="my-edit-wrapper">
+    <button type="button" onClick={() => {}}>
+      Edit this page
+    </button>
+    {p.children}
+  </div>
+);
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'edit page',
+    type: types.PREVIEW,
+    render: PreviewWrapper as any,
+  });
+});

dev-kits/addon-preview-wrapper/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

examples/dev-kits/addons.js

@@ -1,5 +1,6 @@
 import '@storybook/addon-roundtrip/register';
 import '@storybook/addon-parameter/register';
+import '@storybook/addon-preview-wrapper/register';
 
 import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';

examples/dev-kits/package.json

@@ -9,6 +9,7 @@
   "devDependencies": {
     "@storybook/addon-decorator": "5.3.0-alpha.41",
     "@storybook/addon-parameter": "5.3.0-alpha.41",
+    "@storybook/addon-preview-wrapper": "5.3.0-alpha.41",
     "@storybook/addon-roundtrip": "5.3.0-alpha.41",
     "@storybook/addons": "5.3.0-alpha.41",
     "@storybook/components": "5.3.0-alpha.41",

lib/ui/src/components/preview/preview.js

@@ -56,7 +56,6 @@ const ActualPreview = ({
 }) => {
   const data = [storyId, viewMode, id, baseUrl, scale, queryParams];
   const base = customCanvas ? customCanvas(...data) : renderIframe(...data);
-
   return wrappers.reduceRight(
     (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
     base
@@ -237,7 +236,6 @@ class Preview extends Component {
     } = this.props;
 
     const toolbarHeight = options.isToolshown ? 40 : 0;
-
     const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
     const panels = getElementList(getElements, types.TAB, [
       {