From 208c3d1ebde0b5db75c1536e883ebaa5c3b36193 Mon Sep 17 00:00:00 2001 From: Jeff Blagdon Date: Mon, 27 May 2019 10:30:31 -0300 Subject: [PATCH 1/2] Mention TSX index file requirement in README I was stuck getting Storybook working with TypeScript following the steps here. My components weren't showing up in the Storybook index. Diffing my project with the [demo repo](https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo) I realized that my index file had the wrong name. Not sure where this requirement comes from, but it doesn't seem to work with `stories/index.tsx`, which is the likeliest name the user is going to give this file if the default is `stories/index.js`. --- docs/src/pages/configurations/typescript-config/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 661dfef054d3..4badf34c6b60 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -111,6 +111,10 @@ module.exports = ({ config, mode }) => { The default `tsconfig.json` that comes with CRA works great. If your stories are outside the `src` folder, for example the `stories` folder in root, then `"rootDirs": ["src", "stories"]` needs to be added to be added to `compilerOptions` so it knows what folders to compile. Make sure `jsx` is set to preserve. Should be unchanged. +## Create a TSX storybook index + +The default storybook index file is `stories/index.js` -- you'll want to rename this to `stories/index.storybook.tsx`. + ## Import tsx stories Change `config.ts` inside the Storybook config directory (by default, it’s `.storybook`) to import stories made with TypeScript: From 986f2a7ce9e201c688e534147f8bec0b5a3eaf13 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 3 Jun 2019 22:48:26 +0200 Subject: [PATCH 2/2] Update index.md --- docs/src/pages/configurations/typescript-config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 4badf34c6b60..e38c871979c7 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -113,7 +113,7 @@ The default `tsconfig.json` that comes with CRA works great. If your stories are ## Create a TSX storybook index -The default storybook index file is `stories/index.js` -- you'll want to rename this to `stories/index.storybook.tsx`. +The default storybook index file is `stories/index.js` -- you'll want to rename this to `stories/index.tsx`. ## Import tsx stories