Storybook 插件 RAW styled-component 💅🏻

此 Storybook 插件添加了一个选项卡，用于显示每个故事的编译后的 HTML。它使用 highlight.js 进行语法高亮。

🌎 演示

Storybook 插件 RAW styled-component

🔥 快速开始

npm i --save-dev @khriztianmoreno/storybook-addon-raw-styled-component

📝 注册插件

在 .storybook 目录中创建一个名为 addons.js 的文件，并添加以下内容

// .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: [
    ..., // Others addon
    '@khriztianmoreno/storybook-addon-raw-styled-component/register'
  ],
};

👨🏼‍💻 使用方法

在 .storybook/config.js 中添加 withHTML 作为全局装饰器

// .storybook/preview.js

import { addDecorator } from '@storybook/html';
import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';

addDecorator(withHTML);

HTML 使用 Prettier 进行格式化。您可以通过提供一个遵循 Prettier API 覆盖格式 的对象来覆盖 Prettier 配置（除了 parser 和 plugins）。

// .storybook/preview.js

import { addDecorator } from '@storybook/html';
import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';

addDecorator(
  withHTML({
    prettier: {
      tabWidth: 2,
      useTabs: false,
      htmlWhitespaceSensitivity: 'strict',
    },
  }),
);

🎗 支持的框架

目前，该插件可与 React.js 框架一起使用