This project was bootstrapped with Create React App.
Available Scripts
Usage
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:
<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:
<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:
<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
Google Maps JavaScript API
To use this component, you are going to need to loadLoad the library in your project
<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:
<STLocation label="Location" onChange={onChange} />