storybook-addon-jarle-monaco

提供一个实时编辑器和预览作为 storybook 插件，它使用 jarle 和 monaco 编辑器

您可以在编辑器中更改代码，并在预览中看到结果

示例

yarn # install dependencies
yarn storybook # start storybook

演示 storybook 页面

用法

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

注册 storybook 的插件

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

在故事中使用

// *.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,
  }
}

在 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 类型解析

查看故事 AutoTypings.stories.mdx

使用 liveDecorator

1. 添加 liveDecorator 作为全局装饰器

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

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

2. 在故事中使用

// *.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,
    }
  }
}

配置

Monaco 文件

此插件使用 @monaco-editor/react，默认情况下 monaco 文件从 CDN 下载，您可以更改路径以使用其他 CDN 域名。

例如：

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

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

故事参数

故事参数中的 liveEdit 配置

属性	类型	默认值	描述
showEditor	布尔值	false	是否显示实时编辑面板
withLiveDecorator	布尔值	false	是否使用 LivePreview 装饰器包装故事

Playground 组件

属性	类型	默认值	描述
代码	字符串	--	必需，实时编辑的代码
autoTypings	布尔值	false	启用自动类型提示功能，如果为 true，将默认将语言设置为 typescript
defaultExpand	布尔值	false	展开编辑器内容
作用域	对象	--	Jarle 预览的 prop，用于全局作用域注入
providerProps	ProviderProps	--	Jarle Provider 的 props
resolveTypeDefinition	(packageName: string) => Promise<string | null> | string | null	--	为特定包提供自定义类型定义
editorProps	Partial<EditorProps>	--	MonacoEditor 的 props
className	字符串	--	包装器的类名

您可以在 liveEdit 中添加 Jarle 的 Provider props，查看 Jarle 的文档 获取更多信息。