storybook

StoryBook
- main.js (集成codesandbox)

const codesandbox = require('remark-codesandbox');
module.exports = {
  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@geometricpanda/storybook-addon-badges', 'storybook-addon-designs', '@storybook/addon-a11y'],
  framework: '@storybook/react',
  features: {
    emotionAlias: false,
    interactionsDebugger: true,
    buildStoriesJson: true
  },
  core: {
    builder: 'webpack5'
  },
  webpackFinal: (config) => {
    const mdxRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.mdx$/');
    const {
      options: { remarkPlugins }
    } = mdxRule.use.find(({ loader }) => loader === require.resolve('@storybook/mdx1-csf/loader'));
    remarkPlugins.push([codesandbox, { mode: 'button' }]);
    return config;
  }
};

效果