Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aadeshkulkarni/oxygen
ReactJS UI Component library inspired from Nitrozen Vue
https://github.com/aadeshkulkarni/oxygen
reactjs scss typescript ui-library
Last synced: 14 days ago
JSON representation
ReactJS UI Component library inspired from Nitrozen Vue
- Host: GitHub
- URL: https://github.com/aadeshkulkarni/oxygen
- Owner: aadeshkulkarni
- Created: 2022-09-16T09:24:36.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-19T11:28:18.000Z (about 2 years ago)
- Last Synced: 2024-05-30T02:13:08.479Z (5 months ago)
- Topics: reactjs, scss, typescript, ui-library
- Language: SCSS
- Homepage:
- Size: 1.56 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Features
- A component UI Library that's built using ReactJS with typescript
- Storybook for organized UI systems making both the building process and documentation more efficient and easier to use
- Uses the same styling as Nitrozen-vue
- Uses SCSS for styling.
- Library published on NPM and can be consumed using the command ``` npm install @aadeshkulkarni/oxygen ```
- Rollup for bundling
- Support for ESM and CommonJS
- React-testing-library with Jest support for unit-testing components
------------
### Installation
- clone the repository
- ``` npm install ```
- ``` npm run storybook ```
-------------
### To consume the library,
- In your React / Next / Typescript with React project, run ``` npm install @aadeshkulkarni/oxygen ```
- You can start consuming the components like so
``` (App.js)
import { Button } from '@aadeshkulkarni/oxygen';
.
.
Save
```
--------------
### Available Scripts
- #### Build the component library
``` npm run rollup ```
- #### Run storybook locally
``` npm run storybook ```
- #### Build storybook
``` npm run build-storybook ```
- #### Publish the library to NPM registry
``` npm publish ```
- #### Run tests
``` npm run test ```
-------------
### NPM Auth Token
Inorder to publish changes to NPM Registry, following things are necessary:
1. Changing the version number
2. The correct access-token to perform the publish command. (Hint: ``` nano ~/.npmrc ``` )
## FAQs
### Why Typescript ?
- TypeScript will save a ton of time for us, because it introduces types and compile-time checking.
- In addition, TypeScript will be helpful when we build components for our library, because we will be dealing with props in React components, and defining types will avoid issues when passing props to the components.
### Why Rollup instead of Webpack for bundling ?
- Webpack is useful for bundling applications but are complicated while bundling libraries. Rollup is useful for bundling libraries / small applications.
- Rollup represents the next generation of build tools in terms of its
- performance (build time),
- intermediate configuration (less complicated than webpack but more involved than Parcel),
- and optional but out-of-the-box features likes source maps
### Why Scss, not Less for styling ?
- While both provide similiar functionalities, they are different only in syntax.
- Scss can be replaced with Less easily. Just a matter of developer's choice