This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.
The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.
npx create-react-app cra-ts --typescriptcd cra-ts
npx -p @storybook/cli@next sb init --story-format=csf-tsyarn add @storybook/addon-docs@next --devThen edit ./.storybook/presets.js:
const path = require("path");
module.exports = [
{
name: "@storybook/preset-create-react-app",
options: {
tsDocgenLoaderOptions: {
tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
}
}
},
{
name: "@storybook/addon-docs/react/preset",
options: {
configureJSX: true,
sourceLoaderOptions: null
}
}
];yarn storybookThen edit button caption in ./src/stories/1-Button.stories.tsx and verify that SB updates
Storybook can't load docgen information from pre-built libraries, so to test that aspect out, create a file ./src/stories/Button.tsx:
import React, { FC } from "react";
interface ButtonProps {
/**
* Simple click handler
*/
onClick?: () => void;
}
/**
* The world's most _basic_ button
*/
export const Button: FC<ButtonProps> = ({ children, onClick }) => (
<button onClick={onClick} type="button">
{children}
</button>
);The sourceLoaderOptions: null in Step 3 is covering up a
@shilman @mrmckeb my Issue was most likely related to me editing tsconfig. The reason I did this was because I needed different settings then the cra settings when transpiling as a library bundle.
After making a separate tsconfig for this purpose and leaving the one generated by cra untouched everything was working as expected.
Thanks you for a super helpful walkthrough 👏