Сборник рассказов в приложении create-реагировать с TypeScript - PullRequest
Новая
       6

Сборник рассказов в приложении create-реагировать с TypeScript

0 голосов
/ 06 ноября 2018

Я пытаюсь использовать Stotybook в приложении create-реагировать с TypeScript без извлечения. Я понял, что это должно быть возможно, даже если это не описано в документации. Вот ресурсы, которые я использовал:

https://storybook.js.org/basics/introduction/

https://storybook.js.org/configurations/typescript-config/

https://github.com/wmonk/create-react-app-typescript/issues/405

Я собираю сборник рассказов, но он показывает: 

No Preview
Sorry, but you either have no stories or none are selected somehow.

Вот что я сделал: 

npx -p @storybook/cli sb init
npm install --save-dev react-docgen-typescript-webpack-plugin @storybook/addon-info @types/storybook__react awesome-typescript-loader
npm run storybook

Вот код, который я изменил по сравнению с созданным командой init storybook:

tsconfig.js 

...
"rootDirs": ["src", "stories"],
...

.storybook / config.js 

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

.storybook / webpack.config.js 

const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin"); // Optional
module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("ts-loader")
  });
  config.plugins.push(new TSDocgenPlugin()); // optional
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

ЦСИ / рассказы / index.js 

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import TicTacToeCell from './TicTacToeCell';

const stories = storiesOf('Components', module);
stories.add(
  'TicTacToeCell',
  () => <TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action('onClick')} />,
  { info: { inline: true } }
);

Что не так с моей настройкой?

PS. Я не знаю, нужны ли мне все вышеперечисленные пакеты, поэтому, пожалуйста, дайте мне знать, если я добавляю в свой проект вещи, которые не будут актуальны, потому что я запускаю проект create-реагировать-приложение

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

src/stories/index.js должно быть названо src/stories/index.tsx

0 голосов
/ 06 ноября 2018

просто загрузите свои истории прямо в .storybook/config.js

function loadStories() {
  require('../src/stories')
}

редактирование:

или вы можете переименовать src/stories/index.js в src/stories/index.stories.tsx

внимательно прочитайте комментарии 

// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
...