mpulsemobile-react-component-library

v1.3.9

Published

2 years ago

A React component library from Mpulse Mobile.

Downloads

0High
0Medium
0Low

mpulsemobile

react-component-library

component library

Install

npm install --save mpulsemobile-react-component-library

Usage

import React, { Component } from 'react'

import { Input, SearchBar } from 'mpulsemobile-react-component-library'

export default class App extends Component {
  render () {
    return (
      <div>
        <Input
          label="CITY"
          name="city"
          placeholder="type something here..."
          value=""
          onChange={ (e) => {console.log('val', e.currentTarget.value, 'name', e.currentTarget.name)} }
          disabled={false}
          onBlur={ (e) => {console.log('blur', e)} }
        />
        <SearchBar
          placeholder="Search Members..."
          query=""
          onSearch={ (val) => {console.log(val)} }
          onChange={ (val) => {console.log(val)} }
        />
      </div>
    )
  }
}

Style Guide

This library is based on the mPulse Mobile official styleguide. To see images of the components listed below click on the Style Guide link.

BreadCrumbs

type View = {
  name: string,
  displayName: string,
  completed: boolean,
  currentView: boolean,
}

type Props = {
  updateView: (view: string, confirmed: ?boolean) => void,
  views: View[],
}

<BreadCrumbs
  views={views}
  updateView={ (view, confirmed) => {console.log('view', view)} }
/>

ButtonPrimary

type Props = {
  label: string,
  onClick: () => void,
  disabled: boolean,
  size: string, // large, medium, small
}

<ButtonPrimary
  label={'CLICK ME'}
  onClick={ () => {console.log('ButtonPrimary clicked')} }
  disabled={false}
  size="large"
/>

ButtonSecondary

type Props = {
  label: string,
  onClick: () => void,
  disabled: boolean,
  size: string, // large, medium, small
}

<ButtonSecondary
  label={'CLICK ME'}
  onClick={ () => {console.log('ButtonSecondary clicked')} }
  disabled={false}
  size="large"
/>

ButtonTab

type Props = {
  label: string,
  onClick: () => void,
  disabled: boolean,
  selected: boolean,
  size: string, // large, medium, small
}

<ButtonTab
  label={'CLICK ME'}
  onClick={ () => {console.log('ButtonTab clicked')} }
  disabled={false}
  selected={true}
  size="large"
/>

ButtonToggle

type Props = {
  label: string,
  label1: string,
  label2: string,
  value1: string | number,
  value2: string | number,
  selected: string,
  name: string,
  onChange: (e: SyntheticEvent<any>) => void,
};

<ButtonToggle
  name={"gender"}
  label="GENDER"
  label1={"Male"}
  label2={"Female"}
  value1={"male"}
  value2={"female"}
  selected={"female"}
  onChange={ e => {console.log('event', e.currentTarget.value)} }
/>

Checkbox

type Props = {
  label: string | number,
  name: string | number,
  checked: boolean,
  onChange: (e: SyntheticEvent<any>) => void,
  disabled: boolean,
}

<Checkbox
  label="Want More Info?"
  name="InfoWanted"
  checked={true}
  onChange={ e => {console.log('event', e.currentTarget.checked)} }
  disabled={false}
/>

CheckmarkComplete

type Props = {
  complete: boolean,
}

<CheckmarkComplete
  complete={true}
/>

ConfirmLeaveModal

type Props = {
  onClick: (confirm: boolean) => void,
  header: string,
  body: string,
  visible: boolean,
  label1: string,
  label2: string,
}

<ConfirmLeaveModal
  onClick={ (confirm) => {console.log('confirm', confirm)} }
  header="Warning"
  body={"Are you sure you want to leave?"}
  label1={"Yes, Leave"}
  label2="Quit, Don't Save"
  visible={true}
/>

DatePicker

type Props = {
  label: string,
  value: string,  // must be ISO format YYYY-MM-DD
  onDayChange: (date: string) => void,
  disabled: boolean
  hasError: boolean
  min: string   // optional, must be ISO format YYYY-MM-DD
  max: string  // optional, must be ISO format YYYY-MM-DD
};

<DatePicker
  label={'APPOINTMENT DATE'}
  value={'2019-5-13'} // must be ISO format YYYY-MM-DD
  onDayChange={ (date) => { console.log('date', date) } }
  disabled={false}
  hasError={false}
  min={'2019-05-21'}  // optional, often used for selecting a date in the future like an appointment
  max={'2020-01-21'}  // optional, often used for selecting a date in the past like a birthdate
/>

DropDown

Good for a short list of unique items.

type Props = {
  disabled: boolean,
  width: number,
  label: string,
  items: any[],
  selectedIndex: number,
  onItemClick: (itemIndex: number) => void,
}

<DropDown
  width={350}
  disabled={false}
  label={"STATE"}
  items={['California', 'Georgia', 'Arizona', 'Utah', 'Nevada', 'Colorado', 'Oregon']}
  selectedIndex={4}
  onItemClick={ itemIndex => {console.log('itemIndex', itemIndex)} }
/>

DropDownLazy

Good for large lists that need to be lazy loaded and/or need a search.
Names of values can be duplicated but ids should be unique.

type Props = {
  disabled: boolean,
  width: number,
  label: string,
  items: {id: number, name: string}[],
  selectedId: number,
  onItemClick: (id: number) => void,
  onSearchChange: (val: string) => void,
  onSearch: (val: string) => void,  // val === '' if clearing search
  searchQuery: string,
  onScroll: (e: SyntheticEvent<any>) => void,
  fetching: boolean,
}

<DropDownLazy
  disabled={false}
  width={400}
  label={'Member'}
  items={ [{id: 0, name: 'mario'}, {id: 1, name: 'ned'}] }
  selectedId={1}
  onItemClick={ (id) => { console.log('id', id)} }
  onSearchChange={ (searchQuery) => {console.log(searchQuery)} }
  onSearch={ (searchQuery) => {console.log(searchQuery)} }
  searchQuery={''}
  onScroll={ (e) => {console.log(e, 'scrolling')} }
  fetching={false}
/>

ErrorBoundary

Requires React 16 to be used. Wrap this around any other component to set an Error Boundary.

type Props = {
  children?: React.Node,
}

<ErrorBoundary>
  <MainSectionComponent />
</ErrorBoundary>

EmptyTable

Used while data is loading. Can accept children to be placed in middle like a spinner but is not required.

type Props = {
  children?: React.Node,
  limit: number,
  visible: boolean,
}

<EmptyTable
  limit={10}
  visible={true}
>
  <Spinner
    left={'50%'}
    top={'40%'}
    fontSize={'3em'}
    visible={true}
  />
</EmptyTable>

FadeInOut

Toggle visible prop to see the child component fade in/out.

type Props = {
  visible: boolean,
  children?: any,
}

<FadeInOut visible={false}>
  <p>There has been an error.</p>
</FadeInOut>

Input

Allows for adding additional props in case you want all the input DOM props exposed. Examples would be onBlur, onFocus, onClick, etc.

type Props = {
  label: string|number,
  value: string|number,
  name: string|number,
  placeholder: string|number,
  onChange: (e: SyntheticEvent<any>) => void,
  disabled: boolean,
  hasError: boolean,
  className?: string,
  subtext?: string,
}

<Input
  label="CITY"
  name="city"
  placeholder="type something here"
  value=""
  onChange={ (e) => {console.log('val', e.currentTarget.value)} }
  disabled={false}
  hasError={false}
  subtext={'Required'}
/>

LinkPrimary

type Props = {
  text: string,
  disabled: boolean,
  onClick: () => void,
}

<LinkPrimary
  disabled={false}
  text="PRIMARY LINK"
  onClick={ () => {console.log('link clicked')} }
/>

LinkSecondary

type Props = {
  text: string,
  disabled: boolean,
  onClick: () => void,
}

<LinkSecondary
  disabled={false}
  text="SECONDARY LINK"
  onClick={ () => {console.log('link clicked')} }
/>

Paginator

Works best with an object of pages in your state.

  const pages = {
    1: ['id to first item', 'second id'],
    2: ['id to first item on second page', 'second id']
  }

type Props = {
  limit: number,
  total: number,
  activePage: number,
  onPaginatorClick: (page: number) => void,
}

<Paginator
  limit={5}
  activePage={1}
  total={45}
  onPaginatorClick={ (activePage) => console.log('page', activePage) }
/>

PhoneNumber

Similar to Input but has a default/uneditable +1 at beginning of input.
Allows for adding additional props in case you want all the input DOM props exposed. Examples would be onBlur, onFocus, onClick, etc.

type Props = {
  label: string | number,
  value: string | number,
  name: string | number,
  placeholder: string | number,
  onChange: (e: SyntheticEvent<any>) => void,
  disabled: boolean,
  hasError: boolean,
};

<PhoneNumber
  label="HOME PHONE NUMBER"
  name='homePhoneNumber'
  placeholder='8886785735'
  value='5553332222'
  onChange={e => {console.log('e', e)} }
  disabled={false}
  hasError={false}
/>

ProgressBar

type Props = {
  show: boolean,
  amount: number,
}

<ProgressBar
  show={true}
  amount={60}  // change with a setInterval to see movement
/>

RadioButton

type Props = {
  id: string|number,  // be sure to make id unique
  label: string,
  name: string,
  value: string|number,
  checked: boolean,
  onChange: (e: SyntheticEvent<any>) => void,
  disabled: boolean,
}

<RadioButton
  id={1}
  label={'female'}
  name={'gender'}
  value={1}
  checked={true}
  onChange={e => {console.log('e', e.currentTarget.value)} }
  disabled={false}
/>

SearchBar

type Props = {
  placeholder: string,
  query: string,
  onSearch: (val: string) => void,  // val === '' if clearing search
  onChange: (val: string) => void,
}

<SearchBar
  placeholder="Search Members"
  query=""
  onSearch={ (val) => {console.log('search', val)} }
  onChange={ (val) => {console.log('change', val)} }
/>

Spinner

Wrap with a parent component that has position relative.

type Props = {
  left: string,
  top: string,
  fontSize: string,
  visible: boolean,
}


<div style={{
  position: 'relative', background: 'lightgrey', height: 100, width: 100
}}>
  <Spinner
    left={'50%'}
    top={'50%'}
    fontSize={'2em'}
    visible={true}
  />
</div>

Local Setup

OPTION 1

Link this package locally and view changes in apps that use the package:

Within this project, create a local symlink

npm link

Install dependencies (only if this is your first time running the app or dependencies have been updated)

npm install

Run the package app locally

npm start

Within the project that depends on this package, use the local link

npm link mpulsemobile-react-component-library

Restart the app that depends on this package

NOTE: The above actions can be undone by replacing the link command with unlink

OPTION 2:

Run the example app and view live renderings of all the components:

open two terminals:

npm start

cd example && npm start

go to localhost:3000 to see a live rendering of the components

NOTE: If it's your first time running this locally, you will need to run npm install in both the top-level and "example" directories

Publishing Changes to NPM

IMPORTANT NOTE: You must manually update the version number in package.json before publishing changes

npm login

npm publish