@wework/inventory-manager-components

Inventory Manager Components

An embedded Inventory Manager Tool

Inventory Manager Components

• Getting started
  • Installation
  • Usage
• Deployement
  • Release a new version
  • Standalone
  • Spacestation
• Components
  • Sidebars
  • Snackbars
  • Modals

Getting Started

Installation

NPM

You might need npm login

You will need to be logged in to install a dependency. Execute npm login and use the username, password, and e-mail found in 1Password under npmjs (dev-team).

npm install @wework/inventory-manager-components

# Yarn
yarn add @wework/inventory-manager-components

Usage

import React from 'react'
import { SessionInventoryManager } from '@wework/inventory-manager-components'

const ApplicationComponent = () => {
  return (
    <SessionInventoryManager
      configuration={{
        appId: 'appId',
        appSecret: 'appSecret',
        baseUrl: 'https://occupancy-api.phoenix.dev.wwrk.co/v2',
      }}
      buildingId="b308b94c-bca6-4318-b906-1c148f7ca183"
    />
  )
}

Deployement

Release a new version

In order to release a new version, first after making PR and merging to master, we pull the latest master version, and run

• You will need NPM login for that => yarn run publish:v2

This will release a new version on npm of each updated package, and we'll be able to use it to update.

Standalone

In order to deploy a new version on standalone, we'll have first to release a new version of Inventory manager components on NPM then update according to the new version the package.json located in Inventory-manager-tool repo, After updating and pushing to master it will automatically update both standalone production and staging.

Spacestation

In order to deploy a new version on spacestation, after releasing a new update of inventory-manager-componenets we will go to spacestation's repo package.json and update accordinly the version. After updating, making a PR and pushing to master it will automatically update production of inventory manager. a staging as well as a preproduction will be automatically deployed upon PR.

Components

Sidebars

Sidebars are controlled from the HOC WithSidebars

value={{ isOpen, openSideBar, closeSideBar, sideBarName }}

isOpen: Is to determine wheter the sidebar is open.

openSideBar('name'): Takes name as a parameter and opens the sidebar with the selected option.

sideBarName: The current sidebar name

closeSidebar: Will close the sidebar and set the name to null

If we want to open a sidebar after an action we just call the following:

ex: openSideBar("BuildingInfo")

If we want to close a sidebar after an action we call:

closeSideBar()

Snackbars

Snackbars are also controlled via a HOC , withSnackbar, we can edit the behavior if needed on SnackBarProvider.js

If we want to display an alert we need to attach our component to the HOC, example:

export default withSnackbar(OfficeNoteEditModal)

Then we call snackBars from the props, and we can add an alert:

snackBars.addAlert({
text: `Note has been saved.`,
variant: 'success',
})

There are 3 types of snackbars,

• Success => Green snackbar
• Failed => Red Snackbar
• default => Grey snackbar

Modals

Modals can be called anytime via their components and controlled by the parent, We usually control if they are open or no via the following props open and onClose We can also customise them depending on the use Case,

Example

<Modal
  open={modalData.open}
  title={'Confirm Action'}
  content={modalData.content}
  confirmText={'YES'}
  cancelText={'NO'}
  onConfirm={modalData.onConfirm}
  onClose={() => setModalData({ ...modalData, open: false })}
/>

Or we can create our own Modal and call it directly.