Next release/auto sign in yarn lock

.github/changeset-presets/bump-react.md

@@ -1,7 +1,8 @@
 ---
 '@aws-amplify/ui': patch
-'@aws-amplify/ui-react': patch
+'@aws-amplify/ui-react': minor
 '@aws-amplify/ui-react-core': patch
+'@aws-amplify/ui-react-native': major
 ---
 
-Version bump for ui, ui-react and ui-react-core packages
+Version bump for ui, ui-react, ui-react-native and ui-react-core packages

.github/workflows/reusable-e2e.yml

@@ -112,6 +112,7 @@ jobs:
           - angular
           - vue
           - react
+          - react-native
           - react-core
 
     steps:

examples/README.md

@@ -4,12 +4,12 @@ This directory contains example apps for each framework we support.
 
 ## Examples Development
 
-1. Create or Update an example at [`examples/{next,vue,angular}/...`](examples)
+1. Create or Update an example at [`examples/{next,react-native,vue,angular}/...`](examples)
 
    For your `aws-exports.js`, you can [reference an existing or create a new environment](../environments/README.md).
 
-1. Run your example at monorep root: `yarn {react,vue,angular}-example dev`
+1. Run your example at monorep root: `yarn {react,react-native,vue,angular}-example dev`
 1. Visit your example (e.g. <http://localhost:3000/ui/components/authenticator/sign-up-with-username>)
-1. Make changes to [`@aws-amplify/ui-{react,vue,angular}`](packages) & save.
+1. Make changes to [`@aws-amplify/ui-{react,react-native,vue,angular}`](packages) & save.
 
    Examples should automatically hot-reload your changes in the example.

examples/next/pages/ui/components/in-app-messaging/demo/aws-exports.js

@@ -0,0 +1,8 @@
+// This is a temporary amplify exports file.
+// You must supply the config from your own in-app env.
+// The Demo app will still function without values below,
+// but will throw warnings on some displayMessage calls
+
+const awsmobile = {};
+
+export default awsmobile;

examples/next/pages/ui/components/in-app-messaging/demo/index.page.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { Amplify } from 'aws-amplify';
+import {
+  Button,
+  defaultDarkModeOverride,
+  ColorMode,
+  Divider,
+  Heading,
+  InAppMessageDisplay,
+  InAppMessagingProvider,
+  CheckboxField,
+  View,
+  Radio,
+  RadioGroupField,
+  ThemeProvider,
+  useTheme,
+} from '@aws-amplify/ui-react';
+import '@aws-amplify/ui-react/styles.css';
+
+import config from './aws-exports';
+import { ACTIONS, LAYOUTS, ORIENTATIONS, useInAppDemo } from './utils';
+
+Amplify.configure(config);
+
+function DemoCheckbox({ label, onChange, ...rest }) {
+  return (
+    <CheckboxField
+      {...rest}
+      label={label}
+      name={label}
+      onChange={() => {
+        onChange((prev) => !prev);
+      }}
+      value=""
+    />
+  );
+}
+
+function DemoDivider() {
+  return (
+    <Divider marginBottom="small" marginTop="small" orientation="horizontal" />
+  );
+}
+
+function DemoRadioGroup({ data, label, onChange, ...rest }) {
+  return (
+    <RadioGroupField
+      {...rest}
+      label={label}
+      name={label}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    >
+      {data.map((item) => (
+        <Radio key={`${label}:${item}`} value={item}>
+          {item}
+        </Radio>
+      ))}
+    </RadioGroupField>
+  );
+}
+
+function Content({ colorMode, setColorMode }) {
+  const theme = useTheme();
+
+  const {
+    displayDemoMessage,
+    handleAction,
+    hasHeader,
+    hasImage,
+    hasMessage,
+    hasPrimaryButton,
+    hasSecondaryButton,
+    imageOrientation,
+    layout,
+    primaryButtonAction,
+    secondaryButtonAction,
+  } = useInAppDemo();
+
+  return (
+    <View backgroundColor={theme.tokens.colors.background.primary}>
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Heading level={5} margin="medium">
+          Configure Demo Message
+        </Heading>
+        <DemoRadioGroup
+          data={['dark', 'light']}
+          direction="row"
+          label="Color Mode"
+          marginBottom="medium"
+          onChange={setColorMode}
+          value={colorMode}
+        />
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <View marginLeft="small" marginRight="small">
+            <DemoRadioGroup
+              data={LAYOUTS}
+              label="Layout"
+              onChange={handleAction('setLayout')}
+              value={layout}
+            />
+            <DemoDivider />
+            <DemoCheckbox
+              checked={hasHeader}
+              label="Has Header"
+              onChange={handleAction('setHasHeader')}
+            />
+            <DemoDivider />
+            <DemoCheckbox
+              checked={hasMessage}
+              label="Has Message"
+              onChange={handleAction('setHasMessage')}
+            />
+            <DemoDivider />
+            <DemoCheckbox
+              checked={hasImage}
+              label="Has Image"
+              onChange={handleAction('setHasImage')}
+            />
+            <DemoDivider />
+            <DemoRadioGroup
+              data={ORIENTATIONS}
+              isDisabled={!hasImage}
+              label="Image Orientation"
+              onChange={handleAction('setImageOrientation')}
+              value={imageOrientation}
+            />
+          </View>
+          <View marginLeft="small" marginRight="small">
+            <DemoCheckbox
+              checked={hasPrimaryButton}
+              label="Has Primary Button"
+              onChange={handleAction('setHasPrimaryButton')}
+            />
+            <DemoDivider />
+            <DemoRadioGroup
+              data={ACTIONS}
+              isDisabled={!hasPrimaryButton}
+              label="Primary Button Action"
+              onChange={handleAction('setPrimaryButtonAction')}
+              value={primaryButtonAction}
+            />
+            <DemoDivider />
+            <DemoCheckbox
+              checked={hasSecondaryButton}
+              isDisabled={!hasPrimaryButton}
+              label="Has Secondary Button"
+              onChange={handleAction('setHasSecondaryButton')}
+            />
+            <DemoDivider />
+            <DemoRadioGroup
+              data={ACTIONS}
+              isDisabled={!hasPrimaryButton || !hasSecondaryButton}
+              label="Secondary Button Action"
+              onChange={handleAction('setSecondaryButtonAction')}
+              value={secondaryButtonAction}
+            />
+            <DemoDivider />
+          </View>
+        </div>
+        <Button margin="medium" onClick={displayDemoMessage}>
+          Display Demo Message
+        </Button>
+      </div>
+    </View>
+  );
+}
+
+export default function App() {
+  const [colorMode, setColorMode] = useState<ColorMode>('dark');
+  return (
+    <ThemeProvider
+      colorMode={colorMode}
+      theme={{ overrides: [defaultDarkModeOverride], name: 'dark' }}
+    >
+      <InAppMessagingProvider>
+        <InAppMessageDisplay />
+        <Content colorMode={colorMode} setColorMode={setColorMode} />
+      </InAppMessagingProvider>
+    </ThemeProvider>
+  );
+}