chore(docs): remove dynamic imports from React primitive pages (#4869)

Co-authored-by: jacoblogan <[email protected]>
aws-amplify · Jan 2, 2024 · 8d41213 · 8d41213
1 parent b4afb51
commit 8d41213
Show file tree

Hide file tree

Showing 274 changed files with 4,149 additions and 4,196 deletions.
diff --git a/.changeset/wise-walls-sip.md b/.changeset/wise-walls-sip.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+chore(docs): remove dynamic imports from React primitive pages, add FilterChildren internal component
diff --git a/docs/src/components/InlineFilter/InlineFilter.tsx b/docs/src/components/InlineFilter/InlineFilter.tsx
@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router';
+import { FilterChildren } from '@aws-amplify/ui-react/internal';
+import { isString } from '@aws-amplify/ui';
+
+import { Framework } from '@/data/frameworks';
+
+export interface InlineFilterProps {
+  children: React.ReactNode;
+  /**
+   * List of platforms that will render this content. If the current platform
+   * is not in this list then the content will not be rendered
+   */
+  filters: (Framework | 'all')[];
+}
+
+/**
+ * Used to show content for filtered platforms
+ * Usage:
+ * <InlineFilter filters={['react', 'android']}>
+ *  This content will only render for react and angular platforms
+ * </InlineFilter>
+ */
+export const InlineFilter = ({ filters, children }: InlineFilterProps) => {
+  const router = useRouter();
+  const platform = router?.query?.platform;
+
+  if (!isString(platform)) {
+    return null;
+  }
+
+  return (
+    <FilterChildren allowedFilters={filters} targetFilter={platform}>
+      {children}
+    </FilterChildren>
+  );
+};
diff --git a/docs/src/components/InlineFilter/index.ts b/docs/src/components/InlineFilter/index.ts
@@ -0,0 +1 @@
+export { InlineFilter, type InlineFilterProps } from './InlineFilter';
diff --git a/docs/src/components/Layout/index.tsx b/docs/src/components/Layout/index.tsx
@@ -54,6 +54,7 @@ export default function Page({
         }))
       );
     });
+    updateHeaders(); // with static rendering the mutation observer is no longer triggered on initial page view because the content has already been rendered
 
     const observer = new MutationObserver(updateHeaders);
 

diff --git a/docs/src/components/PrimitiveTabs.tsx b/docs/src/components/PrimitiveTabs.tsx
@@ -0,0 +1,22 @@
+import { PageTabLayout } from '@/components/Layout/PageTabLayout';
+import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
+
+export const PrimitiveTabs = ({ children, htmlElement, mdnUrl, title }) => {
+  return (
+    <PageTabLayout
+      tabComponents={[
+        { title: 'Documentation', children },
+        {
+          title: 'Props',
+          children: (
+            <PropsTableTab
+              componentName={title}
+              htmlElement={htmlElement}
+              mdnUrl={mdnUrl}
+            />
+          ),
+        },
+      ]}
+    />
+  );
+};
diff --git a/docs/src/data/frameworks.ts b/docs/src/data/frameworks.ts
@@ -37,6 +37,6 @@ export const FRAMEWORK_INSTALL_SCRIPTS = {
   vue: 'npm i @aws-amplify/ui-vue aws-amplify',
   angular: 'npm i @aws-amplify/ui-angular aws-amplify',
   flutter: 'flutter pub add amplify_authenticator',
-  android: "implementation 'com.amplifyframework.ui:liveness:1.2.0'",
+  android: "implementation 'com.amplifyframework.ui:liveness:1.2.1'",
   'react-native': `npm i @aws-amplify/ui-react-native aws-amplify ${REACT_NATIVE_DEPENDENCIES}`,
 };
diff --git a/docs/src/pages/[platform]/components/accordion/index.page.mdx b/docs/src/pages/[platform]/components/accordion/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: details
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/alert/index.page.mdx b/docs/src/pages/[platform]/components/alert/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: div
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/autocomplete/index.page.mdx b/docs/src/pages/[platform]/components/autocomplete/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: input
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/badge/index.page.mdx b/docs/src/pages/[platform]/components/badge/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: span
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/breadcrumbs/index.page.mdx b/docs/src/pages/[platform]/components/breadcrumbs/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: nav
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/button/index.page.mdx b/docs/src/pages/[platform]/components/button/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: button
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,19 +23,7 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
 
diff --git a/docs/src/pages/[platform]/components/card/index.page.mdx b/docs/src/pages/[platform]/components/card/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: div
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
diff --git a/docs/src/pages/[platform]/components/checkboxfield/index.page.mdx b/docs/src/pages/[platform]/components/checkboxfield/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: input
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { InlineFilter, type InlineFilterProps } from './InlineFilter';
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,6 +54,7 @@ export default function Page({ @@
             }))
           );
         });
+        updateHeaders(); // with static rendering the mutation observer is no longer triggered on initial page view because the content has already been rendered
         const observer = new MutationObserver(updateHeaders);
@@ Expand Down @@