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.