lyrahealth-uicore

Lyra Health common ui components

Usage no npm install needed!

<script type="module">
  import lyrahealthUicore from 'https://cdn.skypack.dev/lyrahealth-uicore';
</script>

README

UI Core

This is a UI component development environment for interdisciplinary team collaboration of core and shared components throughout various Lyra applications.

This project facilitates React based component development, and is equiped with a Storybook for easy visual testing.

The Storybook will periodically be pushed live (made public) for easy referencing and styleguide purposes.

Installation and Setup

Download Node

Get node 10. Using nvm is probably the easiest way.

Working with the Storybook

Running a Local Storybook

Clone the repository and then paste the following commands in your terminal from within the ui-core directory:

#initialize project dependencies
npm install

#spin up the storybook
npm run storybook

Then view the Storybook in your browser at: http://localhost:9001/

Writing Stories

Once a component is complete, create a corresponding Story by following the general instructions found in the Storybook Documentation. All stories should be placed in the ./stories directory

Note: Be sure to leverage the Knobs addon for each component to provide easy toggle for states and variables.

Deploying a Static Storybook

Simply run the following command, which will package up a free-standing version of the storybook within a ./dist directory, which can then be hosted wherever it is desired to be share:

npm run storybook-dist

Developing Components

Component development can be done as you normally would for React from within the ./lib directory. Try to ahere to atomic design principles in both your code and file/folder structures. CSS styles should follow the React CSS Modules schema, and will be combined with the global mixins/variables found in the ./styles directory.

Unit testing

Unit tests are written with Jest and Enzyme.

To run the suite, the command is: npm test
To run in debug mode, use: npm run test-debug

If you use Visual Studio Code, you can debug in the integrated Debug tab. Just click on the play button at the top left corner as soon as you ran npm run test-debug in your terminal.

If you do not use Visual Studio Code, you can debug them in chrome by going to browsing to chrome://inspect/ and choose you running node remote target. (Run npm run test-debug in your terminal before)

Enabling end-to-end automated tests

To enable automation testing on the components you create/edit, make sure to add a data-test-id attribute to user facing actionable elements. The naming convention is as follow: data-test-id=[ComponentName]-[actionName]

Example:

Given a submit button on a "FormExample" component, the following attribute should be added to the button:

data-test-id='FormExample-submit'

Integrating the Library into Your Project

To pull the library into your project, run the following command line in the root of your project directory:

npm install --save git+https://<access-token>:x-oauth-basic@github.com/LyraHealth/ui-core.git

where the current access token is 3ebe127fe01ee41a8b3e8d675c5e779a60b3f14e

Note: this pulls the latest version of the master branch of the project, and must be explicitly rerun whenever the lastest version is desired

Note: If you did some work on components in your own fork and want to try it out in an app, you can easily point to a branch from your repo:

npm install git+ssh://git@github.com/<git username>/ui-core.git#<branchName>

For development, it is recommended to set up the following npm scripts in you project's package.json for ease-of-use:

"scripts": {
    "install-uicore": "npm install --save git+https://<access-token>:x-oauth-basic@github.com/LyraHealth/ui-core.git",
    "init": "npm install && npm install --save git+https://<access-token>:x-oauth-basic@github.com/LyraHealth/ui-core.git",
        ...

There are a few key pieces to include in your project's webpack config.

  • Point your Sass Resources Loader configuration to the files contained within the UI-Core ./styles directory. Order matters here, so make sure to include the UI-Core directory before the project directory, if it also relies on this tool sassResources: ['./node_modules/lyrahealth-uicore/styles/**/*.scss', ...project directory as needed...] Note: project level mixins, if they have the exact same name, will override UI-Core level mixins.
  • The "lyrahealth-uicore" npm module needs to be loaded through babel. As most projects exclude the node modules directory for this loader, you'll need to make sure to exclude the module from your exclusions :)
loaders: [{
    test: /\.jsx?$/,
    loaders: ['babel-loader'],
    exclude: /node_modules\/(?!lyrahealth-uicore)/
}, ...
  • One of the shared components, the "Slider", relies on bootstrap-slider for some base styling. The files loaded for this need to pass through the project's SASS Loader, so again, just make sure to exclude the bootstrap-slider from any node modules exclusions regarding the "sass-loader":
loaders: [{
    test: /^((?!\.module).)*scss$/,
    loader: ['sass-loader', ...],
    exclude: /node_modules\/(?!bootstrap-slider)/
}, ...

Using a Component

Once the library has been included in your project, simple import a component at the top of your file like so:

import { NextButton } from 'lyrahealth-uicore'

UI Form Metadata

This is the format and architecture designed to render forms for applications using ui-core. The forms are built using React JSON Schema Form which reads from a JSON file and state managed with React Final Form. These currently support forms such as Assessments in Lyra Web and Provider Portal.

Features

  • Supports conditionally rendering fields
  • Form state
  • Form Validation
  • Markdown support
  • UI Widgets
  • Initial Values

Examples

Some examples for working with the UI Form Metadata can be found in stories/chapters/Metadata Examples. Currently stored and used forms for Lyra Web are in ./LTMetadata

Syncing metadata with backend

Modification of the metadata must be synced with the backend after deployment by running: python3 syncContentsMetadata.py

Generating form data

Properties and fields for the forms are generated from a standardized Google Sheet Template by Clients Team. Here's an example. The script in this repo: generate.py generates the base metadata from the Google Sheet Template which is then modified to be used in the architecture