Vyhledávání na webu

reactjs - Storybook v create-react-app s TypeScriptem

Snažím se použít Storybook v create-react-app s TypeScriptem bez ejectování. Pochopil jsem, že by to mělo být možné, i když to není popsáno v dokumentaci. Zde jsou zdroje, které jsem použil:

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

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

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

Podaří se mi spustit Storybook, ale zobrazuje se:

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

Tohle jsem udělal:

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

Zde je kód, který jsem změnil oproti tomu, co vytvořil příkaz 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;
};

src/příběhy/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 } }
);

Co je špatně na mém nastavení?

PS. Nevím, jestli potřebuji všechny výše uvedené balíčky, takže mi prosím dejte vědět, jestli do svého projektu přidávám věci, které nebudou relevantní, protože používám projekt vytvořený pomocí create-react-app.

Odpověď č. 1

src/stories/index.js by měl být pojmenován src/stories/index.tsx

Odpověď č. 2

prostě načtěte své příběhy přímo v .storybook/config.js

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

upravit :

nebo můžete přejmenovat src/stories/index.js na src/stories/index.stories.tsx

pečlivě si přečtěte komentáře

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

Související články