Added Storybook using JSX with UV demos

.storybook/main.js

@@ -0,0 +1,20 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.tsx'],
+  addons: ['@storybook/addon-knobs/register'],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+        },
+        // Optional
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script>
+<script src="/uv-assets/js/bundle.js"></script>

package.json

@@ -16,7 +16,9 @@
     "lint:all": "prettier --write \"./src/**/*.{js,jsx,json,css,ts,tsx}\" \"!./src/lib/* \"",
     "postinstall": "opencollective postinstall",
     "start": "npx serve www",
-    "test": "jest"
+    "storybook": "start-storybook -p 6006 -s ./dist",
+    "test": "jest",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -36,9 +38,12 @@
   },
   "homepage": "https://github.com/universalviewer/universalviewer",
   "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@storybook/html": "^5.3.18",
     "@types/jest": "22.2.2",
     "@types/puppeteer": "1.9.0",
     "async": "0.9.0",
+    "babel-loader": "^8.1.0",
     "chai": "4.1.2",
     "chalk": "0.5.1",
     "glob": "7.1.3",
@@ -84,6 +89,8 @@
     "@iiif/iiif-tree-component": "^2.0.3",
     "@iiif/manifold": "2.0.2",
     "@iiif/vocabulary": "1.0.16",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
     "@types/modernizr": "3.2.29",
     "@types/node": "8.10.52",
     "@universalviewer/uv-cy-gb-theme": "1.1.2",
@@ -97,12 +104,14 @@
     "jquery-ui-dist": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jsviews": "0.9.83",
+    "jsx-dom": "^6.4.14-beta.3",
     "manifesto.js": "4.0.1",
     "mediaelement": "4.2.15",
     "opencollective": "1.0.3",
     "openseadragon": "2.4.2",
     "pdfjs-dist": "2.0.161",
     "pdfobject": "2.1.1",
+    "react-docgen-typescript-loader": "^3.7.2",
     "waveform-data": "2.0.2",
     "xss": "1.0.3"
   },

src/Viewer.ts

@@ -14,7 +14,8 @@ import { Helper, loadManifest, IManifoldOptions } from "@iiif/manifold";
 import { Annotation, AnnotationBody, Canvas, Sequence } from "manifesto.js";
 import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
 import { URLDataProvider } from "./URLDataProvider";
-import "./lib/";
+// Has to be require.
+require("./lib/");
 
 interface IExtensionLoaderCollection {
   [key: string]: () => any;

stories/uv.stories.tsx

@@ -0,0 +1,50 @@
+/** @jsx h */
+import { h } from 'jsx-dom';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
+import { Viewer } from '../src/index';
+
+export default { title: 'Universal Viewer',   decorators: [withKnobs] };
+
+type Data = {
+  manifestUri: string,
+  configUri?: string,
+  collectionIndex?: number,
+  manifestIndex?: number,
+  sequenceIndex?: number,
+  canvasIndex?: number,
+  rangeId?: number,
+  rotation?: number,
+  xywh?: string,
+  embedded?: boolean,
+  locales?: any, //??
+};
+
+const UVDemo = (data: Data) => {
+  const container = <div style={{ width: '100%', height: '100vh', minHeight: 500 }} /> as HTMLElement;
+
+  const uv = new Viewer({
+    target: container,
+    data
+  });
+
+  uv.on('created', () => {
+    uv.resize();
+  }, {});
+
+  return container;
+};
+
+
+export const ScottishBridges = () => {
+  const manifestUri = text('Manifest URI', 'https://view.nls.uk/manifest/7446/74464117/manifest.json');
+  const canvasIndex = number('Canvas Index', 30);
+
+  return <UVDemo manifestUri={manifestUri} canvasIndex={canvasIndex || 0} />
+};
+
+export const Wunder = () => {
+  const manifestUri = text('Manifest URI', 'https://wellcomelibrary.org/iiif/b18035723/manifest');
+  const canvasIndex = number('Canvas Index', 0);
+
+  return <UVDemo manifestUri={manifestUri} canvasIndex={canvasIndex || 0} />
+}

tsconfig.json

@@ -13,9 +13,15 @@
     "noUnusedParameters": false,
     "removeComments": false,
     "strictNullChecks": true,
+    "jsx": "react",
+    "jsxFactory": "h",
     "suppressImplicitAnyIndexErrors": true,
     "target": "ES5",
     "tsBuildInfoFile": "./buildcache/front-end",
+    "rootDirs": [
+      "stories",
+      "src"
+    ],
     "types": [
       "@edsilv/jquery-plugins",
       "@iiif/base-component",
@@ -32,4 +38,4 @@
   "include": [
     "src"
   ]
-}
+}