Skip to content
React Components that implement FHIR resources with Google's Material Design.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs initial commit Jun 8, 2019
src PageCanvas.returnedStyle Jan 20, 2020
test initial commit Jun 8, 2019
tools HellpNpm Jun 9, 2019
.babelrc 0.7.1 Nov 2, 2019
.babelrc.stage1 HellpNpm Jun 9, 2019
.editorconfig initial commit Jun 8, 2019
.gitattributes initial commit Jun 8, 2019
.gitignore initial commit Jun 8, 2019
.travis.yml initial commit Jun 8, 2019
CHANGELOG.md initial commit Jun 8, 2019
CONTRIBUTING.md
LICENSE.txt initial commit Jun 8, 2019
README.md PatientTable Nov 20, 2019
package-lock.json PageCanvas.returnedStyle Jan 20, 2020
package.json PageCanvas.returnedStyle Jan 20, 2020
rollup.config.extended.js 0.7.1 Nov 2, 2019
rollup.config.js PatientTable pagination Dec 13, 2019

README.md

material-fhir-ui

npm package

Material-FHIR UI is a set of React components that implement HL7 FHIR Resources using Google's Material Design specification. It is intended as an extension to the Material UI component library.

We intend to track normative level resources only; which as of R4 are primarily the Patient and Observation tables and detail cards. Stay tuned for R5 though!

If you're interested in non-normative resources, feel free to peruse the /client/react directories of any of the hl7-resource-* repositories in the clinical-meteor organization.

Prerequisites

Fast Healthcare Interoperatbility Resources
Material - User Interface
Semantically Awesome Style Sheets
React - Component Rendering

Installation

Material-FHIR-UI is available as an npm package.

npm install material-fhir-ui

To save the package to your Meteor app's package.json file, run the following:

meteor npm install --save material-fhir-ui

Roboto Font

Material-UI was designed with the Roboto font in mind. So be sure to include it in your project. Here are some instructions on how to do so.

Theming

Material-FHIR-UI components require a theme to be provided. The quickest way to get up and running is by using the MuiThemeProvider to inject the theme into your application context. Following that, you can to use any of the components as demonstrated in the documentation. Here is a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

import { PatientCard } from 'material-fhir-ui';

const App = () => (
  <MuiThemeProvider>
    <PatientCard />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Patient Table Example

import React from 'react';
import { PatientTable } from 'material-fhir-ui';

const MyFhirWorkflowComponent = () => (
  <div>
    <PatientTable 
      noDataMessagePadding={100}
      patients={ Patients.find().fetch() }
      paginationLimit={ t100 }
      appWidth={ Session.get('appWidth') }
      actionButtonLabel="Send"
      onRowClick={ function(patientId){ 
        Session.set('selectedPatientId', patientId);
      }}
      />
      <hr />
      <PatientDetail 
        id='patientDetails' 
        fhirVersion="3.0.1"
        patient={ Patients.findOne("").fetch() }
        patientId={ this.data.selectedPatientId }
        onDelete={ function(patientId){
          Patients.remove({_id: patientId})
        }}
        onUpsert={ function(context){          
          let newPatient = context.state.patient;
          newPatient.resourceType = "Patient";
          Patients.insert(newPatient)      
        }}
        onCancel={ this.onCancelUpsertPatient } 
      />
  </div>
);

export default MyFhirWorkflowComponent;

Please refer to each component's documentation page to see how they should be imported.

Component Demos and API Examples

PatientCard
PatientTable
PatientDetail

ObservationTable

License

This project is licensed under the terms of the MIT license

Conbtributing

If you would like to develop more FHIR components using this pattern, please take a look at the [material-fhir-demo], which is the minimalist Meteor rig we use to build these components. We intend to move towards Chromatic and Storybook in the future.

https://github.com/meteor/chromatic/
https://storybook.js.org/
https://github.com/clinical-meteor/material-fhir-demo

Development

// LOCAL DEVELOPMENT
git clone https://github.com/clinical-meteor/material-fhir-ui packages/material-fhir-ui
meteor npm link packages/material-fhir-ui

cd packages/material-fhir-ui

yarn add rollup rollup-plugin-terser rollup-plugin-typescript2 typescript rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-replace rollup-plugin-progress @babel/core @babel/preset-env --only=dev 


// bump the material-fhir-ui/package.json version number
nano package.json

// bump the application's dependency on material-fhir-ui
nano ../../package.json

// get rollup working
yarn rollup --config rollup.config.js

// once you get the above working, use --watch to automatically recompile on file change
yarn rollup --config --watch


// resync
// sometimes you need to resync the package
yarn rollup --config
meteor reset
rm -rf node_modules
meteor npm install
meteor npm link packages/material-fhir-ui

Deployment

cd packages/material-fhir-ui
rm -rf node_modules

npm update


// typical rollupt
yarn rollup --config

npm login

npm publish

Other References

You can’t perform that action at this time.