react-microlite-ui

A UI module with basic consumable components like input fields, check boxes, radio buttons, modals, progress bars, accordians etc built on tailor made specs for lightweight integration

Usage no npm install needed!

<script type="module">
  import reactMicroliteUi from 'https://cdn.skypack.dev/react-microlite-ui';
</script>

README

ADCAT UI Component Library


Author: Indrajeet Ambadekar

Installation:

npm install -S react-microlite-ui

For a better experience, use fontawesome as well

Available Components:

  • Input fields Number field, Text field , date field
  • Select Field
  • Progress Bar
  • Modal
  • Toggle Switch
  • CheckBox
  • Sliding Drawer (Right-to-Left motion)
  • Text input with auto suggest
  • Accordion (Top-to-Bottom motion)

Please refer the below content to understand the usage of available components in detail:

Input Field

Usage:
  import {InputField} from "adcat-ui";



  <InputField
    type="text"
    className="text-field" // your classname
    label="User name"
    name="username"
    value={uname}
    placeholder="Enter user name"
    onChange={(value) => {
      setTestStr(value); //use a set-state or custom callback.
    }}
    textStyle="uppercase" // optional. `uppercase` returns string in uppercase
    iconLeft={<i className="fas fa-user" />}
    iconRight={<i className="fas fa-user" />}
  />
Parameters:
Attribute Description Mandatory
type "text" / "Number" / "email" / "password" / "date" YES
className user defined string NO
label custom string or '' YES
name custom string YES
value javascript variable YES
disabled boolean true/false NO
onChange callback that returns the value of input NO
onFocus callback that returns the javascript event on focus NO
onBlur callback that returns the javascript event on blur NO
onKeyPress callback that returns the javascript event on Key Press NO
onKeyUp callback that returns the javascript event on Key Up NO
onKeyDown callback that returns the javascript event on Key Down NO
autoFocus boolean true/false NO
iconLeft provide jsx to display font-awesome icon or image on the left end of input NO
iconRight provide jsx to display font-awesome icon or image on the left end of input NO
data-testid incase you want to add a test id for jest/enzyme/react-testing-library NO

Select Field

Usage:
  import {SelectField} from "adcat-ui";



  <SelectField
    noDefault={false}
    value={maritalStatus}
    onChange={(value) => setMaritalStatus(value)}
    className="select-field"
    label="Marital status"
  >
    <option value="SINGLE">Single</option>
    <option value="MARRIED">Married</option>
    <option value="WIDOW">Widow</option>
    <option value="DIVORCED">Divorced</option>
  </SelectField>
Parameters:
Attribute Description Mandatory
noDefault Type: Boolean (true/false). Setting this to false adds and empty option with empty value to use as placeholder. setting this to true removes the empty option and user defined options are displayed NO (Default false)
className user defined string NO
label custom string or '' YES
onChange callback that returns the value of input NO
data-testid incase you want to add a test id for jest/enzyme/react-testing-library NO
  **Note:
  `option` children with value and content are mandatory for this component

Progress Bar

Usage:
  import {ProgressBar} from "adcat-ui";



  <ProgressBar
    className="upload-progress"
    value={50} // maximum 100. takes value as percentage eg:(40% / 50%)
    height={20}
    fillLabel={`Floating value that moves with value`}
    label={`Fixed value displayed at end of progress bar`}
    bgColor="#ececec"
  />
Parameters:
Attribute Description Mandatory
className user defined string NO
label Fixed value displayed at end of progress bar YES
fillLabel Floating value that moves with value YES
bgColor hex color code YES
height Height in pixels for the progress bar YES
value between 0 and 100 YES

Modal

Usage:
  import {UiModal} from "adcat-ui";



  <UiModal id="modal-id" isShowing={modalFlag} hide={togglePwdModal}>
    // html goes here
  </UiModal>

Parameters:
Attribute Description Mandatory
className user defined string NO
id unique id for modal indetification YES
isShowing Boolean (true/false) YES
hide callback function to dismiss the dialog by setting the value of isShowing attribute to false YES

Toggle Switch

Usage:
  import {Switch} from "adcat-ui";



  <Switch
    name={`unique-name`}
    onChange={(value) => {
      toggleAccount(value);
    }}
    checked={flag}
  ></Switch>

Parameters:
Attribute Description Mandatory
className user defined string NO
name unique name for switch indetification YES
checked Boolean (true/false) YES
disabled Boolean (true/false) NO
onChange callback that returns the opposite value of input YES

CheckBox

Usage:
  import {Checkbox} from "adcat-ui";



  <Checkbox
    className="item-select"
    checked={flag}
    onChange={(value) => handleClick(value)}
  />

Parameters:
Attribute Description Mandatory
className user defined string NO
checked Boolean (true/false) YES
disabled Boolean (true/false) NO
onChange callback that returns the opposite value of input YES

Sliding Drawer

Usage:
  import {SlideDrawer} from "adcat-ui";



  <SlideDrawer
    show={flag}
    id="info-drawer"
    handleClose={dismissDialog}
  >
    // HTML goes here
  </SlideDrawer>

SlideDrawer opens RTL(right-to-left)

Parameters:
Attribute Description Mandatory
className user defined string NO
id unique id for drawer indetification YES
show Boolean (true/false) YES
handleClose callback function to dismiss the drawer by setting the value of show attribute to false YES

Accordion

Usage:
  import {Accordian} from "adcat-ui";



  <Accordion
    title={<div className="accordian-heading">According Heading</div>}
  >
    // HTML goes here
  </Accordion>

Parameters:
Attribute Description Mandatory
className user defined string NO
title string or jsx YES
openIcon custom icon(image/svg/fontawesome-icon) to open the accordian NO
collapseIcon custom icon(image/svg/fontawesome-icon) to collapse the accordian NO

Text input with auto suggest

Usage:
  import {AutoComplete} from "adcat-ui";



  <AutoComplete
    dataSet={suggestedUsers} //array
    onChange={(value) => setSearchParams(value)}
    onKeyUp={(event) => {
      if (event.keyCode === 13 || event.keyCode === 32) {
        _fetchUsers();
      }
    }}
    label="Search users by name/email/username"
    onSelect={(item) => _selectUser(item)}     // callback to select item
    iconLeft={<i className="fas fa-users" />}  // optional image/svg/fontawesome-icon
    iconRight={                                // optional image/svg/fontawesome-icon
      <i
        className="fas fa-times"
        onClick={() => {
          setSuggUsers([]);
          setSearchParams("");
        }}
      />
    }
    autoFocus={true}
    placeholder="John Doe"
    value={searchParams}
    renderItem={(x) => (                        // jsx to display suggestion list
      <div className="sugg-user-row">
        <div className="grid" md={1}>
          <div className="content">
            <i className="fas fa-user" />
          </div>
        </div>
        <div className="grid" md={11}>
          <div className="content">
            <div className="user-name">
              {x.firstname} {x.lastname} [email: {x.email}]
            </div>
          </div>
        </div>
      </div>
    )}
  />