fhir-react 0.2.2 → 0.3.1

package/src/fixtures/r4/resources/explanationOfBenefit/c4bbExtendedDiagnosis.json

@@ -0,0 +1,446 @@
+{
+  "resourceType": "ExplanationOfBenefit",
+  "id": "e6c4234b-19a8-4e5c-35cb-5d05a97d5788",
+  "meta": {
+    "profile": [
+      "http://hl7.org/fhir/us/carin-bb/StructureDefinition/C4BB-ExplanationOfBenefit-Inpatient-Institutional"
+    ]
+  },
+  "related": [
+    {
+      "reference": {
+        "value": "Q19137E17126"
+      },
+      "claim": {
+        "reference": "ExplanationOfBenefit/EqUVAXt5WrNnlJPdB7swbxJXaYxxnvBxWwGPxUx1up"
+      },
+      "relationship": {
+        "coding": [
+          {
+            "code": "prior",
+            "system": "http://terminology.hl7.org/CodeSystem/ex-relatedclaimrelationship"
+          }
+        ]
+      }
+    },
+    {
+      "reference": {
+        "value": "Q19137E17126"
+      },
+      "claim": {
+        "reference": "ExplanationOfBenefit/ABCDEXg2WrYnlJrdr7sabxZZaYffnvBxWwGPx99999"
+      },
+      "relationship": {
+        "coding": [
+          {
+            "code": "replacedby",
+            "system": "http://terminology.hl7.org/CodeSystem/ex-relatedclaimrelationship"
+          }
+        ]
+      }
+    }
+  ],
+  "payee": {
+    "type": {
+      "coding": [
+        {
+          "code": "provider",
+          "system": "http://terminology.hl7.org/CodeSystem/payeetype"
+        }
+      ]
+    },
+    "party": {
+      "reference": "Organization/iAxXvHiphwGGAL48m3B7XXtKlLZg6yXnC1ch84x1up"
+    }
+  },
+  "contained": [
+    {
+      "resourceType": "ServiceRequest",
+      "id": "referral",
+      "status": "completed",
+      "intent": "order",
+      "subject": {
+        "reference": "Patient/f56391c2-dd54-b378-46ef-87c1643a2ba0"
+      },
+      "requester": {
+        "reference": "Practitioner/820ee8ba-855a-3aaf-9eeb-6603cfdaee25"
+      },
+      "performer": [
+        {
+          "reference": "Practitioner/820ee8ba-855a-3aaf-9eeb-6603cfdaee25"
+        }
+      ]
+    }
+  ],
+  "identifier": [
+    {
+      "system": "https://bluebutton.cms.gov/resources/variables/clm_id",
+      "value": "c145d3fe-d56e-dc26-75e9-01e90672f506"
+    },
+    {
+      "system": "https://bluebutton.cms.gov/resources/identifier/claim-group",
+      "value": "99999999999"
+    }
+  ],
+  "status": "active",
+  "type": {
+    "coding": [
+      {
+        "system": "http://terminology.hl7.org/CodeSystem/claim-type",
+        "code": "institutional"
+      }
+    ]
+  },
+  "subType": {
+    "coding": [
+      {
+        "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBInstitutionalClaimSubType",
+        "code": "inpatient"
+      }
+    ]
+  },
+  "use": "claim",
+  "patient": {
+    "reference": "Patient/f56391c2-dd54-b378-46ef-87c1643a2ba0"
+  },
+  "billablePeriod": {
+    "start": "2017-01-05T21:41:04+01:00",
+    "end": "2018-01-05T21:41:04+01:00"
+  },
+  "created": "2017-01-05T21:41:04+01:00",
+  "insurer": {
+    "display": "Medicaid"
+  },
+  "provider": {
+    "reference": "Practitioner/820ee8ba-855a-3aaf-9eeb-6603cfdaee25"
+  },
+  "referral": {
+    "reference": "#referral"
+  },
+  "facility": {
+    "reference": "Location/e111a884-fc5e-3766-9077-c44100ba56e2",
+    "display": "NEWTON-WELLESLEY HOSPITAL"
+  },
+  "claim": {
+    "reference": "Claim/c145d3fe-d56e-dc26-75e9-01e90672f506"
+  },
+  "outcome": "complete",
+  "careTeam": [
+    {
+      "sequence": 1,
+      "provider": {
+        "reference": "Practitioner/820ee8ba-855a-3aaf-9eeb-6603cfdaee25"
+      },
+      "role": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/claimcareteamrole",
+            "code": "primary",
+            "display": "Primary Care Practitioner"
+          }
+        ]
+      }
+    }
+  ],
+  "supportingInfo": [
+    {
+      "sequence": 1,
+      "category": {
+        "coding": [
+          {
+            "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBSupportingInfoType",
+            "code": "clmrecvddate"
+          }
+        ]
+      },
+      "timingDate": "2017-01-05"
+    }
+  ],
+  "diagnosis": [
+    {
+      "sequence": 1,
+      "diagnosisReference": {
+        "reference": "Condition/88bd5ac6-175b-5906-a4ee-6eedd667b0cc"
+      },
+      "type": [
+        {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/ex-diagnosistype",
+              "code": "principal"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "sequence": 2,
+      "type": [
+        {
+          "coding": [
+            {
+              "code": "principal",
+              "system": "http://terminology.hl7.org/CodeSystem/ex-diagnosistype",
+              "display": "Principal Diagnosis"
+            }
+          ],
+          "text": "\"The single medical diagnosis that is most relevant to the patients chief complaint or need for treatment\""
+        }
+      ],
+      "onAdmission": {
+        "coding": [
+          {
+            "system": "https://www.nubc.org/CodeSystem/PresentOnAdmissionIndicator"
+          }
+        ]
+      },
+      "diagnosisCodeableConcept": {
+        "coding": [
+          {
+            "code": "Z96.651",
+            "system": "http://hl7.org/fhir/sid/icd-10-cm",
+            "display": "Presence of right artificial knee joint"
+          }
+        ],
+        "text": "Presence of right artificial knee joint"
+      }
+    }
+  ],
+  "insurance": [
+    {
+      "focal": true,
+      "coverage": {
+        "display": "Medicaid"
+      }
+    }
+  ],
+  "item": [
+    {
+      "sequence": 1,
+      "category": {
+        "coding": [
+          {
+            "system": "https://bluebutton.cms.gov/resources/variables/line_cms_type_srvc_cd",
+            "code": "1",
+            "display": "Medical care"
+          }
+        ]
+      },
+      "productOrService": {
+        "coding": [
+          {
+            "system": "http://snomed.info/sct",
+            "code": "185345009",
+            "display": "Encounter for symptom"
+          }
+        ],
+        "text": "Encounter for symptom"
+      },
+      "servicedPeriod": {
+        "start": "2017-01-05T21:26:04+01:00",
+        "end": "2017-01-05T21:41:04+01:00"
+      },
+      "locationCodeableConcept": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/ex-serviceplace",
+            "code": "21",
+            "display": "Inpatient Hospital"
+          }
+        ]
+      },
+      "encounter": [
+        {
+          "reference": "Encounter/97e2c68b-c5e6-02f3-867b-f9f207badd64"
+        }
+      ]
+    },
+    {
+      "sequence": 2,
+      "diagnosisSequence": [1],
+      "category": {
+        "coding": [
+          {
+            "system": "https://bluebutton.cms.gov/resources/variables/line_cms_type_srvc_cd",
+            "code": "1",
+            "display": "Medical care"
+          }
+        ]
+      },
+      "productOrService": {
+        "coding": [
+          {
+            "system": "http://snomed.info/sct",
+            "code": "10509002",
+            "display": "Acute bronchitis (disorder)"
+          }
+        ],
+        "text": "Acute bronchitis (disorder)"
+      },
+      "servicedPeriod": {
+        "start": "2017-01-05T21:26:04+01:00",
+        "end": "2017-01-05T21:41:04+01:00"
+      },
+      "locationCodeableConcept": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/ex-serviceplace",
+            "code": "21",
+            "display": "Inpatient Hospital"
+          }
+        ]
+      }
+    },
+    {
+      "sequence": 3,
+      "category": {
+        "coding": [
+          {
+            "system": "https://bluebutton.cms.gov/resources/variables/line_cms_type_srvc_cd",
+            "code": "1",
+            "display": "Medical care"
+          }
+        ]
+      },
+      "productOrService": {
+        "coding": [
+          {
+            "system": "http://snomed.info/sct",
+            "code": "23426006",
+            "display": "Measurement of respiratory function (procedure)"
+          }
+        ],
+        "text": "Measurement of respiratory function (procedure)"
+      },
+      "servicedPeriod": {
+        "start": "2017-01-05T21:26:04+01:00",
+        "end": "2017-01-05T21:41:04+01:00"
+      },
+      "locationCodeableConcept": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/ex-serviceplace",
+            "code": "21",
+            "display": "Inpatient Hospital"
+          }
+        ]
+      },
+      "net": {
+        "value": 146.42,
+        "currency": "USD"
+      },
+      "adjudication": [
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_coinsrnc_amt",
+                "display": "Line Beneficiary Coinsurance Amount"
+              }
+            ]
+          },
+          "amount": {
+            "value": 29.284,
+            "currency": "USD"
+          }
+        },
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_prvdr_pmt_amt",
+                "display": "Line Provider Payment Amount"
+              }
+            ]
+          },
+          "amount": {
+            "value": 117.136,
+            "currency": "USD"
+          }
+        },
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_sbmtd_chrg_amt",
+                "display": "Line Submitted Charge Amount"
+              }
+            ]
+          },
+          "amount": {
+            "value": 146.42,
+            "currency": "USD"
+          }
+        },
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_alowd_chrg_amt",
+                "display": "Line Allowed Charge Amount"
+              }
+            ]
+          },
+          "amount": {
+            "value": 146.42,
+            "currency": "USD"
+          }
+        },
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_bene_ptb_ddctbl_amt",
+                "display": "Line Beneficiary Part B Deductible Amount"
+              }
+            ]
+          },
+          "amount": {
+            "value": 0,
+            "currency": "USD"
+          }
+        },
+        {
+          "category": {
+            "coding": [
+              {
+                "system": "https://bluebutton.cms.gov/resources/codesystem/adjudication",
+                "code": "https://bluebutton.cms.gov/resources/variables/line_prcsg_ind_cd",
+                "display": "Line Processing Indicator Code"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ],
+  "total": [
+    {
+      "category": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/adjudication",
+            "code": "submitted",
+            "display": "Submitted Amount"
+          }
+        ],
+        "text": "Submitted Amount"
+      },
+      "amount": {
+        "value": 77.49,
+        "currency": "USD"
+      }
+    }
+  ],
+  "payment": {
+    "amount": {
+      "value": 117.136,
+      "currency": "USD"
+    }
+  }
+}

package/src/index.js

@@ -1,7 +1,12 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './style.css';
+
 import FhirResource from './components/containers/FhirResource';
 import fhirVersions from './components/resources/fhirResourceVersions';
 
-import './style.css';
+if (typeof document !== 'undefined') {
+  require('bootstrap/dist/js/bootstrap.min.js');
+}
 
 export { FhirResource, fhirVersions };
 export * from './components/supportedFhirResourceList';

package/src/style.scss

@@ -0,0 +1,176 @@
+@use 'components/ui/header';
+
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';
+
+$utilities: (
+  'font-family': (
+    property: font-family,
+    class: font,
+    values: (
+      monospace: var(--#{$variable-prefix}font-monospace),
+      source: Source Sans Pro,
+    ),
+  ),
+  'width': (
+    property: width,
+    class: w,
+    values: (
+      25: 25%,
+      50: 50%,
+      75: 75%,
+      90: 90%,
+      100: 100%,
+      auto: auto,
+      max-content: max-content,
+      144: 144px,
+      110: 110px,
+    ),
+  ),
+);
+
+$space: 0.125rem;
+
+$spacers: map-merge(
+  $spacers,
+  (
+    half: $space,
+    6: 3.5rem,
+    40: 40px,
+  )
+);
+
+$font-family-base: 'Titillium Web', system-ui;
+
+$font-weight-bold: 600;
+
+$font-sizes: (
+  75: 0.75rem,
+  4: 1.125rem,
+);
+
+$line-height-lg: 1.75;
+$border-radius-lg: 16px;
+$box-shadow-sm: 0 0 24px rgba(0, 11, 79, 0.04);
+
+$body-color: #152536;
+
+$table-striped-bg: $gray-100;
+
+$secondary: #68717A;
+
+$light: #dedddd;
+
+$enable-negative-margins: true;
+
+.header-icon__placeholder {
+  background-color: #a3a3a3;
+}
+
+.header-icon__image,
+.header-icon__placeholder {
+  width: 24px;
+  height: 24px;
+}
+
+.header-icon__practitioner-avatar {
+  width: 24px;
+  height: 24px;
+}
+
+.dataTable__value-label {
+  width: auto;
+  @include media-breakpoint-up(sm) {
+    width: 130px;
+  }
+}
+
+.fhir-ui__Body__data-cell {
+  padding-left: 24px !important;
+}
+
+.fhir-ui__ValueUnitQty {
+  font-size: 28px;
+}
+
+.fhir-ui__ValueUnit {
+  font-size: 18px;
+}
+
+.fhir-ui__Badge {
+  width: fit-content;
+}
+
+.header__title-row {
+  padding-right: 32px;
+}
+
+.chevron:hover {
+  background-color: $gray-200;
+  border-radius: 4px;
+}
+
+@include media-breakpoint-up(sm) {
+  .w-90.title-width-sm {
+    width: 100% !important;
+  }
+
+  .w-110.graph-width-sm {
+    width: 144px !important;
+  }
+
+  .badges-max-width-sm {
+    max-height: 24px;
+  }
+
+  .graph-width-sm {
+    width: 200px !important;
+  }
+}
+// adding custom colors to the theme
+
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    'teal-100': $teal-100,
+    'teal-600': $teal-600,
+    'yellow-100': $yellow-100,
+    'yellow-600': $yellow-600,
+    'red-100': $red-100,
+    'red-600': $red-600,
+    'gray-200': $gray-200,
+    'blue-900': $blue-900,
+    'orange-100': $orange-100,
+    'orange-600': $orange-600,
+    'gray-100': $gray-100,
+    'gray-500': $gray-500,
+    'gray-600': $gray-600,
+    'pink-500': $pink-500,
+    'indigo-100': $indigo-100,
+    'indigo-600': $indigo-600,
+    'cyan-100': $cyan-100,
+    'cyan-600': $cyan-600,
+    'blue-100': $blue-100,
+    'blue-600': $blue-600,
+    'blue-500': $blue-500,
+    'white': $white,
+    'secondary': $secondary,
+  )
+);
+
+// additional sass map merges to enable bg-xxx in 5.1.1
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value');
+$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
+$utilities-text-colors: map-loop(
+  $utilities-colors,
+  rgba-css-var,
+  '$key',
+  'text'
+);
+$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, '$key', 'bg');
+
+@import '~bootstrap/scss/bootstrap.scss';

package/src/utils/formatDate.js

@@ -0,0 +1,21 @@
+export const formatDate = (date, locale) => {
+  const rawDate = new Date(date);
+  const usDate = rawDate.toLocaleDateString(locale, whichOptions(date));
+  return usDate;
+};
+
+const whichOptions = date => {
+  const YEAR_FORMAT = 'YYYY';
+  const YEAR_MONTH_FORMAT = 'YYYY-MM';
+
+  if (date.length === YEAR_FORMAT.length) {
+    return { year: 'numeric' };
+  }
+  if (date.length <= YEAR_MONTH_FORMAT.length) {
+    return {
+      year: 'numeric',
+      month: 'long',
+    };
+  }
+  return;
+};

package/src/utils/formatDate.test.js

@@ -0,0 +1,22 @@
+import { formatDate } from './formatDate';
+
+describe('Date format function', () => {
+  const locale = 'en-US';
+
+  it('should return year', () => {
+    const date = '2021';
+    expect(formatDate(date, locale)).toEqual('2021');
+  });
+  it('should return US month and year', () => {
+    const date = '2021-03';
+    expect(formatDate(date, locale)).toEqual('March 2021');
+  });
+  it('should return US date format', () => {
+    const date = '2021-03-14';
+    expect(formatDate(date, locale)).toEqual('3/14/2021');
+  });
+  it('should return US date format given full timestamp', () => {
+    const date = '2021-03-14T13:28:17-05:00';
+    expect(formatDate(date, locale)).toEqual('3/14/2021');
+  });
+});

package/src/utils/getBadgeColor.js

@@ -0,0 +1,6 @@
+import _get from 'lodash/get';
+import badgeColors from '../constants/badge-status.jsx';
+
+export const getBadgeColor = props => {
+  return badgeColors[_get(props, 'children')] || 'bg-gray-200 text-blue-900';
+};

package/src/utils/getBadgeColor.test.js

@@ -0,0 +1,14 @@
+import { getBadgeColor } from './getBadgeColor';
+
+describe('Badge Color function', () => {
+  it('should return two bootstrap classes', () => {
+    expect(getBadgeColor({ children: 'active' })).toEqual(
+      'bg-teal-100 text-teal-600',
+    );
+  });
+  it('should return generic classes if status is not valid', () => {
+    expect(getBadgeColor({ children: 'asdf' })).toEqual(
+      'bg-gray-200 text-blue-900',
+    );
+  });
+});