Set up new NPM project with Storybook

[dmistomin]

Description

In order to make it easy to work on multiple components, Storybook and an NPM package file should be set up for the project.

Reference

• Build and Publish a React Component Library – dev.to
• Creating a React Component Library using Storybook 7 – Prateek's Blog

Steps

• [X] Set up Git repository
• [X] yarn init and fill out package.json fields
• [X] Set up TSConfig
• [x] Install Storybook
• [x] Set up "reference" component and make sure it renders
• [x] Choose bundler (Webpack or Rollup?)
• [x] Compile library
• [x] Set up account on NPM
• [x] Publish package on NPM
• [ ] Test importing package into fresh project
• [ ] Validate CSS solution for package (styled-components?)
• [ ] Add unit testing library (Jest?)
• [ ] Build test component again and publish to NPM
• [ ] Add Github integration / badges to automatically test changes to library

[dmistomin]

Quick Notes on TypeScript Config

I have not set up a TypeScript project from scratch for a while, so I wanted to take some time to write a breakdown of the components of tsconfig.json in case it becomes useful later. Example is taken from this blog post.

Annotated tsconfig.json

{
  "compilerOptions": {
// What flavor of JS the output should be compiled to?
    "target": "es5", 
// Where should the `.js`, `.js.map` files go?
    "outDir": "lib",
// Which type definitions should be included? `window`, `document`, etc.
    "lib": ["dom", "dom.iterable", "esnext"],
// Generate `d.ts` type definition files for every file in module? Useful for intellisense (code completion, etc.)
    "declaration": true,
// Where should the `d.ts` files go?
    "declarationDir": "lib",
// Throw an error if a plain JS file is imported instead of TS?
    "allowJs": true,
// Don't check type of `d.ts` files in library? Will only check code imported into main app
    "skipLibCheck": true,
// If set to `false` (default), has a small inconsistency where non-ES6 modules violate module spec when compiled
    "esModuleInterop": true,
// Allows default import even if there isn't a default import in source, similar to Babel
    "allowSyntheticDefaultImports": true,
// Offer stronger guarantees of type safety and program correctness?
    "strict": true,
// Forces casing to match, even on a case-insensitive file system.
    "forceConsistentCasingInFileNames": true,
// Post-compilation, what type of module should be output?
    "module": "esnext",
// What module resolution strategy should be used.
    "moduleResolution": "node", // NOTE: This should be changed to `node16`/`nodenext`
// Allow importing modules with a `.json` extension? Common in Node projects.
    "resolveJsonModule": true,
// When using other transpilers that read 1 file at a time, certain TS code causes runtime issues. 
// This will warn in those cases.
    "isolatedModules": true,
// Do not emit output files like JS source code. Another tool will handle it.
    "noEmit": true,
// How should `.tsx` files should be transformed for output?
    "jsx": "react"
  },
// Which filenames / patterns should be included in program? 
// If no `*` or file extension at end of string, treat as a directory.
  "include": ["src"],
// What filenames or patterns should be skipped?
  "exclude": ["node_modules", "lib"]
}

Takeaways

• After analyzing this config, some parts are outdated:
  • [x] moduleResolution should be set to nodenext
  • [x] target should be set to es6

[dmistomin]

Published an "example" version of the library, containing a couple of buttons, to a public NPM package.