@aws-amplify/ui-react-native 1.2.22 → 1.2.24

package/lib/primitives/TextField/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedStyles = void 0;
+const react_native_1 = require("react-native");
+const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, opacities, space, radii, borderWidths }, } = theme;
+    return react_native_1.StyleSheet.create({
+        container: {
+            alignItems: 'flex-start',
+            marginBottom: space.xs,
+            ...components?.textField?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.textField?.disabled,
+        },
+        error: {
+            borderColor: colors.border.error,
+        },
+        fieldContainer: {
+            alignItems: 'center',
+            borderColor: colors.border.primary,
+            borderRadius: radii.small,
+            borderWidth: borderWidths.small,
+            flexDirection: 'row',
+            paddingHorizontal: space.xs,
+            ...components?.textField?.fieldContainer,
+        },
+        field: {
+            color: colors.font.primary,
+            fontSize: fontSizes.medium,
+            flexGrow: 1,
+            paddingVertical: space.small,
+            paddingHorizontal: space.xxs,
+            // this is needed because of extra padding inside the input - in Android only
+            ...(react_native_1.Platform.OS === 'android' && { padding: 0 }),
+            ...components?.textField?.field,
+        },
+        label: {
+            color: colors.font.secondary,
+            paddingVertical: space.xs,
+            ...components?.textField?.label,
+        },
+    });
+};
+exports.getThemedStyles = getThemedStyles;

package/lib/primitives/TextField/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/primitives/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Button"), exports);
+tslib_1.__exportStar(require("./Carousel"), exports);
+tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./Divider"), exports);
+tslib_1.__exportStar(require("./ErrorMessage"), exports);
+tslib_1.__exportStar(require("./Heading"), exports);
+tslib_1.__exportStar(require("./Icon"), exports);
+tslib_1.__exportStar(require("./IconButton"), exports);
+tslib_1.__exportStar(require("./Label"), exports);
+tslib_1.__exportStar(require("./PasswordField"), exports);
+tslib_1.__exportStar(require("./PhoneNumberField"), exports);
+tslib_1.__exportStar(require("./Radio"), exports);
+tslib_1.__exportStar(require("./RadioGroup"), exports);
+tslib_1.__exportStar(require("./Tabs"), exports);
+tslib_1.__exportStar(require("./TextField"), exports);

package/lib/theme/ThemeContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const createTheme_1 = require("./createTheme");
+exports.ThemeContext = React.createContext({
+    theme: (0, createTheme_1.createTheme)(),
+});

package/lib/theme/ThemeProvider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const createTheme_1 = require("./createTheme");
+const ThemeContext_1 = require("./ThemeContext");
+const ThemeProvider = ({ children, theme, colorMode, }) => {
+    const value = React.useMemo(() => ({ theme: (0, createTheme_1.createTheme)(theme, colorMode) }), [theme, colorMode]);
+    return (<ThemeContext_1.ThemeContext.Provider value={value}>{children}</ThemeContext_1.ThemeContext.Provider>);
+};
+exports.ThemeProvider = ThemeProvider;

package/lib/theme/createTheme.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const tslib_1 = require("tslib");
+const deepExtend_1 = tslib_1.__importDefault(require("style-dictionary/lib/utils/deepExtend"));
+const resolveObject_1 = tslib_1.__importDefault(require("style-dictionary/lib/utils/resolveObject"));
+const usesReference_1 = tslib_1.__importDefault(require("style-dictionary/lib/utils/references/usesReference"));
+const ui_1 = require("@aws-amplify/ui");
+const defaultTheme_1 = require("./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 = ({ components, tokens, }) => {
+    const output = components
+        ? Object.entries(components).reduce((acc, [key, value]) => ({
+            ...acc,
+            [key]: (0, ui_1.isFunction)(value) ? value(tokens) : value,
+        }), {})
+        : {};
+    return (0, resolveObject_1.default)({
+        ...tokens,
+        components: output,
+    }).components;
+};
+const shouldParseFloatValue = (pathKey) => [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+].includes(pathKey);
+const setupToken = ({ token, path = [], spaceModifier, }) => {
+    const { value } = token;
+    if (typeof value === 'string') {
+        // Remove .value from references if there is a reference
+        // this needs to come first so we don't get NaNs for references
+        if ((0, usesReference_1.default)(value)) {
+            return value.replace('.value', '');
+        }
+        if (shouldParseFloatValue(path[0])) {
+            if (value.includes('rem')) {
+                if (path[0] === 'space') {
+                    return Math.floor(parseFloat(value) * 16 * spaceModifier);
+                }
+                return Math.floor(parseFloat(value) * 16);
+            }
+            if (value.includes('px')) {
+                return parseInt(value, 10);
+            }
+            return parseFloat(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);
+ */
+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 = (0, deepExtend_1.default)([
+        {},
+        defaultTheme_1.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 = (0, deepExtend_1.default)([
+                    {},
+                    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 = (0, resolveObject_1.default)((0, ui_1.setupTokens)({
+        tokens: mergedTokens,
+        setupToken: ({ token, path }) => {
+            return setupToken({ token, path, spaceModifier });
+        },
+    }));
+    let components;
+    // Resolve component token references too
+    if (mergedTheme.components) {
+        components = setupComponents({
+            components: mergedTheme.components,
+            tokens,
+        });
+    }
+    return { ...mergedTheme, tokens, components };
+};
+exports.createTheme = createTheme;

package/lib/theme/defaultTheme.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultDarkModeOverride = exports.defaultTheme = void 0;
+const ui_1 = require("@aws-amplify/ui");
+exports.defaultTheme = {
+    tokens: ui_1.reactNativeTokens,
+};
+exports.defaultDarkModeOverride = {
+    colorMode: 'dark',
+    tokens: ui_1.reactNativeDarkTokens,
+};

package/lib/theme/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.useTheme = exports.createTheme = void 0;
+const tslib_1 = require("tslib");
+var createTheme_1 = require("./createTheme");
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return createTheme_1.createTheme; } });
+tslib_1.__exportStar(require("./types"), exports);
+var useTheme_1 = require("./useTheme");
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return useTheme_1.useTheme; } });
+var ThemeProvider_1 = require("./ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
+tslib_1.__exportStar(require("./defaultTheme"), exports);

package/lib/theme/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/theme/useTheme.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ThemeContext_1 = require("./ThemeContext");
+const useTheme = () => {
+    const context = React.useContext(ThemeContext_1.ThemeContext);
+    return context.theme;
+};
+exports.useTheme = useTheme;

package/lib/utils/font.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLineHeight = void 0;
+// 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;
+const getLineHeight = (fontSize) => fontSize * LINE_HEIGHT_MULTIPLIER;
+exports.getLineHeight = getLineHeight;

package/lib/utils/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.platform = exports.getLineHeight = void 0;
+var font_1 = require("./font");
+Object.defineProperty(exports, "getLineHeight", { enumerable: true, get: function () { return font_1.getLineHeight; } });
+var platform_1 = require("./platform");
+Object.defineProperty(exports, "platform", { enumerable: true, get: function () { return __importDefault(platform_1).default; } });

package/lib/utils/platform.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const IS_DEV = __DEV__;
+const IS_ANDROID = react_native_1.Platform.OS === 'android';
+const IS_IOS = react_native_1.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 = react_native_1.Platform.select({
+    android: ANDROID_MINIMUM_TOUCH_TARGET,
+    ios: IOS_MINIMUM_TOUCH_TARGET,
+});
+exports.default = {
+    ...react_native_1.Platform,
+    IS_ANDROID,
+    IS_DEV,
+    IS_IOS,
+    PLATFORM_TOUCH_TARGET,
+};

package/lib/version.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+exports.VERSION = '1.2.24';

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.22",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "version": "1.2.24",
+  "main": "lib/index.js",
+  "module": "dist/index.js",
+  "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn build:dist && cp -a src/assets dist",
-    "build:dist": "tsc --project tsconfig.dist.json",
+    "build": "yarn build:cjs && yarn build:esm",
+    "build:cjs": "tsc --project tsconfig.cjs.json && cp -a src/assets/icons lib/assets",
+    "build:esm": "tsc --project tsconfig.esm.json && cp -a src/assets/icons dist/assets",
     "clean": "rimraf dist",
-    "dev": "yarn build:dist --watch",
+    "dev": "yarn build:esm --watch",
     "lint": "yarn typecheck && eslint src",
     "prebuild": "rimraf dist",
     "test": "jest",
@@ -38,17 +40,24 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.8",
-    "@aws-amplify/ui-react-core": "2.1.27",
-    "@aws-amplify/ui-react-core-notifications": "1.0.4"
+    "@aws-amplify/ui": "5.7.0",
+    "@aws-amplify/ui-react-core": "2.1.29",
+    "@aws-amplify/ui-react-core-notifications": "1.0.6"
   },
   "peerDependencies": {
-    "aws-amplify": ">= 5.0.1",
+    "aws-amplify": "^5.0.1",
     "react": ">= 16.14.0",
     "react-native": ">= 0.63.4",
     "react-native-safe-area-context": ">= 4.2.5"
   },
   "resolutions": {
     "@types/react": "^17.0.2"
-  }
+  },
+  "files": [
+    "dist",
+    "lib",
+    "src",
+    "!**/__mocks__",
+    "!**/__tests__"
+  ]
 }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.22';
+export const VERSION = '1.2.24';

package/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  ignorePatterns: ['dist', '.eslintrc.js', '*.config.js', 'jest.setup.js'],
-  extends: ['@aws-amplify/amplify-ui/react'],
-  overrides: [
-    {
-      extends: ['@aws-amplify/amplify-ui/jest'],
-      files: ['**/__mocks__/**', '**/__tests__/**'],
-    },
-  ],
-  // point to local tsconfig
-  parserOptions: { project: ['tsconfig.json'], tsconfigRootDir: __dirname },
-};

package/.lintstagedrc.js

@@ -1,6 +0,0 @@
-const config = require('../../.lintstagedrc.js');
-
-module.exports = {
-  ...config,
-  '*.{ts,tsx,js}': 'eslint',
-};

package/.turbo/turbo-build.log

@@ -1,3 +0,0 @@
-$ rimraf dist
-$ yarn build:dist && cp -a src/assets dist
-$ tsc --project tsconfig.dist.json