docusaurus version 3.x upgrade

docuilib/docusaurus.config.js

@@ -1,5 +1,6 @@
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const {themes} = require('prism-react-renderer');
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 // With JSDoc @type annotations, IDEs can provide config autocompletion
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
@@ -31,7 +32,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
             path: '../docs',
             // Please change this to your repo.
             editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
-            docLayoutComponent: '@site/src/components/CustomLayout'
+            docRootComponent: '@site/src/components/CustomLayout'
           },
           blog: {
             showReadingTime: true,

docuilib/package.json

@@ -14,18 +14,18 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.3",
-    "@docusaurus/preset-classic": "2.3",
-    "@docusaurus/theme-live-codeblock": "2.3",
-    "@mdx-js/react": "^1.6.21",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/theme-live-codeblock": "^3.5.2",
+    "@mdx-js/mdx": "^3.0.1",
     "@svgr/webpack": "^5.5.0",
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "^3.15.1",
     "react-native-shimmer-placeholder": "^2.0.9",
@@ -35,13 +35,14 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.3",
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@docusaurus/types": "^3.5.2",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.14",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "babel-plugin-react-native-web": "^0.19.12",
-    "typescript": "^4.3.5"
+    "typescript": "~5.2.2"
   },
   "browserslist": {
     "production": [

docuilib/plugins/uilib.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 
-module.exports = ({siteDir}, options) => {
+module.exports = ({siteDir}, _options) => {
   const baseProjectSource = [
     path.resolve(siteDir, 'src'),
     path.resolve(siteDir, 'node_modules/react-native-web'),
@@ -41,16 +41,15 @@ module.exports = ({siteDir}, options) => {
 
   return {
     name: 'uilib-plugin',
-    configureWebpack(config, isServer, utils) {
+    configureWebpack(_config, _isServer, _utils) {
       return {
         mergeStrategy: {
           'resolve.extensions': 'prepend'
         },
         plugins: [
           new webpack.DefinePlugin({
-            process: {env: {}},
-            __DEV__: 'false',
-            setImmediate: () => {}
+            'process.env': JSON.stringify(process.env),
+            __DEV__: false
           })
         ],
         module: {

docuilib/src/components/CustomLayout.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import DocPage from '@theme/DocPage';
+import DocRoot from '@theme/DocRoot';
 import StandWithUkraine from '@site/src/components/StandWithUkraine';
 
 export default function CustomLayout(props) {
   return (
     <>
-      <StandWithUkraine />
-      <DocPage {...props} />
+      <StandWithUkraine/>
+      <DocRoot {...props}/>
     </>
   );
 }

src/components/button/button.api.json

@@ -54,7 +54,7 @@
     {
       "name": "getActiveBackgroundColor",
       "type": "(backgroundColor: string, props: any) => string",
-      "description": "callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}). Better set using ThemeManager"
+      "description": "callback for getting activeBackgroundColor \\(e.g. \\(calculatedBackgroundColor, prop) => \\{...\\})\\. Better set using ThemeManager"
     },
     {
       "name": "animateLayout",
@@ -67,7 +67,5 @@
       "description": "the direction of the animation ('left' and 'right' will effect the button's own alignment)"
     }
   ],
-  "snippet": [
-    "<Button label={'Press'$1} size={Button.sizes.medium$2} backgroundColor={Colors.red30$3}/>"
-  ]
+  "snippet": ["<Button label={'Press'$1} size={Button.sizes.medium$2} backgroundColor={Colors.red30$3}/>"]
 }

src/components/card/cardSection.api.json

@@ -8,7 +8,7 @@
     {
       "name": "content",
       "type": "ContentType[]",
-      "description": "Text content. Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}"
+      "description": "Text content. Example: content=\\{[\\{text: 'You’re Invited!', text70: true, grey10: true}\\]}\\"
     },
     {"name": "contentStyle", "type": "ViewStyle", "description": "Component's container style"},
     {"name": "backgroundColor", "type": "string", "description": "Background color"},

src/components/featureHighlight/featureHighlight.api.json

@@ -4,7 +4,7 @@
   "description": "Component for feature discovery",
   "note": [
     "FeatureHighlight component must be a direct child of the root view returned in render()",
-    "If the element to be highlighted doesn't have a style attribute add 'style={{opacity: 1}}' so the Android OS can detect it",
+    "If the element to be highlighted doesn't have a style attribute add 'style=\\{\\{opacity: 1\\}\\}' so the Android OS can detect it",
     "FeatureHighlight uses a native library. You MUST add and link the native library to both iOS and Android projects. For instruction please see: https://facebook.github.io/react-native/docs/linking-libraries-ios.html"
   ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx",
@@ -16,7 +16,7 @@
     {
       "name": "highlightFrame",
       "type": "HighlightFrame",
-      "description": "Frame of the area to highlight {x, y, width, height}"
+      "description": "Frame of the area to highlight \\{x, y, width, height\\}"
     },
     {
       "name": "getTarget",

src/components/picker/api/picker.api.json

@@ -31,11 +31,16 @@
       "default": "Picker.fieldTypes.FORM"
     },
     {"name": "selectionLimit", "type": "number", "description": "Limit the number of selected items"},
-    {"name": "enableModalBlur", "type": "boolean", "description": "Adds blur effect to picker modal", "note": "iOS only"},
+    {
+      "name": "enableModalBlur",
+      "type": "boolean",
+      "description": "Adds blur effect to picker modal",
+      "note": "iOS only"
+    },
     {
       "name": "renderPicker",
       "type": "(selectedItem, itemLabel) => void",
-      "description": "Render custom picker - input will be value (see above)\\Example:\\renderPicker = (selectedItem) => {...}"
+      "description": "Render custom picker - input will be value (see above)\\Example:\\renderPicker = \\(selectedItem) => \\{...\\}\\"
     },
     {
       "name": "renderItem",
@@ -108,4 +113,3 @@
     "</Picker>"
   ]
 }
-

src/components/skeletonView/skeletonView.api.json

@@ -31,7 +31,7 @@
     {
       "name": "listProps",
       "type": "SkeletonListProps",
-      "description": "Props that are available when using template={SkeletonView.templates.LIST_ITEM}"
+      "description": "Props that are available when using template=\\{SkeletonView.templates.LIST_ITEM\\}"
     },
     {"name": "times", "type": "number", "description": "Generates duplicate skeletons"},
     {"name": "timesKey", "type": "string", "description": "A key prefix for the duplicated SkeletonViews"},

src/components/textField/textField.api.json

@@ -15,7 +15,7 @@
     {
       "name": "labelColor",
       "type": "ColorType",
-      "description": "Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly})"
+      "description": "Field label color. Either a string or color by state map \\(\\{default, focus, error, disabled, readonly\\})\\"
     },
     {"name": "labelStyle", "type": "TextStyle", "description": "Custom style for the field label"},
     {"name": "labelProps", "type": "TextProps", "description": "Pass extra props to the label Text element"},
@@ -80,11 +80,15 @@
       "type": "ViewStyle | (context: FieldContextType, props) => ViewStyle",
       "description": "Internal style for the field container to style the field underline, outline and fill color"
     },
-    {"name": "containerProps", "type": "Omit<ViewProps, 'style'>", "description": "Container props of the whole component"},
+    {
+      "name": "containerProps",
+      "type": "Omit<ViewProps, 'style'>",
+      "description": "Container props of the whole component"
+    },
     {"name": "containerStyle", "type": "ViewStyle", "description": "Container style of the whole component"},
     {
       "name": "preset",
-      "type": "Presets | `${Presets}` | null | string",
+      "type": "Presets | `$\\{Presets\\}` | null | string",
       "description": "Predefined preset to use for styling the field"
     },
     {
@@ -124,7 +128,11 @@
       "description": "A UI preset for read only state"
     },
     {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
-    {"name": "showMandatoryIndication", "type": "boolean", "description": "Whether to show a mandatory field indication"}
+    {
+      "name": "showMandatoryIndication",
+      "type": "boolean",
+      "description": "Whether to show a mandatory field indication"
+    }
   ],
   "snippet": [
     "<TextField",