diff --git a/.changeset/wise-walls-sip.md b/.changeset/wise-walls-sip.md
new file mode 100644
index 00000000000..e48e85016a4
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..650b149da37
--- /dev/null
+++ 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:
+ *
+ * This content will only render for react and angular platforms
+ *
+ */
+export const InlineFilter = ({ filters, children }: InlineFilterProps) => {
+ const router = useRouter();
+ const platform = router?.query?.platform;
+
+ if (!isString(platform)) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/docs/src/components/InlineFilter/index.ts b/docs/src/components/InlineFilter/index.ts
new file mode 100644
index 00000000000..9b94a10d528
--- /dev/null
+++ 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
index ea9ecdf4b2a..a0486a0e021 100644
--- 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
new file mode 100644
index 00000000000..e8e684fb254
--- /dev/null
+++ 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 (
+ {({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/alert/index.page.mdx b/docs/src/pages/[platform]/components/alert/index.page.mdx
index 07f3817abdc..9f05554e7c8 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/autocomplete/index.page.mdx b/docs/src/pages/[platform]/components/autocomplete/index.page.mdx
index 93d387af241..24ee1b5e635 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/badge/index.page.mdx b/docs/src/pages/[platform]/components/badge/index.page.mdx
index 8ee7cfda7d1..c4e574d7050 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/breadcrumbs/index.page.mdx b/docs/src/pages/[platform]/components/breadcrumbs/index.page.mdx
index cbf2e89eaa2..9f9c4c0bbb1 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/button/index.page.mdx b/docs/src/pages/[platform]/components/button/index.page.mdx
index 001cbe567a5..4f4094dba09 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/card/index.page.mdx b/docs/src/pages/[platform]/components/card/index.page.mdx
index aefdfd5fdd3..bead1fb5990 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/checkboxfield/index.page.mdx b/docs/src/pages/[platform]/components/checkboxfield/index.page.mdx
index ac39bb4f0c6..85608485903 100644
--- 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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/collection/index.page.mdx b/docs/src/pages/[platform]/components/collection/index.page.mdx
index 6aa03deb0c3..784c7b0f61c 100644
--- a/docs/src/pages/[platform]/components/collection/index.page.mdx
+++ b/docs/src/pages/[platform]/components/collection/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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/divider/index.page.mdx b/docs/src/pages/[platform]/components/divider/index.page.mdx
index 2d12a400c21..9cee02def0a 100644
--- a/docs/src/pages/[platform]/components/divider/index.page.mdx
+++ b/docs/src/pages/[platform]/components/divider/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: hr
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/dropzone/index.page.mdx b/docs/src/pages/[platform]/components/dropzone/index.page.mdx
index 2280f4a0893..c0f98a6c007 100644
--- a/docs/src/pages/[platform]/components/dropzone/index.page.mdx
+++ b/docs/src/pages/[platform]/components/dropzone/index.page.mdx
@@ -7,11 +7,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);
@@ -23,18 +21,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/fieldset/index.page.mdx b/docs/src/pages/[platform]/components/fieldset/index.page.mdx
index 612c99b1992..8f2306e0cb6 100644
--- a/docs/src/pages/[platform]/components/fieldset/index.page.mdx
+++ b/docs/src/pages/[platform]/components/fieldset/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: fieldset
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/flex/index.page.mdx b/docs/src/pages/[platform]/components/flex/index.page.mdx
index f1b5c53746c..3be93d0667d 100644
--- a/docs/src/pages/[platform]/components/flex/index.page.mdx
+++ b/docs/src/pages/[platform]/components/flex/index.page.mdx
@@ -7,11 +7,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);
@@ -23,18 +21,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/grid/index.page.mdx b/docs/src/pages/[platform]/components/grid/index.page.mdx
index 05414c5d7d1..4e9cf3ae000 100644
--- a/docs/src/pages/[platform]/components/grid/index.page.mdx
+++ b/docs/src/pages/[platform]/components/grid/index.page.mdx
@@ -7,11 +7,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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/heading/index.page.mdx b/docs/src/pages/[platform]/components/heading/index.page.mdx
index dc9aef4a872..8c2e6decec3 100644
--- a/docs/src/pages/[platform]/components/heading/index.page.mdx
+++ b/docs/src/pages/[platform]/components/heading/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: h1-h6
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/highlightmatch/index.page.mdx b/docs/src/pages/[platform]/components/highlightmatch/index.page.mdx
index 5e5c3bd89f4..10636761873 100644
--- a/docs/src/pages/[platform]/components/highlightmatch/index.page.mdx
+++ b/docs/src/pages/[platform]/components/highlightmatch/index.page.mdx
@@ -7,11 +7,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);
@@ -23,18 +21,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/icon/index.page.mdx b/docs/src/pages/[platform]/components/icon/index.page.mdx
index 171faa95be9..f53ce5313ea 100644
--- a/docs/src/pages/[platform]/components/icon/index.page.mdx
+++ b/docs/src/pages/[platform]/components/icon/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: svg
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,19 +22,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/image/index.page.mdx b/docs/src/pages/[platform]/components/image/index.page.mdx
index 2db5e595202..729974683a2 100644
--- a/docs/src/pages/[platform]/components/image/index.page.mdx
+++ b/docs/src/pages/[platform]/components/image/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: img
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/input/index.page.mdx b/docs/src/pages/[platform]/components/input/index.page.mdx
index 572dce89633..cb82e00aa9a 100644
--- a/docs/src/pages/[platform]/components/input/index.page.mdx
+++ b/docs/src/pages/[platform]/components/input/index.page.mdx
@@ -8,11 +8,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);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/label/index.page.mdx b/docs/src/pages/[platform]/components/label/index.page.mdx
index b43fa055752..33e12d5ac3e 100644
--- a/docs/src/pages/[platform]/components/label/index.page.mdx
+++ b/docs/src/pages/[platform]/components/label/index.page.mdx
@@ -7,11 +7,9 @@ htmlElement: label
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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/link/index.page.mdx b/docs/src/pages/[platform]/components/link/index.page.mdx
index 020209ef571..99dc4c0ac5f 100644
--- a/docs/src/pages/[platform]/components/link/index.page.mdx
+++ b/docs/src/pages/[platform]/components/link/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: a
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/loader/index.page.mdx b/docs/src/pages/[platform]/components/loader/index.page.mdx
index 1aa348f9d2d..172d30772c0 100644
--- a/docs/src/pages/[platform]/components/loader/index.page.mdx
+++ b/docs/src/pages/[platform]/components/loader/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: svg
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,19 +22,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/menu/index.page.mdx b/docs/src/pages/[platform]/components/menu/index.page.mdx
index 51bd958303d..205eae02c41 100644
--- a/docs/src/pages/[platform]/components/menu/index.page.mdx
+++ b/docs/src/pages/[platform]/components/menu/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,19 +23,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/message/index.page.mdx b/docs/src/pages/[platform]/components/message/index.page.mdx
index bd75804cad0..1a19fcba2c1 100644
--- a/docs/src/pages/[platform]/components/message/index.page.mdx
+++ b/docs/src/pages/[platform]/components/message/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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/pagination/index.page.mdx b/docs/src/pages/[platform]/components/pagination/index.page.mdx
index 12bc1e3c725..893e95688a6 100644
--- a/docs/src/pages/[platform]/components/pagination/index.page.mdx
+++ b/docs/src/pages/[platform]/components/pagination/index.page.mdx
@@ -8,11 +8,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);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/passwordfield/index.page.mdx b/docs/src/pages/[platform]/components/passwordfield/index.page.mdx
index e1ede9542c4..204f827081e 100644
--- a/docs/src/pages/[platform]/components/passwordfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/passwordfield/index.page.mdx
@@ -7,11 +7,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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/phonenumberfield/index.page.mdx b/docs/src/pages/[platform]/components/phonenumberfield/index.page.mdx
index e733e74718b..8a4687902e6 100644
--- a/docs/src/pages/[platform]/components/phonenumberfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/phonenumberfield/index.page.mdx
@@ -7,11 +7,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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/placeholder/index.page.mdx b/docs/src/pages/[platform]/components/placeholder/index.page.mdx
index 66f7b7781c4..e0b4d6b32de 100644
--- a/docs/src/pages/[platform]/components/placeholder/index.page.mdx
+++ b/docs/src/pages/[platform]/components/placeholder/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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/radiogroupfield/index.page.mdx b/docs/src/pages/[platform]/components/radiogroupfield/index.page.mdx
index fb5cb47c0a5..410c66ea40b 100644
--- a/docs/src/pages/[platform]/components/radiogroupfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/radiogroupfield/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,19 +23,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/rating/index.page.mdx b/docs/src/pages/[platform]/components/rating/index.page.mdx
index 67ffb5d0040..33fb5da2dd6 100644
--- a/docs/src/pages/[platform]/components/rating/index.page.mdx
+++ b/docs/src/pages/[platform]/components/rating/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,19 +22,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/scrollview/index.page.mdx b/docs/src/pages/[platform]/components/scrollview/index.page.mdx
index f1ac62e430d..fede56097dc 100644
--- a/docs/src/pages/[platform]/components/scrollview/index.page.mdx
+++ b/docs/src/pages/[platform]/components/scrollview/index.page.mdx
@@ -7,11 +7,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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/searchfield/index.page.mdx b/docs/src/pages/[platform]/components/searchfield/index.page.mdx
index 71f271e0ff8..733436028a2 100644
--- a/docs/src/pages/[platform]/components/searchfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/searchfield/index.page.mdx
@@ -7,11 +7,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);
@@ -23,19 +21,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/selectfield/index.page.mdx b/docs/src/pages/[platform]/components/selectfield/index.page.mdx
index d33b46a7255..d4483d438b9 100644
--- a/docs/src/pages/[platform]/components/selectfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/selectfield/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: select
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/sliderfield/index.page.mdx b/docs/src/pages/[platform]/components/sliderfield/index.page.mdx
index 4433c9a5c5c..f3ba4e6b49b 100644
--- a/docs/src/pages/[platform]/components/sliderfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/sliderfield/index.page.mdx
@@ -8,11 +8,9 @@ mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
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,19 +22,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/stepperfield/index.page.mdx b/docs/src/pages/[platform]/components/stepperfield/index.page.mdx
index 81da9849781..4e6b4471042 100644
--- a/docs/src/pages/[platform]/components/stepperfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/stepperfield/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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/switchfield/index.page.mdx b/docs/src/pages/[platform]/components/switchfield/index.page.mdx
index ddc92ed5919..e0cb80cef19 100644
--- a/docs/src/pages/[platform]/components/switchfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/switchfield/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,19 +23,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/table/index.page.mdx b/docs/src/pages/[platform]/components/table/index.page.mdx
index ca49f05ddcf..693878522a2 100644
--- a/docs/src/pages/[platform]/components/table/index.page.mdx
+++ b/docs/src/pages/[platform]/components/table/index.page.mdx
@@ -9,11 +9,9 @@ htmlElement: table
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/tabs/index.page.mdx b/docs/src/pages/[platform]/components/tabs/index.page.mdx
index a529fc326e8..14e93b088a8 100644
--- a/docs/src/pages/[platform]/components/tabs/index.page.mdx
+++ b/docs/src/pages/[platform]/components/tabs/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,19 +23,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/text/index.page.mdx b/docs/src/pages/[platform]/components/text/index.page.mdx
index 9940f9adfb8..1b166ffcd27 100644
--- a/docs/src/pages/[platform]/components/text/index.page.mdx
+++ b/docs/src/pages/[platform]/components/text/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: p
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/textareafield/index.page.mdx b/docs/src/pages/[platform]/components/textareafield/index.page.mdx
index 04c2de7ab89..dd691f252d7 100644
--- a/docs/src/pages/[platform]/components/textareafield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/textareafield/index.page.mdx
@@ -7,11 +7,9 @@ htmlElement: textarea
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);
@@ -23,18 +21,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/textfield/index.page.mdx b/docs/src/pages/[platform]/components/textfield/index.page.mdx
index 3ec8760b8b9..b2a26bcaeb5 100644
--- a/docs/src/pages/[platform]/components/textfield/index.page.mdx
+++ b/docs/src/pages/[platform]/components/textfield/index.page.mdx
@@ -8,11 +8,9 @@ htmlElement: textarea
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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/components/togglebutton/index.page.mdx b/docs/src/pages/[platform]/components/togglebutton/index.page.mdx
index 2115a77728e..613c181b8d2 100644
--- a/docs/src/pages/[platform]/components/togglebutton/index.page.mdx
+++ b/docs/src/pages/[platform]/components/togglebutton/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: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/view/index.page.mdx b/docs/src/pages/[platform]/components/view/index.page.mdx
index 68018f1f7d5..65a311c0806 100644
--- a/docs/src/pages/[platform]/components/view/index.page.mdx
+++ b/docs/src/pages/[platform]/components/view/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,19 +23,7 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
\ No newline at end of file
diff --git a/docs/src/pages/[platform]/components/visuallyhidden/index.page.mdx b/docs/src/pages/[platform]/components/visuallyhidden/index.page.mdx
index d18548ad189..19e888a7d90 100644
--- a/docs/src/pages/[platform]/components/visuallyhidden/index.page.mdx
+++ b/docs/src/pages/[platform]/components/visuallyhidden/index.page.mdx
@@ -7,11 +7,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);
@@ -23,18 +21,6 @@ export async function getStaticProps() {
return { props: {} }
}
-{({ platform }) => import(`./${platform}.mdx`)}
- },
- {
- title: "Props",
- children:
+
diff --git a/docs/src/pages/[platform]/connected-components/account-settings/account-settings.react.mdx b/docs/src/pages/[platform]/connected-components/account-settings/account-settings.react.mdx
index c537076734c..eb87919467a 100644
--- a/docs/src/pages/[platform]/connected-components/account-settings/account-settings.react.mdx
+++ b/docs/src/pages/[platform]/connected-components/account-settings/account-settings.react.mdx
@@ -1,8 +1,8 @@
import { Alert, Tabs } from '@aws-amplify/ui-react';
-import { AppDirectoryAlert } from '@/components/AppDirectoryAlert';
import { InstallScripts } from '@/components/InstallScripts';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
+import AppDirectoryAlert from '@/components/AppDirectoryAlert';
Account Settings components are a set of standalone components that add [user management](https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/) flows to your application with minimal boilerplate.
@@ -12,9 +12,9 @@ Account Settings components are a set of standalone components that add [user ma
## Quick Start
-
- {({ platform }) => import('@/components/AppDirectoryAlert')}
-
+
+
### Step 1. Configure Backend
diff --git a/docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx b/docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx
index 1f807d4965c..cc4df1af4de 100644
--- a/docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx
+++ b/docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx
@@ -5,6 +5,6 @@ description: ChangePassword component enables end users to change their password
supportedFrameworks: react
---
-import { Fragment } from '@/components/Fragment';
+import ReactPage from './react.mdx';
-{({ platform }) => import(`./${platform}.mdx`)}
+{({ platform }) => import(`./${platform}.mdx`)}
+{({ platform }) => import(`./account-settings.${platform}.mdx`)}
+
- {({ platform }) => import(`./useAuthenticator.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
## Access Auth State
-
- {({ platform }) => import(`./current-route.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
## Access Authenticated User
-
- {({ platform }) => import(`./current-user.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
## Trigger Transitions
-
- {({ platform }) => import(`./trigger-transitions.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
### Example
Here's an example that uses the `toForgotPassword` trigger transition, to create a custom button. Note that example uses the [Footer "slot" override](../authenticator/customization#headers--footers).
-
- {({ platform }) => import(`./example.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
## Full API
-
- {({ platform }) => import(`./full-api.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
@@ -142,9 +221,9 @@ These helper functions trigger transition to another `route`. Note that any inva
Transitions to `forgotPassword`. Allowed from `signIn`.
`() => void`
-
- {({ platform }) => platform === 'angular' || platform === 'vue' ? import(`./to-federated-sign-in.mdx`) : Promise.resolve(() => null)}
-
+
+
`skipVerification`
Skips verification process. Allowed from `verifyUser` and `confirmVerifyUser`
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.angular.mdx
deleted file mode 100644
index 53f672ef967..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.angular.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-in-with-email/sign-in-with-email.component.html
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react-native.mdx
deleted file mode 100644
index b2a83970e98..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react-native.mdx
+++ /dev/null
@@ -1,2 +0,0 @@
-```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/HideSignUp/Example.tsx
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react.mdx
deleted file mode 100644
index 1bcceccaa73..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-email/index.page.tsx#L9-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.vue.mdx
deleted file mode 100644
index f02cfb19909..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.vue.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```html{2}
-
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx
index 717855c4e72..71e1b366656 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx
@@ -1,11 +1,9 @@
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
import { Authenticator } from '@aws-amplify/ui-react';
## Hide Sign Up
The Authenticator has an option to hide the sign up page including the `Create Account` button.
-
- {({ platform }) => import(`./hidesignup.default.${platform}.mdx`)}
-
+```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/HideSignUp/Example.tsx
+```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx
index abf8d40cfa7..2b0c63ee274 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx
@@ -1,14 +1,33 @@
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
import { Authenticator } from '@aws-amplify/ui-react';
## Hide Sign Up
The Authenticator has an option to hide the sign up page including the `Create Account` tab.
-
- {({ platform }) => import(`./hidesignup.default.${platform}.mdx`)}
-
+
+ ```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-in-with-email/sign-in-with-email.component.html
+
+ ```
+
+
+ ```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-email/index.page.tsx#L9-
+
+ ```
+
+
+ ```html{2}
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+ ```
+
- {({ platform }) => import(`./loginMechanisms.${platform}.mdx`)}
-
+
+
+
+
+
+
+
+
+
+
## Sign Up Attributes
@@ -57,39 +100,92 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an
By default, the Authenticator will still require any attributes required for
verification, such as `email`, _even if `signUpAttributes` is empty_:
-
- {({ platform }) => import(`./signUpAttributes.default.${platform}.mdx`)}
-
-
- {({ platform }) =>
- import(`./signUpAttributes.default.example.${platform}.mdx`)
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {({ platform }) => import(`./signUpAttributes.all.${platform}.mdx`)}
-
-
- {({ platform }) =>
- import(`./signUpAttributes.all.example.${platform}.mdx`)
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {({ platform }) => import(`./socialProviders.${platform}.mdx`)}
-
+
+
- {({ platform }) => import(`./variation.${platform}.mdx`)}
-
+
- {({ platform }) => import(`./hidesignup.${platform}.mdx`)}
-
+
+
+
+
+
- {({ platform }) => import(`./totpIssuer.${platform}.mdx`)}
-
+
+
+
+
+
+
+
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.angular.mdx
deleted file mode 100644
index f46b670c475..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.angular.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```html{1}
-
-
- Welcome, {{ user.username }}!
- Sign Out
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react-native.mdx
deleted file mode 100644
index b49c7743032..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react-native.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```jsx expoSnack
-import React from 'react';
-import { Button } from 'react-native';
-
-import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
-import { Amplify } from 'aws-amplify';
-import awsconfig from './aws-exports';
-
-Amplify.configure(awsconfig);
-
-function SignOutButton() {
- const { signOut } = useAuthenticator();
- return
-
-
-
- );
-}
-
-export default App;
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react.mdx
deleted file mode 100644
index 1462329234a..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.react.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-```js{3}
-export default function App() {
- return (
-
- {({ signOut, user }) => (
-
- Hello {user.username}
- Sign out
-
- )}
-
- );
-}
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.vue.mdx
deleted file mode 100644
index 6ddbd9ade9a..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.email.vue.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```html{2}
-
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.angular.mdx
deleted file mode 100644
index e43c6f0aa33..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.angular.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```html{1}
-
-
- Welcome, {{ user.username }}!
- Sign Out
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react-native.mdx
deleted file mode 100644
index d01d6a0b7f9..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react-native.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```jsx expoSnack
-import React from 'react';
-import { Button } from 'react-native';
-
-import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
-import { Amplify } from 'aws-amplify';
-import awsconfig from './aws-exports';
-
-Amplify.configure(awsconfig);
-
-function SignOutButton() {
- const { signOut } = useAuthenticator();
- return
-
-
-
- );
-}
-
-export default App;
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react.mdx
deleted file mode 100644
index 6f79cd14707..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.react.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-```js{3}
-export default function App() {
- return (
-
- {({ signOut, user }) => (
-
- Hello {user.username}
- Sign out
-
- )}
-
- );
-}
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.vue.mdx
deleted file mode 100644
index ff8f3bd59d2..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.phone_number.vue.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```html{2}
-
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.react-native.mdx
index 7a96797963a..6c12d62a73e 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.react-native.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.react-native.mdx
@@ -1,6 +1,5 @@
import { Alert, Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
@@ -23,20 +22,90 @@ You can provide an alternative `username` such as `email` or `phone_number`.
Phone Number
-
- {({ platform }) => import(`./loginMechanisms.username.${platform}.mdx`)}
-
+ ```jsx expoSnack
+ import React from 'react';
+ import { Button } from 'react-native';
+
+ import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+ import { Amplify } from 'aws-amplify';
+ import awsconfig from './aws-exports';
+
+ Amplify.configure(awsconfig);
+
+ function SignOutButton() {
+ const { signOut } = useAuthenticator();
+ return
+
+
+
+ );
+ }
+
+ export default App;
+ ```
-
- {({ platform }) => import(`./loginMechanisms.email.${platform}.mdx`)}
-
+ ```jsx expoSnack
+ import React from 'react';
+ import { Button } from 'react-native';
+
+ import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+ import { Amplify } from 'aws-amplify';
+ import awsconfig from './aws-exports';
+
+ Amplify.configure(awsconfig);
+
+ function SignOutButton() {
+ const { signOut } = useAuthenticator();
+ return
+
+
+
+ );
+ }
+
+ export default App;
+ ```
-
- {({ platform }) =>
- import(`./loginMechanisms.phone_number.${platform}.mdx`)
- }
-
+ ```jsx expoSnack
+ import React from 'react';
+ import { Button } from 'react-native';
+
+ import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+ import { Amplify } from 'aws-amplify';
+ import awsconfig from './aws-exports';
+
+ Amplify.configure(awsconfig);
+
+ function SignOutButton() {
+ const { signOut } = useAuthenticator();
+ return
+
+
+
+ );
+ }
+
+ export default App;
+ ```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.angular.mdx
deleted file mode 100644
index 8bf6514e501..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.angular.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```html{1}
-
-
- Welcome, {{ user.username }}!
- Sign Out
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react-native.mdx
deleted file mode 100644
index 6d21a555d68..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react-native.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```jsx expoSnack
-import React from 'react';
-import { Button } from 'react-native';
-
-import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
-import { Amplify } from 'aws-amplify';
-import awsconfig from './aws-exports';
-
-Amplify.configure(awsconfig);
-
-function SignOutButton() {
- const { signOut } = useAuthenticator();
- return
-
-
-
- );
-}
-
-export default App;
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react.mdx
deleted file mode 100644
index 5248ca3178f..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.react.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-```js{3}
-export default function App() {
- return (
-
- {({ signOut, user }) => (
-
- Hello {user.username}
- Sign out
-
- )}
-
- );
-}
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.vue.mdx
deleted file mode 100644
index 7010c4f188c..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.username.vue.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```html{2}
-
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx
index fb9e5a22129..54606a4bf0d 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx
@@ -1,6 +1,6 @@
import { Alert, Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
@@ -23,27 +23,142 @@ You can provide an alternative `username` such as `email` or `phone_number`.
Phone Number
-
- {({ platform }) => import(`./loginMechanisms.username.${platform}.mdx`)}
-
+
+ ```html{1}
+
+
+ Welcome, {{ user.username }}!
+ Sign Out
+
+
+ ```
+
+
+ ```js{3}
+ export default function App() {
+ return (
+
+ {({ signOut, user }) => (
+
+ Hello {user.username}
+ Sign out
+
+ )}
+
+ );
+ }
+ ```
+
+
+ ```html{2}
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+ ```
+
-
- {({ platform }) => import(`./loginMechanisms.email.${platform}.mdx`)}
-
+
+ ```html{1}
+
+
+ Welcome, {{ user.username }}!
+ Sign Out
+
+
+ ```
+
+
+ ```js{3}
+ export default function App() {
+ return (
+
+ {({ signOut, user }) => (
+
+ Hello {user.username}
+ Sign out
+
+ )}
+
+ );
+ }
+ ```
+
+
+ ```html{2}
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+ ```
+
-
- {({ platform }) =>
- import(`./loginMechanisms.phone_number.${platform}.mdx`)
+
+ ```html{1}
+
+
+ Welcome, {{ user.username }}!
+ Sign Out
+
+
+ ```
+
+
+ ```js{3}
+ export default function App() {
+ return (
+
+ {({ signOut, user }) => (
+
+ Hello {user.username}
+ Sign out
+
+ )}
+
+ );
}
-
+ ```
+
+
+ ```html{2}
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+ ```
+
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.angular.mdx
deleted file mode 100644
index e2c1a74f87a..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.angular.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-```html{1}
-
-
- Welcome, {{ user.username }}!
- Sign Out
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react.mdx
deleted file mode 100644
index 0a80ab518b6..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-```js{3}
-export default function App() {
- return (
-
- {({ signOut, user }) => (
-
- Hello {user.username}
- Sign out
-
- )}
-
- );
-}
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.vue.mdx
deleted file mode 100644
index e3a4ccc56da..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.vue.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```html{2}
-
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx
index 6ee5c6a8874..8c4aa394ca3 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx
@@ -1,6 +1,6 @@
import { Alert } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
import {SocialProviderDemo} from "@/components/SocialProviderDemo";
## Social Providers
@@ -14,9 +14,50 @@ but can be explicitly defined as seen below.
For your [configured social providers](https://docs.amplify.aws/lib/auth/social/q/platform/js/), you can also provide `amazon`, `facebook`, or `google`:
-
- {({ platform }) => import(`./socialProviders.${platform}.mdx`)}
-
+
+```html{1}
+
+
+ Welcome, {{ user.username }}!
+ Sign Out
+
+
+```
+
+
+```js{3}
+export default function App() {
+ return (
+
+ {({ signOut, user }) => (
+
+ Hello {user.username}
+ Sign out
+
+ )}
+
+ );
+}
+```
+
+
+```html{2}
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+```
+
-
-
- Hello {{ user.username }}!
- Sign Out
-
-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.angular.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.angular.mdx
deleted file mode 100644
index 8d5e17c8ed2..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.angular.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/modal/modal.component.html
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.react.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.react.mdx
deleted file mode 100644
index 2278b72f416..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.react.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/modal/index.page.tsx#L9-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.vue.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.vue.mdx
deleted file mode 100644
index b96a06f8824..00000000000
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.modal.vue.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```html{2} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/modal/index.vue#L10-
-
-```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx
index 9d066cc0ba5..e326709069c 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx
@@ -1,6 +1,6 @@
import { Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
## Variation
@@ -14,9 +14,28 @@ The Authenticator has multiple variations to meet the needs of your application.
By default, the Authenticator will render as a centered card within the container:
-
- {({ platform }) => import(`./variation.default.${platform}.mdx`)}
-
+
+ ```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-in-with-username/sign-in-with-username.component.html
+
+ ```
+
+
+ ```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx#L9-
+
+ ```
+
+
+ ```html
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+ ```
+
The `modal` variation overlays the entire screen with the Authenticator:
-
- {({ platform }) => import(`./variation.modal.${platform}.mdx`)}
-
+
+ ```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/modal/modal.component.html
+
+ ```
+
+
+ ```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/modal/index.page.tsx#L9-
+
+ ```
+
+
+ ```html{2} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/modal/index.vue#L10-
+
+ ```
+
- {({platform}) => import(`./formfields/totp/form-fields.flutter.mdx`)}
-
+```dart{5}
+@override
+Widget build(BuildContext context) {
+ // Check if the current platform is mobile. If it is, we will hide the QR code
+ final isMobile = Theme.of(context).platform == TargetPlatform.iOS ||
+ Theme.of(context).platform == TargetPlatform.android;
+
+ return Authenticator(
+ // `authenticatorBuilder` is used to customize the UI for one or more steps
+ authenticatorBuilder: (BuildContext context, AuthenticatorState state) {
+ switch (state.currentStep) {
+ case AuthenticatorStep.continueSignInWithTotpSetup:
+ return Scaffold(
+ body: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ // Hide on mobile
+ if (!isMobile) ...[
+ const Text(
+ 'If you are on a mobile device, you can scan the QR code '
+ 'using the Authenticator app.',
+ ),
+ // TOTP QR Code widget
+ TotpSetupFormField.totpQrCode(),
+ const SizedBox(height: 20),
+ ],
+ const Text('Copy the key below into your Authenticator app'),
+ // TOTP copy key widget
+ TotpSetupFormField.totpCopyKey(),
+ const SizedBox(height: 20),
+ FilledButton(
+ onPressed: () => state.changeStep(
+ AuthenticatorStep.confirmSignInWithTotpMfaCode,
+ ),
+ child: const Text('Continue'),
+ ),
+ ],
+ ),
+ );
+ default:
+ // Returning null defaults to the prebuilt authenticator for all other steps
+ return null;
+ }
+ },
+ child: MaterialApp(
+ builder: Authenticator.builder(),
+ home: const Scaffold(
+ body: Center(
+ child: Text('You are logged in!'),
+ ),
+ ),
+ ),
+ );
+}
+```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx
index a234af0f6b5..786950846fb 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx
@@ -10,7 +10,7 @@ import {
} from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
import {SocialProviderDemo} from '@/components/SocialProviderDemo'
## Headers & Footers
@@ -28,9 +28,44 @@ The following example customizes these slots with:
- Custom Confirm Sign Up header with an _Enter Information_ header
- Custom Confirm Sign Up footer with a _Footer Information_ message
-
- {({ platform }) => import(`./headers-and-footers.${platform}.mdx`)}
-
+
+_app.component.ts_
+
+```ts{3,12}
+import { Component } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+import { AuthenticatorService } from '@aws-amplify/ui-angular';
+
+import awsExports from './aws-exports';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+})
+export class UseAuthenticatorComponent {
+ constructor(public authenticator: AuthenticatorService) {
+ Amplify.configure(awsExports);
+ }
+}
+
+```
+
+_app.component.html_
+
+```tsx{2,8,14,30,36,52,60,66,70} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html
+
+```
+
+
+```tsx{1,2,12,24,25,34,47,48,57,69,70,78,86} file=../../../../../../../examples/next/pages/ui/components/authenticator/custom-slots/index.page.tsx#L20-
+
+```
+
+
+```tsx{3,9,15,31,37,53,61,67} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/custom-slots/index.vue#L17-
+
+```
+
{({ platform }) => import(`./i18n/i18n.${platform}.mdx`)}
+```js
+import { I18n } from 'aws-amplify';
+import { translations } from '@aws-amplify/ui';
+I18n.putVocabularies(translations);
+I18n.setLanguage('fr');
+
+I18n.putVocabularies({
+ fr: {
+ 'Sign In': 'Se connecter',
+ 'Sign Up': "S'inscrire",
+ },
+ es: {
+ 'Sign In': 'Registrarse',
+ 'Sign Up': 'Regístrate',
+ },
+});
+```
The list of available keys are available [here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts).
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx
index 80ae2fb790d..4c6d1937c93 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx
@@ -1,4 +1,4 @@
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
import { Alert } from '@aws-amplify/ui-react';
The `Authenticator` ships with [translations](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/translations.ts) for:
@@ -24,7 +24,63 @@ The `Authenticator` ships with [translations](https://github.com/aws-amplify/amp
These [translations](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/translations.ts) can be customized using the [Amplify JS' `I18n`](https://docs.amplify.aws/lib/utilities/i18n/q/platform/js/) module:
-{({ platform }) => import(`./i18n/i18n.${platform}.mdx`)}
+
+```js
+import { I18n } from 'aws-amplify';
+import { translations } from '@aws-amplify/ui-angular';
+I18n.putVocabularies(translations);
+I18n.setLanguage('fr');
+
+I18n.putVocabularies({
+ fr: {
+ 'Sign In': 'Se connecter',
+ 'Sign Up': "S'inscrire",
+ },
+ es: {
+ 'Sign In': 'Registrarse',
+ 'Sign Up': 'Regístrate',
+ },
+});
+```
+
+
+```js
+import { I18n } from 'aws-amplify';
+import { translations } from '@aws-amplify/ui-react';
+I18n.putVocabularies(translations);
+I18n.setLanguage('fr');
+
+I18n.putVocabularies({
+ fr: {
+ 'Sign In': 'Se connecter',
+ 'Sign Up': "S'inscrire",
+ },
+ es: {
+ 'Sign In': 'Registrarse',
+ 'Sign Up': 'Regístrate',
+ },
+});
+```
+
+
+```js
+import { I18n } from 'aws-amplify';
+import { translations } from '@aws-amplify/ui-vue';
+I18n.putVocabularies(translations);
+I18n.setLanguage('fr');
+
+I18n.putVocabularies({
+ fr: {
+ 'Sign In': 'Se connecter',
+ 'Sign Up': "S'inscrire",
+ },
+ es: {
+ 'Sign In': 'Registrarse',
+ 'Sign Up': 'Regístrate',
+ },
+});
+```
+
The list of available keys are available [here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts).
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.react-native.mdx
index d70d27497ef..ec1501934df 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.react-native.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.react-native.mdx
@@ -1,4 +1,3 @@
-import { Fragment } from '@/components/Fragment';
import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/ui-react';
@@ -14,9 +13,9 @@ This would be overriden like so:
When overriding `signUp` you must include the `autoSignIn` key and set `enabled` to true, as show in the example below.
-
- {({ platform }) => import(`./overrides/username.${platform}.mdx`)}
-
+```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideServices/Example.tsx
+
+```
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx
index d70d27497ef..8f4bef3c196 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx
@@ -1,4 +1,4 @@
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/ui-react';
@@ -14,9 +14,132 @@ This would be overriden like so:
When overriding `signUp` you must include the `autoSignIn` key and set `enabled` to true, as show in the example below.
-
- {({ platform }) => import(`./overrides/username.${platform}.mdx`)}
-
+
+_app.component.html_
+
+```html{1}
+
+
+ Welcome, {{ user.username }}!
+ Sign Out
+
+
+
+```
+
+_app.component.ts_
+
+```js{14}
+import { Component, OnInit } from '@angular/core';
+import { Amplify, Auth } from 'aws-amplify';
+import awsExports from './aws-exports';
+
+@Component({
+ selector: 'sign-up-with-email',
+ templateUrl: 'sign-up-with-email.component.html',
+})
+export class SignUpWithEmailComponent implements OnInit {
+ constructor() {
+ Amplify.configure(awsExports);
+ }
+
+ services = {
+ async handleSignUp(formData: Record) {
+ let { username, password, attributes } = formData;
+ // custom username
+ username = username.toLowerCase();
+ attributes.email = attributes.email.toLowerCase();
+ return Auth.signUp({
+ username,
+ password,
+ attributes,
+ autoSignIn: {
+ enabled: true,
+ },
+ });
+ },
+ };
+
+```
+
+
+```jsx{8}
+import { Amplify, Auth } from 'aws-amplify';
+import { Authenticator } from '@aws-amplify/ui-react';
+import '@aws-amplify/ui-react/styles.css';
+import awsExports from './aws-exports';
+Amplify.configure(awsExports);
+
+export default function AuthenticatorWithEmail() {
+ const services = {
+ async handleSignUp(formData) {
+ let { username, password, attributes } = formData;
+ // custom username
+ username = username.toLowerCase();
+ attributes.email = attributes.email.toLowerCase();
+ return Auth.signUp({
+ username,
+ password,
+ attributes,
+ autoSignIn: {
+ enabled: true,
+ },
+ });
+ },
+ };
+
+ return (
+
+ {({ signOut }) => Sign out }
+
+ );
+}
+```
+
+
+```html
+
+
+
+
+
+ Hello {{ user.username }}!
+ Sign Out
+
+
+
+```
+
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.web.mdx
index 130fb15935d..4b9c3fd3568 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.web.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.web.mdx
@@ -2,7 +2,7 @@ import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react';
import { AuthStyle } from './AuthStyle';
import { Example } from '@/components/Example';
-import { Fragment } from '@/components/Fragment';
+import { InlineFilter } from '@/components/InlineFilter';
## Styling
@@ -32,9 +32,26 @@ The example below uses a `