hospitalrun/components

Reusable React components used by HospitalRun

---

All HospitalRun code lives in a single repository, an architecture generally called a monorepo. This repository holds all of HospitalRun's open source projects that lived in their own separate Github repos: frontend, server and components. Built with React, Node, PouchDB/CouchDB and using offline first design, we're working to deliver an HIS system that makes usability the #1 requirement, is built specifically for developing world requirements, and seeks to give back time to patient care.

‼️ Version 1.0.0-beta is no longer supported. Version 2 is currently under development ‼️

FAQs

Question	Answer
"I want to help"	Find out how
"I have a question"	Join our Slack Workspace
"I found a bug"	Open an issue
"How can I deploy 1.0.0-beta?"	Follow this guide

Table of Contents

• Staging Area
• Contributing
• Community
• Project Structure
• Application Infrastructure
• Behind HospitalRun
• License

Staging Area

You can follow developments by visiting the dedicated staging environment. Use username / password as credentials to access.

Contributing

Interested in contributing to HospitalRun? There are many ways that you can get involved:

• Try the application
• Request new features and report bugs
• Write project documentation
• Contribute to the source code
• Sponsor the project
• Translate text in the application

Community

Join HospitalRun's community for discussion and ask questions: HospitalRun's Slack Workspace

Channels :

• #general - For general purpose
• #contributors - For people who contribute to HospitalRun by developing features
• #troubleshooting - For software related issues

Project Structure

Submodules	Version	Progress status	Build status	Coverage status	Code quality
Frontend
Server
Components
Core
CLI

Last Update: 2 July 2020

Application Infrastructure

A visual representation of the functionality of all HospitalRun modules and their interactions.

Behind HospitalRun

Hosted by

Sponsors

Backers

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs

Lead Maintainer

_{Maksim Sinik}

Core Maintainers

Jack Meyer	Matteo Vivona

Core Contributors

Stefano Casasola	Kumiko Kashii	Grace Lau	Stefano Miceli	Blessed Tabvirwa	Dr. MaryEtta Morris

Medical Supervisor

_{M.D. Daniele Piccolo}

Past Contributors

_{Michael Daly}

Contributors

Founders

John Kleinschmidtr	Joel Worrall	Joel Glovier

License

Released under the MIT license.

components's Issues

Text Field

🚀 Feature Proposal

Add text field to the component library.

Motivation

Text fields are used to enter multi-line plain text.

Example

Appointment description.

Add Panel Component

🚀 Feature Proposal

Add a Panel component to the component library.

The Panel component should support:

• An optional header
• A required body
• An optional footer
• Ability to be collapsible

Motivation

Grouping of like items.

Example

Please provide an example for how this feature would be used.

Rewrite the readme to make it more explicit

💬 Questions and Help

It is necessary to make more explicit the methods to contribute and the instructions to use the components in an external project

Calendar

🚀 Feature Proposal

Add a calendar to the components library.

Motivation

Calendars are used to display information that needs to be organized by day, week, or month.

Example

Displaying a doctor's schedule for the day.

Calendar should be able to be viewed in agenda view, day view, week view, month view.

Potential Options

• react-big-calendar
• @fullcalendar/react

Both of these options are heavyweight, so other solutions might be needed.

Updates README.md

Rewrite Spinner example and add new examples for Graph components

Tabs and Tab Items

🚀 Feature Proposal

Add tabs and tab items to the component library.

Motivation

Tabs and Tab Items are an organization technique to group information so the page does not become cluttered.

Example

When viewing patient details, there might be information such as personal information, appointments, diagnoses, and billing information. These should be in their own tab so the page does not become cluttered.

Relevant Links

https://react-bootstrap.github.io/components/tabs/

Typography

🚀 Feature Proposal

Add Typography components to the library.

Motivation

Typography will allow for consistent text and text styling across the application. This will also allow for differences between contextual meaning and styling. (i.e. the element represents an <h1> tag on the page, but we want to style it like an <h3> tag).

Example

Any page with text.

https://getbootstrap.com/docs/4.0/content/typography/

Components specs

Here are listed must-have components. The list will be expanded and improved over time. If a component depends on a 3rd party component, it must be wrapped it in a way that it could be replaced with no effort, if we want to change that dependency in the future: we need to expose our public API. Some dependency are still missing because we need to test some libraries before deciding.

Components we need:

• Table based on react-table bundlephobia (#28)
  • (remote) pagination
  • injecatble behaviours
  • fuzzy search
  • (remote) searchable columns
  • (remote) sortable content
  • custom column actions
  • inline row details
  • ...
• Form, based on Formik library bundlephobia, (#32) must have:
  • form builder: outputs a jsonschema, including validation and field types
  • auto building forms from a jsonschema
  • auto validating on predefined input types; function on custom input types
  • Rich text editor: (#29)
    • TinyMCE bundlephobia (we need also to add globally tinymce.min.js that is another 452KB, but we can cache it in an aggressive way): we have to check if the license is compatible with a MIT licensed opensource project
• Loader based on react-spinners bundlephobia
• Viewer:
  • dicom based on OHIF
  • 3d files based on three.js bundlephobia
    • OBJ
    • STL
• Alerts and Confirmations based on [missing] (#30)
• Video Player based on [missing] (#31)
• Toaster based on react-toastify bundlephobia
• Uploader
  • custom upload component
  • opt-in end-to-end encryption
• File manager
  • custom file manager
  • opt-in end-to-end encryption
• Chat
  • web-socket based (I'll really want to exclude socket.io from the equation, if possible)
  • end-to-end encrypted

Deprecated devDeps @types/[email protected]

🐛 Bug Report

No more need to use @types/storybook__react. storybook__react provides its own type definitions, so we don't need this installed.

Related to #115

npm WARN deprecated [email protected]: use String.prototype.padStart()
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/storybook__react - Not found
npm ERR! 404 
npm ERR! 404  'storybook__react@*' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@types/storybook__react'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2019-11-22T20_12_18_807Z-debug.log
##[error]Process completed with exit code 1.

Your Environment

• node version: 12
• os: Mac

Lists

🚀 Feature Proposal

Add List component to the library.

Motivation

List Component would be useful to display lists of information.

Example

Displaying diagnoses of patients.

https://react-bootstrap.netlify.com/components/list-group

Adds Coveralls

🚀 Feature Proposal

Adds Coveralls for continuous test coverage.

Rich Text Editor

🚀 Feature Proposal

Add a rich text editor as a component.

Motivation

Rich text editors are used when there is a need for formatted text content.

Example

Patient Notes

Relevant Links

• tinymce
• react-quill
• draft-js
• slate

TypeError: domGlobals.window.matchMedia is not a function (tinymce 5.1.2)

🐛 Bug Report

Version 5.1.2 of tinymce creates a test error.
Reference PR #112 and #93

$ tsdx test --env=jsdom
 FAIL  test/textfield.test.tsx
  ● Test suite failed to run

    TypeError: domGlobals.window.matchMedia is not a function

      2 | import { Editor } from '@tinymce/tinymce-react'
      3 |
    > 4 | import 'tinymce/tinymce'
        | ^
      5 |
      6 | // Basic tinyMCE theme & skins required for editor to display
      7 | import 'tinymce/themes/silver/theme.min'

      at mediaMatch (../../node_modules/tinymce/tinymce.js:827:32)
      at DeviceType (../../node_modules/tinymce/tinymce.js:633:33)
      at Object.detect$2 [as detect] (../../node_modules/tinymce/tinymce.js:817:24)
      at ../../node_modules/tinymce/tinymce.js:829:43
      at Object.<anonymous> (../../node_modules/tinymce/tinymce.js:28251:2)
      at Object.<anonymous> (src/components/RichText/RichText.tsx:4:1)
      at Object.<anonymous> (src/components/RichText/index.tsx:1:1)
      at Object.<anonymous> (src/index.tsx:22:1)
      at Object.<anonymous> (test/textfield.test.tsx:4:1)

Your Environment

• ci: Travis, Azure Pipeline, GitHub
• node version: 12
• os: Linux, macOS

Radio buttons

🚀 Feature Proposal

Add radio buttons to the component library

Motivation

Radio button are used to select an element in a list where only one can be selected.

Example

Patient Type

https://react-bootstrap.netlify.com/components/forms/#forms-custom-checkboxes-and-radios

Related

#32

Remove gitmoji to improve CI pipeline

💥 Regression Report

Restore the semantic-release without the assistance of Gitmoji.
Repository to use as a reference: https://github.com/tehKapa/testone

New devDependencies will be:

• @commitlint/cli
• @commitlint/config-conventional
• @commitlint/prompt
• @semantic-release/changelog
• @semantic-release/commit-analyzer
• @semantic-release/git
• @semantic-release/github
• @semantic-release/release-notes-generator
• commitizen
• commitlint-config-cz
• cz-conventional-changelog
• husky
• semantic-release

Other configurations in package.json file

 "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Only necessary script in package.json

"semantic-release": "semantic-release"

Other configuration files:

commitlint.config.js

module.exports = { extends: ["@commitlint/config-conventional"] };

.releaserc

{
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    "@semantic-release/npm",
    ["@semantic-release/git", {
      "assets": ["package.json", "CHANGELOG.md"],
      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
    }],
    "@semantic-release/github"
  ]
}

Netlify autodeploy stoped working

💥 Regression Report

Netlify autodeploy feature was working previously and now suddenly stopped to build.
https://app.netlify.com/sites/hospitalrun/deploys/5d93ad309e2585000cb0da45

To Reproduce

Steps to reproduce the behavior: Run build-storybook in CI/CD environment.

Expected behavior

Autodeploy the storybook on Netlify.

Your Environment

CI/CD

Toaster stops working on storybook

🐛 Bug Report

After navigating to toaster info/warning/error, the toaster stops working. The only way to fix it is to cold refresh (F5) the whole storybook.

Expected behavior

The toaster must work in any case.

Paste the results here:

Modal

🚀 Feature Proposal

Add a modal to the component library.

Motivation

Modals are useful for displaying information, notifcations, or anything that needs to be displayed above the page.

Example

Confirmations

Relevant Links

https://react-bootstrap.github.io/components/modal/

Switch

🚀 Feature Proposal

Add a Switch component to the library.

Motivation

Switches are a simple UI technique to turn something on or off.

Example

Make an appointment an all day appointment.

Breadcrumb

🚀 Feature Proposal

Breadcrumbs help determine the user's current location in the application and also assists in navigation.

Motivation

Ease the use in navigation and knowing the context of the current location in the application.

Example

Home/Patients/View Patient

Forms

🚀 Feature Proposal

Add forms to the component library.

Forms should have:

• form builder: outputs a jsonschema, including validation and field types
• auto building forms from a jsonschema
• auto validating on predefined input types; function on custom input types

Motivation

Forms are used to enter information.

Example

Creating a new patient.

Relevant Links

• (formik)[https://bundlephobia.com/[email protected]]

Text Box component

🚀 Feature Proposal

Add a Text Box component to the components libraries.

Motivation

Text boxes are a core input mechanism. Text boxes are used to enter small bits of text like first and last names.

Example

First and last names for creating a new patient.

Labels

🚀 Feature Proposal

Add Labels to the component library.

Motivation

Used to display text.

Example

Labeling a form field.

Related

#32

Layout components

🚀 Feature Proposal

Create Layout components such as Column, Row, and Container

Motivation

Need a way to have standardized layouts.

Example

Creating layouts.

Themeing

🚀 Feature Proposal

Add a way to for a user of this component library to use a "theme".

Motivation

Easily change characteristics about styling across components.

Image Viewer

🚀 Feature Proposal

Add a component for images in the component library.

Motivation

Viewing images is necessary for applications.

Example

Patient Profile Image

Relevant Links

https://react-bootstrap.github.io/components/images/

Date and Time Picker

🚀 Feature Proposal

Add a date and time picker to the components library.

Motivation

Date and Time pickers are a common method for entering dates and times into a form. Our date and time picker must support different formats of dates/times and must support entering the date/time via keyboard or the picker.

Example

Start/End time of an appointment.

Dropdowns

🚀 Feature Proposal

Add a Dropdown component to the library.

Motivation

Dropdowns are useful to roll up like actions or secondary actions so those actions are out of the way of the rest of the UI.

Example

Profile icon in the nav bar.

https://react-bootstrap.netlify.com/components/dropdowns

Could not resolve entry module (node_modules/@hospitalrun/components/dist/components.esm.js)

🐛 Bug Report

Using the Pika CI/CD, @fox1t noticed a problem with the installation of the component.

- @pika/web installing... Error: Could not reso...
- @pika/web installing... 
Error: Could not resolve entry module (node_modules/@hospitalrun/components/dist/components.esm.js).
    at error (/home/fkschott/pika-monorepo/node_modules/rollup/dist/rollup.js:9408:30)
    at pluginDriver.hookFirst.then.resolveIdResult (/home/fkschott/pika-monorepo/node_modules/rollup/dist/rollup.js:16227:20)
Command failed with exit code 1 (EPERM): /home/f...
Command failed with exit code 1 (EPERM): /home/fkschott/pika-monorepo/node_modules/@pika/web/dist-node/index.bin.js --remote-url https://cdn.pika.dev --remote-package react,v16 --remote-package react-dom,v16 --remote-package vue,v2 --remote-package preact,v8 --remote-package lit-element,v2

Update TypeScript 3.6.4 to 3.7.2

🐛 Bug Report

To update TS, we have to wait Pull Request for this issue and a new version to be released.

Badges

🚀 Feature Proposal

Add badges as part of the component library.

Motivation

Badges are a way of quickly displaying information to the user by differentiating its styling, coloring, and formatting from the rest of the surrounding text.

Example

Displaying the current status of an appointment.

DateTimePicker input box should look like bootstrap

🚀 Feature Proposal

The DateTimePicker input box should look like a bootstrap input box. Right now, it does not match the other styling of the input boxes.

It is also does not align properly when placed inside a form group (all elements display in the same line).

Motivation

Formatting must remain consistent.

Example

DateTimePicker in create new patient form.

Related Issues

#34

Add form validation styling for form fields

🚀 Feature Proposal

To display a form validation message/styling should be consistent across all form controls.

Motivation

Displaying success/errors for fields.

Example

Form validation.

https://react-bootstrap.netlify.com/components/forms/#forms-validation-native

Related

#62 #63 #64 #65 #33 #20

Button Components

🚀 Feature Proposal

Add two different type of button components.

1. Button (a button that has a label and optionally an icon)
2. IconButton (a button that only has an icon).

Motivation

Buttons are a core component that should be standardized across the project.

Example

Submitting forms.

Video Player

🚀 Feature Proposal

Add a video player component to the library.

Motivation

Video players will be used to play videos.

Example

Video notes

Relevant Links

• video-react

Tables

🚀 Feature Proposal

Tables are used to display lists of information in an organized way.

A table should be able to:

• pagination
• fuzzy search
• searchable columns
• sortablecontent
• custom column actions
• injectable behaviors
• inline row details

Motivation

Tables are core to information displaying.

Example

Listing patients, appointments, diagnoses,

Relevant Links

https://www.npmjs.com/package/react-table

yarn.lock causes build error

🐛 Bug Report

Netlify needs yarn.lock file to execute the commands yarn install and yarn build.
If you do not have a yarn.lock file, buildbot will not install yarn. However, the yarn.lock file creates errors during the build stage.

To Reproduce

Steps to reproduce the behavior:

1. Clone repos
2. Install all deps with yarn install
3. Launch build with yarn build

Your Environment

• node version: 12
• os: Mac
• yarn: v1.17.3

Add testing library for React Components

🚀 Feature Proposal

Add a library which allows developers to test their React components and prevent them from making commits that have a broken build.

Motivation

It is crucial that the components are well tested so new commits do not break previous components.

Example

• Enzyme
• Pre-Commit Hooks

Alert

🚀 Feature Proposal

Add alerts to the component library.

Motivation

Alerts are used to alert the user to something that is going on.

Example

Success messages, error messages, etc.

Relevant Links

https://react-bootstrap.github.io/components/alerts/

Navbar

🚀 Feature Proposal

Add Navbar as component in the component library.

Motivation

Navbars are core to navigation in the application.

Example

Navbar at the top of the page.

Relevant Links

https://react-bootstrap.github.io/components/navbar/

error TS2769: No overload matches this call

🐛 Bug Report

TypeScript version 3.7 causes several build problems

To Reproduce

To reproduce the problem just update the dependencies and launch a yarn build. Output will be as follows:

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/components/Select/Select.tsx:34:7 - error TS2769: No overload matches this call.
      Overload 1 of 2, '(props: Readonly<ReplaceProps<ElementType<any>, BsPrefixProps<ElementType<any>> & FormControlProps>>): FormControl<ElementType<any>>', gave the following error.
        Type '((event: FormEvent<FormControl<"input"> & FormControlProps>) => void) | undefined' is not assignable to type '((event: FormEvent<FormControlElement>) => void) | undefined'.
          Type '(event: FormEvent<FormControl<"input"> & FormControlProps>) => void' is not assignable to type '(event: FormEvent<FormControlElement>) => void'.
            Types of parameters 'event' and 'event' are incompatible.
              Type 'FormEvent<FormControlElement>' is not assignable to type 'FormEvent<FormControl<"input"> & FormControlProps>'.
                Type 'FormControlElement' is not assignable to type 'FormControl<"input"> & FormControlProps'.
                  Type 'HTMLInputElement' is not assignable to type 'FormControl<"input"> & FormControlProps'.
                    Type 'HTMLInputElement' is missing the following properties from type 'FormControl<"input">': context, setState, forceUpdate, render, and 3 more.
      Overload 2 of 2, '(props: ReplaceProps<ElementType<any>, BsPrefixProps<ElementType<any>> & FormControlProps>, context?: any): FormControl<ElementType<any>>', gave the following error.
        Type '((event: FormEvent<FormControl<"input"> & FormControlProps>) => void) | undefined' is not assignable to type '((event: FormEvent<FormControlElement>) => void) | undefined'.
          Type '(event: FormEvent<FormControl<"input"> & FormControlProps>) => void' is not assignable to type '(event: FormEvent<FormControlElement>) => void'.

    34       onChange={onChange}
             ~~~~~~~~

      ../../node_modules/react-bootstrap/FormControl.d.ts:17:3
        17   onChange?: React.FormEventHandler<FormControlElement>;
             ~~~~~~~~
        The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormControl<ElementType<any>>> & Readonly<ReplaceProps<ElementType<any>, BsPrefixProps<ElementType<any>> & FormControlProps>> & Readonly<...>'
      ../../node_modules/react-bootstrap/FormControl.d.ts:17:3
        17   onChange?: React.FormEventHandler<FormControlElement>;
             ~~~~~~~~
        The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormControl<ElementType<any>>> & Readonly<ReplaceProps<ElementType<any>, BsPrefixProps<ElementType<any>> & FormControlProps>> & Readonly<...>'

Add ability to add custom css classes/styles to all components

🚀 Feature Proposal

Add ability to add custom styles to components via className and style props.

All components should be able to have className and style.

For components that wrap multiple components there should be the ability to style both components.

Motivation

Styling is important to ensure the look and feel is correct.

Checkbox

🚀 Feature Proposal

Add checkbox to the component library.

Motivation

Check boxes are an important part of forms.

Example

Whether or not a patient has a certain characteristic that is either true or false.

https://react-bootstrap.netlify.com/components/forms/#forms-form-check

Related

#32

Charts Components

🚀 Feature Proposal

Add components for the following:

• Bar Graph
• Line Graph
• Pie Chart

Charts should be based on chart.js.

Motivation

Charts and graphs are an integral part of displaying data to the end user. Having a graph components will reduce development time and maintain consistency between graphs.

Example

HospitalRun/hospitalrun-frontend#387 requested a dashboard feature. Graphs/Charts could help in displaying data to the user in a dashboard.

Changelog is not rendered correctly in the Release tab

🐛 Bug Report

The changelog markdown is not rendered correctly in the Release tab

Select

🚀 Feature Proposal

Add a Select component to the library.

Motivation

Selects are used to select an element from a list when there are too many for radio/check boxes.

Example

Selecting an inventory type.

https://react-bootstrap.netlify.com/components/forms/#forms-controls

Related

#32

Add icon for dashboard in icon set.

🚀 Feature Proposal

Add an icon that represents the dashboard for use near navigation components.

Navbar Enhancements

🚀 Feature Proposal

• Show the pointer cursor when hovering over the brand icon in the nav bar
• Be able to support internationalization of the text for the search button and search text box placeholder.

Related to #25

Add ability to mark a Label required

🚀 Feature Proposal

Add an ability to mark a label required.

A new prop called isRequired should be added to the label component. When true, there should be a red * added on the right hand side of the label. When false, no red star should be shown.

Screen readers should be able to read the red star with some sort of alternative text so users using assistive technology can understand the star.

Motivation

Marking required fields in a form.

Example

Please provide an example for how this feature would be used.

related to #65

Advanced Medical Imaging Viewer

🚀 Feature Proposal

We need an advanced viewer component.

Motivation

Our users need to make all of they work inside HospitalRun. One of the most important task is the be able to open the most common medical file formats.
One of the most complete libs out there is https://github.com/OHIF/Viewers

We need to understand how to implement it as reusable component: as usual, we will wrap it inside our own APIs.