Multipe designs

README.md

@@ -88,6 +88,25 @@ storiesOf('foo', module).add('bar', () => <Button>Hello, World!</Button>, {
 })
 ```
 
+### Multiple designs for single story
+
+You can attach more than one designs by passing array of config to `design` parameter.
+
+```js
+design: [
+ {
+ type: 'pdf',
+ url: 'https://my-pdf'
+ },
+ {
+ // Specify tab name by passing "name" prop
+ name: 'Image Preview',
+ type: 'image',
+ url: 'https://my-image'
+ }
+]
+```
+
 ## Similar projects
 
 - [storybook-addon-figma](https://github.com/hharnisc/storybook-addon-figma)

packages/examples/stories/index.stories.js

@@ -104,6 +104,37 @@ storiesOf('Examples|Image', module)
  })
  })
 
+storiesOf('Examples|Advanced', module)
+ .addDecorator(withDesign)
+ .add('Embed multiple designs', () => <Button>Button</Button>, {
+ design: config([
+ {
+ type: 'figma',
+ url:
+ 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+ },
+ {
+ type: 'pdf',
+ url: samplePdf
+ }
+ ])
+ })
+ .add('Set tab names', () => <Button>Button</Button>, {
+ design: config([
+ {
+ name: 'Foo',
+ type: 'figma',
+ url:
+ 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+ },
+ {
+ name: 'Bar',
+ type: 'pdf',
+ url: samplePdf
+ }
+ ])
+ })
+
 storiesOf('Tests|Placeholder', module)
  .addDecorator(withDesign)
  .add('Show placeholder when no `design` parameter', () => (

packages/storybook-addon-designs/src/config.ts

@@ -1,9 +1,16 @@
 export type Config = IFrameConfig | FigmaConfig | PdfConfig | ImageConfig
 
+export interface ConfigBase {
+ /**
+ * A name of the tab.
+ */
+ name?: string
+}
+
 /**
  * Options for rendering iframe.
  */
-export interface IFrameConfigBase {
+export interface IFrameConfigBase extends ConfigBase {
  /**
  * An URL to show.
  */
@@ -37,7 +44,7 @@ export interface FigmaConfig extends IFrameConfigBase {
 /**
  * Common options for types user can move or scale the design preview.
  */
-export interface TransformableConfigBase {
+export interface TransformableConfigBase extends ConfigBase {
  /**
  * Default scale value.
  * Must be greater than 0.

packages/storybook-addon-designs/src/index.ts

@@ -21,7 +21,7 @@ export const withDesign = makeDecorator({
 /**
  * Dumb function to ensure typings or enchance IDE auto completion.
  */
-export const config = (c: Config): Config => c
+export const config = (c: Config | Config[]) => c
 
 if (module && module.hot && module.hot.decline) {
  module.hot.decline()

packages/storybook-addon-designs/src/register/components/Wrapper.tsx

@@ -4,7 +4,7 @@ import { jsx } from '@storybook/theming'
 import addons from '@storybook/addons'
 import { STORY_CHANGED } from '@storybook/core-events'
 
-import { Link, Placeholder } from '@storybook/components'
+import { Link, Placeholder, TabsState } from '@storybook/components'
 
 import { Config } from '../../config'
 import { Events, ParameterName } from '../../addon'
@@ -23,7 +23,7 @@ interface Props {
 }
 
 export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
- const [config, setConfig] = useState<Config>()
+ const [config, setConfig] = useState<Config | Config[]>()
  const [storyId, changeStory] = useState<string>()
 
  useEffect(() => {
@@ -50,7 +50,7 @@ export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
  return null
  }
 
- if (!config) {
+ if (!config || ('length' in config && config.length === 0)) {
  return (
  <Placeholder>
  <Fragment>No designs found</Fragment>
@@ -70,33 +70,57 @@ export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
  )
  }
 
- switch (config.type) {
- case 'iframe':
- return <IFrame key={storyId} config={config} />
- case 'figma':
- return <Figma key={storyId} config={config} />
- case 'pdf':
- return <Pdf key={storyId} config={config} />
- case 'image':
- return <ImagePreview key={storyId} config={config} />
+ const panels = [...(config instanceof Array ? config : [config])].map<
+ [JSX.Element, { id: string; title: string }]
+ >((cfg, i) => {
+ const meta = {
+ id: `addon-designs-tab--${i}`,
+ title: cfg.name || cfg.type.toUpperCase()
+ }
+
+ switch (cfg.type) {
+ case 'iframe':
+ return [<IFrame config={cfg} />, meta]
+ case 'figma':
+ return [<Figma config={cfg} />, meta]
+ case 'pdf':
+ return [<Pdf config={cfg} />, meta]
+ case 'image':
+ return [<ImagePreview key={storyId} config={cfg} />, meta]
+ }
+
+ return [
+ <Placeholder>
+ <Fragment>Invalid config type</Fragment>
+ <Fragment>
+ Config type you set is not supported. Please choose one from{' '}
+ <Link
+ href="https://github.com/pocka/storybook-addon-designs#available-types"
+ target="_blank"
+ rel="noopener"
+ withArrow
+ cancel={false}
+ >
+ available config types
+ </Link>
+ </Fragment>
+ </Placeholder>,
+ meta
+ ]
+ })
+
+ if (panels.length === 1) {
+ return <div key={storyId}>{panels[0][0]}</div>
  }
 
  return (
- <Placeholder>
- <Fragment>Invalid config type</Fragment>
- <Fragment>
- Config type you set is not supported. Please choose one from{' '}
- <Link
- href="https://github.com/pocka/storybook-addon-designs#available-types"
- target="_blank"
- rel="noopener"
- withArrow
- cancel={false}
- >
- available config types
- </Link>
- </Fragment>
- </Placeholder>
+ <TabsState key={storyId} absolute={true} initial={panels[0][1].id}>
+ {panels.map(([el, meta]) => (
+ <div key={meta.id} id={meta.id} title={meta.title}>
+ {el}
+ </div>
+ ))}
+ </TabsState>
  )
 }