npm - fhir-react - Versions diffs - 0.3.8 → 0.3.11 - Mend

fhir-react 0.3.8 → 0.3.11

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 (102) hide show

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

@@ -1,76 +1,92 @@
+import React from 'react';
+import _get from 'lodash/get';
 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 Procedure from '../../resources/Procedure/Procedure';
 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';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'Accordion',
+  component: Accordion,
+  argTypes: {
+    headerContent: {
+      table: {
+        disable: true,
+      },
+    },
+    bodyContent: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
-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', []);
+const Template = args => <Accordion {...args} />;
-  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>
-      }
-    />
-  );
+const DefaultVisualizationFhirResource = stu3Example1;
+export const DefaultVisualization = Template.bind({});
+DefaultVisualization.args = {
+  headerContent: (
+    <div className="">
+      <Title>
+        {_get(DefaultVisualizationFhirResource, 'code.coding[0].display') ||
+          _get(DefaultVisualizationFhirResource, 'code.text')}
+      </Title>
+      <div className="pb-3" />
+      <BadgeSecondary data-testid="performedDateTime">
+        <Date
+          fhirData={_get(DefaultVisualizationFhirResource, 'performedDateTime')}
+        />
+      </BadgeSecondary>
+    </div>
+  ),
+  bodyContent: (
+    <Body>
+      <Value label="Performed by">
+        {_get(DefaultVisualizationFhirResource, 'performer', []).map(
+          (item, i) => (
+            <div key={`item-${i}`}>
+              {_get(item, 'actor.display', <MissingValue />)}
+            </div>
+          ),
+        )}
+      </Value>
+      <Value label="Location" data-testid="location">
+        <Reference
+          fhirData={_get(DefaultVisualizationFhirResource, 'location[0]')}
+        />
+      </Value>
+      <Value label="Reason" data-testid="hasReasonCode">
+        <Annotation
+          fhirData={_get(DefaultVisualizationFhirResource, 'reasonCode', [])}
+        />
+      </Value>
+      <Value label="Notes" data-testid="hasNote">
+        <Annotation
+          fhirData={_get(DefaultVisualizationFhirResource, 'note', [])}
+        />
+      </Value>
+    </Body>
+  ),
 };
-export const ProcedureVisualization = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Accordion
-      headerContent={<div className=""></div>}
-      bodyContent={
-        <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />
-      }
+const ProcedureVisualizationFhirResource = example1;
+export const ProcedureVisualization = Template.bind({});
+ProcedureVisualization.args = {
+  headerContent: <div className="" />,
+  bodyContent: (
+    <Procedure
+      fhirResource={ProcedureVisualizationFhirResource}
+      fhirIcons={fhirIcons}
     />
-  );
+  ),
 };

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

@@ -20,6 +20,10 @@
   top: 0.5rem;
 }
+.fhir-container__ResourceContainer__json-button-wrapper-accordion {
+  margin-top: 10px;
+}
 .fhir-container__ResourceContainer__json--visible {
   display: block;
   padding-top: 10px;

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

@@ -1,45 +1,36 @@
-import React from 'react';
+import React, { Children, cloneElement, useState } from 'react';
 import CodeBlock from '../CodeBlock';
 import './ResourceContainer.css';
-class ResourceContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jsonOpen:
-        typeof this.props.jsonOpen === 'undefined'
-          ? false
-          : this.props.jsonOpen,
-    };
-  }
+const ResourceContainer = ({ fhirResource, children, jsonOpen }) => {
+  const [openJson, setOpenJson] = useState(jsonOpen ?? false);
-  render() {
-    return (
-      <div className="fhir-container__ResourceContainer__card">
-        <div className="fhir-container__ResourceContainer__card-body">
-          <div className="fhir-container__ResourceContainer__json-button-wrapper">
-            <button
-              type="button"
-              className="fhir-container__ResourceContainer__json-button"
-              onClick={() => this.setState({ jsonOpen: !this.state.jsonOpen })}
-            >
-              RAW
-            </button>
-          </div>
-          {this.props.children}
-          <div
-            className={
-              this.state.jsonOpen
-                ? 'fhir-container__ResourceContainer__json--visible'
-                : 'fhir-container__ResourceContainer__json--hidden'
-            }
-          >
-            <CodeBlock code={this.props.fhirResource} />
-          </div>
+  return (
+    <div className="fhir-container__ResourceContainer__card">
+      <div className="fhir-container__ResourceContainer__card-body">
+        {Children.map(children, child => {
+          return cloneElement(
+            child,
+            {
+              rawOnClick: () => {
+                setOpenJson(!openJson);
+              },
+            },
+            null,
+          );
+        })}
+        <div
+          className={
+            openJson
+              ? 'fhir-container__ResourceContainer__json--visible'
+              : 'fhir-container__ResourceContainer__json--hidden'
+          }
+        >
+          <CodeBlock code={fhirResource} />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 export default ResourceContainer;

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

@@ -1,37 +1,61 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import ResourceContainer from './ResourceContainer';
 import Encounter from '../../../components/resources/Encounter';
+import Generic from '../../resources/Generic';
 import example1 from '../../../fixtures/dstu2/resources/encounter/example.json';
 import fhirVersions from '../../../components/resources/fhirResourceVersions';
 export default {
   title: 'ResourceContainer',
+  component: ResourceContainer,
+  argTypes: {
+    ...defaultArgTypes,
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
-export const DefaultVisualization = () => {
-  const fhirResource = object('Resource', example1);
-  const props = {
-    fhirVersion: fhirVersions.DSTU2,
-    fhirResource: fhirResource,
-  };
-  return (
-    <ResourceContainer {...props}>
-      <Encounter {...props} />
-    </ResourceContainer>
-  );
+const Template = args => <ResourceContainer {...args} />;
+const propsRawInsideAccordion = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+};
+export const DefaultVisualizationWithRawButtonHiddenInsideAccordion = Template.bind(
+  {},
+);
+DefaultVisualizationWithRawButtonHiddenInsideAccordion.args = {
+  ...propsRawInsideAccordion,
+  children: <Encounter {...propsRawInsideAccordion} />,
+};
+const exampleResource = {
+  resourceType: 'UnknownResource',
+  id: '12345',
+  code: {
+    text: 'Resource code text',
+  },
+};
+const propsRawOutsideAccordion = { fhirResource: exampleResource };
+export const DefaultVisualizationWithRawButtonVisibleOutsideAccordion = Template.bind(
+  {},
+);
+DefaultVisualizationWithRawButtonVisibleOutsideAccordion.args = {
+  ...propsRawOutsideAccordion,
+  children: <Generic {...propsRawOutsideAccordion} />,
 };
-export const VisualizationWithoutFhirVersion = () => {
-  const fhirResource = object('Resource', example1);
-  const props = {
-    fhirResource: fhirResource,
-  };
-  return (
-    <ResourceContainer {...props}>
-      <Encounter {...props} />
-    </ResourceContainer>
-  );
+const propsWithoutVersion = {
+  fhirResource: example1,
+};
+export const VisualizationWithoutFhirVersion = Template.bind({});
+VisualizationWithoutFhirVersion.args = {
+  ...propsWithoutVersion,
+  children: <Encounter {...propsWithoutVersion} />,
 };

package/src/components/defaultArgTypes.js ADDED Viewed

@@ -0,0 +1,12 @@
+export const defaultArgTypes = {
+  fhirVersion: {
+    table: {
+      disable: true,
+    },
+  },
+  fhirIcons: {
+    table: {
+      disable: true,
+    },
+  },
+};

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

@@ -71,7 +71,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const AdverseEvent = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const AdverseEvent = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,6 +171,7 @@ const AdverseEvent = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import AdverseEvent from './AdverseEvent';
 import fhirVersions from '../fhirResourceVersions';
@@ -11,26 +11,24 @@ import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'AdverseEvent',
+  component: AdverseEvent,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <AdverseEvent
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+const Template = args => <AdverseEvent {...args} />;
+export const DefaultVisualizationSTU3 = Template.bind({});
+DefaultVisualizationSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
-export const Example1ofR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <AdverseEvent
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={false}
-    />
-  );
+export const Example1ofR4 = Template.bind({});
+Example1ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };

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

@@ -128,6 +128,7 @@ const AllergyIntolerance = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -237,6 +238,7 @@ const AllergyIntolerance = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import AllergyIntolerance from './AllergyIntolerance';
@@ -14,88 +14,64 @@ import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
 import AllergyIntoleranceIcon from '../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg';
-export default { title: 'AllergyIntolerance' };
+export default {
+  title: 'AllergyIntolerance',
+  component: AllergyIntolerance,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+const Template = args => <AllergyIntolerance {...args} />;
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleAllergyIntoleranceDSTU2);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleAllergyIntoleranceDSTU2,
+  fhirIcons: require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg'),
 };
-export const Example2ofDSTU2 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceDSTU2);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={AllergyIntoleranceIcon}
-    />
-  );
+export const Example2ofDSTU2 = Template.bind({});
+Example2ofDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2AllergyIntoleranceDSTU2,
+  fhirIcons: AllergyIntoleranceIcon,
 };
-export const ExampleDiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', exampleAllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleDiagnosticReportSTU3 = Template.bind({});
+ExampleDiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleAllergyIntoleranceSTU3,
+  fhirIcons: fhirIcons,
 };
-export const Example2DiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2DiagnosticReportSTU3 = Template.bind({});
+Example2DiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2AllergyIntoleranceSTU3,
+  fhirIcons: false,
 };
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', example1AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1AllergyIntoleranceR4,
+  fhirIcons: 'random text',
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2AllergyIntoleranceR4,
 };
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', example3AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3AllergyIntoleranceR4,
 };
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: example2AllergyIntoleranceSTU3,
 };

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

@@ -144,7 +144,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Appointment = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Appointment = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     description,
     status,
@@ -254,6 +260,7 @@ const Appointment = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );