migrate to latest nx

Author: tefkah

apps/converter-frontend/components/app-shell-layout/app-shell-layout.tsx

@@ -28,9 +28,9 @@ export function AppShellLayout(props: AppShellLayoutProps) {
       // navbarOffsetBreakpoint controls when navbar should no longer be offset with padding-left
       navbarOffsetBreakpoint="sm"
       // fixed prop on AppShell will be automatically added to Header and Navbar
-      fixed
+      fixed={true}
       header={
-        <Header height={70} padding="md">
+        <Header height={70}>
           {/* Handle other responsive styles with MediaQuery component or createStyles function */}
           <div
             style={{ display: 'flex', alignItems: 'center', height: '100%' }}
@@ -59,7 +59,6 @@ export function AppShellLayout(props: AppShellLayoutProps) {
       }
       navbar={
         <Navbar
-          padding="md"
           // Breakpoint at which navbar will be hidden if hidden prop is true
           hiddenBreakpoint="sm"
           // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
@@ -70,7 +69,7 @@ export function AppShellLayout(props: AppShellLayoutProps) {
           width={{ sm: 300, lg: 400 }}
         >
           <Navbar.Section>Journal of Trial and Error</Navbar.Section>
-          <Navbar.Section grow mt="lg">
+          <Navbar.Section grow={true} mt="lg">
             <VStack>
               <Link href="/">Convert</Link>
               <Link href="/ojs">OJS Integration</Link>

apps/converter-frontend/components/conversion/conversion.tsx

@@ -84,32 +84,29 @@ export function Conversion(props: ConversionProps) {
           setInput(buf)
         }}
       >
-        {(status) => (
-          <Group
-            position="center"
-            spacing="xl"
-            style={{ minHeight: 220, pointerEvents: 'none' }}
-          >
-            <AiOutlineUpload
-              //status={status}
-              style={{
-                width: 80,
-                height: 80,
-                color: status ? 'green' : 'grey',
-              }}
-            />
+        <Group
+          position="center"
+          spacing="xl"
+          style={{ minHeight: 220, pointerEvents: 'none' }}
+        >
+          <AiOutlineUpload
+            //status={status}
+            style={{
+              width: 80,
+              height: 80,
+              // color: status ? 'green' : 'grey',
+            }}
+          />
 
-            <div>
-              <Text size="xl" inline>
-                Drag images here or click to select files
-              </Text>
-              <Text size="sm" color="dimmed" inline mt={7}>
-                Attach as many files as you like, each file should not exceed
-                5mb
-              </Text>
-            </div>
-          </Group>
-        )}
+          <div>
+            <Text size="xl" inline={true}>
+              Drag images here or click to select files
+            </Text>
+            <Text size="sm" color="dimmed" inline={true} mt={7}>
+              Attach as many files as you like, each file should not exceed 5mb
+            </Text>
+          </div>
+        </Group>
       </Dropzone>
       {from !== 'docx' && (
         <>

apps/converter-frontend/components/converted-block-local/converted-block-local.tsx

@@ -3,15 +3,13 @@ import { useClipboard } from '@mantine/hooks'
 import React, { useEffect, useState } from 'react'
 import { VFile } from 'vfile'
 import { Prism as SyntaxHighlighter } from '@mantine/prism'
-import { FaClipboard, FaClipboardList } from 'react-icons/fa'
-import { HStack } from '../stack/stack'
 import shallow from 'zustand/shallow'
 import { useStore } from '../../utils/store'
 
-import Prism from 'prism-react-renderer/prism'
-;(typeof global !== 'undefined' ? global : window).Prism = Prism
+// import Prism from 'prism-react-renderer/prism'
+// ;(typeof global !== 'undefined' ? global : window).Prism = Prism
 
-require('prismjs/components/prism-latex')
+// require('prismjs/components/prism-latex')
 //import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 /* eslint-disable-next-line */
@@ -59,7 +57,7 @@ export function ConvertedBlockLocal(props: ConvertedBlockLocalProps) {
       {/* @ts-ignore  */}
       {vfile?.messages && (
         <>
-          <Box height="20">Images extracted from doc</Box>
+          <Box>Images extracted from doc</Box>
           <Box>
             {vfile?.data?.images
               ? Object.entries(
@@ -87,7 +85,7 @@ export function ConvertedBlockLocal(props: ConvertedBlockLocalProps) {
       )}
       {vfile?.messages && (
         <>
-          <Box height="20">Errors and warnings</Box>
+          <Box>Errors and warnings</Box>
           {vfile?.messages.map((message) => (
             <Text key={String(message)}>{String(message)} </Text>
           ))}
@@ -121,10 +119,9 @@ export function ConvertedBlockLocal(props: ConvertedBlockLocalProps) {
             </HStack>
           </Button> */}
           <SyntaxHighlighter
-            //wrapLines
             withLineNumbers={true}
+            // @ts-expect-error yeahhhh
             language="latex"
-            // CodeTag={Code}
             sx={{}}
             style={{
               maxWidth: '100%',

apps/converter-frontend/components/publications-list/citations.tsx

@@ -1,11 +1,9 @@
-import { Code, Container, Tabs, Text } from '@mantine/core'
+import { Container, Text } from '@mantine/core'
 import { definitions } from 'ojs-client'
-import React from 'react'
 import useSWR from 'swr'
 import { Data as CSL } from 'csl-json'
 // @ts-expect-error no types for cites
 import Cite from 'citation-js'
-import { Prism } from '@mantine/prism'
 
 export const Citations = ({
   value,
@@ -44,7 +42,9 @@ export const Citations = ({
   console.log(data)
   const cite = new Cite(
     data.map((data: CSL) => {
-      if (!data.type) data.type = 'article'
+      if (!data.type) {
+        data.type = 'article'
+      }
       return data
     })
   )

apps/converter-frontend/components/publications-list/file-reel.tsx

@@ -20,12 +20,20 @@ export const FileReel = (props: {
       endpoint
     )}`
   )
-  if (!data) return <Loader />
-  if (error) return <Text color="red">{JSON.stringify(error)}</Text>
+  if (!data) {
+    return <Loader />
+  }
+  if (error) {
+    return <Text color="red">{JSON.stringify(error)}</Text>
+  }
 
-  if (!data.items) return <Text> No Files </Text>
+  if (!data.items) {
+    return <Text> No Files </Text>
+  }
 
-  if (!stageId) return <></>
+  if (!stageId) {
+    return <></>
+  }
 
   const getStageId = (file: definitions['SubmissionFile']): number =>
     parseInt(file?.url?.slice(-1) || '0')
@@ -58,7 +66,9 @@ export const FileReel = (props: {
         curr: definitions['SubmissionFile']
       ) => {
         const id = getStageId(curr)
-        if (!id) return
+        if (!id) {
+          return
+        }
         acc[id] = [...(acc?.[id] || []), curr]
         return acc
       },