type-check mdx files, components, add narrow type to inline filter

mdx-components.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import type { MDXComponents } from 'mdx/types';
+import type { Metadata } from 'next';
+import type { MDXComponents, MDXProps } from 'mdx/types';
+import type { PageNode } from '@/directory/directory';
+import type { Platform } from '@/constants/platforms';
 import ExportedImage from 'next-image-export-optimizer';
 import InlineFilter from './src/components/InlineFilter';
 import { YoutubeEmbed } from './src/components/YoutubeEmbed';
@@ -34,43 +37,70 @@ const MDXHeading4 = (props) => <MDXHeading level={4} {...props} />;
 const MDXHeading5 = (props) => <MDXHeading level={5} {...props} />;
 const MDXHeading6 = (props) => <MDXHeading level={6} {...props} />;
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    // Map markdown elements to custom components
-    a: MDXLink,
-    h1: MDXHeading1,
-    h2: MDXHeading2,
-    h3: MDXHeading3,
-    h4: MDXHeading4,
-    h5: MDXHeading5,
-    h6: MDXHeading6,
-    pre: (preProps) => {
-      const props = preToCodeBlock(preProps);
-      if (props) {
-        return <MDXCode {...props} />;
-      }
-      return <pre {...preProps} />;
-    },
-    img: ResponsiveImage,
-    table: MDXTable,
+const components = {
+   // Map markdown elements to custom components
+   a: MDXLink,
+   h1: MDXHeading1,
+   h2: MDXHeading2,
+   h3: MDXHeading3,
+   h4: MDXHeading4,
+   h5: MDXHeading5,
+   h6: MDXHeading6,
+   pre: (preProps) => {
+     const props = preToCodeBlock(preProps);
+     if (props) {
+       return <MDXCode {...props} />;
+     }
+     return <pre {...preProps} />;
+   },
+   img: ResponsiveImage,
+   table: MDXTable,
+
+   // Make common custom components available to content authors
+   Accordion,
+   Block,
+   BlockSwitcher,
+   Callout,
+   Fragments,
+   InlineFilter,
+   MigrationAlert,
+   YoutubeEmbed,
+   Overview,
+   ExternalLink,
+   ExternalLinkButton,
+   InternalLinkButton,
+   Grid,
+   Columns,
+   Video,
+   View,
+};
+
+/**
+ * Type for Next.js's getStaticProps return in MDX pages
+ * this is needed to satisfy the type-check for <Overview>'s childPageNodes
+ */
+type MDXGetStaticPropsResult = {
+  meta: Metadata & {
+    platforms: Platform[];
+  };
+  childPageNodes: PageNode[];
+};
 
-    // Make common custom components available to content authors
-    Accordion,
-    Block,
-    BlockSwitcher,
-    Callout,
-    Fragments,
-    InlineFilter,
-    MigrationAlert,
-    YoutubeEmbed,
-    Overview,
-    ExternalLink,
-    ExternalLinkButton,
-    InternalLinkButton,
-    Grid,
-    Columns,
-    Video,
-    View,
+/**
+ * Declare types in the global scope for MDX to type-check
+ */
+declare global {
+  type MDXProvidedComponents = typeof components;
+  type Props = MDXProps & MDXGetStaticPropsResult;
+}
+
+/**
+ * @param _components Next.js components for MDX pages
+ * @returns all MDX components available for use in the page without import
+ */
+export function useMDXComponents(_components: MDXComponents) {
+  return {
+    ..._components,
     ...components
   };
 }

src/components/Breadcrumbs/index.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Breadcrumbs } from '@aws-amplify/ui-react';
 import { findDirectoryNode as findNode } from '@/utils/findDirectoryNode';
 import classNames from 'classnames';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 type BreadcrumbItem = {
   href: { pathname: string; query?: { platform: string } };
@@ -27,24 +27,24 @@ const overrides = {
   '/gen1/angular/prev': 'V5',
   '/gen1/nextjs/prev': 'V5',
   '/gen1/vue/prev': 'V5',
-  '/gen1/javascript': PLATFORM_DISPLAY_NAMES['javascript'],
-  '/gen1/react': PLATFORM_DISPLAY_NAMES['react'],
-  '/gen1/flutter': PLATFORM_DISPLAY_NAMES['flutter'],
-  '/gen1/swift': PLATFORM_DISPLAY_NAMES['swift'],
-  '/gen1/android': PLATFORM_DISPLAY_NAMES['android'],
-  '/gen1/react-native': PLATFORM_DISPLAY_NAMES['react-native'],
-  '/gen1/angular': PLATFORM_DISPLAY_NAMES['angular'],
-  '/gen1/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'],
-  '/gen1/vue': PLATFORM_DISPLAY_NAMES['vue'],
-  '/javascript': PLATFORM_DISPLAY_NAMES['javascript'],
-  '/react': PLATFORM_DISPLAY_NAMES['react'],
-  '/flutter': PLATFORM_DISPLAY_NAMES['flutter'],
-  '/swift': PLATFORM_DISPLAY_NAMES['swift'],
-  '/android': PLATFORM_DISPLAY_NAMES['android'],
-  '/react-native': PLATFORM_DISPLAY_NAMES['react-native'],
-  '/angular': PLATFORM_DISPLAY_NAMES['angular'],
-  '/nextjs': PLATFORM_DISPLAY_NAMES['nextjs'],
-  '/vue': PLATFORM_DISPLAY_NAMES['vue']
+  '/gen1/javascript': PLATFORMS['javascript'],
+  '/gen1/react': PLATFORMS['react'],
+  '/gen1/flutter': PLATFORMS['flutter'],
+  '/gen1/swift': PLATFORMS['swift'],
+  '/gen1/android': PLATFORMS['android'],
+  '/gen1/react-native': PLATFORMS['react-native'],
+  '/gen1/angular': PLATFORMS['angular'],
+  '/gen1/nextjs': PLATFORMS['nextjs'],
+  '/gen1/vue': PLATFORMS['vue'],
+  '/javascript': PLATFORMS['javascript'],
+  '/react': PLATFORMS['react'],
+  '/flutter': PLATFORMS['flutter'],
+  '/swift': PLATFORMS['swift'],
+  '/android': PLATFORMS['android'],
+  '/react-native': PLATFORMS['react-native'],
+  '/angular': PLATFORMS['angular'],
+  '/nextjs': PLATFORMS['nextjs'],
+  '/vue': PLATFORMS['vue']
 };
 
 function generateBreadcrumbs(

src/components/FeatureLists/PlatformFeatureList.tsx

@@ -7,9 +7,9 @@ import {
 
 import { Flex } from '@aws-amplify/ui-react';
 import featureListData from '@/constants/feature-lists-data';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
-import type { Platform } from '@/data/platforms';
-import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
+import type { Platform } from '@/constants/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 import { useIsGen1Page } from '@/utils/useIsGen1Page';
 
 interface PlatformFeatureListProps {
@@ -23,7 +23,7 @@ const PlatformFeatureList: React.FC<PlatformFeatureListProps> = ({
 
   return categories.length > 0 ? (
     <Flex direction="column" alignItems="flex-start">
-      <FeatureLists title={`Features for ${PLATFORM_DISPLAY_NAMES[platform]}`}>
+      <FeatureLists title={`Features for ${PLATFORMS[platform]}`}>
         {categories.map((category, index) => (
           <FeatureList heading={category.heading} key={index}>
             {category.items.map((categoryItem, index) => (

src/components/FrameworkGrid/FrameworkGrid.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Grid, View } from '@aws-amplify/ui-react';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import {
   IconAndroid,
   IconAngular,

src/components/GetStartedPopover/GetStartedPopover.tsx

@@ -1,7 +1,7 @@
 import { Flex, VisuallyHidden } from '@aws-amplify/ui-react';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { Popover } from '@/components/Popover';
-import { DEFAULT_PLATFORM, Platform } from '@/data/platforms';
+import { DEFAULT_PLATFORM, Platform } from '@/constants/platforms';
 import { useIsGen1Page } from '@/utils/useIsGen1Page';
 import { UrlObject } from 'url';
 import { gen1GetStartedHref, gen2GetStartedHref } from '@/data/index-page-data';

src/components/GetStartedPopover/generateGetStartedLinks.tsx

@@ -1,3 +1,4 @@
+import type { Platform } from '@/constants/platforms';
 import {
   IconAndroid,
   IconAngular,
@@ -9,7 +10,7 @@ import {
   IconVue
 } from '@/components/Icons';
 import { GetStartedLinksType } from './GetStartedPopover';
-import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms';
+import { PLATFORMS } from '@/constants/platforms';
 
 /**
  * Generates get started links for all platforms with the same get started url
@@ -19,7 +20,7 @@ import { PLATFORM_DISPLAY_NAMES, Platforms } from '@/data/platforms';
 export function generateGetStartedLinks(
   getStartedPathname
 ): GetStartedLinksType[] {
-  const platformOrder: Platforms = [
+  const platformOrder: Platform[] = [
     'react',
     'nextjs',
     'angular',
@@ -33,7 +34,7 @@ export function generateGetStartedLinks(
 
   const getStartedItems: Partial<GetStartedLinksType>[] = platformOrder.map(
     (platform) => ({
-      title: PLATFORM_DISPLAY_NAMES[platform],
+      title: PLATFORMS[platform],
       platform: platform
     })
   );

src/components/InlineFilter/index.tsx

@@ -1,21 +1,20 @@
+import type { Platform } from '@/constants/platforms';
 import { Fragment } from 'react';
 import FilterChildren from '../FilterChildren';
 
 type InlineFilterProps = {
   children: React.ReactNode;
-  filters: string[];
+  filters: Platform[];
 };
 
 export default function InlineFilter({ filters, children }: InlineFilterProps) {
   if (!filters || !Array.isArray(filters) || filters.length < 1) {
     return <></>;
   }
 
-  const filteredChildren: Array<React.JSX.Element> = [];
-
-  filters.forEach((filter) => {
-    filteredChildren.push(<Fragment key={filter}>{children}</Fragment>);
-  });
+  const filteredChildren = filters.map((filter) => (
+    <Fragment key={filter}>{children}</Fragment>
+  ));
 
   return <FilterChildren>{filteredChildren}</FilterChildren>;
 }

src/components/Layout/Layout.tsx

@@ -1,3 +1,4 @@
+import type { Platform } from '@/constants/platforms';
 import { useState, useEffect, ReactElement } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -15,12 +16,7 @@ import { defaultTheme } from '@/themes/defaultTheme';
 import { gen1Theme } from '@/themes/gen1Theme';
 import { Footer } from '@/components/Footer/';
 import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav';
-import {
-  DEFAULT_PLATFORM,
-  PLATFORMS,
-  PLATFORM_DISPLAY_NAMES,
-  Platform
-} from '@/data/platforms';
+import { DEFAULT_PLATFORM, PLATFORMS } from '@/constants/platforms';
 import { SpaceShip } from '@/components/SpaceShip';
 import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
 import { LayoutProvider, LayoutHeader } from '@/components/Layout';
@@ -102,13 +98,13 @@ export const Layout = ({
 
   const currentPlatform = platform
     ? platform
-    : PLATFORMS.includes(asPathPlatform)
+    : Object.keys(PLATFORMS).includes(asPathPlatform)
       ? asPathPlatform
       : DEFAULT_PLATFORM;
 
   const title = [
     pageTitle,
-    platform ? PLATFORM_DISPLAY_NAMES[platform] : null,
+    platform ? PLATFORMS[platform] : null,
     isGen1
       ? 'AWS Amplify Gen 1 Documentation'
       : 'AWS Amplify Gen 2 Documentation'

src/components/Layout/LayoutHeader.tsx

@@ -2,7 +2,7 @@ import { useContext, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { Button, Flex, View, VisuallyHidden } from '@aws-amplify/ui-react';
 import classNames from 'classnames';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import {
   ALGOLIA_API_KEY,
   ALGOLIA_INDEX_NAME,

src/components/Menu/Menu.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { MenuItem } from './MenuItem';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import { PageNode } from '@/directory/directory';
 import { findDirectoryNode } from '@/utils/findDirectoryNode';
 

src/components/Menu/MenuItem.tsx

@@ -1,9 +1,10 @@
+import type { Platform } from '@/constants/platforms';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import { ReactElement, useContext, useEffect, useState, useMemo } from 'react';
 import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react';
 import { IconExternalLink, IconChevron } from '@/components/Icons';
 import Link from 'next/link';
-import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
+import { JS_PLATFORMS } from '@/constants/platforms';
 import { LayoutContext } from '@/components/Layout';
 import { PageNode } from '@/directory/directory';
 
@@ -104,7 +105,7 @@ export function MenuItem({
 
   if (
     currentPlatform &&
-    JS_PLATFORMS.includes(currentPlatform as JSPlatform) &&
+    Object.keys(JS_PLATFORMS).includes(currentPlatform) &&
     asPathWithoutHash.includes('/prev/') &&
     pageNode.route == 'https://aws-amplify.github.io/amplify-js/api/'
   ) {

src/components/Modal/Modal.tsx

@@ -10,7 +10,7 @@ import { IconChevron, IconStar, IconX, IconTSBoxed } from '@/components/Icons';
 import { useEffect, useId, useState } from 'react';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
+import { DEFAULT_PLATFORM } from '@/constants/platforms';
 import { useGen1Path } from './useGen1Path';
 
 interface ModalProps extends ViewProps {

src/components/Modal/useGen1Path.ts

@@ -1,6 +1,6 @@
 import flatDirectory from '@/directory/flatDirectory.json';
 import { useRouter } from 'next/router';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 
 /**
  * Hook to find the Gen1 version of the Gen2 path you're on.

src/components/Overview/Overview.tsx

@@ -2,7 +2,7 @@ import { PageNode } from '@/directory/directory';
 import { Card, Flex, View, Text } from '@aws-amplify/ui-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Platform } from '@/data/platforms';
+import { Platform } from '@/constants/platforms';
 import { Columns } from '@/components/Columns';
 
 type OverviewProps = {