Package Exports

storybook-addon-code-editor
storybook-addon-code-editor/dist/cjs/index.js
storybook-addon-code-editor/dist/es/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-addon-code-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

storybook-addon-code-editor

A Storybook add-on for live editing stories. Supports JavaScript and TypeScript.

Demo

Usage example

Get started

Install as a dev dependency.

npm install --save-dev storybook-addon-code-editor

Add storybook-addon-code-editor in your .storybook/main.js file:

module.exports = {
  addons: [
    'storybook-addon-code-editor',
    ...

`Playground`

Use the Playground component in MDX format.

// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor';

<Playground code="export default () => <h1>H1</h1>;"} />

More advanced example:

// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor';
import * as MyLib from './index';
import storyCode from './MyStory.source.tsx?raw';
import ExampleLibraryTypes from '../dist/types.d.ts?raw';

<Playground
  availableImports={{ 'my-lib': MyLib }}
  code={storyCode}
  height="560px"
  onCreateEditor={(editor, monaco) => {
    // editor docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html
    // monaco docs: https://microsoft.github.io/monaco-editor/api/modules/monaco.html
    editor.getModel().updateOptions({ tabSize: 2 });
    monaco.editor.setTheme('vs-dark');
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      // REACT_TYPES is a variable defined with Webpack's DefinePlugin.
      // See src/preset.ts for more info.
      REACT_TYPES,
      'file:///node_modules/react/index.d.ts'
    );
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      ExampleLibraryTypes,
      'file:///node_modules/example-library/index.d.ts'
    );
  }}
/>

Playground props:

interface PlaygroundProps {
  code?: string;
  availableImports?: {
    [importSpecifier: string]: {
      [namedImport: string]: any;
    };
  };
  onCreateEditor?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => any;
  height?: string;
}

React is an available import by default and automatically imported if the code does not import it.

`createLiveEditStory`

Use the createLiveEditStory function in traditional stories:

// MyComponent.stories.js
import { createLiveEditStory } from 'storybook-addon-code-editor';
import * as MyLib from './index';
import storyCode from './MyStory.source.tsx?raw';

export const MyStory = createLiveEditStory({
  availableImports: { 'my-lib': MyLib },
  code: storyCode,
});

createLiveEditStory options:

interface Options {
  code: string;
  availableImports?: {
    [importSpecifier: string]: {
      [namedImport: string]: any;
    };
  };
  onCreateEditor?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => any;
}

Contributing

Install dependencies

npm i
npm run install-example-deps

See example

npm run start

Build library

npm run build

Build docs

npm run docs

Run tests

npm run test

Format code

npm run format

Commits

Use conventional commits to allow automatic versioned releases.

fix: represents bug fixes, and correlates to a SemVer patch.
feat: represents a new feature, and correlates to a SemVer minor.
feat!:, or fix!:, refactor!:, etc., represent a breaking change (indicated by the !) and will result in a SemVer major.

Publishing

The automated release-please PR to the main branch can be merged to deploy a release.