fhir-react 0.3.9 → 0.3.12

package/src/components/resources/MedicationRequest/MedicationRequest.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationRequest from './MedicationRequest';
 
@@ -13,43 +13,40 @@ import MedicationRequestIcon from '../../../assets/containers/MedicationRequest/
 
 export default {
   title: 'MedicationRequest',
+  component: MedicationRequest,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationRequest
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
-    />
-  );
+const Template = args => <MedicationRequest {...args} />;
+
+export const DefaultVisualizationSTU3 = Template.bind({});
+DefaultVisualizationSTU3.args = {
+  fhirResource: stu3Example1,
+  fhirIcons: require('../../../assets/containers/MedicationRequest/medication-request.svg'),
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <MedicationRequest
-      fhirResource={fhirResource}
-      fhirIcons={MedicationRequestIcon}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: stu3Example2,
+  fhirIcons: MedicationRequestIcon,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', R4Example1);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: R4Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', R4Example2);
-  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: R4Example2,
+  fhirIcons: false,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', R4Example3);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: R4Example3,
+  fhirIcons: 'random text',
 };

package/src/components/resources/MedicationStatement/MedicationStatement.js

@@ -113,6 +113,7 @@ const MedicationStatement = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -207,6 +208,7 @@ const MedicationStatement = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/MedicationStatement/MedicationStatement.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationStatement from './MedicationStatement';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,59 +14,45 @@ import MedicationStatementIcon from '../../../assets/containers/MedicationStatem
 
 export default {
   title: 'MedicationStatement',
+  component: MedicationStatement,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
-    />
-  );
+const Template = args => <MedicationStatement {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/MedicationStatement/medication-statement.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={MedicationStatementIcon}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: MedicationStatementIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };

package/src/components/resources/Observation/Observation.js

@@ -18,7 +18,13 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Observation = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -116,6 +122,7 @@ const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/Observation/Observation.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Observation from './Observation';
 
@@ -15,51 +15,57 @@ import example3ObservationExcessR4 from '../../../fixtures/r4/resources/observat
 import ObservationIcon from '../../../assets/containers/Observation/observation.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Observation' };
+export default {
+  title: 'Observation',
+  component: Observation,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Observation {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleObservationIssued);
-  return (
-    <Observation
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Observation/observation.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: exampleObservationIssued,
+  fhirIcons: require('../../../assets/containers/Observation/observation.svg'),
 };
 
-export const ExampleWithoutIssuedDSTU2 = () => {
-  const fhirResource = object('Resource', exampleObservation);
-  return (
-    <Observation fhirResource={fhirResource} fhirIcons={ObservationIcon} />
-  );
+export const ExampleWithoutIssuedDSTU2 = Template.bind({});
+ExampleWithoutIssuedDSTU2.args = {
+  fhirResource: exampleObservation,
+  fhirIcons: ObservationIcon,
 };
 
-export const ExampleWithIssuedSTU3 = () => {
-  const fhirResource = object('Resource', exampleObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithIssuedSTU3 = Template.bind({});
+ExampleWithIssuedSTU3.args = {
+  fhirResource: exampleObservationExcessSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleWithoutIssuedSTU3 = () => {
-  const fhirResource = object('Resource', exampleObservationSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={false} />;
+export const ExampleWithoutIssuedSTU3 = Template.bind({});
+ExampleWithoutIssuedSTU3.args = {
+  fhirResource: exampleObservationSTU3,
+  fhirIcons: false,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', example3ObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirResource: example3ObservationExcessSTU3,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: example1ObservationExcessR4,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: example2ObservationExcessR4,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: example3ObservationExcessR4,
 };

package/src/components/resources/Organization/Organization.js

@@ -61,6 +61,7 @@ const Organization = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -135,6 +136,7 @@ const Organization = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/Organization/Organization.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Organization from './Organization';
 import fhirVersions from '../fhirResourceVersions';
@@ -19,69 +19,57 @@ import OrganizationIcon from '../../../assets/containers/Organization/organizati
 
 export default {
   title: 'Organization',
+  component: Organization,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={OrganizationIcon}
-    />
-  );
+const Template = args => <Organization {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Organization/organization.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: OrganizationIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: 'random text',
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

package/src/components/resources/Patient/Patient.js

@@ -48,6 +48,7 @@ function Patient(props) {
     fhirIcons,
     onClick,
     rawOnClick,
+    customId,
   } = props;
 
   const id = getId(fhirResource);
@@ -150,6 +151,7 @@ function Patient(props) {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/Patient/Patient.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Patient from './Patient';
 
@@ -15,44 +15,52 @@ import example3PatientR4 from '../../../fixtures/r4/resources/patient/example3.j
 import PatientIcon from '../../../assets/containers/Patient/patient.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Patient' };
+export default {
+  title: 'Patient',
+  component: Patient,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Patient {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', examplePatient);
-  return (
-    <Patient
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Patient/patient.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: examplePatient,
+  fhirIcons: require('../../../assets/containers/Patient/patient.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2PatientDSTU2);
-  return <Patient fhirResource={fhirResource} fhirIcons={PatientIcon} />;
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirResource: example2PatientDSTU2,
+  fhirIcons: PatientIcon,
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', examplePatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirResource: examplePatientSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2STU3 = () => {
-  const fhirResource = object('Resource', example2PatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={false} />;
+export const Example2STU3 = Template.bind({});
+Example2STU3.args = {
+  fhirResource: example2PatientSTU3,
+  fhirIcons: false,
 };
 
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', example1PatientR4);
-  return <Patient fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirResource: example1PatientR4,
+  fhirIcons: 'random text',
 };
 
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example2PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirResource: example2PatientR4,
 };
 
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', example3PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirResource: example3PatientR4,
 };

package/src/components/resources/Practitioner/Practitioner.js

@@ -38,12 +38,14 @@ const commonDTO = fhirResource => {
     birthDate,
   };
 };
+
 const dstu2DTO = fhirResource => {
   const name = _get(fhirResource, 'name');
   return {
     name,
   };
 };
+
 const stu3DTO = fhirResource => {
   const name = _get(fhirResource, 'name.0');
   const address = _get(fhirResource, 'address.0');
@@ -88,6 +90,7 @@ const Practitioner = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -168,6 +171,7 @@ const Practitioner = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );