コンポーネントコントロールのカスタムESMページ

もともと公開https://component-controls.com/blogs/custom-esm-pages
カスタマイズできますcomponent-controls この記事では、カスタムページタブをあなたのESM ドキュメントページ.
The ESM ページタブはページタイプによってカスタマイズ可能ですstory .
デフォルトではcomponent-controls ページテンプレートを使用するClassicPage ) それはあなたの話を文書化するためにブロックの良い混合物を含んでいます.

例
例のソースを見つけることができますcustom esm pages
Live gatsby site
Live nextjs site

新しいタブの追加
ページのタブをカスタマイズすることができますbuildtime プロジェクトの設定ファイルです.
次の例では、2つのESMページタブを使用しますstory

module.exports = {
  ...
  pages: {
    story: {
      tabs: {
        page: '@component-controls/pages/ClassicPage',
        test: '@component-controls/pages/TestingPage',
      },
    },
  },
};

カスタマイズページ
ページタブを配列として設定すると、さまざまなページ小道具をカスタマイズできます.次の例では、カスタムタイトルを使用し、ページの空の'コンテナ'を使用します.

module.exports = {
  ...
  pages: {
    story: {
      tabs: {
        canvas: [
          "@component-controls/pages/CanvasPage",
          { title: "Render", container: null, variant: "" },
        ],
        page: '@component-controls/pages/ClassicPage',
      },
    },
  },
};

カスタムページを作成する
カスタムページを作成し、ESMのドキュメントページのタブに追加できます.
現在のストーリーをすべての利用可能なテーマにレンダリングするカスタムページを作成する例を次に示します.これはすぐにプレビューを任意の色/問題のテーマに固有のコンポーネントの間隔のプレビューをすることができます.

import React from 'react';
import { TabConfiguration } from '@component-controls/core';
import {
Story,
Description,
} from '@component-controls/blocks';
import { ThemeProvider } from 'theme-ui';
import { BlockContainer } from '@component-controls/components';
import { useThemes } from '../src/components/useThemes';

const ThemesPage = () => {
  const themes = useThemes();
  return (
    <>
      <Description />
        {themes.map(({ name, theme }) => (
          <BlockContainer key={`themed_component_${name}`} title={name} id={name} sx={{ mt: 0 }}>
            <ThemeProvider  theme={theme}>
              <Story id="."sx={{ mb: 0, ...theme?.styles?.root }}/>
            </ThemeProvider>
          </BlockContainer>
        ))}
    </>
  );
}

export default {
  title: 'Themes',
  component: ThemesPage
} as TabConfiguration

このページを設定に追加するには

const { defaultBuildConfig } = require('@component-controls/core');

module.exports = {
  ...
  pages: {
    story: {
      tabs: {
        ...defaultBuildConfig.pages.story.tabs,
        test: '@component-controls/pages/TestingPage',
        themes: require.resolve('./ThemesPage.tsx'),
      },
    },
  },
};

完全なサンプルプロジェクトtheme-ui インスピレーションが利用可能です.
source code
live site