fhir-react 0.3.9 → 0.3.10

package/.storybook/main.js

@@ -0,0 +1,5 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: ['@storybook/preset-scss', '@storybook/addon-controls'],
+  framework: '@storybook/react',
+};

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  name: 'FHIR-REACT storybook',
+  showRoots: false,
+});

package/.storybook/preview.js

@@ -0,0 +1,7 @@
+import '../src/components/ui/bootstrap-reboot.min.css';
+import '../src/style.css';
+import '../src/style.scss';
+
+if (typeof document !== 'undefined') {
+  require('bootstrap/dist/js/bootstrap.min.js');
+}

package/README.md

@@ -1,5 +1,5 @@
 [![CircleCI](https://circleci.com/gh/1uphealth/fhir-react/tree/master.svg?style=svg)](https://circleci.com/gh/1uphealth/fhir-react/tree/master)
-[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-9/index.html)
+[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-10/index.html)
 
 # fhir-react
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
@@ -10,6 +10,7 @@
     "@nivo/core": "^0.78.0",
     "@nivo/pie": "^0.78.0",
     "@popperjs/core": "^2.11.2",
+    "@storybook/addons": "^6.4.22",
     "bootstrap": "^5.1.3",
     "dompurify": "^2.3.6",
     "lodash": "^4.17.21",
@@ -82,10 +83,10 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@storybook/addon-knobs": "^5.2.8",
+    "@storybook/addon-controls": "^6.4.22",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^5.2.8",
-    "@storybook/storybook-deployer": "^2.8.1",
+    "@storybook/react": "^6.4.22",
+    "@storybook/storybook-deployer": "^2.8.11",
     "@testing-library/react": "^12.1.4",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",

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

@@ -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.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import ResourceContainer from './ResourceContainer';
 import Encounter from '../../../components/resources/Encounter';
@@ -10,50 +10,52 @@ import fhirVersions from '../../../components/resources/fhirResourceVersions';
 
 export default {
   title: 'ResourceContainer',
+  component: ResourceContainer,
+  argTypes: {
+    ...defaultArgTypes,
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const DefaultVisualizationWithRawButtonHiddenInsideAccordion = () => {
-  const fhirResource = object('Resource', example1);
-  const props = {
-    fhirVersion: fhirVersions.DSTU2,
-    fhirResource: fhirResource,
-  };
-  return (
-    <ResourceContainer {...props}>
-      <Encounter {...props} />
-    </ResourceContainer>
-  );
-};
-
-export const DefaultVisualizationWithRawButtonVisibleOutsideAccordion = () => {
-  const exampleResource = {
-    resourceType: 'UnknownResource',
-    id: '12345',
-    code: {
-      text: 'Resource code text',
-    },
-  };
+const Template = args => <ResourceContainer {...args} />;
 
-  const fhirResource = object('Resource', exampleResource);
-  const props = {
-    fhirResource: fhirResource,
-  };
+const propsRawInsideAccordion = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+};
+export const DefaultVisualizationWithRawButtonHiddenInsideAccordion = Template.bind(
+  {},
+);
+DefaultVisualizationWithRawButtonHiddenInsideAccordion.args = {
+  ...propsRawInsideAccordion,
+  children: <Encounter {...propsRawInsideAccordion} />,
+};
 
-  return (
-    <ResourceContainer {...props}>
-      <Generic {...props} />
-    </ResourceContainer>
-  );
+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

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

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

@@ -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.stories.js

@@ -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.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import fhirVersions from '../fhirResourceVersions';
 
 import Appointment from './Appointment';
@@ -16,76 +16,65 @@ import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/ex
 import fhirIcons from '../../../fixtures/example-icons';
 import AppointmentIcon from '../../../assets/containers/Appointment/appointment.svg';
 
-export default { title: 'Appointment' };
+export default {
+  title: 'Appointment',
+  component: Appointment,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Appointment {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleAppointmentDSTU2);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Appointment/appointment.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: exampleAppointmentDSTU2,
+  fhirVersion: fhirVersions.DSTU2,
+  fhirIcons: require('../../../assets/containers/Appointment/appointment.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2AppointmentDSTU2);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={AppointmentIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirResource: example2AppointmentDSTU2,
+  fhirVersion: fhirVersions.DSTU2,
+  fhirIcons: AppointmentIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', example1AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirResource: example1AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: fhirIcons,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: example2AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: false,
 };
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', example3AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirResource: example3AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: example1AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: example2AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: example3AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };