storybook-addon-jarle-monaco

作為 storybook 附加元件提供即時編輯器和預覽，它使用 jarle 和 monaco editor

您可以在編輯器中更改程式碼並在預覽中查看結果

範例

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 中使用

// *.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 型別解析

查看 story AutoTypings.stories.mdx

使用 liveDecorator

1. 將 liveDecorator 新增為全域裝飾器

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

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

2. 在 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,
    }
  }
}

設定

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' } })

Story 參數

story 參數中的 liveEdit 設定

屬性	型別	預設值	描述
showEditor	布林值	false	是否顯示即時編輯面板
withLiveDecorator	布林值	false	是否使用 LivePreview 裝飾器包裝 story

Playground 元件

屬性	型別	預設值	描述
程式碼	字串	--	必要，用於即時編輯的程式碼
autoTypings	布林值	false	啟用自動型別功能，如果為 true，則預設會將語言設定為 typescript
defaultExpand	布林值	false	展開編輯器內容
scope	物件	--	Jarle Preview 的屬性，用於全域範圍注入
providerProps	ProviderProps	--	Jarle Provider 的屬性
resolveTypeDefinition	(packageName: string) => Promise<string | null> | string | null	--	為特定套件提供自訂型別定義
editorProps	Partial<EditorProps>	--	MonacoEditor 的屬性
className	字串	--	包裝器的類別

您可以在 liveEdit 中新增 Jarle 的 Provider 屬性，請查看 Jarle 的文件 以取得更多資訊。