@parkhub/parkhub-ui NPM

parkhub-ui

private component library for ParkHub projects

Requirements

Peer dependencies

"@react-md/dialog": ">= 2.8.2",
"@react-md/icon": ">= 2.8.2",
"@react-md/layout": ">= 2.8.2",
"@react-md/list": ">= 2.8.2",
"@react-md/menu": ">= 2.8.2",
"@react-md/states": ">= 2.8.2",
"@react-md/theme": ">= 2.8.2",
"@react-md/typography": ">= 2.8.2",
"@react-md/utils": ">= 2.8.2",
"react": ">= 17.0",
"react-dom": ">= 17.0"

note: There are 3 version of this package. v1 -> develop branch used with react 16.8.6 & react-md v1

v2 -> v2 branch used with react 17+ & react-md v4

v3 -> v3 branch used with react 17+ & react-md v5 and new parkhub rbac features.

Install peer dependencies

npm i -S react react-dom react-md

yarn add -S react react-dom react-md

Install

npm install --save @parkhub/parkhub-ui

Components

Button

Button Props

Name	Default value	PropType	Description
children	-	PropTypes.node	node to render in the button
className	-	PropTypes.string	class(es) to apply to the button. This can be anything, there are built in convenience classes: primary, secondary, destructive, filled, outlined, clear, full, elevate
disabled	false	PropTypes.bool	set disabled state of button
href	-	PropTypes.string	if this is included it will be rendered with an `a` tag instead of `button`
icon	-	PropTypes.string	icon = material-icons. This will render an icon only, if `children` is passed, it will render an icon to the left of the `children`
type	button	PropTypes.oneOf('button', 'reset', 'submit', null),	set the type of button
(button props)	-	any button attributes	any props not listed will be applied to the button as attributes. (onClick, title, etc...) `<Component {...props}...`

Button Usage

import React from 'react'
import { Button } from '@parkhub/parkhub-ui'
...

const Example = () => {
  function handleClick() {
    console.log(click)
  }

  return (
    <Button className="filled primary elevate" onClick={handleClick} />
  )
}

FontIcon

Render material icons as icon font. Requires material icons to be loaded in your project

FontIcon Props

Name	Default value	PropType	Description
children	-	PropTypes.node	node to render in the button
className	-	PropTypes.string	class(es) to apply to the button. this can be anything, there are built in convenience classes: primary, secondary, destructive, filled, outlined, clear, full, elevate
style	-	PropTypes.object	style object passed to icon

FontIcon Usage

import React from 'react'
import { FontIcon } from '@parkhub/parkhub-ui'
...

const Example = () => {
  function handleClick() {
    console.log(click)
  }

  return (
    <FontIcon
      className="my-class"
      style={{ fontSize: '48px', color: '#FF0000' }}
    >
      clock
    </FontIcon>
  )
}

Header

Header Props

Name	Default value	PropType	Description
adminMenu		PropTypes.node	optional node passed into admin menu
appMenuActive	true	PropTypes.bool	show app menu in header
authUser		PropTypes.object	user object used to display user info. if no object is passed app menu and user menu will not mount. expected shape matches current user object
backgroundColor	#FFF	PropTypes.string	background color of header
buttonColor	#A8A8A8	PropTypes.string	color of button icons in header
children	null	PropTypes.node	optional pass in to render children inside header
className	""	PropTypes.string	optional class to add to header-container
ghostingNode		PropTypes.node	optional if ghosting is enabled through `authUser.gk`, render this node. Currently used for ghosting dialog
logoClick		PropTypes.func	optional function to call if logo is clicked
logoSrc		PropTypes.string	`required` path/url for logo image src attr
logoWidth	100	PropTypes.number	logo will have this value for width
signOut		PropTypes.func	`required` function to call when sign out button is clicked
style		PropTypes.object	optional style object passed to header-container

Header Usage

import React from 'react'
import { Header } from '@parkhub/parkhub-ui'
...

const Example = () => {
  return (
    <Header
      adminMenu={<AdminMenu />}
      appMenuActive
      authUser={authUser}
      backgroundColor="#FFF"
      buttonColor="#FFF"
      children={<SubHeader />}
      className="my-class"
      ghostingNode={<GhostingDialog />}
      logoClick={onClick}
      logoSrc={ParkhubLogo}
      logoWidth={143}
      signOut={signOut}
      style={{ borderBottom: '1px solid #000' }}
    />
  )
}

LoadingSpinner

LoadingSpinner Props

Name	Default value	PropType	Description
delay	2000	PropTypes.number	amount of delay to add to hiding of spinner in milliseconds
show	true	PropTypes.bool	whether or not to display the spinner

LoadingSpinner Usage

import React from 'react'
import { LoadingSpinner } from '@parkhub/parkhub-ui'
...

const Example = () => {
  const [showSpinner, setShowSpinner] = useState(false);

  return (
    <LoadingSpinner show={showSpinner} delay={2000} />
  )
}

SessionDialog

SessionDialog Props

Name	Default value	PropType	Description
duration	60000	PropTypes.number	how long the countdown lasts in milliseconds
message	'Your session is about to expire!'	PropTypes.string	message displayed inside the dialog
onContinue		PropTypes.func	optional function to call when continue is clicked, will run just before `onHide`, recommended: refresh session logic
onHide		PropTypes.func	`required` function to call to when hiding the dialog
onSignOut		PropTypes.func	optional function to call to when sign out is clicked, if no prop is passed, nothing will happen. will run just before `onHide`, recommended: sign out logic
onTimeExpire		PropTypes.func	`required` function to call when countdown reaches `0`, recommended: sign out logic
visible	false	PropTypes.bool	`required` used to show and hide the dialog

SessionDialog Usage

import React from 'react'
import { SessionDialog } from '@parkhub/parkhub-ui'
...

const Example = () => {
  const [sessionModalVisible, setSessionModalVisible] = useState(false);

  function signOut() {
    // handle sign out
  }

  function refreshSession() {
    // handle refresh session
  }

  function hideSessionDialog() {
    setSessionModalVisible(false);
  }

  function showSessionDialog() {
    setSessionModalVisible(true);
  }

  return (
    <SessionDialog
      duration={60000}
      message="Your session is about to expire!"
      onContinue={() => refreshSession()}
      onHide={hideSessionDialog}
      onSignOut={signOut}
      onTimeExpire={signOut}
      visible={sessionModalVisible}
    />
  )
}

Development of this project

install Yarn npm also works

Run Rollup in watch mode to develop components

from root

yarn install
yarn

Run example app

In new terminal

cd example
yarn install
yarn

Linking package to your app for development

Install `yalc`

yarn global add yalc

Usage

# from root of this package
yalc publish

# from root of your app
yalc add @parkhub/parkhub-ui

When making changes to this package and you want them to be reflected in your app

yarn build:push

To remove the yalc linked package from your project

yalc remove @parkhub/parkhub-ui

For more yalc usage information look here

Publish package to NPM

Make sure you bump the version number in package.json prior to publishing

npm publish

Troubleshooting

Hook call issue during development of this project

A few things can cause this

Most likely it's a package link issue. Try using yarn link or npm link ... or better yet yalc

yarn global add yalc

# from root of this package
yalc publish

# from root of your app
cd example
yalc add @parkhub/parkhub-ui

Or the old way with yarn link

#root of project
yarn link
yarn install
cd node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link
cd example
yarn link @parkhub/parkhub-ui
yarn link react
yarn link react-dom