Ts config update

.github/workflows/ci.yml

@@ -5,17 +5,14 @@ jobs:
   checks:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [20.x]
-
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: .tool-versions
+          cache: npm
 
       - name: Setup Dependencies
         run: npm ci

.github/workflows/pages.yml

@@ -29,39 +29,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "::set-output name=manager::yarn"
-            echo "::set-output name=command::install"
-            echo "::set-output name=runner::yarn"
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "::set-output name=manager::npm"
-            echo "::set-output name=command::ci"
-            echo "::set-output name=runner::npx --no-install"
-            exit 0
-          else
-            echo "Unable to determine packager manager"
-            exit 1
-          fi
+        uses: actions/checkout@v4
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          node-version-file: .tool-versions
+          cache: npm
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v5
         with:
           # Automatically inject basePath in your Next.js configuration file and disable
           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
           #
           # You may remove this line if you want to manage the configuration yourself.
           static_site_generator: next
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             .next/cache
@@ -71,9 +54,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run: npm ci
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: npm run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+replace-registry-host=always

.prettierignore

@@ -1,2 +1,3 @@
 .next
 out
+next-env.d.ts

.tool-versions

@@ -0,0 +1 @@
+nodejs 24.14.0

components/BackButton.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import { Button, Tooltip } from '@mantine/core';
-import { ArrowNarrowLeft } from 'tabler-icons-react';
+import { IconArrowNarrowLeft } from '@tabler/icons-react';
 
 const BackButton = () => {
   const router = useRouter();
@@ -17,7 +17,7 @@ const BackButton = () => {
           marginLeft: '5px'
         }}
       >
-        <ArrowNarrowLeft size="36" />
+        <IconArrowNarrowLeft size="36" />
       </Button>
     </Tooltip>
   );

components/calculation/MeasureHighlightingPanel.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Autocomplete, ScrollArea, Space, Text, createStyles } from '@mantine/core';
 import parse from 'html-react-parser';
 import { useMemo, useState } from 'react';
-import { Search, X } from 'tabler-icons-react';
+import { IconSearch, IconX } from '@tabler/icons-react';
 import PrettyOutput from './PrettyOutput';
 import { DetailedPopulationGroupResult, Relevance } from 'fqm-execution';
 import { useRecoilValue } from 'recoil';
@@ -57,7 +57,7 @@ export default function MeasureHighlightingPanel({ dr }: MeasureHighlightingPane
         dropdownComponent={ScrollArea}
         maxDropdownHeight={200}
         placeholder="Expression Name"
-        icon={<Search />}
+        icon={<IconSearch />}
         nothingFound={
           <Text align="left" pl={10}>
             No Matches
@@ -78,7 +78,7 @@ export default function MeasureHighlightingPanel({ dr }: MeasureHighlightingPane
               setSearchValue('');
             }}
           >
-            <X size={16} />
+            <IconX size={16} />
           </ActionIcon>
         }
       />

components/calculation/PopulationCalculation.tsx

@@ -29,7 +29,7 @@ import {
   IconCopy,
   IconPackage,
   IconSquareCheck
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { getPatientInfoString, getPatientNameString } from '../../util/fhir/patient';
 import { createDataExchangeMeasureReport, createPatientBundle } from '../../util/fhir/resourceCreation';
 import PopulationResultTable, { LabeledDetailedResult } from './PopulationResultsTable';

components/calculation/PopulationComparisonTableControl.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Popover, ScrollArea } from '@mantine/core';
 import { MouseEvent, useState } from 'react';
-import { InfoCircle } from 'tabler-icons-react';
+import { IconInfoCircle } from '@tabler/icons-react';
 import React from 'react';
 
 export default function PopulationComparisonTablePopover() {
@@ -15,7 +15,7 @@ export default function PopulationComparisonTablePopover() {
     <Popover opened={opened} onClose={() => setOpened(false)} width={500}>
       <Popover.Target>
         <ActionIcon aria-label={'More Information'} onClick={popoverClick}>
-          <InfoCircle size={20} />
+          <IconInfoCircle size={20} />
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown>

components/calculation/PopulationResults.tsx

@@ -3,7 +3,7 @@ import { DetailedPopulationGroupResult } from 'fqm-execution';
 import { useRecoilValue } from 'recoil';
 import { calculationLoading } from '../../state/atoms/calculationLoading';
 import { useState } from 'react';
-import { CircleCheck } from 'tabler-icons-react';
+import { IconCircleCheck } from '@tabler/icons-react';
 import MeasureHighlightingPanel from './MeasureHighlightingPanel';
 import PopulationComparisonTable from './PopulationComparisonTable';
 
@@ -65,7 +65,7 @@ export default function PopulationResults({ detailedResults, patientId }: Popula
                       </Center>
                     ) : (
                       <Center>
-                        <CircleCheck color="green" size={24} />
+                        <IconCircleCheck color="green" size={24} />
                         <Text italic color="dimmed" pl={4}>
                           Up to date
                         </Text>
@@ -96,7 +96,7 @@ export default function PopulationResults({ detailedResults, patientId }: Popula
                   </Center>
                 ) : (
                   <Center>
-                    <CircleCheck color="green" size={24} />
+                    <IconCircleCheck color="green" size={24} />
                     <Text italic color="dimmed" pl={4}>
                       Up to date
                     </Text>

components/calculation/PopulationResultsTable.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { DetailedResult } from '../../util/types';
 import { useRecoilValue } from 'recoil';
 import { patientTestCaseState } from '../../state/atoms/patientTestCase';
-import { IconCheck, IconX } from '@tabler/icons';
+import { IconCheck, IconX } from '@tabler/icons-react';
 
 const useStyles = createStyles({
   highlightRed: {

components/measure-upload/DateSelectors.tsx

@@ -1,6 +1,6 @@
 import { Group } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
-import { IconCalendar } from '@tabler/icons';
+import { IconCalendar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { measurementPeriodEndState, measurementPeriodStartState } from '../../state/atoms/measurementPeriod';

components/measure-upload/EvaluationServiceVerifier.tsx

@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { evaluationState } from '../../state/atoms/evaluation';
 import { measureBundleState } from '../../state/atoms/measureBundle';
 import { showNotification } from '@mantine/notifications';
-import { IconAlertCircle, IconCircleCheck } from '@tabler/icons';
+import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 
 export default function EvaluationServiceVerifier() {
   const [isLoadingId, setIsLoadingId] = useState(false);
@@ -81,7 +81,7 @@ export default function EvaluationServiceVerifier() {
           color: 'red'
         });
       }
-    } catch (e) {
+    } catch {
       showNotification({
         icon: <IconAlertCircle />,
         title: 'Failed reaching out to server',

components/measure-upload/MeasureFileUpload.tsx

@@ -1,7 +1,7 @@
 import { Dropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { Center, Text, createStyles } from '@mantine/core';
-import { IconFileImport, IconFileCheck, IconAlertCircle, IconCircleCheck } from '@tabler/icons';
+import { IconFileImport, IconFileCheck, IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { measureBundleState } from '../../state/atoms/measureBundle';
 import { measurementPeriodEndState, measurementPeriodStartState } from '../../state/atoms/measurementPeriod';

components/measure-upload/MeasureRepositoryUpload.tsx

@@ -11,8 +11,7 @@ import {
   rejectUpload
 } from '../../util/measureUploadUtils';
 import { showNotification, cleanNotifications } from '@mantine/notifications';
-import { IconAlertCircle, IconCircleCheck } from '@tabler/icons';
-import { CircleCheck } from 'tabler-icons-react';
+import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { displayMapToSelectDataState } from '../../state/selectors/displayMapToSelectData';
 
 enum PACKAGE_STATES {
@@ -137,7 +136,7 @@ export default function MeasureRepositoryUpload({ logError }: MeasureUploadProps
           color: 'red'
         });
       }
-    } catch (e) {
+    } catch {
       showNotification({
         icon: <IconAlertCircle />,
         title: 'Failed reaching out to server',
@@ -249,7 +248,7 @@ export default function MeasureRepositoryUpload({ logError }: MeasureUploadProps
           </Grid.Col>
           <Grid.Col span={1} style={{ display: 'flex', alignItems: 'end', justifyContent: 'center' }}>
             {isLoadingPackage === PACKAGE_STATES.LOADING && <Loader />}
-            {isLoadingPackage === PACKAGE_STATES.SUCCESS && <CircleCheck color="green" size={40} />}
+            {isLoadingPackage === PACKAGE_STATES.SUCCESS && <IconCircleCheck color="green" size={40} />}
             {isLoadingPackage === PACKAGE_STATES.FAIL && <IconAlertCircle color="red" size={40} />}
           </Grid.Col>
         </Grid>

components/modals/CodeEditorModal.tsx

@@ -4,7 +4,7 @@ import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
 import { useEffect, useState } from 'react';
 import { parsedCodePaths } from 'fhir-spec-tools/build/data/codePaths';
-import { IconCodePlus } from '@tabler/icons';
+import { IconCodePlus } from '@tabler/icons-react';
 import { valueSetMapState } from '../../state/selectors/valueSetsMap';
 import { useRecoilValue } from 'recoil';
 import { dedupVSCodes, getDRC } from '../../util/ValueSetHelper';
@@ -52,7 +52,7 @@ export default function CodeEditorModal({
     try {
       const resource: fhir4.Resource = JSON.parse(currentValue);
       codeAttributes = Object.keys(parsedCodePaths[resource.resourceType].paths);
-    } catch (error) {
+    } catch {
       // current json invalid or no valid resourceType
     }
   }

components/modals/ConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import { Modal, Button, Center, Group, Text, Grid, Space } from '@mantine/core';
-import { AlertTriangle } from 'tabler-icons-react';
+import { IconAlertTriangle } from '@tabler/icons-react';
 
 export interface ConfirmationModalProps {
   open: boolean;
@@ -14,7 +14,7 @@ export default function ConfirmationModal({ open = true, onClose, title, onConfi
       <Grid align="center" justify="center">
         <Grid.Col>
           <Center>
-            <AlertTriangle color="red" size={35} />
+            <IconAlertTriangle color="red" size={35} />
           </Center>
           <Space></Space>
           <Center>

components/modals/ImportModal.tsx

@@ -14,12 +14,18 @@ import {
 } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { Dropzone } from '@mantine/dropzone';
-import { IconAlertCircle, IconCaretDown, IconCaretRight, IconFileCheck, IconFileImport } from '@tabler/icons';
+import {
+  IconAlertCircle,
+  IconCaretDown,
+  IconCaretRight,
+  IconFileCheck,
+  IconFileImport,
+  IconInfoCircle
+} from '@tabler/icons-react';
 import { useState } from 'react';
 import JSZip from 'jszip';
 import { useRecoilState } from 'recoil';
 import { resourceSwitchOn } from '../../state/atoms/resourceSwitch';
-import { InfoCircle } from 'tabler-icons-react';
 
 export interface ImportModalProps {
   open: boolean;
@@ -174,7 +180,7 @@ export default function ImportModal({ open, onClose, onImportSubmit }: ImportMod
                     aria-label={'More Information'}
                     onClick={() => setMinimizeResourcesPopoverOpened(o => !o)}
                   >
-                    <InfoCircle size={20} />
+                    <IconInfoCircle size={20} />
                   </ActionIcon>
                 </Popover.Target>
                 <Popover.Dropdown>

components/modals/WarningModal.tsx

@@ -1,5 +1,5 @@
 import { Modal, Button, Center, Group, Text, Grid, Space } from '@mantine/core';
-import { AlertTriangle } from 'tabler-icons-react';
+import { IconAlertTriangle } from '@tabler/icons-react';
 
 export interface WarningModalProps {
   open: boolean;
@@ -14,7 +14,7 @@ export default function WarningModal({ open = true, onClose, onConfirm }: Warnin
       <Grid align="center" justify="center">
         <Grid.Col>
           <Center>
-            <AlertTriangle color="red" size={35} />
+            <IconAlertTriangle color="red" size={35} />
           </Center>
           <Space></Space>
           <Center>