Docs: Storybook 7 config example

[NikitaIT]

Styles fix

Wrap all components in class sb-unstyled. In fact, I'm happy with the situation in which only my styles are applied on the page.

<Meta of={BannerStories} />
<div className="sb-unstyled">
# h1
          <CH.Code>
          
          \`\`\`python one.py
          print("Hello, one!")
          \`\`\`
          
          \`\`\`python two.py
          print("Hello, two!")
          \`\`\`
          
          </CH.Code>
</div>

Config with remarkPlugins

// .storybook/preview.ts
import '@code-hike/mdx/styles.css';
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5';
import { remarkCodeHike } from '@code-hike/mdx';
import theme from 'shiki/themes/dark-plus.json' assert { type: 'json' };

export const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', '../src/**/*.@(mdx)'],
  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  webpackFinal: async (config, options) => {
    const rule = (config.module?.rules || []).find((rule) =>
      typeof rule != 'string'
        ? rule.test?.toString().endsWith('\\.mdx$/')
        : false
    );
    (rule as any).use[0].options.mdxCompileOptions.remarkPlugins.push([
      remarkCodeHike,
      { theme, lineNumbers: false, showCopyButton: true },
    ]);
    return config;
  },
};

[pomber]

hi, what's the issue?

[NikitaIT]

@pomber I just shared a configuration example that is not in the documentation.