Lime-cl NPM | npm.io

Lime Component Library

Welcome to the Lime component library. We got collection of React components styled with styled-components which you can used for your project.

For the moment we have two components you can use straightaway.

Button
Loader

Usage
Contributing
Future

Usage

How to install

Using Lime CL is very easy. You just need to run the below code in your terminal. You don't need to worry about moving CSS.

yarn add lime-cl

Button

Prop	Type	Value
`value`	`{string}`	Text to display on the button element
`mode`	`{string}('primary', 'secondary', 'neutral')`	Set a style for the button
`size`	`{string}('regular', 'big')`	Set a size for the button
`disabled`	`{bool}`	Set the disable property for the button element
`loading`	`{bool}`	Show the loading component
`fluid`	`{bool}`	Stretch the button to it's parent's width
`onClick`	`{func}`	The callback function which invoked when click on the button

Loader

Prop	Type	Value
`size`	`{string}('regular', 'big')`	Set a size for the loader
`speed`	`{number}`	Set the animation speed
`thickness`	`{number}`	Set the thickness of the Loader component
`color`	`{string}`	Set the color of the spinning circle

Contributing

We are using following tech stack to develop Lime component library.

React
Styled-Components
Storybook
Jest
Enzyme
Rollup

Setup

To setup the project in your local machine run the following command. That will clone the github repo to your local machine.

git clone https://github.com/ryxle/lime-acl.git

To install all the dependencies run the below command.

yarn install

Running the project

We are using storybook for component development. To start the storybook run the below command in the terminal.

yarn storybook

Lime Cl project is bootstrapped with Create React App. So you can test your components in normal web app also. To run the app you can use below command in the terminal.

yarn start

Implementing components

All our components are inside the src/components folder. We follow the below folder structure for every component.

Component
│
└─── __test__
│    │
│    └─── __snapshots__
│    │    │
│    │    └─── component.test.js.snap
│    │
│    └─── component.test.js
│
└─── Component.jsx
└─── Component.story.jsx
└─── styled.js

Testing components

We use Jest and Enzyme to test our components. To run tests run the below command in the terminal.

yarn test

To update snapshots run the below command.

yarn test:update

Publish

To publish you can run the below command.

yarn publish

Future

Need to integrate styled-components theming feature
Add more components
Implement a CICD pipe-line

lime-cl polished react react-dom react-scripts rollup-plugin-node-resolve styled-components

@everything-registry/sub-chunk-2072 lime-cl

0.1.1

6 years ago

0.1.0

6 years ago