Leap UI Kit

Reusable react component library for Leap Organisation

Installation

npm i @leapfinance/ui-kit

OR

yarn add @leapfinance/ui-kit

UseCase

import { ImageWithText } from "@leapfinance/ui-kit";
// ...
<ImageWithText
  img="https://leapassets.s3.ap-south-1.amazonaws.com/workshop/1669013114743-tick_(2)_1.png"
  onClick={() => {}}
  text="100+ Mock Tests"
/>

Guide

Useful CLI

# to create folder structure in components 
yarn plop create {$FileName} 

# to create new Component in the packages
yarn plop add {$ComponentName} 
   
# to displaying components
yarn storybook
  
# to create declaration file
yarn tsm

reference

1. Design System Doc open

Tips and Tricks For Development

1. use npm link to test your package in your project. read more
2. use storybook to see the ui of your components. read more
3. use snapshot to publish your packages for testing.

RULES

1. Always use TitleCase to create new folder or component
2. Don't use any external lib
3. Always use plop to create new folder or components.
4. Never forget to write stories for the components.