React-ultralite-ui NPM

ADCAT UI Component Library

Author: `Indrajeet Ambadekar`

Installation:

npm install -S react-ultralite-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

TextBox

Usage:

  import {TextBox} from "adcat-ui";



  <TextBox
    className="address-box"
    name="address-box"
    value={addressOfResidence || ''}
    onChange={(value) =>
      // dom something with the `value`
    }
    label="Address of residence"
    rows={2}
    textAreaStyles={{ resize: 'vertical' }}
    labelStyles={{ color: 'red' }}
    wrapperStyles={{ backgroundColor: 'red' }}
  >
  </TextBox>

Parameters:

Attribute	Description	Mandatory
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
rows	Specifies the visible number of lines in a text area	NO
cols	Specifies the visible width of a text area	NO
textAreaStyles	Text Area Styles (Object)	NO
labelStyles	Label Styles (Object)	NO
wrapperStyles	Wrapper Styles (Object)	NO

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

ADCAT UI Library reactjs hooks inputs modals datepickers

@testing-library/jest-dom @testing-library/react @testing-library/user-event classnames react react-date-picker react-dom react-scripts react-transition-group web-vitals

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago