Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hirohe/storybook-addon-jarle-monaco
storybook.js addon providing react-live preview and monaco-editor editing
https://github.com/hirohe/storybook-addon-jarle-monaco
jarle live-edit live-editor live-preview monaco-editor react storybook storybook-addons
Last synced: about 2 months ago
JSON representation
storybook.js addon providing react-live preview and monaco-editor editing
- Host: GitHub
- URL: https://github.com/hirohe/storybook-addon-jarle-monaco
- Owner: hirohe
- License: mit
- Created: 2022-01-14T14:30:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-09T07:57:53.000Z (2 months ago)
- Last Synced: 2024-10-15T13:17:29.244Z (2 months ago)
- Topics: jarle, live-edit, live-editor, live-preview, monaco-editor, react, storybook, storybook-addons
- Language: TypeScript
- Homepage: https://hirohe.github.io/jarle-monaco/?path=/story/example-liveedit-in-mdx--page
- Size: 1.08 MB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# storybook-addon-jarle-monaco
provide a live-editing editor and preview as storybook addon, it uses [jarle](https://github.com/jquense/jarle) and [monaco editor](https://github.com/suren-atoyan/monaco-react)
you could change code in editor and see the result in preview
## Example
```bash
yarn # install dependencies
yarn storybook # start storybook
```
## Demo [storybook page](https://hirohe.github.io/storybook-addon-jarle-monaco/?path=/story/example-liveedit-in-mdx--page)
## Usage
```bash
npm i --save-dev storybook-addon-jarle-monaco
# or
yarn add -D storybook-addon-jarle-monaco
```
Registry the addon to storybook
```js
module.exports = {
// ...
addons: [
// ... other addons
'storybook-addon-jarle-monaco',
],
}
```
### Use in stories
```jsx
// *.stories.jsx
import { generateLivePreviewStory } from 'storybook-addon-jarle-monaco'
// use generateLivePreviewStory HoC to generate live preview
export const LiveEdit = generateLivePreviewStory({
code: `() => `,
scope: {
Button,
foo: 'bar',
}
})
export const LiveEditUseLivePreview = () => (
`}
providerProps={{
scope: {
Button,
}
}}
/>
)
// use LivePreview alone, you need to set showEditor manually
LiveEditUseLivePreview.parameters = {
liveEdit: {
showEditor: true,
}
}
```
### Use in MDX
```mdx
import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
import { Playground } from '@pupu/storybook-addon-jarle-monaco';
> Use `Playground` in *.stories.mdx file, it provides live preview and editor
### Button
```
### Typescript typings resolve
Check the story [AutoTypings.stories.mdx](https://github.com/hirohe/storybook-addon-jarle-monaco/blob/main/stories/AutoTypings.stories.mdx)
### With liveDecorator
1. add `liveDecorator` as global decorator
```js
import { liveDecorator } from 'storybook-addon-jarle-monaco'
// .storybook/preview.js
export const decorators = [
liveDecorator
]
```
2. usage in stories
```jsx
// *.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 = () =>
// 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](https://github.com/suren-atoyan/monaco-react#loader-config) `monaco` files are being downloaded from `CDN`,
you can change the paths to use another CDN domain.
e.g.
```js
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](https://jquense.github.io/jarle/#provider) | -- | props for Jarle Provider |
| resolveTypeDefinition | (packageName: string) => Promise | 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](https://jquense.github.io/jarle/) for more information.