storybook-addon-code

This storybook addon provides the ability to display a panel on stories with any code you want. It's mostly a wrapper for storybook's syntax highlighter , which is a wrapper for prism.js.

Installation

1. npm install --save-dev @jls-digital/storybook-addon-code
2. Add storybook-addon-code to your storybook's config
3. Add the sourceCode parameter to your stories

// .storybook/main.ts
const config: StorybookConfig = {
  addons: ['@jls-digital/storybook-addon-code'],
};

Usage

In your story files, you can now import code as string (with vite by using the '?raw' query parameter) and pass it to the sourceCode parameter. You can even import the file you're currently in:

// button.stories.ts
import rawStories from './button.stories?raw';
import rawComponent from './button?raw';
const meta: Meta<IButtonStory> = {
  parameters: {
    sourceCode: [
      { name: 'Component', code: rawComponent },
      { name: 'Stories', code: rawStories },
    ]
  },
  title: 'Components/Button',
}

Arguments

Name	Description	Values
name	The name of the sub tab. Default: index of tab.	string
code	The code to display	string
language	The language of the code that should be used for syntax highlighting. Default: typescript.	"jxextra", "jsx", "json", "yml", "md", "bash", "css", "html", "tsc", "typescript", "graphql"

FAQ

(Click on a question to see the answer.)

Q: When I add a new file to the list of source code, I get an error saying "The final argument passed to useMemo changed size between renders."

A: No worries, this is an issue with storybook's TabsState component. You can simply reload the page and it should work fine.

Q: Can I customize the order of my tabs?

A: Yes, the order is determined by the order of the array you pass to the sourceCode parameter.

Contributing

We encourage you to contribute to this project! Please check out the Contributing guide for guidelines about how to proceed and how to set up your dev environment. Join us!

License

Storybook-Addon-Code is released under the MIT License.