chore(docs): Add RNA pages to docs site (#3041)

Co-authored-by: Joe Buono <[email protected]>
Co-authored-by: Caleb Pollman <[email protected]>
Co-authored-by: Sreeram Sama <[email protected]>
Co-authored-by: William Lee <[email protected]>
Co-authored-by: MJ Zhang <[email protected]>
Co-authored-by: 0618 <[email protected]>
Co-authored-by: Danny Banks <[email protected]>

Author: 8 people

.gitignore

@@ -5,7 +5,13 @@
 node_modules
 aws-exports.js
 aws-exports.ts
-!examples/**/aws-exports.js
+
+# We have mock exports in the following locations
+!examples/angular/src/pages/ui/components/*/*/aws-exports.js
+!examples/next/pages/ui/components/*/*/aws-exports.js
+!examples/vue/src/pages/ui/components/*/*/aws-exports.js
+!examples/react-native/src/features/*/*/aws-exports.js
+
 # .npmrc is used in our deployment procedure to login to npm. Ignored for security.
 .npmrc
 # used by turbo for logs

docs/src/components/Layout/Sidebar.tsx

@@ -184,19 +184,16 @@ const SecondaryNav = (props) => {
         ))}
       </ExpanderItem>
 
-      {/* React Native does not yet support theming */}
-      {isReactNative ? null : (
-        <ExpanderItem
-          title={<ExpanderTitle Icon={MdOutlineAutoAwesome} text="Theming" />}
-          value="theming"
-        >
-          {theming.map(({ label, ...rest }) => (
-            <NavLink key={label} {...rest} onClick={props.onClick}>
-              {label}
-            </NavLink>
-          ))}
-        </ExpanderItem>
-      )}
+      <ExpanderItem
+        title={<ExpanderTitle Icon={MdOutlineAutoAwesome} text="Theming" />}
+        value="theming"
+      >
+        {theming.map(({ label, ...rest }) => (
+          <NavLink key={label} {...rest} onClick={props.onClick}>
+            {label}
+          </NavLink>
+        ))}
+      </ExpanderItem>
 
       {/* Flutter and React Native don't have guides at this time */}
       {isFlutter || isReactNative ? null : (

docs/src/components/home/sections/AuthenticationSection.tsx

@@ -99,20 +99,48 @@ export default function App() {
     );
   }
 }`,
+  'react-native': `import React from 'react';
+import { Button } from 'react-native';
+
+import { Amplify } from 'aws-amplify';
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
+
+import awsExports from './aws-exports';
+Amplify.configure(awsExports);
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button title="Sign Out" onPress={signOut} />;
+}
+
+function App() {
+  return (
+    <Authenticator.Provider>
+      <Authenticator>
+        <SignOutButton />
+      </Authenticator>
+    </Authenticator.Provider>
+  );
+}
+
+export default App;
+`,
 };
 
 const languages = {
   react: 'jsx',
   angular: 'javascript', // is this the best primsa language?
   vue: 'javascript',
   flutter: 'dart',
+  'react-native': 'jsx',
 };
 
 const fileName = {
   react: 'index.tsx',
   angular: 'index.html',
   vue: 'index.vue',
   flutter: 'main.dart',
+  'react-native': 'App.jsx',
 };
 
 export const AuthenticationSection = ({ platform }) => {
@@ -172,7 +200,7 @@ export const AuthenticationSection = ({ platform }) => {
             <View flex="1">
               <FlutterAuthenticatorExample id="flutter-authenticator-home" />
             </View>
-          ) : (
+          ) : platform === 'react-native' ? null : (
             <BrowserMock flex="1" location="https://localhost">
               <Authenticator />
             </BrowserMock>

docs/src/components/home/sections/CompatibleSection.tsx

@@ -46,11 +46,14 @@ export const CompatibleSection = ({ platform }) => {
             UI-less, implementations that handle complex state management and
             leave the UI up to you.
           </HomeFeatureCard>
-          <HomeFeatureCard icon={MdOutlineFlashOff} title="Styling optional">
-            Don&lsquo;t like our style? Throw it out and use your own! Amplify
-            UI components use plain CSS so you have complete control over the
-            styling.
-          </HomeFeatureCard>
+          {platform === 'react-native' ? null : (
+            <HomeFeatureCard icon={MdOutlineFlashOff} title="Styling optional">
+              Don&lsquo;t like our style? Throw it out and use your own! Amplify
+              UI components use plain CSS so you have complete control over the
+              styling.
+            </HomeFeatureCard>
+          )}
+
           <HomeFeatureCard
             icon={SiTypescript}
             title="TypeScript & IntelliSense"

docs/src/data/frameworks.ts

@@ -24,7 +24,7 @@ export const FRAMEWORK_DISPLAY_NAMES: Record<Framework, string> = {
 
 // React Native requires direct installation of dependencies with native modules
 export const REACT_NATIVE_DEPENDENCIES =
-  'react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill';
+  'react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill';
 
 export const FRAMEWORK_INSTALL_SCRIPTS = {
   react: 'npm i @aws-amplify/ui-react aws-amplify',

docs/src/data/links.tsx

@@ -108,24 +108,24 @@ export const connectedComponents: ComponentNavItem[] = [
     href: '/connected-components/authenticator',
     label: 'Authenticator',
     body: 'The Authenticator component adds complete authentication flows to your application with minimal boilerplate.',
-    platforms: ['react', 'vue', 'angular', 'flutter'],
+    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
   },
   {
     href: '/connected-components/authenticator/configuration',
     label: 'Configuration',
-    platforms: ['react', 'vue', 'angular', 'flutter'],
+    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
     tertiary: true,
   },
   {
     href: '/connected-components/authenticator/customization',
     label: 'Customization',
-    platforms: ['react', 'vue', 'angular', 'flutter'],
+    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
     tertiary: true,
   },
   {
     href: '/connected-components/authenticator/headless',
     label: 'Headless Usage',
-    platforms: ['react', 'vue', 'angular'],
+    platforms: ['react', 'vue', 'angular', 'react-native'],
     tertiary: true,
   },
   {
@@ -497,7 +497,7 @@ export const theming: ComponentNavItem[] = [
   {
     href: '/theming',
     label: 'Overview',
-    platforms: ['react', 'vue', 'angular', 'flutter'],
+    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
   },
   {
     href: '/theming/responsive',
@@ -530,7 +530,7 @@ export const theming: ComponentNavItem[] = [
   {
     href: '/theming/dark-mode',
     label: 'Dark mode',
-    platforms: ['react', 'vue', 'angular', 'flutter'],
+    platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'],
   },
   {
     href: '/theming/css-variables',

docs/src/pages/[platform]/connected-components/authenticator/DeveloperPreview.tsx

@@ -0,0 +1,15 @@
+import { Alert } from '@aws-amplify/ui-react';
+import { useRouter } from 'next/router';
+
+export const DeveloperPreview = () => {
+  const {
+    query: { platform = 'react' },
+  } = useRouter();
+  if (platform !== 'react-native') return null;
+
+  return (
+    <Alert variation="info" heading="Developer Preview">
+      The React Native Authenticator is currently in developer preview.
+    </Alert>
+  );
+};

docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.default.react-native.mdx

@@ -0,0 +1,2 @@
+```jsx{19} file=../../../../../../../examples/react-native/src/features/Authenticator/HideSignUp/Example.tsx
+```

docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx

@@ -0,0 +1,11 @@
+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.
+
+<Fragment>
+  {({ platform }) => import(`./hidesignup.default.${platform}.mdx`)}
+</Fragment>

docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx

@@ -2,13 +2,14 @@
 title: Configuration
 metaTitle: Configuration
 description: How to setup and configure your Authenticator component.
-supportedFrameworks: react|angular|vue|flutter
+supportedFrameworks: all
 ---
 
 import { Fragment } from '@/components/Fragment';
 import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
 import { FRAMEWORKS } from '@/data/frameworks';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+import { DeveloperPreview } from '../DeveloperPreview';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -20,6 +21,8 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
+<DeveloperPreview />
+
 <Alert role="none" heading="Wait!">
   Did you follow the [quick start instructions](/connected-components/authenticator#quick-start) to set up the Authenticator first?
 </Alert>
@@ -33,7 +36,7 @@ By default, unauthenticated users are redirected to the Sign In flow. You can ex
     <Fragment>
       {({ platform }) => import(`./initialState.signIn.${platform}.mdx`)}
     </Fragment>
-    <Fragment useCommonWebContent>
+    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
       {({ platform }) =>
         import(`./initialState.signIn.example.${platform}.mdx`)
       }
@@ -43,7 +46,7 @@ By default, unauthenticated users are redirected to the Sign In flow. You can ex
     <Fragment>
       {({ platform }) => import(`./initialState.signUp.${platform}.mdx`)}
     </Fragment>
-    <Fragment useCommonWebContent>
+    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
       {({ platform }) =>
         import(`./initialState.signUp.example.${platform}.mdx`)
       }
@@ -53,7 +56,7 @@ By default, unauthenticated users are redirected to the Sign In flow. You can ex
     <Fragment>
       {({ platform }) => import(`./initialState.resetPassword.${platform}.mdx`)}
     </Fragment>
-    <Fragment useCommonWebContent>
+    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
       {({ platform }) =>
         import(`./initialState.resetPassword.example.${platform}.mdx`)
       }
@@ -86,7 +89,7 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an
     <Fragment>
       {({ platform }) => import(`./signUpAttributes.default.${platform}.mdx`)}
     </Fragment>
-    <Fragment useCommonWebContent>
+    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
       {({ platform }) =>
         import(`./signUpAttributes.default.example.${platform}.mdx`)
       }
@@ -96,24 +99,22 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an
     <Fragment>
       {({ platform }) => import(`./signUpAttributes.all.${platform}.mdx`)}
     </Fragment>
-    <Fragment useCommonWebContent>
+    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
       {({ platform }) =>
         import(`./signUpAttributes.all.example.${platform}.mdx`)
       }
     </Fragment>
   </TabItem>
 </Tabs>
 
-## Social Providers
-
-<Fragment useCommonWebContent>
+<Fragment useCommonWebContent platforms={['web', 'flutter']}>
   {({ platform }) => import(`./socialProviders.${platform}.mdx`)}
 </Fragment>
 
 <Fragment useCommonWebContent platforms={['web']}>
   {({ platform }) => import(`./variation.${platform}.mdx`)}
 </Fragment>
 
-<Fragment useCommonWebContent platforms={['web']}>
+<Fragment useCommonWebContent platforms={['web', 'react-native']}>
   {({ platform }) => import(`./hidesignup.${platform}.mdx`)}
 </Fragment>