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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.9",
+  "version": "0.3.12",
   "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.js CHANGED Viewed

@@ -6,12 +6,16 @@ const CHEVRON_DOWN_COLOR = '#6f83a9';
 const CHEVRON_UP_COLOR = '#2a6fd7';
 const Accordion = props => {
-  const { headerContent, bodyContent, onClick, rawOnClick } = props;
+  const { headerContent, bodyContent, onClick, rawOnClick, customId } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
-  const accordionId = uniqueId(
-    `accordion-type-${headerContent.props.resourceName || 'default'}-`,
-  );
+  const accordionIdText = `accordion-type-${headerContent.props.resourceName ||
+    'default'}-`;
+  const accordionId =
+    typeof customId === 'number'
+      ? `${accordionIdText}${customId}`
+      : uniqueId(accordionIdText);
   const isAccordionOpenable = () => {
     if (bodyContent) {

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.stories.js CHANGED Viewed

@@ -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 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

@@ -77,6 +77,7 @@ const AdverseEvent = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -172,6 +173,7 @@ const AdverseEvent = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </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

@@ -51,6 +51,7 @@ const dstu2DTO = fhirResource => {
     asserter,
   };
 };
 const stu3DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus');
@@ -73,6 +74,7 @@ const stu3DTO = fhirResource => {
     hasNote,
   };
 };
 const r4DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus.coding[0].display');
@@ -129,6 +131,7 @@ const AllergyIntolerance = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -239,6 +242,7 @@ const AllergyIntolerance = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </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

@@ -150,6 +150,7 @@ const Appointment = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     description,
@@ -261,6 +262,7 @@ const Appointment = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );