# Visio React Base

Visio react base a repo designed to contained basic reusable elements in order to build a React app


## Installation

yarn:
```bash
yarn add visio-react-base
```

npm:
```bash
npm install visio-react-base
```

## Components

We use formik, material ui and yup, all the different form input types are designed to work with these 3 tools and are expected to be inside a formik form.


### Input

Component design to represent input fields to users, accepts text and numbers defaulting to "text" if "type" is not passed. For more info see <a href="https://mui.com/material-ui/react-text-field/" target="_blank">TextField in MUI</a>.

Usage: 
```
import { Input } from 'visio-react-base';

<Input
    name="firstName"
    label="First Name"
    fullWidth
/>

<Input
    name="age"
    label="Age"
    type="number"
    fullWidth
/>
```

### Phone

Component designed to mask input fields as 10 digits US formatted phone numbers. For more info see <a href="https://mui.com/material-ui/react-text-field/" target="_blank">TextField in MUI</a>.

Usage: 
```
import { Phone } from 'visio-react-base';

<Phone
    name="phone"
    label="phone"
    fullWidth
/>
```

### Currency

Component designed to mask input fields as US formatted currency. Component will send data back to form as a float. We can pass how many decimal points and and max value, by default will be 2 and 9999999999. For more info see <a href="https://mui.com/material-ui/react-text-field/" target="_blank">TextField in MUI</a>.

Usage: 
```
import { Currency } from 'visio-react-base';

<Currency 
    name="price"
    label="Price"
    decimalPoints={2}
    maxValue={1000}
    fullWidth 
/>
```

### Checkbox

Component designed to display boolean values. Component will send data back as true, false. 

Usage: 
```
import { Checkbox } from 'visio-react-base';

<Checkbox name="Adult" label="Adult?" fullWidth />
```

### Select

Component designed to display a combobox from an object of properly formatted options
Usage: 
```
import { Select } from 'visio-react-base';

const stateData = [
    { value: "FL", label: "FL" },
    { value: "TX", label: "TX" },
    { value: "CA", label: "CA" },
    { value: "NY", label: "NY" },
];

<Select
    name="State"
    label="State"
    options={stateData}
    fullWidth
 />
```

### Radio

Component designed to display a radio from an object of properly formatted options
Usage: 
```
import { Radio } from 'visio-react-base';

const contactMethodData = [
    { value: "Phone", label: "Phone" },
    { value: "Email", label: "Email" },
    { value: "Text", label: "Text" },
];

<Radio
    name="ContactMethod"
    label="Contact Method"
    options={contactMethodData}
/>
```

### CardSelect

Component designed to display a group of clickable cards from an object of properly formatted options. We can also pass images to display a card with text and image.
Usage: 
```
import { CardSelect } from 'visio-react-base';

const colorOptions = [
    { value: "Blue", label: "Blue" },
    { value: "Red", label: "Red" },
    { value: "White", label: "White" },
];

const vehicleOptions = [
    { value: "Car", label: "Car", img: "https://carimage.com" },
    { value: "Truck", label: "Truck", img: "https://truckimage.com" },
    { value: "Motorcycle", label: "Motorcycle", img: "https://motoimage.com" },
];

<CardSelect
    name="Color"
    label="Color"
    options={colorOptions}
/>

<CardSelect
    name="vehicle"
    label="Vehicle Type"
    options={vehicleOptions}
/>
```

### Bucket

Component designed to display a group of clickable cards from an object of ranges.
1. lowerValue = higher value, will display value:
    -{lowerValue: 1, higherValue: 1} => displays "1"
2. lower value = null, will display higher value or lower
    -{lowerValue: null, higherValue: 10} => displays "10 or lower"
3. higher value = null, will display lower value or higher
    -{lowerValue: 10, higherValue: null} => displays "10 or higher"
3. higher value > lower value, will display range
    -{lowerValue: 10, higherValue: 20} => displays "10 - 20"

if we pass displayUnknown = true, it will display a bucket named "unknown"

Usage: 
```
import { Bucket } from 'visio-react-base';

const creditRanges = [
    { lowerValue: null, higherValue: 680, value: 680 },
    { lowerValue: 680, higherValue: 719, value: 719 },
    { lowerValue: 720, higherValue: 759, value: 759 },
    { lowerValue: 760, higherValue: null, value: 760 }
];

<Bucket 
    name="creditScore" 
    label="Credit Range" 
    options={creditRanges} 
    displayUnknown={true} 
/>
```