npm - fhir-react - Versions diffs - 0.2.2 → 0.3.1 - Mend

fhir-react 0.2.2 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/src/components/containers/Accordion/Accordion.stories.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { BadgeSecondary, Body, MissingValue, Title, Value } from '../../ui';
+import Accordion from './Accordion';
+import Annotation from '../../datatypes/Annotation';
+import Date from '../../datatypes/Date';
+import Procedure from '../../resources/Procedure/Procedure';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+import example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import { object } from '@storybook/addon-knobs';
+import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
+export default {
+  title: 'Accordion',
+};
+export const DefaultVisualization = () => {
+  const fhirResource = object('Resource', stu3Example1);
+  const title =
+    _get(fhirResource, 'code.coding[0].display') ||
+    _get(fhirResource, 'code.text');
+  const performedDateTime = _get(fhirResource, 'performedDateTime');
+  const performer = _get(fhirResource, 'performer', []);
+  const locationReference = _get(fhirResource, 'location[0]');
+  const reasonCode = _get(fhirResource, 'reasonCode', []);
+  const note = _get(fhirResource, 'note', []);
+  return (
+    <Accordion
+      headerContent={
+        <div className="">
+          <Title>{title}</Title>
+          <div className="pb-3" />
+          <BadgeSecondary data-testid="performedDateTime">
+            <Date fhirData={performedDateTime} />
+          </BadgeSecondary>
+        </div>
+      }
+      bodyContent={
+        <Body>
+          <Value label="Performed by">
+            {performer.map((item, i) => (
+              <div key={`item-${i}`}>
+                {_get(item, 'actor.display', <MissingValue />)}
+              </div>
+            ))}
+          </Value>
+          <Value label="Location" data-testid="location">
+            <Reference fhirData={locationReference} />
+          </Value>
+          <Value label="Reason" data-testid="hasReasonCode">
+            <Annotation fhirData={reasonCode} />
+          </Value>
+          <Value label="Notes" data-testid="hasNote">
+            <Annotation fhirData={note} />
+          </Value>
+        </Body>
+      }
+    />
+  );
+};
+export const ProcedureVisualization = () => {
+  const fhirResource = object('Resource', example1);
+  return (
+    <Accordion
+      headerContent={<div className=""></div>}
+      bodyContent={
+        <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />
+      }
+    />
+  );
+};

package/src/components/containers/Accordion/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+export default Accordion;

package/src/components/containers/ResourceContainer/ResourceContainer.css CHANGED Viewed

@@ -1,5 +1,4 @@
 .fhir-container__ResourceContainer__card {
-  background-color: #f8f9fa;
   border: 0;
   position: relative;
   display: flex;

package/src/components/containers/ResourceContainer/ResourceContainer.js CHANGED Viewed

@@ -23,7 +23,7 @@ class ResourceContainer extends React.Component {
               className="fhir-container__ResourceContainer__json-button"
               onClick={() => this.setState({ jsonOpen: !this.state.jsonOpen })}
             >
-              JSON
+              RAW
             </button>
           </div>
           {this.props.children}

package/src/components/datatypes/AccountBalance/AccountBalance.js ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Value } from '../../ui';
+import { parseValueIntoMonetaryValueOfGivenCurrency } from '../../../utils';
+const AccountBalance = props => {
+  const { totalBenefit, totalCost } = props;
+  return (
+    <div className="fhir-datatype__AccountBalance container-fluid p-0 m-0 ">
+      <Value label="Total cost" data-testid="totalCost" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value,
+          totalCost.code,
+        )}
+      </Value>
+      <Value label="Coverd by benefit" data-testid="totalBenefit" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalBenefit.value * -1,
+          totalBenefit.code,
+        )}
+      </Value>
+      <div className="border-top my-1 row border-secondary" />
+      <Value label="Patient Owed" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value - totalBenefit.value,
+          totalBenefit.code,
+        )}
+      </Value>
+    </div>
+  );
+};
+export default AccountBalance;

package/src/components/datatypes/AccountBalance/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import MoneyCalculator from './MoneyCalculator';
+export default MoneyCalculator;

package/src/components/datatypes/Annotation/Annotation.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 const Annotation = props => {
   const { fhirData } = props;

package/src/components/datatypes/Coding/Coding.js CHANGED Viewed

@@ -15,7 +15,7 @@ const Coding = props => {
       <span className="fhir-datatype__Coding__title">{display}</span>&nbsp;
       {hasAdditionalInfo && (
         <span className="fhir-datatype__Coding__code" title={system}>
-          ({code})
+          ({code || '?'})
         </span>
       )}
     </div>

package/src/components/datatypes/Date/Date.js CHANGED Viewed

@@ -1,12 +1,22 @@
 import React from 'react';
+import { formatDate } from '../../../utils/formatDate';
-const Date = props => {
-  const { fhirData } = props;
+const Date = ({ fhirData, isBlack, testId, className = '' }) => {
   if (!fhirData) {
     return null;
   }
-  const dateValue = String(fhirData).slice(0, 10);
-  return <span className="fhir-datatype__Date">{dateValue}</span>;
+  const locale = 'en-US';
+  const dateValue = formatDate(String(fhirData).slice(0, 10), locale);
+  return (
+    <span
+      data-testid={testId || 'providedDate'}
+      className={`${[className, 'fhir-datatype__Date', 'font-source'].join(
+        ' ',
+      )}${isBlack ? '' : ' text-secondary'}`}
+    >
+      {dateValue}
+    </span>
+  );
 };
 export default Date;

package/src/components/datatypes/DatePeriod/DatePeriod.js ADDED Viewed

@@ -0,0 +1,38 @@
+import Date from '../Date';
+import React from 'react';
+const DatePeriod = props => {
+  const {
+    periodBeginLabel,
+    periodBeginDate,
+    periodBeginTestId,
+    periodEndLabel,
+    periodEndDate,
+    periodEndTestId,
+  } = props;
+  const SingleDateSpan = props => (
+    <span className="fhir-datetype__DatePeriod__begin-date text-black-50 me-2 font-source fw-normal lh-lg">
+      {props.label}
+    </span>
+  );
+  return (
+    <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-start">
+      {periodBeginDate && (
+        <div className="d-flex flex-wrap">
+          <SingleDateSpan label={periodBeginLabel} />
+          <Date testId={periodBeginTestId} isBlack fhirData={periodBeginDate} />
+        </div>
+      )}
+      {periodEndDate && (
+        <div className="ms-sm-4 d-flex flex-wrap">
+          <SingleDateSpan label={periodEndLabel} />
+          <Date testId={periodEndTestId} isBlack fhirData={periodEndDate} />
+        </div>
+      )}
+    </div>
+  );
+};
+export default DatePeriod;

package/src/components/datatypes/DatePeriod/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import DatePeriod from './DatePeriod';
+export default DatePeriod;

package/src/components/datatypes/HeaderIcon/HeaderIcon.js ADDED Viewed

@@ -0,0 +1,31 @@
+import React from 'react';
+import { isUrl } from '../../../utils/isUrl';
+const HeaderIcon = ({ headerIcon }) => {
+  const PlaceholderImage = () => {
+    return <div className="header-icon__placeholder rounded-1" />;
+  };
+  const Image = () => {
+    if (
+      React.isValidElement(headerIcon) &&
+      typeof headerIcon.type === 'string'
+    ) {
+      return headerIcon;
+    }
+    if (isUrl(headerIcon)) {
+      return (
+        <img
+          className="header-icon__image"
+          src={headerIcon}
+          alt="header icon"
+        />
+      );
+    }
+    return <PlaceholderImage />;
+  };
+  return <Image />;
+};
+export default HeaderIcon;

package/src/components/datatypes/HeaderIcon/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import HeaderIcon from './HeaderIcon';
+export default HeaderIcon;

package/src/components/datatypes/HumanName/HumanName.js CHANGED Viewed

@@ -1,11 +1,9 @@
 import React from 'react';
-import _get from 'lodash/get';
 import _flatten from 'lodash/flatten';
-import './HumanName.css';
+import _get from 'lodash/get';
 function HumanName(props) {
-  const { fhirData, primary } = props;
+  const { fhirData, isTitle } = props;
   const givenName = _get(fhirData, 'given', []).join(', ');
   const familyName = _flatten(Array(_get(fhirData, 'family', ''))).join(', ');
   const suffix = _get(fhirData, 'suffix', []).join(' ');
@@ -15,24 +13,11 @@ function HumanName(props) {
     ? textName
     : `${givenName} ${familyName} ${suffix}`.trim();
-  const headerElement = primary ? (
-    <span className="fhir-datatype__HumanName__Header--primary">{header}</span>
-  ) : (
-    <span className="fhir-datatype__HumanName__Header--default">{header}</span>
-  );
-  const rootClassName = primary
-    ? ''
-    : 'fhir-datatype__HumanName__not-primary-block';
   return (
-    <div className={`fhir-datatype__HumanName ${rootClassName}`}>
-      {headerElement}
-      {use && (
-        <small className="fhir-datatype__HumanName__use-block">
-          {` (${use})`}
-        </small>
-      )}
-    </div>
+    <>
+      {header}
+      {!isTitle && use && <span>{` (${use})`}</span>}
+    </>
   );
 }

package/src/components/datatypes/Reference/Reference.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react';
 import _get from 'lodash/get';
-import './Reference.css';
 const Reference = props => {
   const { fhirData } = props;
@@ -8,13 +7,11 @@ const Reference = props => {
   const reference = _get(fhirData, 'reference', '');
   return (
     <div
-      className="fhir-datatype__Reference"
+      className="fhir-datatype__Reference d-inline-block"
       data-testid={props['data-testid']}
     >
-      {display && (
-        <span className="fhir-datatype__Reference__title">{display}</span>
-      )}
-      <span className="fhir-datatype__Reference__details">{reference}</span>
+      {display && <span className="mr-2 pe-1">{display}</span>}
+      <span>{reference}</span>
     </div>
   );
 };

package/src/components/resources/AdverseEvent/AdverseEvent.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain('Patient');
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
     expect(getByTestId('type').textContent).toContain('304386008');
@@ -36,7 +36,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain('Patient');
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
     expect(getByTestId('hasSeriousness').textContent).toContain('Non-serious');

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.test.js CHANGED Viewed

@@ -22,7 +22,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('status').textContent).toContain('unconfirmed');
-    expect(getByTestId('recordedDate').textContent).toContain('2010-03-01');
+    expect(getByTestId('recordedDate').textContent).toContain('3/1/2010');
     expect(getByTestId('substance').textContent).toContain('PENICILLIN');
@@ -46,7 +46,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('status').textContent).toContain('confirmed');
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -78,7 +78,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('status').textContent).toContain('Confirmed');
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -114,7 +114,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('status').textContent).toContain('Confirmed');
-    expect(getByTestId('recordedDate').textContent).toContain('2015-08-06');
+    expect(getByTestId('recordedDate').textContent).toContain('8/6/2015');
     expect(getByTestId('patient').textContent).toEqual('Patient/mom');

package/src/components/resources/Appointment/Appointment.js CHANGED Viewed

@@ -6,9 +6,7 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
   Body,
   Value,
   ValueSection,
@@ -23,6 +21,7 @@ import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import { isNotEmptyArray } from '../../../utils';
+import Accordion from '../../containers/Accordion';
 const prepareParticipantData = data => {
   let participantPatient = [];
@@ -163,71 +162,98 @@ const Appointment = props => {
     serviceCategory,
   } = resourceDTO(fhirVersion, fhirResource);
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        isNotEmptyArray(typeCoding) &&
+        typeCoding.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: isNotEmptyArray(typeCoding),
+    },
+    {
+      label: 'Duration [min]',
+      testId: 'minutesDuration',
+      data: minutesDuration,
+      status: minutesDuration,
+    },
+    {
+      label: 'Reason',
+      testId: 'reason',
+      data: isNotEmptyArray(reason) && <CodeableConcept fhirData={reason} />,
+      status: isNotEmptyArray(reason),
+    },
+    {
+      label: 'Cancelation Reason',
+      testId: 'cancelationReason',
+      data: isNotEmptyArray(cancelationReason) && (
+        <CodeableConcept fhirData={cancelationReason} />
+      ),
+      status: isNotEmptyArray(cancelationReason),
+    },
+    {
+      label: 'Service Category',
+      testId: 'serviceCategory',
+      data: isNotEmptyArray(serviceCategory) && (
+        <CodeableConcept fhirData={serviceCategory} />
+      ),
+      status: isNotEmptyArray(serviceCategory),
+    },
+  ];
   return (
     <Root name="Appointment">
-      <Header>
-        {description && <Title>{description}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {start && (
-          <BadgeSecondary data-testid="startDate">
-            on <Date fhirData={start} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {isNotEmptyArray(typeCoding) && (
-          <Value label="Type" data-testid="type">
-            {typeCoding.map((item, i) => (
-              <Coding key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {minutesDuration && (
-          <Value label="Duration [min]" data-testid="minutesDuration">
-            {minutesDuration}
-          </Value>
-        )}
-        {isNotEmptyArray(reason) && (
-          <Value label="Reason" data-testid="reason">
-            <CodeableConcept fhirData={reason} />
-          </Value>
-        )}
-        {isNotEmptyArray(cancelationReason) && (
-          <Value label="Cancelation Reason" data-testid="cancelationReason">
-            <CodeableConcept fhirData={cancelationReason} />
-          </Value>
-        )}
-        {isNotEmptyArray(serviceCategory) && (
-          <Value label="Service Category" data-testid="serviceCategory">
-            <CodeableConcept fhirData={serviceCategory} />
-          </Value>
-        )}
-        {isNotEmptyArray(participant) && (
-          <ValueSection label="Participant" data-testid="participant">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableHeader>Patient</TableHeader>
-                  <TableHeader>Practitioner</TableHeader>
-                  <TableHeader>Other</TableHeader>
-                </TableRow>
-              </thead>
-              <tbody>
-                <TableRow>
-                  <TableCell>{participantPatient}</TableCell>
-                  <TableCell>{participantPractitioner}</TableCell>
-                  <TableCell>{participantLocation}</TableCell>
-                </TableRow>
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-        {comment && (
-          <Value label="Comment" data-testid="comment">
-            {comment}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceName}
+            additionalContent={
+              start && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={start} isBlack />
+                </Value>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={description}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {isNotEmptyArray(participant) && (
+              <ValueSection
+                label="Participant"
+                data-testid="participant"
+                marginTop
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Patient</TableHeader>
+                      <TableHeader>Practitioner</TableHeader>
+                      <TableHeader>Other</TableHeader>
+                    </TableRow>
+                  </thead>
+                  <tbody className="border-top-0">
+                    <TableRow>
+                      <TableCell>{participantPatient}</TableCell>
+                      <TableCell>{participantPractitioner}</TableCell>
+                      <TableCell>{participantLocation}</TableCell>
+                    </TableRow>
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+            {comment && (
+              <ValueSection label="Comment" data-testid="comment" marginTop>
+                <span className="text-secondary">{comment}</span>
+              </ValueSection>
+            )}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/Appointment/Appointment.test.js CHANGED Viewed

@@ -24,7 +24,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('type').textContent).toContain('General Discussion');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',
@@ -71,7 +71,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',
@@ -108,7 +108,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',

package/src/components/resources/Bundle/Bundle.js CHANGED Viewed

@@ -9,7 +9,7 @@ import * as FhirResourceTypes from '../../supportedFhirResourceList';
 import './Bundle.css';
-export default function Bundle(props) {
+export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
   const commonDTO = fhirResource => {
     const type = _get(fhirResource, 'type', null);
     const total = _get(fhirResource, 'total');
@@ -36,7 +36,6 @@ export default function Bundle(props) {
     }
   };
-  const { fhirResource, fhirVersion } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -79,6 +78,7 @@ export default function Bundle(props) {
                 <FhirComponent
                   fhirResource={resource}
                   fhirVersion={fhirVersion}
+                  fhirIcons={fhirIcons}
                 />
               </div>
             );