UNPKG

@edancerys/ts-react-components-lib

Version:

github.com/edancerys/

53 lines (42 loc) • 2.37 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# TypeScript React Component Library [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![npm](https://img.shields.io/npm/v/@edancerys/ts-react-components-lib) 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](https://tsdx.io/) to create library - [x] Use of [`styled-components`](https://styled-components.com/) for styling - [x] Connected with [Storybook](https://storybook.js.org/) - [x] Integrated tests with [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/) - [x] Linting support using [Prettier](https://prettier.io/) - [x] Integrated Continuous Integration (CI) using [GitHub Actions](https://github.com/edancerys/ts-react-components-lib/actions/workflows/main.yml) - [x] Integrated Continuous Deployment (CD) to using [Github Actions](https://github.com/edancerys/ts-react-components-lib/actions/workflows/release.yml) - [x] Uses [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) for releasing the library - [x] Publishes to [npm](https://www.npmjs.com/package/@h2_demo/p2) - [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 start `storybook` 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