Need Prize Money

    storybook-addon-code-editor
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.7 • Public • Published

    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 ReactTypes from '@types/react/index.d.ts?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(
          ReactTypes,
          '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.

    Keywords

    none

    Install

    npm i storybook-addon-code-editor

    DownloadsWeekly Downloads

    77

    Version

    0.3.7

    License

    MIT

    Unpacked Size

    57.6 kB

    Total Files

    41

    Last publish

    Collaborators

    • jeremyrh