npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

storybook-addon-code-editor

v3.1.0

Published

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

Downloads

40,853

Readme

storybook-addon-code-editor

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

Demo

Example code using this add-on

Get started

Install as a dev dependency.

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

Add storybook-addon-code-editor in your .storybook/main.ts file and ensure the staticDirs, addons, and framework fields contain the following:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
import { getCodeEditorStaticDirs } from 'storybook-addon-code-editor/getStaticDirs';

const config: StorybookConfig = {
  staticDirs: [...getCodeEditorStaticDirs(__filename)],
  addons: ['storybook-addon-code-editor'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

staticDirs sets a list of directories of static files to be loaded by Storybook. The editor (monaco-editor) requires these extra static files to be available at runtime.

Additional static files can be added using the getExtraStaticDir helper from storybook-addon-code-editor/getStaticDirs:

// .storybook/main.ts
import {
  getCodeEditorStaticDirs,
  getExtraStaticDir,
} from 'storybook-addon-code-editor/getStaticDirs';

const config: StorybookConfig =  {
  staticDirs: [
    ...getCodeEditorStaticDirs(),

    // files will be available at: /monaco-editor/esm/*
    getExtraStaticDir('monaco-editor/esm'),

Important:

@storybook/react-vite is the only supported framework at this time.

API

Playground

Use the Playground component in MDX format.

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

<Playground code="export default () => <h1>Hello</h1>;" />
import { Playground } from 'storybook-addon-code-editor';

<Playground
  defaultEditorOptions={{ minimap: { enabled: false } }}
  WrappingComponent={(props) => (
    <div style={{ background: '#EEE', padding: '10px' }}>{props.children}</div>
  )}
  code="export default () => <h1>Hello</h1>;"
/>
// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor';
import \* as MyLibrary from './index';
import storyCode from './MyStory.source.tsx?raw';

// TypeScript might complain about not finding this import or
// importing things from .d.ts files wihtout `import type`.
// Ignore this, we need the string contents of this file.
// @ts-ignore
import MyLibraryTypes from '../dist/types.d.ts?raw';

<Playground
  availableImports={{ 'my-library': MyLibrary }}
  code={storyCode}
  height="560px"
  id="unique id used to save edited code until the page is reloaded"
  modifyEditor={(monaco, editor) => {
    // 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(
      MyLibraryTypes,
      'file:///node_modules/my-library/index.d.ts',
    );
  }}
/>

Playground props:

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

React is automatically imported if code does not import it. React TypeScript definitions will be automatically loaded if @types/react is available.

createLiveEditStory

Use the createLiveEditStory function in traditional stories:

// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { createLiveEditStory } from 'storybook-addon-code-editor';
import * as MyLibrary from './index';
import storyCode from './MyStory.source.tsx?raw';

const meta = {
  // Story defaults
} satisfies Meta<typeof MyLibrary.MyComponent>;

export default meta;

type Story = StoryObj<typeof meta>;

export const MyStory = createLiveEditStory<Story>({
  availableImports: { 'my-library': MyLibrary },
  code: storyCode,
});

createLiveEditStory options:

interface LiveEditStoryOptions {
  availableImports?: {
    [importSpecifier: string]: {
      [namedImport: string]: any;
    };
  };
  code: string;
  modifyEditor?: (monaco: Monaco, editor: Monaco.editor.IStandaloneCodeEditor) => any;
  // Any other Storybook story options, e.g. `args`, `parameters`, etc..
}

setupMonaco

setupMonaco allows customization of monaco-editor.

Use this in your .storybook/preview.ts to add type definitions or integrations.

Check out examples of monaco-editor with different configurations.

// .storybook/preview.ts
import { setupMonaco } from 'storybook-addon-code-editor';

setupMonaco({
  // https://microsoft.github.io/monaco-editor/typedoc/interfaces/Environment.html
  monacoEnvironment: {
    getWorker(moduleId, label) {
      ...
    },
  },
  // onMonacoLoad is called when monaco is first loaded and before an editor instance is created.
  onMonacoLoad(monaco) {
    ...
  },
});

setupMonaco options:

interface MonacoSetup {
  monacoEnvironment?: Monaco.Environment;
  onMonacoLoad?: (monaco: Monaco) => any;
}

Contributing

Install dependencies

npm install

Run example

npm run start:example

When making changes to the library, the server needs to be manually restarted.

Run tests

npm run test

Format code

npm run format

Build library

npm run build

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.