fhir-react 0.2.2 → 0.3.1

package/.github/workflows/publish_npmjs.yml

@@ -0,0 +1,20 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm run test
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}

package/.storybook/config.js

@@ -1,8 +1,14 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
-
 import '../src/components/ui/bootstrap-reboot.min.css';
 import '../src/style.css';
+import '../src/style.scss';
+
+import { addDecorator, addParameters, configure } from '@storybook/react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+
+if (typeof document !== 'undefined') {
+  require('bootstrap/dist/js/bootstrap.min.js');
+}
 
 addParameters({
   options: {

package/.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/preset-scss'];

package/.storybook/preview-head.html

@@ -8,5 +8,9 @@
 <style>
   .sb-show-main {
     padding: 16px;
+    background-color: #f4f8fd;
+  }
+  html {
+    background-color: #f4f8fd;
   }
 </style>

package/README.md

@@ -28,12 +28,34 @@ const MyComponent = () => {
     <FhirResource
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
       withCarinBBProfile
     />
   );
 };
 ```
 
+Optionally custom header icons could be passed as `fhirIcons` props. The shape of the passed object should be as in example below with resource type as the key and image url or DOM node as the value:
+
+```jsx
+import React from 'react';
+
+export default {
+  Condition: (
+    <img
+      src={require('./dstu2/resources/condition/condition.svg')}
+      alt="header icon"
+    />
+  ),
+  Immunization: (
+    <img
+      src={require('./dstu2/resources/immunization/immunization.svg')}
+      alt="header icon"
+    />
+  ),
+};
+```
+
 ### `FhirResource` component props
 
 | Prop                 | Type                                                       | Default | Description                                                                                                                                                                                               |
@@ -94,21 +116,29 @@ const MyComponent = () => {
 | `ReferralRequest`          |  ✅   |  ✅   | _N/A_ |
 | `ResearchStudy`            | _N/A_ |  ✅   |  ✅   |
 
-### Styles
+### Styles update `v0.3`
 
-Optional CSS styles are provided with this library. They are split into two files:
+The 0.3 version of the FHIR React Component library introduces the bootstrap Accordion component as the base of each available resource which provides any data. The RWD support is provided for each component.
 
-- `style.css` with basic styling of the components
-- `bootstrap-reboot.min.css` further enhancing those styles
+All of the changes can be tracked by viewing the current version of the [storybook](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/fhir-react-next/index.html?path=/story/condition--default-visualization-dstu-2).
 
-To use provided styles include them in the React component:
+### Available resources `v0.3`
 
-```js
-import 'fhir-react/build/style.css';
-import 'fhir-react/build/bootstrap-reboot.min.css';
-```
 
-The working demo example with styles included can be viewed [here](https://codesandbox.io/s/infallible-diffie-r6ln5).
+| Resource                   | DSTU2 | STU3  |  R4   | Carin BB Profile | DaVinci PDex |
+| -------------------------- | :---: | :---: | :---: | :--------------: | ------------ |
+| `Appointment`              |  ✅   |  ✅   |  ✅   |
+| `Condition`                |  ✅   |  ✅   |  ✅   |
+| `Encounter`                |  ✅   |  ✅   |  ✅   |
+| `ExplanationOfBenefit`     |  ✅   |  ✅   |  ✅   |        ✅        |
+| `Immunization`             |  ✅   |  ✅   |  ✅   |
+| `Observation`              |  ✅   |  ✅   |  ✅   |
+| `Patient`                  |  ✅   |  ✅   |  ✅   |
+| `Practitioner`             |  ✅   |  ✅   |  ✅   |
+| `Procedure`                |  ✅   |  ✅   |  ✅   |
+
+The update does not change the datasets which components are able to handle. It means that user can display the same particulars as in the previous version of the specific component.
+
 
 ### Styles
 
@@ -166,9 +196,7 @@ npm run build
 
 ### Publish to NPM Registry
 
-```
-npm publish
-```
+To publish, [create a new release in GitHub](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository).
 
 ### Storybook for the changes
 

package/build/bootstrap-reboot.min.css

@@ -14,23 +14,9 @@
 }
 
 .fhir-resource {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
   background-color: #fff;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
@@ -187,14 +173,8 @@ sup {
 .fhir-resource kbd,
 .fhir-resource pre,
 .fhir-resource samp {
-  font-family:
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    'Liberation Mono',
-    'Courier New',
-    monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
   font-size: 1em;
 }