Use react-jsx transform (medplum#3338)

* Use react-jsx transform * Use babel preset-react runtime automatic
ahmadswalih · Nov 18, 2023 · a28d504 · a28d504
1 parent 0565b5d
commit a28d504
Show file tree

Hide file tree

Showing 466 changed files with 350 additions and 623 deletions.
diff --git a/examples/foomedical/src/components/InfoButton.tsx b/examples/foomedical/src/components/InfoButton.tsx
@@ -1,4 +1,5 @@
 import { createStyles, Group, UnstyledButton } from '@mantine/core';
+import { ReactNode } from 'react';
 
 const useStyles = createStyles((theme) => ({
   button: {
@@ -18,7 +19,7 @@ const useStyles = createStyles((theme) => ({
 
 export interface InfoButtonProps {
   onClick?: () => void;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export function InfoButton(props: InfoButtonProps): JSX.Element {

diff --git a/examples/foomedical/src/components/InfoSection.tsx b/examples/foomedical/src/components/InfoSection.tsx
@@ -1,5 +1,5 @@
 import { Card, CloseButton, createStyles, Title } from '@mantine/core';
-import React from 'react';
+import { ReactNode } from 'react';
 
 const useStyles = createStyles((theme) => ({
   titleSection: {
@@ -16,7 +16,7 @@ const useStyles = createStyles((theme) => ({
 
 interface InfoSectionProps {
   title: string | JSX.Element;
-  children: React.ReactNode;
+  children: ReactNode;
   onButtonClick?: (id: string) => void;
   resourceType?: string;
   id?: string;

diff --git a/examples/foomedical/src/components/SideMenu.tsx b/examples/foomedical/src/components/SideMenu.tsx
@@ -1,5 +1,5 @@
 import { createStyles, getStylesRef, Title } from '@mantine/core';
-import React from 'react';
+import { Fragment } from 'react';
 import { NavLink } from 'react-router-dom';
 
 export interface SubMenuProps {
@@ -70,7 +70,7 @@ export function SideMenu(props: SideMenuProps): JSX.Element {
         {props.title}
       </Title>
       {props.menu.map((item) => (
-        <React.Fragment key={item.href}>
+        <Fragment key={item.href}>
           <NavLink to={item.href} end className={({ isActive }) => cx(classes.link, isActive && classes.linkActive)}>
             <span>{item.name}</span>
           </NavLink>
@@ -81,7 +81,7 @@ export function SideMenu(props: SideMenuProps): JSX.Element {
               </NavLink>
             </div>
           ))}
-        </React.Fragment>
+        </Fragment>
       ))}
     </div>
   );

diff --git a/examples/medplum-chart-demo/src/App.tsx b/examples/medplum-chart-demo/src/App.tsx
@@ -1,6 +1,6 @@
 import { AppShell, ErrorBoundary, Loading, Logo, useMedplum, useMedplumProfile } from '@medplum/react';
 import { IconUser } from '@tabler/icons-react';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { HomePage } from './pages/HomePage';
 import { LandingPage } from './pages/LandingPage';

diff --git a/examples/medplum-chart-demo/src/components/chart/Allergies.tsx b/examples/medplum-chart-demo/src/components/chart/Allergies.tsx
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { createReference } from '@medplum/core';
 import { AllergyIntolerance, CodeableConcept, Encounter, Patient } from '@medplum/fhirtypes';
 import { CodeableConceptDisplay, CodeableConceptInput, Form, useMedplum } from '@medplum/react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export interface AllergiesProps {
   patient: Patient;

diff --git a/examples/medplum-chart-demo/src/components/chart/Medications.tsx b/examples/medplum-chart-demo/src/components/chart/Medications.tsx
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { createReference } from '@medplum/core';
 import { CodeableConcept, Encounter, MedicationRequest, Patient } from '@medplum/fhirtypes';
 import { CodeableConceptDisplay, CodeableConceptInput, Form, useMedplum } from '@medplum/react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export interface MedicationsProps {
   patient: Patient;

diff --git a/examples/medplum-chart-demo/src/components/chart/ProblemList.tsx b/examples/medplum-chart-demo/src/components/chart/ProblemList.tsx
@@ -15,7 +15,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { createReference } from '@medplum/core';
 import { Condition, Encounter, Patient } from '@medplum/fhirtypes';
 import { CodeableConceptDisplay, Form, useMedplum } from '@medplum/react';
-import React, { useCallback, useState } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 
 export interface ProblemListProps {
   patient: Patient;
@@ -62,14 +62,14 @@ export function ProblemList(props: ProblemListProps): JSX.Element {
       {problems.length > 0 ? (
         <Grid gutter="xs">
           {problems.map((problem) => (
-            <React.Fragment key={problem.id}>
+            <Fragment key={problem.id}>
               <Grid.Col span={2}>{problem.onsetDateTime?.substring(0, 4)}</Grid.Col>
               <Grid.Col span={10}>
                 <Badge key={problem.id} maw="100%">
                   <CodeableConceptDisplay value={problem.code} />
                 </Badge>
               </Grid.Col>
-            </React.Fragment>
+            </Fragment>
           ))}
         </Grid>
       ) : (

diff --git a/examples/medplum-chart-demo/src/components/chart/SmokingStatus.tsx b/examples/medplum-chart-demo/src/components/chart/SmokingStatus.tsx
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { createReference } from '@medplum/core';
 import { Encounter, Observation, Patient } from '@medplum/fhirtypes';
 import { CodeableConceptDisplay, Form, useMedplum } from '@medplum/react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 // Smoking Status widget
 // See: https://build.fhir.org/ig/HL7/US-Core/StructureDefinition-us-core-smokingstatus.html

diff --git a/examples/medplum-chart-demo/src/components/chart/Vitals.tsx b/examples/medplum-chart-demo/src/components/chart/Vitals.tsx
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { generateId } from '@medplum/core';
 import { Encounter, Observation, Patient } from '@medplum/fhirtypes';
 import { Form, QuantityDisplay, useMedplum } from '@medplum/react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import {
   createCompoundObservation,
   createLoincCode,

diff --git a/examples/medplum-chart-demo/src/components/soapnote/SoapNote.tsx b/examples/medplum-chart-demo/src/components/soapnote/SoapNote.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Text } from '@mantine/core';
 import { Questionnaire, QuestionnaireResponse, Task } from '@medplum/fhirtypes';
 import { Document, QuestionnaireForm, useMedplum } from '@medplum/react';
 import { IconCircleCheck } from '@tabler/icons-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 export function SoapNote(): JSX.Element {

diff --git a/examples/medplum-chart-demo/src/components/tasks/DiagnosticReportTask.tsx b/examples/medplum-chart-demo/src/components/tasks/DiagnosticReportTask.tsx
@@ -2,7 +2,7 @@ import { Button, Flex, Modal } from '@mantine/core';
 import { DiagnosticReport, Task } from '@medplum/fhirtypes';
 import { CodeableConceptDisplay, DiagnosticReportDisplay, useMedplum } from '@medplum/react';
 import { IconCircleCheck } from '@tabler/icons-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { TaskCellProps } from './TaskList';
 
 export function DiagnosticReportModal(props: TaskCellProps): JSX.Element {

diff --git a/examples/medplum-chart-demo/src/components/tasks/QuestionnaireTask.tsx b/examples/medplum-chart-demo/src/components/tasks/QuestionnaireTask.tsx
@@ -4,7 +4,7 @@ import { getTypedPropertyValue, TypedValue } from '@medplum/core';
 import { Questionnaire, QuestionnaireResponse, QuestionnaireResponseItem, Task } from '@medplum/fhirtypes';
 import { QuestionnaireForm, ResourcePropertyDisplay, useMedplum } from '@medplum/react';
 import { IconCircleCheck } from '@tabler/icons-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { TaskCellProps } from './TaskList';
 
 export function QuestionnaireTask(props: TaskCellProps): JSX.Element {

diff --git a/examples/medplum-chart-demo/src/components/tasks/TaskList.tsx b/examples/medplum-chart-demo/src/components/tasks/TaskList.tsx
@@ -11,7 +11,7 @@ import {
   useResource,
 } from '@medplum/react';
 import { IconFilePencil, IconHeart, IconListCheck, IconReportMedical } from '@tabler/icons-react';
-import React, { useEffect, useState } from 'react';
+import { Fragment, ReactNode, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { DiagnosticReportModal } from './DiagnosticReportTask';
 import { QuestionnaireTask, ResponseDisplay } from './QuestionnaireTask';
@@ -32,7 +32,7 @@ interface TaskItemProps {
   task: Task;
   resource: Resource;
   profile?: Reference;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export function TaskList(): JSX.Element | null {
@@ -62,10 +62,10 @@ export function TaskList(): JSX.Element | null {
       <Box>
         <Timeline>
           {tasks.map((task, idx) => (
-            <React.Fragment key={idx}>
+            <Fragment key={idx}>
               <FocusTimeline key={task.id} task={task} />
               {idx !== tasks.length - 1 ? <Divider w="100%" /> : null}
-            </React.Fragment>
+            </Fragment>
           ))}
         </Timeline>
       </Box>

diff --git a/examples/medplum-chart-demo/src/main.tsx b/examples/medplum-chart-demo/src/main.tsx
@@ -1,7 +1,7 @@
 import { MantineProvider, MantineThemeOverride } from '@mantine/core';
 import { MedplumClient } from '@medplum/core';
 import { MedplumProvider } from '@medplum/react';
-import React from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
@@ -33,13 +33,13 @@ const theme: MantineThemeOverride = {
 const container = document.getElementById('root') as HTMLDivElement;
 const root = createRoot(container);
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <BrowserRouter>
       <MedplumProvider medplum={medplum}>
         <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
           <App />
         </MantineProvider>
       </MedplumProvider>
     </BrowserRouter>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/examples/medplum-chart-demo/src/pages/HomePage.tsx b/examples/medplum-chart-demo/src/pages/HomePage.tsx
@@ -2,7 +2,6 @@ import { Title } from '@mantine/core';
 import { getReferenceString } from '@medplum/core';
 import { Practitioner } from '@medplum/fhirtypes';
 import { Document, ResourceName, SearchControl, useMedplumNavigate, useMedplumProfile } from '@medplum/react';
-import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 /**

diff --git a/examples/medplum-chart-demo/src/pages/LandingPage.tsx b/examples/medplum-chart-demo/src/pages/LandingPage.tsx
@@ -1,6 +1,5 @@
 import { Anchor, Button, Stack, Text, Title } from '@mantine/core';
 import { Document } from '@medplum/react';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 export function LandingPage(): JSX.Element {

diff --git a/examples/medplum-chart-demo/src/pages/PatientPage.tsx b/examples/medplum-chart-demo/src/pages/PatientPage.tsx
@@ -2,7 +2,7 @@ import { Flex, Loader } from '@mantine/core';
 import { getReferenceString } from '@medplum/core';
 import { Patient } from '@medplum/fhirtypes';
 import { useResource } from '@medplum/react';
-import React from 'react';
+import { Fragment } from 'react';
 import { useParams } from 'react-router-dom';
 import { PatientChart } from '../components/chart/PatientChart';
 import { SoapNote } from '../components/soapnote/SoapNote';
@@ -16,12 +16,12 @@ export function PatientPage(): JSX.Element {
   }
 
   return (
-    <React.Fragment key={getReferenceString(patient)}>
+    <Fragment key={getReferenceString(patient)}>
       <Flex gap="xs" justify="center" align="flex-start" direction="row">
         <PatientChart />
         <TaskList />
         <SoapNote />
       </Flex>
-    </React.Fragment>
+    </Fragment>
   );
 }
diff --git a/examples/medplum-chart-demo/src/pages/ResourcePage.tsx b/examples/medplum-chart-demo/src/pages/ResourcePage.tsx
@@ -2,7 +2,7 @@ import { Title } from '@mantine/core';
 import { getDisplayString, getReferenceString } from '@medplum/core';
 import { Resource, ResourceType } from '@medplum/fhirtypes';
 import { Document, ResourceTable, useMedplum } from '@medplum/react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 /**

diff --git a/examples/medplum-chart-demo/src/pages/SearchPage.tsx b/examples/medplum-chart-demo/src/pages/SearchPage.tsx
@@ -9,7 +9,7 @@ import {
 } from '@medplum/core';
 import { UserConfiguration } from '@medplum/fhirtypes';
 import { Loading, MemoizedSearchControl, useMedplum } from '@medplum/react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 const useStyles = createStyles((theme) => {

diff --git a/examples/medplum-chart-demo/src/pages/SignInPage.tsx b/examples/medplum-chart-demo/src/pages/SignInPage.tsx
@@ -1,6 +1,5 @@
 import { Title } from '@mantine/core';
 import { Logo, SignInForm } from '@medplum/react';
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export function SignInPage(): JSX.Element {

diff --git a/examples/medplum-fhircast-demo/src/main.tsx b/examples/medplum-fhircast-demo/src/main.tsx
@@ -1,7 +1,7 @@
 import { MantineProvider, MantineThemeOverride } from '@mantine/core';
 import { MedplumClient } from '@medplum/core';
 import { MedplumProvider } from '@medplum/react';
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App.tsx';
@@ -36,13 +36,13 @@ const medplum = new MedplumClient({
 });
 
 ReactDOM.createRoot(root).render(
-  <React.StrictMode>
+  <StrictMode>
     <BrowserRouter>
       <MedplumProvider medplum={medplum}>
         <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
           <App />
         </MantineProvider>
       </MedplumProvider>
     </BrowserRouter>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/examples/medplum-hello-world/src/App.tsx b/examples/medplum-hello-world/src/App.tsx
@@ -1,6 +1,6 @@
 import { AppShell, ErrorBoundary, Loading, Logo, useMedplum, useMedplumProfile } from '@medplum/react';
 import { IconUser } from '@tabler/icons-react';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { PatientHistory } from './components/PatientHistory';
 import { PatientOverview } from './components/PatientOverview';

diff --git a/examples/medplum-hello-world/src/components/PatientHistory.tsx b/examples/medplum-hello-world/src/components/PatientHistory.tsx
@@ -1,6 +1,5 @@
 import { Title } from '@mantine/core';
 import { Document, ResourceHistoryTable } from '@medplum/react';
-import React from 'react';
 import { useParams } from 'react-router-dom';
 
 export function PatientHistory(): JSX.Element {

diff --git a/examples/medplum-hello-world/src/components/PatientOverview.tsx b/examples/medplum-hello-world/src/components/PatientOverview.tsx
@@ -1,6 +1,5 @@
 import { Title } from '@mantine/core';
 import { Document, ResourceTable } from '@medplum/react';
-import React from 'react';
 import { useParams } from 'react-router-dom';
 
 /*

diff --git a/examples/medplum-hello-world/src/components/Timeline.tsx b/examples/medplum-hello-world/src/components/Timeline.tsx
@@ -1,5 +1,4 @@
 import { PatientTimeline } from '@medplum/react';
-import React from 'react';
 import { useParams } from 'react-router-dom';
 
 /*

diff --git a/examples/medplum-hello-world/src/main.tsx b/examples/medplum-hello-world/src/main.tsx
@@ -1,7 +1,7 @@
 import { MantineProvider, MantineThemeOverride } from '@mantine/core';
 import { MedplumClient } from '@medplum/core';
 import { MedplumProvider } from '@medplum/react';
-import React from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
@@ -33,13 +33,13 @@ const theme: MantineThemeOverride = {
 const container = document.getElementById('root') as HTMLDivElement;
 const root = createRoot(container);
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <BrowserRouter>
       <MedplumProvider medplum={medplum}>
         <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
           <App />
         </MantineProvider>
       </MedplumProvider>
     </BrowserRouter>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/examples/medplum-hello-world/src/pages/HomePage.tsx b/examples/medplum-hello-world/src/pages/HomePage.tsx
@@ -2,7 +2,6 @@ import { Title } from '@mantine/core';
 import { getReferenceString } from '@medplum/core';
 import { Practitioner } from '@medplum/fhirtypes';
 import { Document, ResourceName, SearchControl, useMedplumNavigate, useMedplumProfile } from '@medplum/react';
-import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 /**

diff --git a/examples/medplum-hello-world/src/pages/LandingPage.tsx b/examples/medplum-hello-world/src/pages/LandingPage.tsx
@@ -1,6 +1,5 @@
 import { Anchor, Button, Stack, Text, Title } from '@mantine/core';
 import { Document } from '@medplum/react';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 export function LandingPage(): JSX.Element {

diff --git a/examples/medplum-hello-world/src/pages/PatientHeader.tsx b/examples/medplum-hello-world/src/pages/PatientHeader.tsx
@@ -2,7 +2,6 @@ import { createStyles } from '@mantine/core';
 import { calculateAgeString } from '@medplum/core';
 import { Patient, Reference } from '@medplum/fhirtypes';
 import { HumanNameDisplay, MedplumLink, ResourceAvatar, useResource } from '@medplum/react';
-import React from 'react';
 
 const useStyles = createStyles((theme) => ({
   root: {