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