Actually show the designs

.storybook/design-addon/register.js

@@ -1,31 +1,52 @@
 import React, { Fragment } from 'react';
 import { AddonPanel } from '@storybook/components';
-import { useParameter } from '@storybook/api';
+import { useParameter, useStorybookState } from '@storybook/api';
 import { addons, types } from '@storybook/addons';
+import { styled } from '@storybook/theming';
+
+const getUrl = (input) => {
+  return typeof input === 'string' ? input : input.url;
+};
+
+const Iframe = styled.iframe({
+  width: '100%',
+  height: '100%',
+  border: '0 none',
+});
+const Img = styled.img({
+  width: '100%',
+  height: '100%',
+  border: '0 none',
+  objectFit: 'contain',
+});
+
+const Asset = ({ url }) => {
+  if (!url) {
+    return null;
+  }
+  if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
+    // do image viewer
+    return <Img alt="" src={url} />;
+  }
+
+  return <Iframe title={url} src={url} />;
+};
 
 const Content = () => {
-  const results = useParameter('assets', []); // story's parameter being retrieved here
+  // story's parameter being retrieved here
+  const results = useParameter('assets', []);
+  // the id of story retrieved from Storybook global state
+  const { storyId } = useStorybookState();
+
+  if (results.length === 0) {
+    return null;
+  }
+
+  const url = getUrl(results[0]).replace('{id}', storyId);
+
   return (
     <Fragment>
-      {results.length ? (
-        <ol>
-          {results.map((i) => (
-            <li>{i}</li>
-          ))}
-        </ol>
-      ) : null}
+      <Asset url={url} />
     </Fragment>
   );
 };
-
-addons.register('my/design-addon', () => {
-  addons.add('design-addon/panel', {
-    title: 'assets',
-    type: types.PANEL,
-    render: ({ active, key }) => (
-      <AddonPanel active={active} key={key}>
-        <Content />
-      </AddonPanel>
-    ),
-  });
-});

src/components/InboxScreen.stories.js

@@ -8,6 +8,7 @@ import { defaultTasksData } from './TaskList.stories';
 export default {
   component: PureInboxScreen,
   title: 'InboxScreen',
+  parameters: { assets: ['designs/app.png'] },
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 

src/components/Task.stories.js

@@ -8,13 +8,7 @@ export default {
   component: Task,
   title: 'Task',
   decorators: [withKnobs],
-  parameters: {
-    assets: [
-      'path/to/your/asset.png',
-      'path/to/another/asset.png',
-      'path/to/yet/another/asset.png',
-    ],
-  },
+  parameters: { assets: ['designs/items.png'] },
   // Our exports that end in "Data" are not stories.
   excludeStories: /.*Data$/,
 };

src/components/TaskList.stories.js

@@ -6,7 +6,8 @@ import { taskData, actionsData } from './Task.stories';
 export default {
   component: PureTaskList,
   title: 'TaskList',
-  decorators: [story => <div style={{ padding: '3rem' }}>{story()}</div>],
+  decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+  parameters: { assets: ['designs/list-1.png', 'designs/list-2.png'] },
   excludeStories: /.*Data$/,
 };
 
@@ -30,4 +31,4 @@ export const WithPinnedTasks = () => <PureTaskList tasks={withPinnedTasksData} {
 
 export const Loading = () => <PureTaskList loading tasks={[]} {...actionsData} />;
 
-export const Empty = () => <PureTaskList tasks={[]} {...actionsData} />;
+export const Empty = () => <PureTaskList tasks={[]} {...actionsData} />;