stuff-ui

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

To use this component, you are going to need to load Google Maps JavaScript API

Load 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} />