Develop

Build scripts

# bundle library code to lib folder in the root of project.
npm build:lib 

# build Storybook
npm build:docs

Type declarations

Module type declarations can be overridden at src/types.d.ts. src/lib/index.ts is used as an entry point to collect type definitions for build.

Build

Library uses rollup to bundle code. Rollup config can be found at rollup.config.cjs. CommonJS (dist/index.cjs.js) and ES Modules (dist/index.esm.js) builds are emitted.

src directory structure

Development takes place inside src directory. There are two subdirectories inside:

• lib is where your library code should live, this code will be bundled with rollup and published to NPM. Imports from environment directory are forbidden, eslint will throw an error. Exports from src/lib/index.ts will be included in the library.

• environment is where your development code lives (CSS frameworks, demo code, mocks etc.). Contents will not be bundled inside the library. src/index.tsx defines what CRA will render in browser during development.

File tree

|-- environment # development code
|   └── App
|       |-- App.js
|       |-- App.module.css # CSS module
|       |-- App.spec.js # test file
|       |-- __snapshots__
|       |   └── App.spec.js.snap # test snapshot
|       └── index.js
|-- index.js # entry point for CRA
|-- lib # library code
|   |-- Component
|   |   |-- Component.js # Component will be exposed as a part of library
|   |   |-- Component.module.css # CSS module
|   |   |-- Component.spec.js # test file
|   |   |-- __snapshots__
|   |   |   └── Component.spec.js.snap # test snapshot
|   |   └── index.js
|   └── index.js # entry point for rollup build
└── setupTests.js