chore: update pkgs and revert version switcher

Author: segunadebayo

package.json

@@ -19,69 +19,69 @@
   },
   "dependencies": {
     "@chakra-ui/cli": "1.6.0",
-    "@chakra-ui/props-docs": "1.0.39",
-    "@chakra-ui/react": "1.7.1",
+    "@chakra-ui/props-docs": "1.0.40",
+    "@chakra-ui/react": "1.7.2",
     "@chakra-ui/theme-tools": "1.3.1",
     "@chakra-ui/utils": "1.9.1",
     "@chakra-ui/skip-nav": "^1.2.1",
     "@chakra-ui/icons": "^1.1.1",
     "@docsearch/react": "^1.0.0-alpha.27",
     "@docusaurus/utils": "^2.0.0-alpha.69",
-    "@emotion/react": "^11.1.4",
-    "@emotion/styled": "^11.0.0",
-    "@octokit/rest": "^18.0.12",
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
+    "@octokit/rest": "^18.12.0",
     "contentlayer": "^0.0.32",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.25.0",
     "docsearch.js": "^2.6.3",
     "focus-visible": "5.2.0",
     "formik": "^2.2.9",
     "framer-motion": "^4.1.17",
-    "github-slugger": "^1.3.0",
+    "github-slugger": "^1.4.0",
     "highlight-words-core": "^1.2.2",
     "lodash": "^4.17.21",
     "markdown-toc": "^1.2.0",
-    "match-sorter": "^6.1.0",
+    "match-sorter": "^6.3.1",
     "mdx-bundler": "^7.0.0",
-    "next": "^12.0.1",
+    "next": "^12.0.4",
     "next-contentlayer": "^0.0.32",
-    "next-seo": "^4.17.0",
+    "next-seo": "^4.28.1",
     "prism-react-renderer": "^1.1.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-focus-lock": "^2.5.2",
-    "react-icons": "^4.1.0",
-    "react-live": "^2.2.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-focus-lock": "^2.6.0",
+    "react-icons": "^4.3.1",
+    "react-live": "^2.3.0",
     "react-lorem-component": "^0.13.0",
     "react-player": "^2.9.0",
     "react-spinners": "^0.11.0",
     "react-table": "^7.7.0",
     "remark": "^14.0.1",
-    "remark-emoji": "^3.0.1",
+    "remark-emoji": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^7.0.1",
     "scroll-into-view-if-needed": "^2.2.28",
     "shelljs": "^0.8.4",
-    "superjson": "^1.7.4",
-    "typescript": "^4.1.3",
+    "superjson": "^1.8.0",
+    "typescript": "^4.5.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/github-slugger": "^1.3.0",
-    "@types/node": "^14.14.19",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/sharp": "^0.26.1",
-    "babel-plugin-superjson-next": "^0.3.0",
+    "@types/node": "^16.11.7",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
+    "@types/sharp": "^0.29.4",
+    "babel-plugin-superjson-next": "^0.4.2",
     "dotenv": "^10.0.0",
-    "eslint": "<8.0.0",
-    "eslint-config-next": "^12.0.1",
+    "eslint": "^8.2.0",
+    "eslint-config-next": "^12.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "imagemin": "7.0.1",
     "imagemin-jpegtran": "7.0.0",
     "prettier": "^2.4.1",
     "react-multi-ref": "^1.0.0",
-    "ts-node": "9.1.1",
+    "ts-node": "10.4.0",
     "yarn-deduplicate": "^3.1.0"
   }
 }

src/components/header.tsx

@@ -21,6 +21,7 @@ import Logo, { LogoIcon } from './logo';
 import { MobileNavButton, MobileNavContent } from './mobile-nav';
 import Search from './omni-search';
 import SponsorButton from './sponsor-button';
+import VersionSwitcher from './version-switcher';
 
 const DiscordIcon = (props: React.ComponentProps<'svg'>) => (
   <svg viewBox='0 0 146 146' {...props}>
@@ -76,6 +77,11 @@ function HeaderContent() {
           maxW='1100px'
         >
           <Search />
+          <VersionSwitcher
+            width='auto'
+            flexShrink={0}
+            display={{ base: 'none', md: 'flex' }}
+          />
           <HStack spacing='5' display={{ base: 'none', md: 'flex' }}>
             <Link
               isExternal

src/components/props-table.tsx

@@ -1,4 +1,4 @@
-// import * as ComponentProps from "@chakra-ui/props-docs"
+import * as ComponentProps from '@chakra-ui/props-docs';
 import { chakra, Code, Flex, HStack, Stack, theme } from '@chakra-ui/react';
 import Link from 'next/link';
 import * as React from 'react';
@@ -19,7 +19,7 @@ export type PropsTableProps = {
   /**
    * displayName of the target component
    */
-  of: string;
+  of: keyof typeof ComponentProps;
   /**
    * prop names to omit
    */
@@ -137,8 +137,7 @@ interface MakePropsTableOptions extends PropsTableProps {}
 const TYPE_GENERIC_THEMABLE = '(string & {})';
 
 function makePropsTable({ of, omit, only }: MakePropsTableOptions) {
-  // const props = ComponentProps[of]?.props as Record<string, any>
-  const props = {} as Record<string, any>;
+  const props = ComponentProps[of]?.props;
 
   const themeKey = themeComponentKeyAliases[of] ?? of;
   const componentTheme = theme.components[themeKey];

src/utils/convert-backticks-to-inline-code.tsx

@@ -20,7 +20,7 @@ function toInlineCode(input: string) {
     );
 }
 
-export function convertBackticksToInlineCode(input?: string) {
+export function convertBackticksToInlineCode(input?: string | JSX.Element) {
   if (!input) return '';
   return isObject(input) ? input : toInlineCode(input);
 }