@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/dist/theme/createTheme.js

@@ -0,0 +1,105 @@
+import deepExtend from 'style-dictionary/lib/utils/deepExtend';
+import resolveObject from 'style-dictionary/lib/utils/resolveObject';
+import usesReference from 'style-dictionary/lib/utils/references/usesReference';
+import { setupTokens } from '@aws-amplify/ui';
+import { defaultTheme } from './defaultTheme';
+// This will resolve all references in component themes by either
+// calling the component theme function with the already resolved base tokens
+// OR
+// resolving the component theme object
+const setupComponents = (theme) => {
+    const output = {};
+    if (theme.components) {
+        const { components } = theme;
+        for (const [key, value] of Object.entries(components)) {
+            if (typeof value === 'function') {
+                output[key] = value(theme.tokens);
+            }
+            else {
+                output[key] = value;
+            }
+        }
+    }
+    return resolveObject({
+        ...theme.tokens,
+        components: output,
+    }).components;
+};
+const setupToken = ({ token, path = [], spaceModifier, }) => {
+    const { value } = token;
+    if (typeof value === 'string') {
+        // Perform transforms
+        if (path[0] === 'space') {
+            if (value.includes('rem')) {
+                return Math.floor(parseFloat(value) * 16 * spaceModifier);
+            }
+        }
+        if (value.includes('rem')) {
+            return Math.floor(parseFloat(value) * 16);
+        }
+        if (value.includes('px')) {
+            return parseInt(value, 10);
+        }
+        if (path[0] === 'opacities') {
+            return parseFloat(value);
+        }
+        // Remove .value from references if there is a reference
+        if (usesReference(value)) {
+            return value.replace('.value', '');
+        }
+        return value;
+    }
+    // Font Weights in RN are strings
+    if (path[0] === 'fontWeights') {
+        return `${value}`;
+    }
+    return value;
+};
+/**
+ * This will be used like `const myTheme = createTheme({})`
+ * `myTheme` can then be passed to a Provider
+ * const myTheme = createTheme({})
+ * const myOtherTheme = createTheme({}, myTheme);
+ */
+export const createTheme = (theme, colorMode) => {
+    // merge custom `theme` param and `StrictTheme` to get the merged theme.
+    // `deepExtend` is a Style Dictionary method that performs a deep merge on n objects.
+    const mergedTheme = deepExtend([
+        {},
+        defaultTheme,
+        theme,
+        // cast to `StrictTheme` as `deepExtend` returns a generic object
+    ]);
+    let { tokens: mergedTokens } = mergedTheme;
+    const { spaceModifier = 1 } = mergedTheme;
+    // We need to merge in any applicable overrides because we need to
+    // resolve the values of all tokens at runtime based on which
+    // overrides are present and should be applied
+    if (theme?.overrides?.length) {
+        theme.overrides.forEach((override) => {
+            if (override?.colorMode === colorMode) {
+                mergedTokens = deepExtend([
+                    {},
+                    mergedTokens,
+                    override.tokens,
+                ]);
+            }
+            // more overrides in the future could happen here
+        });
+    }
+    // Setup the tokens:
+    // - each token will have a raw value
+    // - references to tokens (strings wrapped in curly braces) are replaced by raw values
+    const tokens = resolveObject(setupTokens({
+        tokens: mergedTokens,
+        setupToken: ({ token, path }) => {
+            return setupToken({ token, path, spaceModifier });
+        },
+    }));
+    let { components } = mergedTheme;
+    // Resolve component token references too
+    if (mergedTheme.components) {
+        components = setupComponents({ ...mergedTheme, tokens });
+    }
+    return { ...mergedTheme, tokens, components };
+};

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,3 @@
+import { DefaultTheme, Override } from './types';
+export declare const defaultTheme: DefaultTheme;
+export declare const defaultDarkModeOverride: Override;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,8 @@
+import { reactNativeDarkTokens, reactNativeTokens } from '@aws-amplify/ui';
+export const defaultTheme = {
+    tokens: reactNativeTokens,
+};
+export const defaultDarkModeOverride = {
+    colorMode: 'dark',
+    tokens: reactNativeDarkTokens,
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { createTheme } from './createTheme';
+export * from './types';
+export { useTheme } from './useTheme';
+export { ThemeProvider } from './ThemeProvider';
+export * from './defaultTheme';

package/dist/theme/index.js

@@ -0,0 +1,5 @@
+export { createTheme } from './createTheme';
+export * from './types';
+export { useTheme } from './useTheme';
+export { ThemeProvider } from './ThemeProvider';
+export * from './defaultTheme';

package/dist/theme/types.d.ts

@@ -0,0 +1,63 @@
+import { ReactNativeTokens } from '@aws-amplify/ui';
+import { ButtonStyles, CheckboxStyles, DividerStyles, ErrorMessageStyles, HeadingStyles, IconStyles, IconButtonStyles, LabelStyles, PasswordFieldStyles, PhoneNumberFieldStyles, RadioStyles, RadioGroupStyles, TabsStyles, TextFieldStyles } from '../primitives';
+declare type ComponentTheme<ComponentType, Output> = Output extends 'output' ? ComponentType : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
+export declare type Components<Output> = Record<string, object> & {
+    button?: ComponentTheme<ButtonStyles, Output>;
+    checkbox?: ComponentTheme<CheckboxStyles, Output>;
+    divider?: ComponentTheme<DividerStyles, Output>;
+    errorMessage?: ComponentTheme<ErrorMessageStyles, Output>;
+    heading?: ComponentTheme<HeadingStyles, Output>;
+    icon?: ComponentTheme<IconStyles, Output>;
+    iconButton?: ComponentTheme<IconButtonStyles, Output>;
+    label?: ComponentTheme<LabelStyles, Output>;
+    passwordField?: ComponentTheme<PasswordFieldStyles, Output>;
+    phoneNumberField?: ComponentTheme<PhoneNumberFieldStyles, Output>;
+    radio?: ComponentTheme<RadioStyles, Output>;
+    radioGroup?: ComponentTheme<RadioGroupStyles, Output>;
+    tabs?: ComponentTheme<TabsStyles, Output>;
+    textField?: ComponentTheme<TextFieldStyles, Output>;
+};
+export declare type ColorMode = 'light' | 'dark' | 'system' | null;
+export declare type Override = Omit<Theme, 'overrides'> & {
+    colorMode?: ColorMode;
+};
+export declare type StrictTokens = ReactNativeTokens<'required'>;
+export declare type Tokens = ReactNativeTokens<'optional'>;
+declare type OmittedComponents = 'checkbox' | 'divider' | 'tabs';
+/**
+ * A custom Theme with all properties optional.
+ */
+export interface Theme {
+    /**
+     * Custom component styles
+     */
+    components?: Omit<Components<'input'>, OmittedComponents>;
+    /**
+     * Component and component agnostic tokens.
+     */
+    tokens?: Tokens;
+    /**
+     * Overrides allows switching between design tokens in different contexts,
+     * like light and dark mode.
+     */
+    overrides?: Override[];
+    spaceModifier?: number;
+}
+export interface DefaultTheme {
+    tokens: ReactNativeTokens<'default'>;
+}
+/**
+ * Fully built theme that has styling based
+ * on the design tokens and all design tokens have added fields
+ * to be used in Javascript/Typescript.
+ *
+ * `components` remains an optional property, it is only populated
+ * via custom themes.
+ */
+export interface StrictTheme {
+    tokens: StrictTokens;
+    components?: Components<'output'>;
+    overrides?: Override[];
+    spaceModifier?: number;
+}
+export {};

package/dist/theme/types.js

@@ -0,0 +1 @@
+export {};

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { StrictTheme } from './types';
+export declare const useTheme: () => StrictTheme;

package/dist/theme/useTheme.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ThemeContext } from './ThemeContext';
+export const useTheme = () => {
+    const context = React.useContext(ThemeContext);
+    return context.theme;
+};

package/dist/utils/font.d.ts

@@ -0,0 +1 @@
+export declare const getLineHeight: (fontSize: number) => number;

package/dist/utils/font.js

@@ -0,0 +1,4 @@
+// as a safeguard against known React Native lineHeight issues, e.g. https://github.com/facebook/react-native/issues/29507
+// use a value of 1.5 as the default line height multiplier
+const LINE_HEIGHT_MULTIPLIER = 1.5;
+export const getLineHeight = (fontSize) => fontSize * LINE_HEIGHT_MULTIPLIER;

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
-export declare const getLineHeight: (fontSize: number) => number;
-export declare function capitalize<T extends string>(value: T): Capitalize<T>;
+export { getLineHeight } from './font';
+export { default as platform } from './platform';
+export { capitalize } from './utils';

package/dist/utils/index.js

@@ -1,7 +1,3 @@
-// as a safeguard against known React Native lineHeight issues, e.g. https://github.com/facebook/react-native/issues/29507
-// use a value of 1.5 as the default line height multiplier
-const LINE_HEIGHT_MULTIPLIER = 1.5;
-export const getLineHeight = (fontSize) => fontSize * LINE_HEIGHT_MULTIPLIER;
-export function capitalize(value) {
-    return (value.charAt(0).toUpperCase() + value.slice(1));
-}
+export { getLineHeight } from './font';
+export { default as platform } from './platform';
+export { capitalize } from './utils';

package/dist/utils/platform.d.ts

@@ -0,0 +1,193 @@
+declare const _default: {
+    IS_ANDROID: boolean;
+    IS_IOS: boolean;
+    PLATFORM_TOUCH_TARGET: number | undefined;
+    constants: import("react-native").PlatformConstants & {
+        forceTouchAvailable: boolean;
+        interfaceIdiom: string;
+        osVersion: string;
+        systemName: string;
+    };
+    OS: "ios";
+    isPad: boolean;
+    isTVOS: boolean;
+    Version: string;
+    isTV: boolean;
+    isTesting: boolean;
+    select<T>(specifics: ({
+        ios?: T | undefined;
+        android?: T | undefined;
+        windows?: T | undefined;
+        macos?: T | undefined;
+        web?: T | undefined;
+        native?: T | undefined;
+    } & {
+        default: T;
+    }) | {
+        ios: T;
+        android: T;
+        windows: T;
+        macos: T;
+        web: T;
+        native: T;
+    }): T;
+    select<T_1>(specifics: {
+        ios?: T_1 | undefined;
+        android?: T_1 | undefined;
+        windows?: T_1 | undefined;
+        macos?: T_1 | undefined;
+        web?: T_1 | undefined;
+        native?: T_1 | undefined;
+    }): T_1 | undefined;
+} | {
+    IS_ANDROID: boolean;
+    IS_IOS: boolean;
+    PLATFORM_TOUCH_TARGET: number | undefined;
+    constants: import("react-native").PlatformConstants & {
+        Version: number;
+        Release: string;
+        Serial: string;
+        Fingerprint: string;
+        Model: string;
+        Brand: string;
+        Manufacturer: string;
+        ServerHost?: string | undefined;
+        uiMode: "normal" | "car" | "desk" | "tv" | "watch" | "unknown";
+    };
+    OS: "android";
+    Version: number;
+    isTV: boolean;
+    isTesting: boolean;
+    select<T>(specifics: ({
+        ios?: T | undefined;
+        android?: T | undefined;
+        windows?: T | undefined;
+        macos?: T | undefined;
+        web?: T | undefined;
+        native?: T | undefined;
+    } & {
+        default: T;
+    }) | {
+        ios: T;
+        android: T;
+        windows: T;
+        macos: T;
+        web: T;
+        native: T;
+    }): T;
+    select<T_1>(specifics: {
+        ios?: T_1 | undefined;
+        android?: T_1 | undefined;
+        windows?: T_1 | undefined;
+        macos?: T_1 | undefined;
+        web?: T_1 | undefined;
+        native?: T_1 | undefined;
+    }): T_1 | undefined;
+} | {
+    IS_ANDROID: boolean;
+    IS_IOS: boolean;
+    PLATFORM_TOUCH_TARGET: number | undefined;
+    OS: "windows";
+    Version: number;
+    constants: import("react-native").PlatformConstants & {
+        osVersion: number;
+    };
+    isTV: boolean;
+    isTesting: boolean;
+    select<T>(specifics: ({
+        ios?: T | undefined;
+        android?: T | undefined;
+        windows?: T | undefined;
+        macos?: T | undefined;
+        web?: T | undefined;
+        native?: T | undefined;
+    } & {
+        default: T;
+    }) | {
+        ios: T;
+        android: T;
+        windows: T;
+        macos: T;
+        web: T;
+        native: T;
+    }): T;
+    select<T_1>(specifics: {
+        ios?: T_1 | undefined;
+        android?: T_1 | undefined;
+        windows?: T_1 | undefined;
+        macos?: T_1 | undefined;
+        web?: T_1 | undefined;
+        native?: T_1 | undefined;
+    }): T_1 | undefined;
+} | {
+    IS_ANDROID: boolean;
+    IS_IOS: boolean;
+    PLATFORM_TOUCH_TARGET: number | undefined;
+    OS: "macos";
+    Version: string;
+    constants: import("react-native").PlatformConstants & {
+        osVersion: string;
+    };
+    isTV: boolean;
+    isTesting: boolean;
+    select<T>(specifics: ({
+        ios?: T | undefined;
+        android?: T | undefined;
+        windows?: T | undefined;
+        macos?: T | undefined;
+        web?: T | undefined;
+        native?: T | undefined;
+    } & {
+        default: T;
+    }) | {
+        ios: T;
+        android: T;
+        windows: T;
+        macos: T;
+        web: T;
+        native: T;
+    }): T;
+    select<T_1>(specifics: {
+        ios?: T_1 | undefined;
+        android?: T_1 | undefined;
+        windows?: T_1 | undefined;
+        macos?: T_1 | undefined;
+        web?: T_1 | undefined;
+        native?: T_1 | undefined;
+    }): T_1 | undefined;
+} | {
+    IS_ANDROID: boolean;
+    IS_IOS: boolean;
+    PLATFORM_TOUCH_TARGET: number | undefined;
+    OS: "web";
+    isTV: boolean;
+    isTesting: boolean;
+    Version: string | number;
+    constants: import("react-native").PlatformConstants;
+    select<T>(specifics: ({
+        ios?: T | undefined;
+        android?: T | undefined;
+        windows?: T | undefined;
+        macos?: T | undefined;
+        web?: T | undefined;
+        native?: T | undefined;
+    } & {
+        default: T;
+    }) | {
+        ios: T;
+        android: T;
+        windows: T;
+        macos: T;
+        web: T;
+        native: T;
+    }): T;
+    select<T_1>(specifics: {
+        ios?: T_1 | undefined;
+        android?: T_1 | undefined;
+        windows?: T_1 | undefined;
+        macos?: T_1 | undefined;
+        web?: T_1 | undefined;
+        native?: T_1 | undefined;
+    }): T_1 | undefined;
+};
+export default _default;

package/dist/utils/platform.js

@@ -0,0 +1,17 @@
+import { Platform } from 'react-native';
+const IS_ANDROID = Platform.OS === 'android';
+const IS_IOS = Platform.OS === 'ios';
+// https://material.io/design/layout/spacing-methods.html#touch-targets
+const ANDROID_MINIMUM_TOUCH_TARGET = 48;
+// https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
+const IOS_MINIMUM_TOUCH_TARGET = 44;
+const PLATFORM_TOUCH_TARGET = Platform.select({
+    android: ANDROID_MINIMUM_TOUCH_TARGET,
+    ios: IOS_MINIMUM_TOUCH_TARGET,
+});
+export default {
+    ...Platform,
+    IS_ANDROID,
+    IS_IOS,
+    PLATFORM_TOUCH_TARGET,
+};

package/dist/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function capitalize<T extends string>(value: T): Capitalize<T>;

package/dist/utils/utils.js

@@ -0,0 +1,3 @@
+export function capitalize(value) {
+    return (value.charAt(0).toUpperCase() + value.slice(1));
+}

package/jest.config.js

@@ -17,4 +17,5 @@ module.exports = {
       statements: 90,
     },
   },
+  setupFiles: ['<rootDir>/jest.setup.js'],
 };

package/jest.setup.js

@@ -0,0 +1,3 @@
+global.navigator = {
+  ClientDevice_Browser: jest.fn().mockImplementation(() => Promise.resolve()),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
     "dist": "tsc --project tsconfig.dist.json",
     "lint": "tsc --noEmit && eslint src",
     "prebuild": "rimraf dist",
-    "test": "jest --coverage",
+    "test": "jest --coverage --verbose",
     "test:watch": "yarn test --watch"
   },
   "devDependencies": {
@@ -39,14 +39,15 @@
     "react-native": "^0.68.1",
     "react-native-safe-area-context": "^4.2.5",
     "react-test-renderer": "^17.0.2",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "type-fest": "^2.3.4"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.0.0",
-    "@aws-amplify/ui-react-core": "2.0.0"
+    "@aws-amplify/ui": "5.1.0",
+    "@aws-amplify/ui-react-core": "2.1.0"
   },
   "peerDependencies": {
-    "aws-amplify": "5.x.x",
+    "aws-amplify": ">= 5.0.1",
     "react": ">= 16.14.0",
     "react-native": ">= 0.63.4",
     "react-native-safe-area-context": ">= 4.2.5"

package/src/Authenticator/Authenticator.tsx

@@ -0,0 +1,106 @@
+import React, { useMemo } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import {
+  AuthenticatorProvider as Provider,
+  AuthenticatorMachineContext,
+  resolveAuthenticatorComponents,
+  useAuthenticator,
+  useAuthenticatorRoute,
+  useAuthenticatorInitMachine,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
+
+import { DefaultContainer, InnerContainer } from './common';
+import { TypedField, getRouteTypedFields } from './hooks';
+import { AuthenticatorProps } from './types';
+
+import {
+  ConfirmResetPassword,
+  ConfirmSignIn,
+  ConfirmSignUp,
+  ConfirmVerifyUser,
+  ForceNewPassword,
+  ResetPassword,
+  SetupTOTP,
+  SignIn,
+  SignUp,
+  VerifyUser,
+} from './Defaults';
+
+const DEFAULTS = {
+  ConfirmResetPassword,
+  ConfirmSignIn,
+  ConfirmSignUp,
+  ConfirmVerifyUser,
+  ForceNewPassword,
+  ResetPassword,
+  SetupTOTP,
+  SignIn,
+  SignUp,
+  VerifyUser,
+};
+
+const isAuthenticatedRoute = (route: UseAuthenticator['route']) =>
+  route === 'authenticated' || route === 'signOut';
+
+const routePropSelector = ({
+  route,
+}: AuthenticatorMachineContext): AuthenticatorMachineContext['route'][] => [
+  route,
+];
+
+function Authenticator({
+  children,
+  components: overrides,
+  Container = DefaultContainer,
+  Footer,
+  Header,
+  ...options
+}: AuthenticatorProps): JSX.Element | null {
+  useAuthenticatorInitMachine(options);
+
+  const { fields, route } = useAuthenticator(routePropSelector);
+
+  const components = useMemo(
+    // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
+    () => resolveAuthenticatorComponents<TypedField | any>(DEFAULTS, overrides),
+    [overrides]
+  );
+
+  const { Component, props } = useAuthenticatorRoute({ components });
+
+  const typedFields = getRouteTypedFields({ fields, route });
+
+  if (isAuthenticatedRoute(route)) {
+    return children ? <>{children}</> : null;
+  }
+
+  return (
+    <SafeAreaProvider>
+      <Container>
+        {Header ? <Header /> : null}
+        <InnerContainer>
+          <Component {...props} fields={typedFields} />
+        </InnerContainer>
+        {Footer ? <Footer /> : null}
+      </Container>
+    </SafeAreaProvider>
+  );
+}
+
+// assign slot components
+Authenticator.Container = DefaultContainer;
+Authenticator.Provider = Provider;
+Authenticator.ConfirmResetPassword = ConfirmResetPassword;
+Authenticator.ConfirmSignIn = ConfirmSignIn;
+Authenticator.ConfirmSignUp = ConfirmSignUp;
+Authenticator.ConfirmVerifyUser = ConfirmVerifyUser;
+Authenticator.ForceNewPassword = ForceNewPassword;
+Authenticator.ResetPassword = ResetPassword;
+Authenticator.SetupTOTP = SetupTOTP;
+Authenticator.SignIn = SignIn;
+Authenticator.SignUp = SignUp;
+Authenticator.VerifyUser = VerifyUser;
+
+export default Authenticator;

package/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultConfirmResetPasswordComponent } from '../types';
+
+const COMPONENT_NAME = 'ConfirmResetPassword';
+
+const {
+  getResetYourPasswordText,
+  getSubmitText,
+  getSubmittingText,
+  getResendCodeText,
+} = authenticatorTextUtil;
+
+const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  resendCode,
+  ...rest
+}) => {
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const headerText = getResetYourPasswordText();
+  const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
+  const secondaryButtonText = getResendCodeText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      secondary: { children: secondaryButtonText, onPress: resendCode },
+    }),
+    [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
+  );
+};
+
+ConfirmResetPassword.Footer = DefaultFooter;
+ConfirmResetPassword.FormFields = DefaultTextFormFields;
+ConfirmResetPassword.Header = DefaultHeader;
+
+ConfirmResetPassword.displayName = COMPONENT_NAME;
+export default ConfirmResetPassword;