react-typescript-ui-component-library v1.0.16

Installation

$ npm install -save-dev react-typescript-ui-component-library

Set Up instructions

You can create new react project using the typescript or you can use your existing react-typescript project

$ npx install create-react-app --template typescript<br>

Environment file

Create .env file in your root directory to resolve the sourcemap dependency issue and paste the below code GENERATE_SOURCEMAP=false

Usage

import { Button, Input, Dropdown, Modal } from 'react-typescript-ui-component-library';

function App() {
    return (
        <div className="App">
         <Modal isOpen={true}></Modal>
         <Button label="Test" onClick={(e) => console.log(e.target)} style={{size: 'large'}}></Button>
         <Input type="email" placeholder="text" isValid={true} onChange={()=> {}}></Input>
         <Dropdown options={["sdf", "sdfsdf", "Sfsdf"]} selectedOption='sdfsdf'></Dropdown>
        </div>
    )
}

export default App;

Button component optional properties

label: string disabled: boolean style: object { size?: "small" | "medium" | "large"; primary?: boolean; primaryColor?: string; secondaryColor?: string; hoverPrimaryColor?: string; hoverSecondaryColor?: string; } onClick: MouseEventHandler

Input component optional properties

id: string type: "text" | "number" | "email" value: string isValid: boolean disabled: boolean placeholder: string onChange: ChangeEventHandler

Dropdown component optional properties

options: string[] selectedOption: string onSelect: ReactEventHandler

Modal component optional properties

children: string isOpen: boolean onClose: MouseEventHandler

To run the package

1. Clone the repository
2. Install the dependencies with

$ npm install 

3. Build the components with

$ npm run build 

4. Run the tests with

$ npm run test

Storybook UI

All the components are build in stories using Storybook. Every component includes a file *.stories.tsx with the possible inputs

$ npm run storybook

This command will execute all the stories present inside all the components and will loaded on the localhost:6006 port