Merge pull request #699 from Atom-Learning/feat/upgrade-next-ts-react

feat: upgrade NextJS, Typescript and React to the latest versions
Atom-Learning · Aug 29, 2024 · 48af37c · 48af37c
2 parents 67b8c8f + 9a6d3ef
commit 48af37c
Show file tree

Hide file tree

Showing 31 changed files with 1,997 additions and 355 deletions.
diff --git a/documentation/components/app/Navigation.tsx b/documentation/components/app/Navigation.tsx
@@ -18,7 +18,7 @@ const NavigationLink: React.FC<{ href: string }> = ({ href, children }) => {
   if (!children) return null
 
   return (
-    <NextLink href={href} passHref replace={true}>
+    <NextLink href={href} passHref replace={true} legacyBehavior>
       <NavigationMenuVertical.Link size="md" active={isCurrentPage}>
         {children}
       </NavigationMenuVertical.Link>

diff --git a/documentation/components/page/Pagination.tsx b/documentation/components/page/Pagination.tsx
@@ -31,7 +31,7 @@ const PaginationItem = ({ align, label, page }: TPaginationItem) => (
     <Text css={{ color: '$base8' }} size="sm">
       {label}
     </Text>
-    <NextLink passHref href={`${page.href}`}>
+    <NextLink passHref href={`${page.href}`} legacyBehavior>
       {/* @ts-ignore */}
       <Link size="lg" css={{ display: 'block', py: '$2' }}>
         {removeStartingNumber(page.title)}

diff --git a/...nt/components.form.primitives.checkbox.md → documentation/content/components.checkbox.md b/...nt/components.form.primitives.checkbox.md → documentation/content/components.checkbox.md
@@ -36,7 +36,5 @@ parent: J3bsmpB7-_uuqm05peuTA
 uuid: 2Y0C1wqUjjKktp-oi7G8d
 nestedSlug:
   - components
-  - form
-  - primitives
   - checkbox
 ---
diff --git a/documentation/content/components.data-table.md b/documentation/content/components.data-table.md
@@ -441,6 +441,14 @@ tabs:
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -577,8 +585,7 @@ tabs:
       #### Disabled rows
 
 
-      We can display disabled rows with different layout so users can see the difference between those rows and the enabled ones.
-      To achieve this you need to pass a property \`disabledRows\` that is a Record where the key is the row id (you can get this from the data table hook) and the value is a boolean that if it's true it will show the row as disabled. Note that this is just a visual change, it doesn't disable clickable elements in the table.
+      We can display disabled rows with different layout so users can see the difference between those rows and the enabled ones. To achieve this you need to pass a property \`disabledRows\` that is a Record where the key is the row id (you can get this from the data table hook) and the value is a boolean that if it's true it will show the row as disabled. Note that this is just a visual change, it doesn't disable clickable elements in the table.
 
 
       <CodeBlock live={false} preview={false} code={`const columnHelper = createColumnHelper()

diff --git a/documentation/content/components.empty-state.md b/documentation/content/components.empty-state.md
@@ -29,7 +29,7 @@ tabs:
       <ComponentProps component="EmptyState" />
   - title: Visual
     content: >-
-
+      
 
       ## Structure
 

diff --git a/...t/components.surfaces.tile-interactive.md → ...on/content/components.tile-interactive.md b/...t/components.surfaces.tile-interactive.md → ...on/content/components.tile-interactive.md
@@ -4,7 +4,8 @@ title: Tile Interactive
 tabs:
   - title: Code
     content: >-
-      <CodeBlock live={true} preview={true} code={`<TileGroup gap="3" justify="center" css={{ bg: '$grey100', p: '$3', width: '100%' }}>
+      <CodeBlock live={true} preview={true} code={`<TileGroup gap="3"
+      justify="center" css={{ bg: '$grey100', p: '$3', width: '100%' }}>
         <TileInteractive onClick={() => alert('onClick')} css={{size: 100 }} borderRadius="md" />
         <TileInteractive href='/' css={{size: 100 }} borderRadius="md" border />
       </TileGroup>`} language={"tsx"} />
@@ -167,7 +168,6 @@ parent: J3bsmpB7-_uuqm05peuTA
 uuid: 3b9bb9a0-12e5-4fbe-bb18-9f700dc91003
 nestedSlug:
   - components
-  - surfaces
   - tile-interactive
 links:
   showReportAnIssue: true

diff --git a/documentation/content/components.tile-toggle-group.md b/documentation/content/components.tile-toggle-group.md
@@ -5,7 +5,8 @@ tabs:
   - title: Code
     content: >-
       <CodeBlock live={true} preview={true} code={` <TileToggleGroup
-      type="multiple" justify="center" css={{ bg: '$grey100', p: '$3', width: '100%' }}>
+      type="multiple" justify="center" css={{ bg: '$grey100', p: '$3', width:
+      '100%' }}>
         <TileToggleGroup.Item value="1" css={{size: 100 }} />
         <TileToggleGroup.Item value="2" css={{size: 100 }} border />
       </TileToggleGroup>`} language={"tsx"} />

diff --git a/documentation/package.json b/documentation/package.json
@@ -23,15 +23,15 @@
     "netlify-cms-app": "^2.15.72",
     "netlify-cms-lib-widgets": "^1.8.1",
     "netlify-cms-ui-default": "^2.15.5",
-    "next": "12.2.3",
+    "next": "^14.2.7",
     "next-mdx-remote": "^4.1.0",
     "pascalcase": "^2.0.0",
     "polished": "^4.2.2",
     "prism-react-renderer": "^1.3.1",
     "prop-types": "^15.8.1",
     "randomstring": "^1.2.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-immutable-proptypes": "^2.2.0",
     "react-live": "3.1.2",
     "react-select": "^4.0.0",
@@ -47,11 +47,11 @@
     "@types/react": "17.0.80",
     "@types/throttle-debounce": "^5",
     "eslint": "8.21.0",
-    "eslint-config-next": "12.2.3",
+    "eslint-config-next": "^14.2.7",
     "gray-matter": "^4.0.3",
     "node-fetch": "^2",
     "prettier": "^2.2.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.5.4",
     "yaml": "^2.1.1"
   }
 }
diff --git a/documentation/tsconfig.json b/documentation/tsconfig.json
@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2022",
     "module": "esnext",
     "jsx": "preserve",
     "strict": false,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["es2022", "dom", "dom.iterable"],
     "allowJs": true,
     "noEmit": true,
     "moduleResolution": "node",

diff --git a/lib/package.json b/lib/package.json
@@ -109,8 +109,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "prompts": "^2.4.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^2.39.0",
     "rollup-plugin-esbuild": "^4.8.2",
     "rollup-plugin-json": "^4.0.0",
@@ -122,8 +122,8 @@
     "semantic-release-yarn": "^3.0.2",
     "size-limit": "^7.0.5",
     "stitches-reset": "^1.0.0",
-    "tsc-alias": "^1.3.5",
-    "typescript": "4.2.3",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.5.4",
     "vite": "^2.2.4",
     "yargs": "^16.2.0"
   },

diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap
@@ -434,14 +434,14 @@ exports[`Accordion component renders an accordion 1`] = `
       data-state="open"
     >
       <button
-        aria-controls="radix-0"
+        aria-controls="radix-:r1:"
         aria-disabled="true"
         aria-expanded="true"
         class="c-cHXTzy t-dVJiaJ t-hwCMvs"
         data-orientation="vertical"
         data-radix-collection-item=""
         data-state="open"
-        id="radix-1"
+        id="radix-:r0:"
         type="button"
       >
         TRIGGER1
@@ -458,11 +458,11 @@ exports[`Accordion component renders an accordion 1`] = `
         </svg>
       </button>
       <div
-        aria-labelledby="radix-1"
+        aria-labelledby="radix-:r0:"
         class="c-hAleka"
         data-orientation="vertical"
         data-state="open"
-        id="radix-0"
+        id="radix-:r1:"
         role="region"
         style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); transition-duration: 0s; animation-name: none;"
       >
@@ -475,13 +475,13 @@ exports[`Accordion component renders an accordion 1`] = `
       data-state="closed"
     >
       <button
-        aria-controls="radix-2"
+        aria-controls="radix-:r3:"
         aria-expanded="false"
         class="c-cHXTzy t-dVJiaJ t-hwCMvs"
         data-orientation="vertical"
         data-radix-collection-item=""
         data-state="closed"
-        id="radix-3"
+        id="radix-:r2:"
         type="button"
       >
         TRIGGER2
@@ -498,12 +498,12 @@ exports[`Accordion component renders an accordion 1`] = `
         </svg>
       </button>
       <div
-        aria-labelledby="radix-3"
+        aria-labelledby="radix-:r2:"
         class="c-hAleka"
         data-orientation="vertical"
         data-state="closed"
         hidden=""
-        id="radix-2"
+        id="radix-:r3:"
         role="region"
         style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
       />

diff --git a/lib/src/components/action-icon/ActionIcon.tsx b/lib/src/components/action-icon/ActionIcon.tsx
@@ -196,10 +196,13 @@ export const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =
                 `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`
               )
 
-              return React.cloneElement(child, {
-                size: ActionIconSizeMap[size as string],
-                css: { ...(child.props.css ? child.props.css : {}) }
-              })
+              return React.cloneElement(
+                child as React.ReactElement<React.ComponentProps<typeof Icon>>,
+                {
+                  size: ActionIconSizeMap[size as string],
+                  css: { ...(child.props.css ? child.props.css : {}) }
+                }
+              )
             })}
           </StyledButton>
         </OptionalTooltipWrapper>

diff --git a/lib/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap b/lib/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AlertDialog component renders the trigger with the dialog hidden by default 1`] = `
 <div>
   <button
-    aria-controls="radix-0"
+    aria-controls="radix-:r0:"
     aria-expanded="false"
     aria-haspopup="dialog"
     data-state="closed"

diff --git a/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap b/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap
@@ -272,7 +272,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = `
           class="c-dhzjXW c-rbNxa c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2 c-gsmDXe"
         >
           <button
-            aria-controls="radix-1"
+            aria-controls="radix-:r0:"
             aria-expanded="false"
             aria-label="Open: Top level trigger"
             class="c-oUmPa c-oUmPa-elrktp-size-sm c-oUmPa-jCxibG-cv c-hBEOJc"
@@ -312,7 +312,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = `
         <ul
           class="c-dhzjXW c-gkooaz c-dhzjXW-iTKOFX-direction-column c-rvbcR PJLV"
           data-state="closed"
-          id="radix-1"
+          id="radix-:r0:"
           role="group"
           style="transition-duration: 0s; animation-name: none;"
         >
@@ -382,7 +382,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = `
                 class="c-dhzjXW c-rbNxa c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2 c-gsmDXe"
               >
                 <button
-                  aria-controls="radix-0"
+                  aria-controls="radix-:r1:"
                   aria-expanded="false"
                   aria-label="Open: Second level trigger"
                   class="c-oUmPa c-oUmPa-elrktp-size-sm c-oUmPa-jCxibG-cv c-hBEOJc"
@@ -422,7 +422,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = `
               <ul
                 class="c-dhzjXW c-gkooaz c-dhzjXW-iTKOFX-direction-column c-rvbcR PJLV"
                 data-state="closed"
-                id="radix-0"
+                id="radix-:r1:"
                 role="group"
                 style="transition-duration: 0s; animation-name: none;"
               >

diff --git a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap
@@ -275,7 +275,7 @@ exports[`DateField component renders a field in error state 1`] = `
           />
         </div>
         <button
-          aria-controls="radix-4"
+          aria-controls="radix-:r4:"
           aria-expanded="false"
           aria-haspopup="dialog"
           aria-label="Open calendar"
@@ -557,7 +557,7 @@ exports[`DateField component renders a field with a text input 1`] = `
           />
         </div>
         <button
-          aria-controls="radix-0"
+          aria-controls="radix-:r0:"
           aria-expanded="false"
           aria-haspopup="dialog"
           aria-label="Open calendar"

diff --git a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap
@@ -164,7 +164,7 @@ exports[`DateInput component renders 1`] = `
       />
     </div>
     <button
-      aria-controls="radix-0"
+      aria-controls="radix-:r0:"
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="Open calendar"
@@ -640,7 +640,7 @@ exports[`DateInput component renders lg size 1`] = `
       />
     </div>
     <button
-      aria-controls="radix-8"
+      aria-controls="radix-:r8:"
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="Open calendar"

diff --git a/lib/src/components/dialog/__snapshots__/Dialog.test.tsx.snap b/lib/src/components/dialog/__snapshots__/Dialog.test.tsx.snap
@@ -178,12 +178,12 @@ exports[`Dialog component opens the popover once trigger is clicked 1`] = `
 }
 
 <div
-  aria-describedby="radix-5"
+  aria-describedby="radix-:r5:"
   aria-label="Dialog"
-  aria-labelledby="radix-4"
+  aria-labelledby="radix-:r4:"
   class="c-bnQNAg c-bnQNAg-lgqbzh-size-sm"
   data-state="open"
-  id="radix-3"
+  id="radix-:r3:"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -221,7 +221,7 @@ exports[`Dialog component opens the popover once trigger is clicked 1`] = `
 exports[`Dialog component renders the trigger with the popover hidden by default 1`] = `
 <div>
   <button
-    aria-controls="radix-0"
+    aria-controls="radix-:r0:"
     aria-expanded="false"
     aria-haspopup="dialog"
     data-state="closed"
@@ -428,12 +428,12 @@ exports[`Dialog component with custom background renders 1`] = `
     CUSTOM BACKGROUND
   </div>
   <div
-    aria-describedby="radix-20"
+    aria-describedby="radix-:rk:"
     aria-label="Dialog"
-    aria-labelledby="radix-19"
+    aria-labelledby="radix-:rj:"
     class="c-bnQNAg c-bnQNAg-lgqbzh-size-sm"
     data-state="open"
-    id="radix-18"
+    id="radix-:ri:"
     role="dialog"
     style="pointer-events: auto;"
     tabindex="-1"
@@ -597,12 +597,12 @@ exports[`Dialog component without close button renders 1`] = `
 }
 
 <div
-  aria-describedby="radix-17"
+  aria-describedby="radix-:rh:"
   aria-label="Dialog"
-  aria-labelledby="radix-16"
+  aria-labelledby="radix-:rg:"
   class="c-bnQNAg c-bnQNAg-lgqbzh-size-sm"
   data-state="open"
-  id="radix-15"
+  id="radix-:rf:"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"