storybook-addon-jarle-monaco

provide a live-editing editor and preview as storybook addon, it uses jarle and monaco editor

you could change code in editor and see the result in preview

Example

yarn # install dependencies
yarn storybook # start storybook

Demo storybook page

Usage

npm i --save-dev storybook-addon-jarle-monaco
# or
yarn add -D storybook-addon-jarle-monaco

Registry the addon to storybook

module.exports = {
  // ...
  addons: [
    // ... other addons
    'storybook-addon-jarle-monaco',
  ],
}

Use in stories

// *.stories.jsx
import { generateLivePreviewStory } from 'storybook-addon-jarle-monaco'

// use generateLivePreviewStory HoC to generate live preview
export const LiveEdit = generateLivePreviewStory({
  code: `() => <Button primary label={foo} />`,
  scope: {
    Button,
    foo: 'bar',
  }
})

export const LiveEditUseLivePreview = () => (
  <LivePreview
    channel={addons.getChannel()}
    code={`<Button primary label={'hello'} />`}
    providerProps={{
      scope: {
        Button,
      }
    }}
  />
)

// use LivePreview alone, you need to set showEditor manually
LiveEditUseLivePreview.parameters = {
  liveEdit: {
    showEditor: true,
  }
}

Use in MDX

import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
import { Playground } from '@pupu/storybook-addon-jarle-monaco';

<Meta title="Example/LiveEdit in MDX" />

> Use `Playground` in *.stories.mdx file, it provides live preview and editor

### Button

<Playground
  code="<Button primary label={'hello'} />"
  providerProps={{
    scope: {
      Button,
    },
  }}
/>

Typescript typings resolve

Check the story AutoTypings.stories.mdx

With liveDecorator

1. add liveDecorator as global decorator

import { liveDecorator } from 'storybook-addon-jarle-monaco'

// .storybook/preview.js
export const decorators = [
  liveDecorator
]

2. usage in stories

// *.stories.jsx

// with liveDecorator will read the story's source code,
// so we can avoid writing live preview's code in plain text.
export const LiveEditWithLiveDecorator = () => <Button primary label="hello" />

// but you still need to provide scope or custom LivePreviewProps
LiveEditWithLiveDecorator.parameters = {
  liveEdit: {
    showEditor: true,
    withLiveDecorator: true,
    scope: {
      Button,
    }
  }
}

Config

Monaco files

this addon use @monaco-editor/react, by default monaco files are being downloaded from CDN, you can change the paths to use another CDN domain.

e.g.

import { loader } from '@monaco-editor/react'

loader.config({ paths: { vs: 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.33.0/min/vs' } })

Story parameters

liveEdit config in story's parameters

| property | type | default | description | |-------------------|---------|---------|--------------------------------------------------| | showEditor | boolean | false | show the live edit panel or not | | withLiveDecorator | boolean | false | wrap the story with LivePreview decorator or not |

Playground Component

| property | type | default | description | | --------------------- | ------------------------------------------------------------------------------ | ------ | ----------------------------------------------------------------------------------- | | code | string | -- | required, the code for live edit | | autoTypings | boolean | false | enable auto typings feature，if true, will set the language to typescript by default | | defaultExpand | boolean | false | expand the editor content | | scope | object | -- | prop of Jarle Preview, for global scope injection | | providerProps | ProviderProps | -- | props for Jarle Provider | | resolveTypeDefinition | (packageName: string) => Promise<string | null> | string | null | -- | provide custom type definitions for certain package | | editorProps | Partial<EditorProps> | -- | props for MonacoEditor | | className | string | -- | class for wrapper |

you can add Jarle's Provider props in liveEdit, check the Jarle's docs for more information.