docs: add smart regions docs (#39313)

* docs: add smart regions list mapping

* docs: add smart region selection docs

* Update apps/docs/content/guides/platform/regions.mdx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update apps/docs/content/guides/platform/regions.mdx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/docs/components/RegionsList.tsx

@@ -1,4 +1,5 @@
 import { AWS_REGIONS } from 'shared-data'
+import { SMART_REGION_TO_EXACT_REGION_MAP } from 'shared-data/regions'
 
 export function RegionsList() {
   return (
@@ -12,3 +13,15 @@ export function RegionsList() {
     </ul>
   )
 }
+export function SmartRegionsList() {
+  return (
+    <ul>
+      {[...SMART_REGION_TO_EXACT_REGION_MAP.entries()].map(([smartRegion, exactRegion]) => (
+        <li key={smartRegion} className="flex flex-col gap-2">
+          <span className="w-fit !mt-0">{smartRegion}</span>
+          <code className="w-fit">{exactRegion}</code>
+        </li>
+      ))}
+    </ul>
+  )
+}

apps/docs/content/guides/platform/regions.mdx

@@ -5,6 +5,14 @@ subtitle: Spin up Supabase projects in our global regions
 
 The following regions are available for your Supabase projects.
 
+## Smart region selection
+
+Smart Region Selection is a feature that allows you to select from a list of broader regions. Optimizations are made to ensure that the selected region has compute capacity availability.
+
+<SmartRegionsList />
+
+Currently, smart region selection is not available for read replicas and project-related operations via the management API.
+
 ## AWS
 
 <RegionsList />

apps/docs/features/docs/MdxBase.shared.tsx

@@ -18,7 +18,7 @@ import { NavData } from '~/components/NavData'
 import { Price } from '~/components/Price'
 import { ProjectConfigVariables } from '~/components/ProjectConfigVariables'
 import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
-import { RegionsList } from '~/components/RegionsList'
+import { RegionsList, SmartRegionsList } from '~/components/RegionsList'
 import { SharedData } from '~/components/SharedData'
 import StepHikeCompact from '~/components/StepHikeCompact'
 import { CodeSampleDummy, CodeSampleWrapper } from '~/features/directives/CodeSample.client'
@@ -60,6 +60,7 @@ const components = {
   ProjectConfigVariables,
   RealtimeLimitsEstimator,
   RegionsList,
+  SmartRegionsList,
   SharedData,
   ShowUntil,
   SqlToRest,

apps/docs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/studio/components/interfaces/ProjectCreation/ProjectCreation.utils.ts

@@ -1,14 +1,9 @@
 import type { CloudProvider, Region } from 'shared-data'
 import { AWS_REGIONS, FLY_REGIONS } from 'shared-data'
-
-const smartRegionToExactRegionMap = new Map([
-  ['Americas', 'East US (North Virginia)'],
-  ['Europe', 'Central EU (Frankfurt)'],
-  ['APAC', 'Southeast Asia (Singapore)'],
-])
+import { SMART_REGION_TO_EXACT_REGION_MAP } from 'shared-data/regions'
 
 export function smartRegionToExactRegion(smartOrExactRegion: string) {
-  return smartRegionToExactRegionMap.get(smartOrExactRegion) ?? smartOrExactRegion
+  return SMART_REGION_TO_EXACT_REGION_MAP.get(smartOrExactRegion) ?? smartOrExactRegion
 }
 
 export function getAvailableRegions(cloudProvider: CloudProvider): Region {

apps/studio/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

packages/shared-data/regions.ts

@@ -77,3 +77,9 @@ export type AWS_REGIONS_KEYS = keyof typeof AWS_REGIONS
 export const FLY_REGIONS = {
   SOUTHEAST_ASIA: { code: 'sin', displayName: 'Singapore', location: [1.3521, 103.8198] },
 } as const
+
+export const SMART_REGION_TO_EXACT_REGION_MAP = new Map([
+  ['Americas', 'East US (North Virginia)'],
+  ['Europe', 'Central EU (Frankfurt)'],
+  ['APAC', 'Southeast Asia (Singapore)'],
+])