Сборник рассказов + MDX - PullRequest
Новая
       10

Сборник рассказов + MDX

1 голос
/ 11 февраля 2020

// main. js file 

module.exports = {
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-storysource/register',
    '@storybook/addon-viewport/register',
  ],
};

// webpack.config. js файл, как предлагается здесь https://www.npmjs.com/package/@storybook / addon-docs # ручная настройка 

config.module.rules.push({
    test: /\.(stories|story)\.mdx?$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-transform-react-jsx'],
        },
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

  config.module.rules.push({
    test: /\.(stories|story)\.jsx?$/,
    loader: require.resolve('@storybook/source-loader'),
    exclude: [/node_modules/],
    enforce: 'pre',
  });

// Предварительный просмотр. js

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

function loadStories() {
  const requires = [require.context('@rrc', true, /\.stories\.(js|mdx)$/)];
  for (const req of requires) req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

Теперь у меня есть 2 типа историй

// story.mdx file 

import { Meta, Story } from '@storybook/addon-docs/blocks';
// Components
import Chips from '../';

<Meta title="AAAAAAAAA AAAAAA/Chip2" component={Chip} />

# Chip

I can define a story with the function imported from CSF:

And I can also embed arbitrary markdown & JSX in this file.

<Chip label="Basic" />

<Preview>
  <Story name="all checkboxes">
    <form>
      <Chip label="Basic" />
    </form>
  </Story>
</Preview>

### Installing

A step by step series of examples that tell you how to get a development env running

и. js истории, похожие на 

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Chip } from '../../..';

storiesOf('Chip', module)
  .addParameters({
    component: Chip,
  })
  .add('Basic', () => <Chip label="Basic" />)
  .add('Disabled', () => <Chip label="Disabled" disabled />)

Мои. js истории прекрасно отображаются в сборнике рассказов, но истории .mdx не отображаются, и я тоже не получаю ошибки

...