TypeScript React Component Library
This library is published on npm
and demonstrates how to write your own React components in TypeScript and publish them as npm
package.
Features
- [x] React components written in TypeScript
- [x] Leverages TSDX to create library
- [x] Use of
styled-components
for styling - [x] Connected with Storybook
- [x] Integrated tests with Jest and Testing Library
- [x] Linting support using Prettier
- [x] Integrated Continuous Integration (CI) using GitHub Actions
- [x] Integrated Continuous Deployment (CD) to using Github Actions
- [x] Uses Semantic Release for releasing the library
- [x] Publishes to npm
- [x] Publishes Storybook to Chromatic
🤖 Dev Commands
-
yarn install
to install the necessary dependencies -
yarn start
to start developing your components -
yarn test
to test your components -
yarn lint
to lint your code -
yarn lint --fix
to fix linting issues in your code -
yarn prepare
to create the production bundle -
yarn storybook
to startstorybook
in development mode (starts as a new process) -
yarn build-storybook
to create production version of storybook for the project. This can be deployment to platforms such as Vercel, Gatsby, Surge, or Firebase hosting -
yarn size
tells you size of your library for the production bundle
🚀 Publishing the project to NPM
-
npm version patch
bump up package version -
npm publish
to publish to npm as private package
📦 Full Component list & functionality TBC...
- Button
- String
- Card
- Form
- Text input
- Custom checkbox input
- Custom file upload input
- Custom select input
- Accordion
- Carousel
- Header component
- Modal component