@aws-amplify/ui-react-native 1.2.19 → 1.2.21

package/src/theme/createTheme.ts

@@ -2,21 +2,33 @@ 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 { isFunction, setupTokens } from '@aws-amplify/ui';
-import { Theme, StrictTheme, ColorMode, Components } from './types';
+import {
+  Theme,
+  StrictTheme,
+  ColorMode,
+  Components,
+  StrictTokens,
+} from './types';
 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 = ({ components, tokens }: StrictTheme) => {
+const setupComponents = ({
+  components,
+  tokens,
+}: {
+  components: Components;
+  tokens: StrictTokens;
+}) => {
   const output = components
     ? Object.entries(components).reduce(
         (acc, [key, value]) => ({
           ...acc,
           [key]: isFunction(value) ? (value(tokens) as typeof value) : value,
         }),
-        {} as Components<'components'>
+        {}
       )
     : {};
 
@@ -26,6 +38,16 @@ const setupComponents = ({ components, tokens }: StrictTheme) => {
   }).components;
 };
 
+const shouldParseFloatValue = (pathKey: string) =>
+  [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+  ].includes(pathKey);
+
 const setupToken = ({
   token,
   path = [],
@@ -39,27 +61,28 @@ const setupToken = ({
 }): string | number => {
   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
+    // this needs to come first so we don't get NaNs for references
     if (usesReference(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}`;
@@ -118,14 +141,14 @@ export const createTheme = (
     }) as StrictTheme['tokens']
   );
 
-  let { components } = mergedTheme;
+  let components;
 
   // Resolve component token references too
   if (mergedTheme.components) {
     components = setupComponents({
-      ...mergedTheme,
+      components: mergedTheme.components,
       tokens,
-    }) as Components<'output'>;
+    });
   }
 
   return { ...mergedTheme, tokens, components };

package/src/theme/types.ts

@@ -26,22 +26,23 @@ type ComponentTheme<ComponentType, Output> = Output extends 'output'
   : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
 
 // TODO: make optional all the way down
-export 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 type Components<Output extends 'input' | 'output' | unknown = unknown> =
+  {
+    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 type ColorMode = 'light' | 'dark' | 'system' | null;
 export type Override = Omit<Theme, 'overrides'> & {

package/src/utils/platform.ts

@@ -1,5 +1,6 @@
 import { Platform } from 'react-native';
 
+const IS_DEV = __DEV__;
 const IS_ANDROID = Platform.OS === 'android';
 const IS_IOS = Platform.OS === 'ios';
 
@@ -16,6 +17,7 @@ const PLATFORM_TOUCH_TARGET = Platform.select({
 export default {
   ...Platform,
   IS_ANDROID,
+  IS_DEV,
   IS_IOS,
   PLATFORM_TOUCH_TARGET,
 };

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.19';
+export const VERSION = '1.2.21';