Website-Suche

reactjs - Storybook in create-react-app mit TypeScript

Ich versuche, Storybook in einer create-react-app mit TypeScript zu verwenden, ohne zu ejecten. Ich habe verstanden, dass dies möglich sein sollte, auch wenn es in der Dokumentation nicht beschrieben ist. Hier sind die Ressourcen, die ich verwendet habe:

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

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

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

Ich bekomme Storybook zum Bauen, aber es zeigt:

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

Das ist, was ich gemacht habe:

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

Hier ist der Code, den ich im Vergleich zu dem, was der init-storybook-Befehl erstellt hat, geändert habe:

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/geschichten/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 } }
);

Was ist falsch mit meiner Einrichtung?

PS. Ich weiß nicht, ob ich alle oben genannten Pakete benötige, also lass mich bitte wissen, ob ich Dinge zu meinem Projekt hinzufüge, die nicht relevant sind, weil ich ein Create-React-App-Projekt ausführe.

Antwort #1

src/stories/index.js sollte src/stories/index.tsx genannt werden

Antwort #2

lade deine Stories einfach direkt in .storybook/config.js

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

bearbeiten :

oder Sie können src/stories/index.js in src/stories/index.stories.tsx umbenennen

Lies die Kommentare sorgfältig

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

Verwandte Artikel