fhir-react 0.2.4 → 0.3.0

package/src/constants/badge-status.jsx

@@ -0,0 +1,98 @@
+export default {
+  // condition
+  active: 'bg-teal-100 text-teal-600',
+  recurrence: '',
+  relapse: 'bg-indigo-100 text-indigo-600',
+  inactive:
+    'bg-gray-100 text-gray-600 border border-1 rounded-1 border-gray-200',
+  remission: 'bg-cyan-100 text-cyan-600',
+  resolved: 'bg-blue-100 text-blue-600',
+  // immunization
+  'in-progress': 'bg-orange-100 text-orange-600',
+  'on-hold': 'bg-gray-100 text-pink-500',
+  completed: 'bg-teal-100 text-teal-600',
+  'entered-in-error': 'bg-red-100 text-red-600',
+  stopped: 'bg-gray-100 text-gray-600',
+  'not-done': 'bg-yellow-100 text-yellow-600',
+  // procedure
+  preparation: 'border border-1 rounded-1 border-blue-200 text-blue-600',
+  suspended: '',
+  aborted: '',
+  unknown: 'border border-1 rounded-1 border-gray-200 text-gray-600',
+  // practitioner
+  // allergy intolerance
+  unconfirmed: '',
+  confirmed: '',
+  refuted: '',
+  // appointment
+  proposed: '',
+  pending: '',
+  booked: '',
+  arrived: '',
+  fulfilled: '',
+  cancelled: '',
+  noshow: '',
+  'checked-in': '',
+  waitlist: '',
+  // care plan
+  draft: '',
+  revoked: '',
+  // care team
+  // claim
+  // claim response
+  // device
+  available: '',
+  'not-available': '',
+  // diagnostic report
+  registered: '',
+  partial: '',
+  preliminary: '',
+  final: '',
+  corrected: '',
+  appended: '',
+  // document reference
+  current: '',
+  superseded: '',
+  // encounter
+  planned: '',
+  triaged: '',
+  onleave: '',
+  finished: '',
+  // explanation of benefit
+  // family member history
+  'health-unknown': '',
+  // goal
+  accepted: '',
+  rejected: '',
+  achieved: '',
+  sustaining: '',
+  'on-target': '',
+  'ahead-of-target': '',
+  'behind-target': '',
+  // list
+  retired: '',
+  // location
+  // mediacation
+  brand: '',
+  // medication administration
+  // medication knowledge
+  // medication statement
+  intended: '',
+  'not-taken': '',
+  // observation
+  amended: '',
+  // procedure
+  // questionnaire
+  published: '',
+  // questionnaire response
+  // research study
+  'administratively-completed': '',
+  approved: '',
+  'closed-to-accrual': '',
+  'closed-to-accrual-and-intervention': '',
+  disapproved: '',
+  'in-review': '',
+  'temporarily-closed-to-accrual': '',
+  'temporarily-closed-to-accrual-and-intervention': '',
+  withdrawn: '',
+};

package/src/fixtures/dstu2/resources/condition/condition.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="condition-icon" transform="translate(-28.001 -27.999)">
+    <g id="Group_10" data-name="Group 10" transform="translate(46.93 29.733) rotate(41)">
+      <path id="Path_8" data-name="Path 8" d="M0,0,1.538.027,1.583,2.6.044,2.576Z" transform="translate(1.052 2.07)" fill="#7cddc8"/>
+      <path id="Path_9" data-name="Path 9" d="M.5,0,3.068.044a.536.536,0,0,1,.522.524L3.607,1.6a.493.493,0,0,1-.5.506L.539,2.061a.536.536,0,0,1-.522-.524L0,.506A.493.493,0,0,1,.5,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_11" data-name="Group 11" transform="translate(32.977 49.942) rotate(-139)">
+      <path id="Path_10" data-name="Path 10" d="M0,0,1.538.027,1.583,2.6.044,2.576Z" transform="translate(1.052 2.07)" fill="#7cddc8"/>
+      <path id="Path_11" data-name="Path 11" d="M.5,0,3.068.044a.536.536,0,0,1,.522.524L3.607,1.6a.493.493,0,0,1-.5.506L.539,2.061a.536.536,0,0,1-.522-.524L0,.506A.493.493,0,0,1,.5,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_12" data-name="Group 12" transform="translate(49.748 47.527) rotate(132)">
+      <path id="Path_12" data-name="Path 12" d="M.044.027,1.589,0,1.545,2.565,0,2.592Z" transform="translate(0.977 2.061)" fill="#7cddc8"/>
+      <path id="Path_13" data-name="Path 13" d="M.542.044,3.116,0a.493.493,0,0,1,.506.5L3.6,1.53a.536.536,0,0,1-.524.522L.506,2.1A.493.493,0,0,1,0,1.593L.018.566A.536.536,0,0,1,.542.044Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <path id="Path_14" data-name="Path 14" d="M.044.027,1.589,0,1.545,2.565,0,2.592Z" transform="translate(32.344 33.701) rotate(-48)" fill="#7cddc8"/>
+    <path id="Path_15" data-name="Path 15" d="M.542.044,3.116,0a.493.493,0,0,1,.506.5L3.6,1.53a.536.536,0,0,1-.524.522L.506,2.1A.493.493,0,0,1,0,1.593L.018.566A.536.536,0,0,1,.542.044Z" transform="translate(30.159 33.048) rotate(-48)" fill="#7cddc8"/>
+    <g id="Group_13" data-name="Group 13" transform="translate(38.427 27.999)">
+      <path id="Path_16" data-name="Path 16" d="M0,0,1.522.008l.013,2.6L.013,2.6Z" transform="translate(1.023 2.085)" fill="#7cddc8"/>
+      <path id="Path_17" data-name="Path 17" d="M.393-.1,2.93-.086a.521.521,0,0,1,.51.523l.005,1.041a.508.508,0,0,1-.5.518L.4,1.982a.521.521,0,0,1-.51-.523L-.111.418A.508.508,0,0,1,.393-.1Z" transform="translate(0.111 0.1)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_14" data-name="Group 14" transform="translate(38.427 47.303)">
+      <path id="Path_18" data-name="Path 18" d="M0,2.611,1.522,2.6,1.536,0,.013.008Z" transform="translate(1.023 0)" fill="#7cddc8"/>
+      <path id="Path_19" data-name="Path 19" d="M.393,2,2.93,1.982a.521.521,0,0,0,.51-.523L3.446.418a.508.508,0,0,0-.5-.518L.4-.086a.521.521,0,0,0-.51.523L-.111,1.478A.508.508,0,0,0,.393,2Z" transform="translate(0.111 2.7)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_15" data-name="Group 15" transform="translate(52 38.458) rotate(90)">
+      <path id="Path_20" data-name="Path 20" d="M0,0,1.559.008l.014,2.541L.014,2.541Z" transform="translate(1.048 2.035)" fill="#7cddc8"/>
+      <path id="Path_21" data-name="Path 21" d="M.517,0l2.6.013a.521.521,0,0,1,.523.511l.006,1.016a.508.508,0,0,1-.517.505l-2.6-.013a.521.521,0,0,1-.523-.511L0,.505A.508.508,0,0,1,.517,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_16" data-name="Group 16" transform="translate(32.585 38.458) rotate(90)">
+      <path id="Path_22" data-name="Path 22" d="M0,2.549l1.559-.008L1.573,0,.014.008Z" transform="translate(1.048 0)" fill="#7cddc8"/>
+      <path id="Path_23" data-name="Path 23" d="M.517,2.046l2.6-.013a.521.521,0,0,0,.523-.511L3.644.505A.508.508,0,0,0,3.127,0L.528.013A.521.521,0,0,0,.006.524L0,1.541A.508.508,0,0,0,.517,2.046Z" transform="translate(0 2.538)" fill="#7cddc8"/>
+    </g>
+    <path id="Subtraction_1" data-name="Subtraction 1" d="M8,16A8,8,0,0,1,2.343,2.343,8,8,0,0,1,13.657,13.657,7.948,7.948,0,0,1,8,16Zm.774-6.193a1.032,1.032,0,1,0,1.032,1.032A1.033,1.033,0,0,0,8.774,9.807ZM5.161,7.742A1.032,1.032,0,1,0,6.193,8.774,1.033,1.033,0,0,0,5.161,7.742Zm5.677-2.065A1.032,1.032,0,1,0,11.871,6.71,1.033,1.033,0,0,0,10.839,5.677ZM7.226,3.613A1.032,1.032,0,1,0,8.258,4.645,1.034,1.034,0,0,0,7.226,3.613Z" transform="translate(32.15 32.28)" fill="#3fc7a9"/>
+  </g>
+</svg>

package/src/fixtures/dstu2/resources/immunization/immunization.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.389" height="26.344" viewBox="0 0 20.389 26.344">
+  <g id="Group_34" data-name="Group 34" transform="matrix(0.819, 0.574, -0.574, 0.819, -1.32, -42.366)">
+    <rect id="Rectangle_15" data-name="Rectangle 15" width="9.6" height="1.028" rx="0.514" transform="translate(35.642 26.763)" fill="rgba(2,110,222,0.53)"/>
+    <rect id="Rectangle_16" data-name="Rectangle 16" width="4.8" height="3.598" transform="translate(38.047 27.799)" fill="rgba(2,110,222,0.53)"/>
+    <rect id="Rectangle_17" data-name="Rectangle 17" width="12" height="1.088" rx="0.544" transform="translate(34.47 32.134)" fill="#026ede"/>
+    <path id="Subtraction_2" data-name="Subtraction 2" d="M5.8,14.97H2a2,2,0,0,1-2-2V0H7.8V12.97A2,2,0,0,1,5.8,14.97ZM.036,8.615V9.684H1.9a.535.535,0,1,0,0-1.069ZM.024,5.882V6.951H1.89a.535.535,0,1,0,0-1.069ZM.014,3.147V4.217H1.878a.535.535,0,0,0,0-1.069Z" transform="translate(36.871 32.355)" fill="#026ede"/>
+    <path id="Rectangle_20" data-name="Rectangle 20" d="M0,0H1.626a0,0,0,0,1,0,0V5.829a.813.813,0,0,1-.813.813h0A.813.813,0,0,1,0,5.829V0A0,0,0,0,1,0,0Z" transform="translate(39.957 48.121)" fill="#7ab3ee"/>
+    <path id="Rectangle_19" data-name="Rectangle 19" d="M0,0H4.251a0,0,0,0,1,0,0V1.614a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V0A0,0,0,0,1,0,0Z" transform="translate(38.645 46.262)" fill="#026ede"/>
+  </g>
+</svg>

package/src/fixtures/example-icons.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+
+export default {
+  Condition: (
+    <img
+      src={require('../assets/containers/Condition/condition.svg')}
+      alt="germ"
+    />
+  ),
+  Immunization: (
+    <img
+      src={require('../assets/containers/Immunization/immunization.svg')}
+      alt="syringe"
+    />
+  ),
+  Procedure: (
+    <img
+      src={require('../assets/containers/Procedure/procedure.svg')}
+      alt="block diagram"
+    />
+  ),
+  Practitioner: (
+    <img
+      src={require('../assets/containers/Practitioner/practitioner.svg')}
+      alt="doctor avatar"
+    />
+  ),
+  AllergyIntolerance: (
+    <img
+      src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
+      alt="sneezing emoji"
+    />
+  ),
+  Appointment: (
+    <img
+      src={require('../assets/containers/Appointment/appointment.svg')}
+      alt="calendar"
+    />
+  ),
+  CarePlan: (
+    <img
+      src={require('../assets/containers/CarePlan/care-plan.svg')}
+      alt="note with a heart"
+    />
+  ),
+  CareTeam: (
+    <img
+      src={require('../assets/containers/CareTeam/care-team.svg')}
+      alt="group of people"
+    />
+  ),
+  Claim: (
+    <img
+      src={require('../assets/containers/Claim/claim.svg')}
+      alt="clipboard with a symmetrical cross"
+    />
+  ),
+  ClaimResponse: (
+    <img
+      src={require('../assets/containers/ClaimResponse/claim-response.svg')}
+      alt="clipboard with a symmetrical cross and a return arrow"
+    />
+  ),
+  Device: (
+    <img
+      src={require('../assets/containers/Device/device.svg')}
+      alt="computer rack"
+    />
+  ),
+  DiagnosticReport: (
+    <img
+      src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+      alt="note with shapes"
+    />
+  ),
+  DocumentReference: (
+    <img
+      src={require('../assets/containers/DocumentReference/document-reference.svg')}
+      alt="hand holding a note"
+    />
+  ),
+  Encounter: (
+    <img
+      src={require('../assets/containers/Encounter/encounter.svg')}
+      alt="conversation between two individuals"
+    />
+  ),
+  ExplanationOfBenefit: (
+    <img
+      src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
+      alt="percentage sign"
+    />
+  ),
+  FamilyMemberHistory: (
+    <img
+      src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
+      alt="parent and child"
+    />
+  ),
+  Goal: (
+    <img
+      src={require('../assets/containers/Goal/goal.svg')}
+      alt="arrow hits bullseye"
+    />
+  ),
+  List: (
+    <img src={require('../assets/containers/List/list.svg')} alt="checklist" />
+  ),
+  Location: (
+    <img
+      src={require('../assets/containers/Location/location.svg')}
+      alt="location marker"
+    />
+  ),
+  Medication: (
+    <img
+      src={require('../assets/containers/Medication/medication.svg')}
+      alt="some pills"
+    />
+  ),
+  MedicationAdministration: (
+    <img
+      src={require('../assets/containers/MedicationAdministration/medication-administration.svg')}
+      alt="pill gets swallowed"
+    />
+  ),
+  MedicationKnowledge: (
+    <img
+      src={require('../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
+      alt="pill database"
+    />
+  ),
+  MedicationStatement: (
+    <img
+      src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
+      alt="note with symmetrical cross"
+    />
+  ),
+  Observation: (
+    <img
+      src={require('../assets/containers/Observation/observation.svg')}
+      alt="hospital bed"
+    />
+  ),
+  Questionnaire: (
+    <img
+      src={require('../assets/containers/Questionnaire/questionnaire.svg')}
+      alt="clipboard and pen"
+    />
+  ),
+  QuestionnaireResponse: (
+    <img
+      src={require('../assets/containers/QuestionnaireResponse/questionnaire-response.svg')}
+      alt="clipboard and return arrow"
+    />
+  ),
+  ResearchStudy: (
+    <img
+      src={require('../assets/containers/ResearchStudy/research-study.svg')}
+      alt="finger pointing something in a book"
+    />
+  ),
+  ResourceCategoryPlaceholder: (
+    <img
+      src={require('../assets/containers/ResourceCategory/resource-placeholder.svg')}
+      alt="header icon"
+    />
+  ),
+};

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',
+    );
+  });
+});

package/src/utils/isUrl.js

@@ -0,0 +1,9 @@
+export const isUrl = str => {
+  let url;
+  try {
+    url = new URL(str);
+  } catch (err) {
+    return false;
+  }
+  return url.protocol === 'http:' || url.protocol === 'https:';
+};

package/src/utils/isUrl.test.js

@@ -0,0 +1,12 @@
+import { isUrl } from './isUrl';
+
+describe('isUrl function', () => {
+  it('should return true if passed a valid Url', () => {
+    const str = 'https://placekeanu.com/24/24';
+    expect(isUrl(str)).toBeTruthy();
+  });
+  it('should return false if passed an invalid Url', () => {
+    const str = '<div><img/><p>test</p><div>';
+    expect(isUrl(str)).toBeFalsy();
+  });
+});

package/src/utils.js

@@ -6,3 +6,10 @@ export function toTrimedFixedNumber(number, digits = 4) {
 }
 
 export const isNotEmptyArray = data => Array.isArray(data) && data.length > 0;
+
+export const parseValueIntoMonetaryValueOfGivenCurrency = (value, currency) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency,
+  }).format(Math.round(value * 100) / 100);
+};