This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

## Usage

```jsx
import {
  STButton,
  STButtonOptions,
  STSwitch,
  STCheckbox,
  STRadio,
  STStatus,
  STDropdown,
  STExtract,
  STPrice,
  STTimePicker,
  STDatePicker,
  STDateTimePicker,
  STInput,
  STLocation,
  STTypeBox,
  STMessage,
  STDialog,
  STTicker,
  STMultiOptionsPopover,
  STSelect,
  STCommunicationBar,
  STSummaryCard,
  STColumn,
  STListComponent,
  STDateOfPicker,
  STAvatar,
  STOptionsCard,
  STTitleSearch,
  STInputIndication,
  STLabeledContent,
  STPhone,
  STTooltip,
  STInputAutocomplete,
  STInputTypeBased,
  STForm,
  STMultipleInputs,
  STImageUploader,
  STBreadcrumbs,
  STTheme,
  isPossiblePhone,
  isValidPhone,
  STLoadingBar,
  STCollapsablePanel,
  STParameters,
} from 'stuff-ui';
```

### STButton

###Props

| Prop name | Description                                 | Type     | Format                 | Default values |
| --------- | ------------------------------------------- | -------- | ---------------------- | -------------- |
| color     | button color                                | string   | primary or secondary   | primary        |
| toggle    | toggle button                               | boolean  | -                      | -              |
| value     | value for selectable button                 | string   | -                      | 'check'        |
| selected  | value selected for selectable button        | -        | false                  |
| icon      | for icon button                             | element  | -                      | -              |
| text      | for icon button with text                   | string   | -                      | -              |
| classes   | button classes object                       | object   | { root, disabled,... } | {}             |
| onClick   | called when the user click on button        | function | () => {}               | () => {}       |
| onChange  | called when selectable button state changed | function | () => {}               | () => {}       |

### Usage

Here's an example of basic usage:

```js

<STButton color="secondary" onClick={onClick}>
  Active btn
</STButton>

<STButton
  onClick={onClick}
  icon={
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24px" height="24px">
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  }
  text="Add parameter"
/>

```

### STCheckbox

###Props

| Prop name | Description                                                   | Type     | Format                                    | Default values |
| --------- | ------------------------------------------------------------- | -------- | ----------------------------------------- | -------------- |
| checked   | checked value                                                 | boolean  | -                                         | false          |
| size      | label font size                                               | string   | s,m,l                                     | m              |
| label     | checkbox label                                                | string   | -                                         | -              |
| classes   | checkbox classes object                                       | object   | root,label, disabled,icon,checkedIcon,... | -              |
| onChange  | onChange will be triggered while the value of input changing. | function | () => {}                                  | () => {}       |

### Usage

Here's an example of basic usage:

```js

<STCheckbox size="s" checked={true} label="On state" name="checkbox1" onChange={onChange} />

<STCheckbox checked={false} label="Off state" name="checkbox2" onChange={action('changed')} />

```

### STDropdown

###Props

| Prop name  | Description                                                                                                                                                                                                                                                                                   | Type     | Format   | Default values |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------------- |
| selected   | selected option                                                                                                                                                                                                                                                                               | object   | -        | {}             |
| options    | array of options [{ label: 'Add option', value: 0 },...] and for nested [{ label: 'Remove option', value: [{ label: 'Option 1',value: 1 }]}]                                                                                                                                                  | array    | -        | -              |
| headerIcon | icon as button to open dropdown                                                                                                                                                                                                                                                               | element  | -        | -              |
| classes    | dropdown classes - root,label, container,menu,openedMenu, icon,iconOpen, listHeader,headerLabel,nestedContainer,nestedPaper, nestedHeaderLabel,menuNested,muneSuggest,iconRight,textField,inputControl,adornment,inputField,clearButton,list,itemList, listButton, listButtonWithNestedobject | object   | -        | -              |
| onChange   | onChange will be triggered when item will be selected                                                                                                                                                                                                                                         | function | () => {} | () => {}       |
| function   | () => {}                                                                                                                                                                                                                                                                                      | () => {} |

### Usage

Here's an example of basic usage:

```js

<STDropdown
        onChange={onChange}
        options={[
          { label: 'Option', value: 0 },
          { label: 'Option 1', value: 1 },
          { label: 'Option 2', value: 2 },
        ]}
      />

 <STDropdown
        headerIcon={
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" fill="#3ebfcf" width="32px" height="32px">
            <path d="M14 6l-1-2H5v17h2v-7h5l1 2h7V6h-6zm4 8h-4l-1-2H7V6h5l1 2h5v6z" />
            <path d="M0 0h24v24H0z" fill="none" />
          </svg>
        }
        onChange={onChange}
        options={[
          { label: 'Add option', value: 0 },
          { label: 'I’m the longest term in the options', value: 1 },
          { label: 'Option 2', value: 2 },
          { label: 'Option 6', value: 6 },
        ]}
      />

```

### STLocation

#### To use this component, you are going to need to load [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)

Load the library in your project

```html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
```

###Props

| Prop name    | Description                                                   | Type     | Format                                        | Default values |
| ------------ | ------------------------------------------------------------- | -------- | --------------------------------------------- | -------------- |
| address      | deault input value                                            | string   | ''                                            | ''             |
| label        | main label                                                    | string   | -                                             | Business name  |
| placeholder  | input placeholder                                             | string   | -                                             | Search...      |
| onChange     | onChange will be triggered while the value of input changing. | function | () => {}                                      | () => {}       |
| classes      | main classes                                                  | object   | { container: '', dropdown: '', list: ''}      | {}             |
| controlClass | input control class                                           | string   | https://material-ui.com/api/form-control/#css | ''             |
| labelClasses | label classes                                                 | object   | https://material-ui.com/api/input-label/#css  | {}             |
| inputClasses | input classes                                                 | object   | https://material-ui.com/api/input/#css        | {}             |

### Usage

Here's an example of basic usage:

```js
<STLocation label="Location" onChange={onChange} />
```