Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kiranjolisa/team-carbon-ui
This project is an attempt by a team(Prasad Birari, Rinish Ojha, Vinayak PK and Kiran) to build a custom UI library for the react based front end project work.
https://github.com/kiranjolisa/team-carbon-ui
create-react-library css3 react react-ui-components styled-components
Last synced: 8 days ago
JSON representation
This project is an attempt by a team(Prasad Birari, Rinish Ojha, Vinayak PK and Kiran) to build a custom UI library for the react based front end project work.
- Host: GitHub
- URL: https://github.com/kiranjolisa/team-carbon-ui
- Owner: kiranjolisa
- Created: 2021-04-14T10:28:44.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-20T12:22:01.000Z (over 3 years ago)
- Last Synced: 2024-04-25T12:03:01.044Z (9 months ago)
- Topics: create-react-library, css3, react, react-ui-components, styled-components
- Language: JavaScript
- Homepage:
- Size: 2.84 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# team-carbon-ui
> A custom UI library built for modular usage of styling components in React app.
[](https://www.npmjs.com/package/team-carbon-ui) [](https://standardjs.com)
## Install
```bash
npm install --save team-carbon-ui
```
[#NOTE: Dependencies used: styled-components, classnames]
Sample Deployment: https://sample-ui-deployment.vercel.app/
## Usage
```jsx
import React, { Component } from 'react'
import MyComponent from 'team-carbon-ui'
import 'team-carbon-ui/dist/index.css'
class Example extends Component {
render() {
return
}
}
```
## Available Components
### Main Button
#### When To Use
This button is used as the highlighted buttons on the landing page and is recommeded to use in that manner.
#### How To Use
```jsx
alert('Nothing')}>Hi there!
```
#### Sample Implementation
-
### Loading Spinner
#### When To Use
Spinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is
doing something from behind.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Display Card
#### When To Use
These kinds of cards are generally used to depict informations regarding to a peculiar matter in-short. Here, in the context of our web app, it's used to display
the short format information regarding the fundraisers.
#### How To Use
```jsx
```
The above implementation will work since there are enough supplies for default parameters but the programmer using this library is advised to use their custom values.Like the one defined below
```jsx
```
#### Sample Implementation
-
### Pay Button
#### When To Use
Pay buttons are generally found oval shaped buttons that are used to initiate the payment process(basically accessing the payment gateway) within the website.
#### How To Use
```jsx
Pay ₹XXXX
```
#### Sample Implementation
-
### Proceed to Pay Button
#### When To Use
Similar to the above mentioned Pay Button but varies in size and padding to accomodate more texts.
#### How To Use
```jsx
Proceed to Pay ₹XXXX
```
#### Sample Implementation
-
### Payment Success Animation
#### When To Use
After successful completion of a payment, the user has to be made aware that the payment procedures were accomplised successfully and therefore
this anime does that job.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Payment Failure Animation
#### When To Use
After incurring failure of a payment process, the user has to be made aware that the payment procedures weren't accomplised successfully and therefore
this anime does that job.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Progress Bar
#### When To Use
Progress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the
target value can be portrayed using Progress Bar.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Progress Bar (Thin)
#### When To Use
Progress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the
target value can be portrayed using Progress Bar. This UI component is very similar to the above one but the only diffeence is that it's relatively slimmer.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Loading Spinner (Small)
#### When To Use
Spinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is
doing something from behind. This is very similar to the spinner mentioned above in the same documentation but smaller in as the name suggests, the choice
of sizes depends on many UI design factors.
#### How To Use
```jsx
```
#### Sample Implementation
-
### Sidebar
#### When To Use
Inorder to enlist many things categorically in a styled format and at the same time has some tasks to be persued on the remain area of the application
when they are clicked, sidebar gets handy on such scenarios. Here in the context of the web application developed by our team, the sidebars were used
mainly to list the different categories of fundraisers and list them when the buttons are clicked.
#### How To Use
```jsx
```
Passing an array of items directly to the component will easily render a Sidebar without much hassle and that makes code look more neat.
#### Sample Implementation
-
### Modal Box
#### When To Use
Modal boxes are generally rendered for 2 cases, when the user has to be alerted with some sudden messages for their action or simplify the task or rendering a new page
again. For example: Payments are mostly initiated from the gateway owners site but this can be simplified by taking the essential values for payment such as name, card number, cvv etc with the help of modal and then calling and redirecting to an api that tests the correctness of the entry and take adequate actions.
#### How To Use
```jsx
Header Sec
Something here
Nothing Happens
```
#### Sample Implementation
-
### Buttons (Different implementation)
These buttons are very similar to the above mentioned buttons, the only difference is in their implementation.
#### How To Use
```jsx
{alert('user has clicked secondary button now')}}>Secondary
{alert('user has clicked primary button now')}} >Primary
```
#### Sample Implementation
-
-
## License
MIT © [kiranjolisa](https://github.com/kiranjolisa)