Fix importing of Alert component

apps/temp-docs/components/index.tsx

@@ -1,21 +1,13 @@
-import LinkCard from './LinkCard'
-import LinkCardsWrapper from './LinkCardsWrapper'
-import { Tabs } from 'ui'
-import Sponsor from './Sponsor'
-import SponsorsWrapper from './SponsorsWrapper'
+import { Tabs, Alert } from 'ui'
+// import Tabs from '@theme/Tabs'
+// import TabItem from '@theme/TabItem'
+
 import CodeBlock from './CodeBlock/CodeBlock'
-import AuthProviders from './AuthProviders'
 
 const components = {
-  // LinkCard,
-  // LinkCardsWrapper,
-  // SponsorsWrapper,
-  // Sponsor,
-  // AuthProviders,
-  // Tabs: (props: any) => <Tabs {...props} type="underlined" size="small" />,
-  // TabsPanel: (props: any) => {
-  //   return <Tabs.Panel {...props} />
-  // },
+  Alert,
+  Tabs,
+  // TabItem,
   code: (props: any) => <CodeBlock {...props} />,
 }
 

apps/temp-docs/components/nav/SideBar.tsx

@@ -1,4 +1,5 @@
 import { Menu } from 'ui'
+import { Fragment } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -22,36 +23,34 @@ const SideBar = ({ menuItems }: { menuItems: any }) => {
       <Menu className="w-full flex-col gap-12" type="pills">
         {Object.keys(menuItems).map((key) => {
           return (
-            <div className="mb-8">
+            <div className="mb-8" key={key}>
               <Menu.Group title={key} />
-              {menuItems[key].map((item: { link: string; text: string; sections: Array<any> }) => (
-                <span key={item.link}>
-                  {Array.isArray(item.sections) ? (
-                    <>
-                      <Menu.Group title={item.text} />
-                      {item.sections.map((section) => (
-                        <Link href={section.link} key={`${item.text}-${section.text}`}>
-                          <a>
-                            <Menu.Item active={asPath == section.link}>{section.text}</Menu.Item>
-                          </a>
-                        </Link>
-                      ))}
-                    </>
-                  ) : (
-                    <Link href={item.link}>
-                      <a>
-                        <Menu.Item active={asPath === item.link}>
-                          {/* <div
-                          // className={asPath === item.link ? 'text-brand-900' : 'text-scale-1000'}
-                          > */}
-                          {item.text}
-                          {/* </div> */}
-                        </Menu.Item>
-                      </a>
-                    </Link>
-                  )}
-                </span>
-              ))}
+              {menuItems[key].map((item: { link: string; text: string; sections: Array<any> }) => {
+                return Array.isArray(item.sections) ? (
+                  <Fragment key={item.text}>
+                    <Menu.Group title={item.text} />
+                    {item.sections.map((section) => (
+                      <Link href={section.link} key={`${item.text}-${section.text}`}>
+                        <a>
+                          <Menu.Item active={asPath == section.link}>{section.text}</Menu.Item>
+                        </a>
+                      </Link>
+                    ))}
+                  </Fragment>
+                ) : (
+                  <Link href={item.link} key={item.text}>
+                    <a>
+                      <Menu.Item active={asPath === item.link}>
+                        {/* <div
+                        // className={asPath === item.link ? 'text-brand-900' : 'text-scale-1000'}
+                        > */}
+                        {item.text}
+                        {/* </div> */}
+                      </Menu.Item>
+                    </a>
+                  </Link>
+                )
+              })}
             </div>
           )
         })}

apps/temp-docs/docs/guides/local-development.mdx

@@ -4,9 +4,10 @@ title: Local Development
 description: How to use Supabase on your local development machine.
 ---
 
+## Local Development
+
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
-import { IconArrowUp, IconCheckCircle, Alert } from 'ui'
 
 Learn how to use the Supabase CLI to develop your project locally and deploy to the Supabase Platform.
 

apps/temp-docs/next.config.mjs

@@ -5,9 +5,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeSlug from 'rehype-slug'
 
 import withTM from 'next-transpile-modules'
-// import { remarkCodeHike } from '@code-hike/mdx'
-// import theme from 'shiki/themes/dark-plus.json' assert { type: 'json' }
-// import codeHikeTheme from './codeHikeTheme.js'
+import withPlugins from 'next-compose-plugins'
 
 /**
  * Rewrites and redirects are handled by
@@ -16,29 +14,6 @@ import withTM from 'next-transpile-modules'
  * Do not add them in this config
  */
 
-const withMDX = nextMdx({
-  extension: /\.mdx?$/,
-  options: {
-    remarkPlugins: [
-      // [
-      //   remarkCodeHike,
-      //   {
-      //     theme: codeHikeTheme,
-      //     autoImport: false,
-      //   },
-      // ],
-      remarkGfm,
-    ],
-    rehypePlugins: [rehypeSlug],
-    // This is required for `MDXProvider` component
-    providerImportSource: '@mdx-js/react',
-  },
-})
-
-const withBundleAnalyzer = bundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-})
-
 // /** @type {NextConfig} */
 const nextConfig = {
   // Append the default value with md extensions
@@ -47,8 +22,18 @@ const nextConfig = {
   swcMinify: true,
 }
 
-// next.config.js.
-export default () => {
-  const plugins = [withMDX, withTM(['ui', 'common'])]
-  return plugins.reduce((acc, next) => next(acc), nextConfig)
-}
+const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' })
+
+const withMDX = nextMdx({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeSlug],
+    providerImportSource: '@mdx-js/react',
+  },
+})
+
+export default withPlugins(
+  [[withBundleAnalyzer({})], withMDX(), withTM(['ui', 'common'])],
+  nextConfig
+)

apps/temp-docs/package.json

@@ -34,7 +34,6 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^12.0.4",
-    "@supabase/ui": "v0.37.0-alpha.50",
     "@tailwindcss/typography": "^0.4.1",
     "babel": "^6.23.0",
     "common": "*",
@@ -57,7 +56,8 @@
     "remark": "^14.0.2",
     "remark-html": "^15.0.0",
     "remark-mdx": "^2.0.0-rc.2",
-    "remark-prism": "^1.3.6"
+    "remark-prism": "^1.3.6",
+    "ui": "*"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",