feat(rna): add top level component slots (#3040)

Author: calebpollman

examples/react-native/src/App/App.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
 // import Example from '../features/Authenticator/Demo/Example';
-import Example from '../features/Authenticator/Styles/Example';
+import Example from '../features/Authenticator/Slots/Example';
+// import Example from '../features/Authenticator/Styles/Example';
+
 // import { Demo as InAppDemo } from '../features/InAppMessaging';
 
 const App = () => {

examples/react-native/src/features/Authenticator/Slots/Example.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import {
+  Authenticator,
+  useAuthenticator,
+  useTheme,
+} from '@aws-amplify/ui-react-native';
+import { Amplify } from 'aws-amplify';
+
+import { Button } from '../../../ui';
+
+Amplify.configure({});
+
+const MyHeader = () => {
+  const {
+    tokens: { space, fontSizes },
+  } = useTheme();
+  return (
+    <View>
+      <Text style={{ fontSize: fontSizes.xxxl, padding: space.xl }}>
+        My Header
+      </Text>
+    </View>
+  );
+};
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button onPress={signOut}>Sign Out</Button>;
+}
+
+function App() {
+  const {
+    tokens: { colors },
+  } = useTheme();
+
+  return (
+    <Authenticator.Provider>
+      <Authenticator
+        Container={(props) => (
+          <Authenticator.Container
+            {...props}
+            style={{ backgroundColor: colors.pink[20] }}
+          />
+        )}
+        Header={MyHeader}
+      >
+        <View style={style.container}>
+          <SignOutButton />
+        </View>
+      </Authenticator>
+    </Authenticator.Provider>
+  );
+}
+
+const style = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+
+export default App;

packages/react-native/src/Authenticator/Authenticator.tsx

@@ -53,6 +53,9 @@ const routePropSelector = ({
 function Authenticator({
   children,
   components: overrides,
+  Container = DefaultContainer,
+  Footer,
+  Header,
   ...options
 }: AuthenticatorProps): JSX.Element | null {
   useAuthenticatorInitMachine(options);
@@ -75,16 +78,19 @@ function Authenticator({
 
   return (
     <SafeAreaProvider>
-      <DefaultContainer>
+      <Container>
+        {Header ? <Header /> : null}
         <InnerContainer>
           <Component {...props} fields={typedFields} />
         </InnerContainer>
-      </DefaultContainer>
+        {Footer ? <Footer /> : null}
+      </Container>
     </SafeAreaProvider>
   );
 }
 
 // assign slot components
+Authenticator.Container = DefaultContainer;
 Authenticator.Provider = Provider;
 Authenticator.ConfirmResetPassword = ConfirmResetPassword;
 Authenticator.ConfirmSignIn = ConfirmSignIn;

packages/react-native/src/Authenticator/__tests__/Authenticator.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { render } from '@testing-library/react-native';
 
 import * as UIReactCoreModule from '@aws-amplify/ui-react-core';
@@ -10,18 +10,35 @@ import {
 
 import { Authenticator } from '..';
 
+jest.mock('aws-amplify');
 jest.mock('@aws-amplify/ui-react-core');
 
 const CHILD_TEST_ID = 'child-test-id';
 const CHILD_CONTENT = 'Test Children';
 
+const CONTAINER_TEST_ID = 'container-test-id';
+const FOOTER_TEST_ID = 'footer-test-id';
+const HEADER_TEST_ID = 'header-test-id';
+
 function TestChildren() {
   return <Text testID={CHILD_TEST_ID}>{CHILD_CONTENT}</Text>;
 }
 const TestComponent = () => {
   return null;
 };
 
+function Container({ children }: { children: React.ReactNode }) {
+  return <View testID={CONTAINER_TEST_ID}>{children}</View>;
+}
+
+function Footer() {
+  return <View testID={FOOTER_TEST_ID} />;
+}
+
+function Header() {
+  return <View testID={HEADER_TEST_ID} />;
+}
+
 const useAuthenticatorInitMachineSpy = jest.spyOn(
   UIReactCoreModule,
   'useAuthenticatorInitMachine'
@@ -98,4 +115,20 @@ describe('Authenticator', () => {
       expect(container.instance).toBeNull();
     }
   );
+
+  it('renders with custom slot components as expected', () => {
+    useAuthenticatorSpy.mockReturnValueOnce({
+      route: 'signIn',
+    } as unknown as UseAuthenticator);
+
+    const { getByTestId, toJSON } = render(
+      <Authenticator Container={Container} Footer={Footer} Header={Header} />
+    );
+
+    expect(getByTestId(CONTAINER_TEST_ID)).toBeDefined();
+    expect(getByTestId(FOOTER_TEST_ID)).toBeDefined();
+    expect(getByTestId(HEADER_TEST_ID)).toBeDefined();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

packages/react-native/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap

@@ -74,3 +74,25 @@ exports[`Authenticator handles the signOut route as expected with children 1`] =
   Test Children
 </Text>
 `;
+
+exports[`Authenticator renders with custom slot components as expected 1`] = `
+<SafeAreaProvider>
+  <View
+    testID="container-test-id"
+  >
+    <View
+      testID="header-test-id"
+    />
+    <View
+      style={
+        Object {
+          "marginHorizontal": 16,
+        }
+      }
+    />
+    <View
+      testID="footer-test-id"
+    />
+  </View>
+</SafeAreaProvider>
+`;

packages/react-native/src/Authenticator/common/DefaultContainer/index.ts

@@ -1,2 +1,3 @@
 export { default as DefaultContainer } from './DefaultContainer';
 export { default as InnerContainer } from './InnerContainer';
+export { DefaultContainerComponent } from './types';

packages/react-native/src/Authenticator/common/DefaultContainer/types.ts

@@ -15,6 +15,7 @@ export interface ContainerStyles {
 export interface ContainerProps
   extends ScrollViewProps,
     Pick<KeyboardAvoidingViewProps, 'behavior' | 'keyboardVerticalOffset'> {
+  children: React.ReactNode;
   keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
   scrollViewContentContainerStyle?: StyleProp<ViewStyle>;
 }

packages/react-native/src/Authenticator/types.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 
+import { DefaultContainerComponent } from './common';
 import { Components } from './Defaults';
 
 type SupportedAuthenticatorMachineOptions = Omit<
@@ -16,6 +17,9 @@ type SupportedAuthenticatorMachineOptions = Omit<
 export interface AuthenticatorProps
   extends SupportedAuthenticatorMachineOptions {
   children?: React.ReactNode;
+  Container?: DefaultContainerComponent;
+  Footer?: React.ComponentType;
+  Header?: React.ComponentType;
   components?: Components;
 }