stuff-ui
Version:
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
195 lines (155 loc) • 9.45 kB
Markdown
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} />
```