# Laerdal LIFE component library for React

[![Build Status](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_apis/build/status/laerdal.laerdal-component-library?branchName=master)](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_build/latest?definitionId=57&branchName=master)

## How to use @laerdal/life-react-components

- Add the package to your project:
  - `cd /path/to/your-app`
  - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
  
- Required providers:
  - There are several providers required for Life React JS components to work as expected.
	You need to wrap your APP with all of them:
  
  - ThemeProvider
	This is default ThemeProvider from styled-components package. It should define the theme. 
	'Theme' object should be provided, even it if is just blank object.
	Theme object can contain name of the theme. Acceptable values: dark, light, rqi_dark, rqi_light.
	Also ThemeProvider can be used to override colors of the theme.
  
  - ToastProvider
	Provider with Toast related context. Wrap your whole app with this 
	if you want to have ability to show/hide Toasts using Life React JS
  
  - NavigationProvider
	NavigationProvider - provides library components with navigation, routing and active-route functionality.
	It has 3 functions:

		navigate?: (path: string, isExternal: boolean) => void;	
		Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true.
		
		currentPath?: string | undefined;
		Current path in the navigation context.
		
		isActiveRoute?: (url: string, exact: boolean) => boolean;
		Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route

	If you are still using React Router and don't want to remove it from list of your dependencies, you can find implementation of CustomNavigationProvider
	at https://github.com/Laerdal-Medical/dcs-life-react-js/blob/dev/libraries/react-components/.storybook/custom-navigation-provider.tsx <- this implementation is used at 
	Storybook. 
  
  - LifeGlobalStyles
	React component that should be placed in the App.tsx of your project.
	This component will include coloring for chosen theme and add global styles like fonts and others.
	
	
	
	
After adding all providers defined about you can include components or icons and use them.
  
- Import components in your code:
  - `import { TextButton } from '@laerdal/life-react-components'`
- or icons:
  - `import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'`


## How to use a local version of @laerdal/life-react-components

- Pull the latest version of @laerdal/life-react-components from Bitbucket.
- If you have not already, add @laerdal/life-react-components to your application:
  - `cd /path/to/your-app`
  - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
- Create a link from your-app to component-library
  - `cd /path/to/react-components`
  - `yarn link`
  - `cd /path/to/your-app`
  - `yarn link “@laerdal/life-react-components”`
  - `yarn`

### Invalid hook call warning

When you start your application, you might get an “Invalid Hook Call Warning”. This is because both component-library and your-app loads their own version of react and react dom. Make sure component-library uses the same version of react and react-dom as your-app uses:

- `npm add npm-link-shared -g`
- `cd /path/to/your-app`
- `sudo npm-link-shared /path/to/react-components/node_modules . react react-dom`

## Storybook

_Storybook_ is added to the component library package to demo and document the components. Clone the repository, run `yarn`, then `cd apps/storybook` and run `yarn storybook` to start it locally.