fhir-react 0.3.9 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationKnowledge from './MedicationKnowledge';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,72 +13,63 @@ import MedicationKnowledgeIcon from '../../../assets/containers/MedicationKnowle
 
 export default {
   title: 'MedicationKnowledge',
+  component: MedicationKnowledge,
+  argTypes: {
+    ...defaultArgTypes,
+    withDaVinciPDex: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const DefaultVisualizationR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
-    />
-  );
+const Template = args => <MedicationKnowledge {...args} />;
+
+export const DefaultVisualizationR4 = Template.bind({});
+DefaultVisualizationR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
+  fhirIcons: require('../../../assets/containers/MedicationKnowledge/medication-knowledge.svg'),
 };
-export const ExampleR4WithoutDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={MedicationKnowledgeIcon}
-    />
-  );
+
+export const ExampleR4WithoutDaVinciPDex = Template.bind({});
+ExampleR4WithoutDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: MedicationKnowledgeIcon,
 };
-export const ExampleR4WithDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withDaVinciPDex
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const ExampleR4WithDaVinciPDex = Template.bind({});
+ExampleR4WithDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: fhirIcons,
+  withDaVinciPDex: true,
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example3R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3R4,
+  fhirIcons: false,
 };
 
-export const Example3R4WithDaVinciPDex = () => {
-  const fhirResource = object('Resource', example4R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withDaVinciPDex
-      fhirIcons={false}
-    />
-  );
+export const Example3R4WithDaVinciPDex = Template.bind({});
+Example3R4WithDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example4R4,
+  fhirIcons: 'random text',
+  withDaVinciPDex: true,
 };
 
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example3R4);
-  return <MedicationKnowledge fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example3R4,
 };
 
-export const ExampleWithUnsupportedFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example4R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleWithUnsupportedFHIRVersionProperty = Template.bind({});
+ExampleWithUnsupportedFHIRVersionProperty.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example4R4,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationOrder from './MedicationOrder';
 
@@ -7,9 +7,16 @@ import dstu2Example from '../../../fixtures/dstu2/resources/medicationOrder/exam
 
 export default {
   title: 'MedicationOrder',
+  component: MedicationOrder,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example);
-  return <MedicationOrder fhirResource={fhirResource} />;
+const Template = args => <MedicationOrder {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: dstu2Example,
+  fhirIcons: require('../../../assets/containers/MedicationOrder/medication-order.svg'),
 };

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.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.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.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.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,
 };