mpulsemobile-react-component-library

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.

Table of Contents

• BreadCrumbs
• ButtonPrimary
• ButtonSecondary
• ButtonTab
• ButtonToggle
• Checkbox
• CheckmarkComplete
• ConfirmLeaveModal
• DatePicker
• DropDown
• DropDownLazy
• ErrorBoundary
• EmptyTable
• FadeInOut
• Input
• LinkPrimary
• LinkSecondary
• Paginator
• PhoneNumber
• ProgressBar
• RadioButton
• SearchBar
• Spinner

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

License

MIT © mpulsemobile