stuff-ui

    19.0.73 • Public • Published

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

    Keywords

    Install

    npm i stuff-ui

    DownloadsWeekly Downloads

    1,370

    Version

    19.0.73

    License

    ISC

    Unpacked Size

    1.7 MB

    Total Files

    7

    Last publish

    Collaborators

    • stuff-eng
    • omardwaikat
    • razankiwan
    • leena_haj_yousef