ritheesh-story-lib v0.1.3

Storybook React Library

Create react project using typescript template

npx create-react-app . --template typescript

Add storybook to react project

npx sb init

Code clean up

• Delete App.css, App.test.tsx, App.tsx, index.css and serviceWorker.ts

Components

• Create components folder and add the components from stories. Export all of them from a single index file.

NPM Registry

• Create npm registry account and login via command line npm login

Typescript compile

• We are using the typescript. So the consumer applicatoin should be able to consume typescript files. So, need to update the script in package.json file. Create react app does not create any typescript module based files. So change the build script as build: tsc

• In tsconfig.json firl, the noEmit option tells TypeScript that we only want to run type checking and do not want the compiler to output any transpiled code. As of now, remove that property. delete "noEmit": true

• Output directory should be mentioned in tsconfig.json file outDir:"lib"

• Add below configurations for automatic compilations and maping of typescript files "declaration": true, "sourceMap": true, "declarationMap": true

Exclude the .stories file on library complie

• We do not need .stories files in consumer applications. To do that add exculde fields in tsconfig file

"exclude": [ "**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx,"./src/setupTests.ts" ]