npm - fhir-react - Versions diffs - 0.3.9 → 0.3.12 - Mend

fhir-react 0.3.9 → 0.3.12

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

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

@@ -99,6 +99,7 @@ const DiagnosticReport = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -172,6 +173,7 @@ const DiagnosticReport = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import DiagnosticReport from './DiagnosticReport';
 import fhirVersions from '../fhirResourceVersions';
@@ -12,64 +12,52 @@ import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosti
 import fhirIcons from '../../../fixtures/example-icons';
 import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
-export default { title: 'DiagnosticReport' };
+export default {
+  title: 'DiagnosticReport',
+  component: DiagnosticReport,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+const Template = args => <DiagnosticReport {...args} />;
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportDSTU2);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleDiagnosticReportDSTU2,
+  fhirIcons: require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg'),
 };
-export const ExampleDiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={DiagnosticReportIcon}
-    />
-  );
+export const ExampleDiagnosticReportSTU3 = Template.bind({});
+ExampleDiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleDiagnosticReportSTU3,
+  fhirIcons: DiagnosticReportIcon,
 };
-export const ExampleDiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleDiagnosticReportR4 = Template.bind({});
+ExampleDiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleDiagnosticReportR4,
+  fhirIcons: fhirIcons,
 };
-export const Example2DiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', example2DiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2DiagnosticReportR4 = Template.bind({});
+Example2DiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2DiagnosticReportR4,
+  fhirIcons: false,
 };
-export const Example3DiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', example3DiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example3DiagnosticReportR4 = Template.bind({});
+Example3DiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3DiagnosticReportR4,
+  fhirIcons: 'random text',
 };
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return <DiagnosticReport fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: exampleDiagnosticReportSTU3,
 };

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

@@ -222,6 +222,7 @@ const DocumentReference = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -344,6 +345,7 @@ const DocumentReference = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import fhirVersions from '../fhirResourceVersions';
 import DocumentReference from './DocumentReference';
@@ -10,37 +10,33 @@ import example1DocumentReferenceR4 from '../../../fixtures/r4/resources/document
 import fhirIcons from '../../../fixtures/example-icons';
 import DocumentReferenceIcon from '../../../assets/containers/DocumentReference/document-reference.svg';
-export default { title: 'Document Reference' };
+export default {
+  title: 'DocumentReference',
+  component: DocumentReference,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+const Template = args => <DocumentReference {...args} />;
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleDocumentReference);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/DocumentReference/document-reference.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleDocumentReference,
+  fhirIcons: require('../../../assets/containers/DocumentReference/document-reference.svg'),
 };
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', exampleDocumentReferenceSTU3);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={DocumentReferenceIcon}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleDocumentReferenceSTU3,
+  fhirIcons: DocumentReferenceIcon,
 };
-export const ExampleR4 = () => {
-  const fhirResource = object('Resource', example1DocumentReferenceR4);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleR4 = Template.bind({});
+ExampleR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1DocumentReferenceR4,
+  fhirIcons: fhirIcons,
 };

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

@@ -166,6 +166,7 @@ const Encounter = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -237,6 +238,7 @@ const Encounter = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import Encounter from './Encounter';
@@ -16,78 +16,62 @@ import EncounterIcon from '../../../assets/containers/Encounter/encounter.svg';
 export default {
   title: 'Encounter',
+  component: Encounter,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Encounter/encounter.svg')}
-    />
-  );
+const Template = args => <Encounter {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Encounter/encounter.svg'),
 };
-export const ExampleWithoutParticipantsDSTU2 = () => {
-  const fhirResource = object('Resource', example2);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={EncounterIcon}
-    />
-  );
+export const ExampleWithoutParticipantsDSTU2 = Template.bind({});
+ExampleWithoutParticipantsDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2,
+  fhirIcons: EncounterIcon,
 };
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example_STU3);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example_STU3,
+  fhirIcons: fhirIcons,
 };
-export const ExampleWithoutParticipantSTU3 = () => {
-  const fhirResource = object('Resource', example2_STU3);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const ExampleWithoutParticipantSTU3 = Template.bind({});
+ExampleWithoutParticipantSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2_STU3,
+  fhirIcons: false,
 };
-export const ExampleWithoutParticipantR4 = () => {
-  const fhirResource = object('Resource', example1_R4);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const ExampleWithoutParticipantR4 = Template.bind({});
+ExampleWithoutParticipantR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1_R4,
+  fhirIcons: 'random text',
 };
-export const Example2ofR4 = () => {
-  const fhirResource = object('Resource', example2_R4);
-  return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example2ofR4 = Template.bind({});
+Example2ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2_R4,
 };
-export const Example3ofR4 = () => {
-  const fhirResource = object('Resource', example3_R4);
-  return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example3ofR4 = Template.bind({});
+Example3ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3_R4,
 };
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example2_STU3);
-  return <Encounter fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example2_STU3,
 };

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

@@ -235,6 +235,7 @@ const ExplanationOfBenefit = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -517,9 +518,22 @@ const ExplanationOfBenefit = ({
                           return key !== 'sequence' && key !== 'category';
                         },
                       );
-                      const infoStatus = _get(informationItem, infoKey);
-                      const StatusComponent =
-                        infoKey.toString() === 'timingDate' ? Date : Quantity;
+                      let infoStatus = _get(informationItem, infoKey);
+                      let StatusComponent;
+                      switch (infoKey.toString()) {
+                        case 'timingDate':
+                          StatusComponent = Date;
+                          break;
+                        case 'timingPeriod':
+                          StatusComponent = Period;
+                          break;
+                        case 'valueQuantity':
+                          StatusComponent = Quantity;
+                          break;
+                        default:
+                          StatusComponent = Coding;
+                          infoStatus = _get(infoStatus, 'coding', '')[0];
+                      }
                       return (
                         <TableRow key={`serviceItem-${i}`}>
@@ -550,6 +564,7 @@ const ExplanationOfBenefit = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import ExplanationOfBenefit from './ExplanationOfBenefit';
 import fhirVersions from '../fhirResourceVersions';
@@ -17,83 +17,69 @@ import ExplanationOfBenefitIcon from '../../../assets/containers/ExplanationOfBe
 export default {
   title: 'ExplanationOfBenefit',
+  component: ExplanationOfBenefit,
+  argTypes: {
+    ...defaultArgTypes,
+    withCarinBBProfile: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1Dstu2);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
-    />
-  );
+const Template = args => <ExplanationOfBenefit {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1Dstu2,
+  fhirIcons: require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg'),
 };
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={ExplanationOfBenefitIcon}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1Stu3,
+  fhirIcons: ExplanationOfBenefitIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2Stu3,
+  fhirIcons: fhirIcons,
 };
-export const PersonPrimaryCoverageR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const PersonPrimaryCoverageR4 = Template.bind({});
+PersonPrimaryCoverageR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
+  fhirIcons: false,
 };
-export const EOBForClaimWithErrorsR4 = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const EOBForClaimWithErrorsR4 = Template.bind({});
+EOBForClaimWithErrorsR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: 'random text',
 };
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return <ExplanationOfBenefit fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example1Stu3,
 };
-export const EOBCarinBlueButtonExample = () => {
-  const fhirResource = object('Resource', exampleC4BB);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExample = Template.bind({});
+EOBCarinBlueButtonExample.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BB,
+  withCarinBBProfile: true,
 };
-export const EOBCarinBlueButtonExtendedDiagnosis = () => {
-  const fhirResource = object('Resource', exampleC4BBExtendedDiagnosis);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExtendedDiagnosis = Template.bind({});
+EOBCarinBlueButtonExtendedDiagnosis.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BBExtendedDiagnosis,
+  withCarinBBProfile: true,
 };

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

@@ -2,8 +2,6 @@ import React from 'react';
 import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
-export default { title: 'ExplanationOfBenefitGraph' };
 const CHART_DATA = [
   {
     id: 'a',
@@ -31,48 +29,86 @@ const CHART_DATA = [
   },
 ];
-export const DefaultExplanationOfBenefitGraph = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 10, bottom: 10 }}
-    />
-  );
+export default {
+  title: 'ExplanationOfBenefit/ExplanationOfBenefitGraph',
+  component: ExplanationOfBenefitGraph,
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+    margin: {
+      table: {
+        disable: true,
+      },
+    },
+    totalLabel: {
+      table: {
+        disable: true,
+      },
+    },
+    height: {
+      table: {
+        disable: true,
+      },
+    },
+    enableLinkLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    enableValueLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    pieChartProperties: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+const Template = args => <ExplanationOfBenefitGraph {...args} />;
+export const DefaultExplanationOfBenefitGraph = Template.bind({});
+DefaultExplanationOfBenefitGraph.args = {
+  data: CHART_DATA,
+  margin: { top: 10, bottom: 10 },
 };
-export const ExplanationOfBenefitGraphWithCustomCenteredMetric = () => {
-  return <ExplanationOfBenefitGraph data={CHART_DATA} totalLabel="Custom" />;
+export const ExplanationOfBenefitGraphWithCustomCenteredMetric = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithCustomCenteredMetric.args = {
+  data: CHART_DATA,
+  totalLabel: 'Custom',
 };
-export const ExplanationOfBenefitGraphWithHeightAndMargin = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 40, bottom: 40 }}
-      height={250}
-    />
-  );
+export const ExplanationOfBenefitGraphWithHeightAndMargin = Template.bind({});
+ExplanationOfBenefitGraphWithHeightAndMargin.args = {
+  data: CHART_DATA,
+  margin: { top: 40, bottom: 40 },
+  height: 250,
 };
-export const ExplanationOfBenefitGraphWithLabels = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-    />
-  );
+export const ExplanationOfBenefitGraphWithLabels = Template.bind({});
+ExplanationOfBenefitGraphWithLabels.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
 };
-export const ExplanationOfBenefitGraphWithPieChartProperties = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-      pieChartProperties={{ startAngle: 90, cornerRadius: 15, borderWidth: 4 }}
-    />
-  );
+export const ExplanationOfBenefitGraphWithPieChartProperties = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithPieChartProperties.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
+  pieChartProperties: { startAngle: 90, cornerRadius: 15, borderWidth: 4 },
 };