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

package/src/theme/__tests__/__snapshots__/useTheme.spec.tsx.snap

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useTheme should output the base tokens as expected 1`] = `
+Object {
+  "borderWidths": Object {
+    "large": 3,
+    "medium": 2,
+    "small": 1,
+  },
+  "colors": Object {
+    "background": Object {
+      "disabled": "hsl(210, 5%, 94%)",
+      "error": "hsl(0, 75%, 85%)",
+      "info": "hsl(220, 85%, 85%)",
+      "primary": "hsl(0, 0%, 100%)",
+      "quaternary": "hsl(210, 8%, 55%)",
+      "secondary": "hsl(210, 5%, 98%)",
+      "success": "hsl(130, 60%, 90%)",
+      "tertiary": "hsl(210, 5%, 94%)",
+      "warning": "hsl(30, 75%, 85%)",
+    },
+    "black": "hsl(0, 0%, 0%)",
+    "blue": Object {
+      "10": "hsl(220, 95%, 95%)",
+      "100": "hsl(220, 100%, 15%)",
+      "20": "hsl(220, 85%, 85%)",
+      "40": "hsl(220, 70%, 70%)",
+      "60": "hsl(220, 50%, 50%)",
+      "80": "hsl(220, 95%, 30%)",
+      "90": "hsl(220, 100%, 20%)",
+    },
+    "border": Object {
+      "disabled": "hsl(210, 5%, 94%)",
+      "error": "hsl(0, 95%, 30%)",
+      "focus": "hsl(190, 100%, 15%)",
+      "pressed": "hsl(190, 100%, 15%)",
+      "primary": "hsl(210, 8%, 55%)",
+      "secondary": "hsl(210, 5%, 87%)",
+      "tertiary": "hsl(210, 5%, 94%)",
+    },
+    "brand": Object {
+      "primary": Object {
+        "10": "hsl(190, 75%, 95%)",
+        "100": "hsl(190, 100%, 15%)",
+        "20": "hsl(190, 75%, 85%)",
+        "40": "hsl(190, 70%, 70%)",
+        "60": "hsl(190, 50%, 50%)",
+        "80": "hsl(190, 95%, 30%)",
+        "90": "hsl(190, 100%, 20%)",
+      },
+      "secondary": Object {
+        "10": "hsl(300, 95%, 95%)",
+        "100": "hsl(300, 100%, 15%)",
+        "20": "hsl(300, 85%, 85%)",
+        "40": "hsl(300, 70%, 70%)",
+        "60": "hsl(300, 50%, 50%)",
+        "80": "hsl(300, 95%, 30%)",
+        "90": "hsl(300, 100%, 20%)",
+      },
+    },
+    "font": Object {
+      "active": "hsl(190, 100%, 15%)",
+      "disabled": "hsl(210, 8%, 55%)",
+      "error": "hsl(0, 100%, 20%)",
+      "focus": "hsl(190, 100%, 15%)",
+      "hover": "hsl(190, 100%, 20%)",
+      "info": "hsl(220, 100%, 20%)",
+      "interactive": "hsl(190, 95%, 30%)",
+      "inverse": "hsl(0, 0%, 100%)",
+      "primary": "hsl(210, 50%, 10%)",
+      "secondary": "hsl(210, 25%, 25%)",
+      "success": "hsl(130, 27%, 29%)",
+      "tertiary": "hsl(210, 10%, 40%)",
+      "warning": "hsl(30, 100%, 20%)",
+    },
+    "green": Object {
+      "10": "hsl(130, 60%, 95%)",
+      "100": "hsl(130, 22%, 23%)",
+      "20": "hsl(130, 60%, 90%)",
+      "40": "hsl(130, 44%, 63%)",
+      "60": "hsl(130, 43%, 46%)",
+      "80": "hsl(130, 33%, 37%)",
+      "90": "hsl(130, 27%, 29%)",
+    },
+    "neutral": Object {
+      "10": "hsl(210, 5%, 98%)",
+      "100": "hsl(210, 50%, 10%)",
+      "20": "hsl(210, 5%, 94%)",
+      "40": "hsl(210, 5%, 87%)",
+      "60": "hsl(210, 8%, 55%)",
+      "80": "hsl(210, 10%, 40%)",
+      "90": "hsl(210, 25%, 25%)",
+    },
+    "orange": Object {
+      "10": "hsl(30, 75%, 95%)",
+      "100": "hsl(30, 100%, 15%)",
+      "20": "hsl(30, 75%, 85%)",
+      "40": "hsl(30, 75%, 75%)",
+      "60": "hsl(30, 50%, 50%)",
+      "80": "hsl(30, 95%, 30%)",
+      "90": "hsl(30, 100%, 20%)",
+    },
+    "overlay": Object {
+      "10": "hsla(0, 0%, 0%, 0.1)",
+      "20": "hsla(0, 0%, 0%, 0.2)",
+      "30": "hsla(0, 0%, 0%, 0.3)",
+      "40": "hsla(0, 0%, 0%, 0.4)",
+      "50": "hsla(0, 0%, 0%, 0.5)",
+      "60": "hsla(0, 0%, 0%, 0.6)",
+      "70": "hsla(0, 0%, 0%, 0.7)",
+      "80": "hsla(0, 0%, 0%, 0.8)",
+      "90": "hsla(0, 0%, 0%, 0.9)",
+    },
+    "pink": Object {
+      "10": "hsl(340, 95%, 95%)",
+      "100": "hsl(340, 100%, 15%)",
+      "20": "hsl(340, 90%, 85%)",
+      "40": "hsl(340, 70%, 70%)",
+      "60": "hsl(340, 50%, 50%)",
+      "80": "hsl(340, 95%, 30%)",
+      "90": "hsl(340, 100%, 20%)",
+    },
+    "purple": Object {
+      "10": "hsl(300, 95%, 95%)",
+      "100": "hsl(300, 100%, 15%)",
+      "20": "hsl(300, 85%, 85%)",
+      "40": "hsl(300, 70%, 70%)",
+      "60": "hsl(300, 50%, 50%)",
+      "80": "hsl(300, 95%, 30%)",
+      "90": "hsl(300, 100%, 20%)",
+    },
+    "red": Object {
+      "10": "hsl(0, 75%, 95%)",
+      "100": "hsl(0, 100%, 15%)",
+      "20": "hsl(0, 75%, 85%)",
+      "40": "hsl(0, 75%, 75%)",
+      "60": "hsl(0, 50%, 50%)",
+      "80": "hsl(0, 95%, 30%)",
+      "90": "hsl(0, 100%, 20%)",
+    },
+    "shadow": Object {
+      "primary": "hsla(210, 50%, 10%, 0.25)",
+      "secondary": "hsla(210, 50%, 10%, 0.15)",
+      "tertiary": "hsla(210, 50%, 10%, 0.05)",
+    },
+    "teal": Object {
+      "10": "hsl(190, 75%, 95%)",
+      "100": "hsl(190, 100%, 15%)",
+      "20": "hsl(190, 75%, 85%)",
+      "40": "hsl(190, 70%, 70%)",
+      "60": "hsl(190, 50%, 50%)",
+      "80": "hsl(190, 95%, 30%)",
+      "90": "hsl(190, 100%, 20%)",
+    },
+    "transparent": "transparent",
+    "white": "hsl(0, 0%, 100%)",
+    "yellow": Object {
+      "10": "hsl(60, 75%, 95%)",
+      "100": "hsl(60, 100%, 15%)",
+      "20": "hsl(60, 75%, 85%)",
+      "40": "hsl(60, 75%, 75%)",
+      "60": "hsl(60, 50%, 50%)",
+      "80": "hsl(60, 95%, 30%)",
+      "90": "hsl(60, 100%, 20%)",
+    },
+  },
+  "fontSizes": Object {
+    "large": 20,
+    "medium": 16,
+    "small": 14,
+    "xl": 24,
+    "xs": 12,
+    "xxl": 32,
+    "xxs": 8,
+    "xxxl": 40,
+  },
+  "fontWeights": Object {
+    "black": "900",
+    "bold": "700",
+    "extrabold": "800",
+    "hairline": "100",
+    "light": "300",
+    "medium": "500",
+    "normal": "400",
+    "semibold": "600",
+    "thin": "200",
+  },
+  "opacities": Object {
+    "0": 0,
+    "10": 0.1,
+    "100": 1,
+    "20": 0.2,
+    "30": 0.3,
+    "40": 0.4,
+    "50": 0.5,
+    "60": 0.6,
+    "70": 0.7,
+    "80": 0.8,
+    "90": 0.9,
+  },
+  "radii": Object {
+    "large": 16,
+    "medium": 8,
+    "small": 4,
+    "xl": 32,
+    "xs": 2,
+    "xxl": 64,
+    "xxxl": 128,
+  },
+  "space": Object {
+    "large": 24,
+    "medium": 16,
+    "small": 12,
+    "xl": 32,
+    "xs": 8,
+    "xxl": 48,
+    "xxs": 4,
+    "xxxl": 72,
+  },
+  "time": Object {
+    "long": "500ms",
+    "medium": "250ms",
+    "short": "100ms",
+  },
+}
+`;

package/src/theme/__tests__/createTheme.spec.ts

@@ -0,0 +1,196 @@
+import { defaultTheme } from '@aws-amplify/ui';
+import { createTheme } from '../createTheme';
+import { StrictTokens } from '../types';
+
+describe('createTheme', () => {
+  describe('without a base theme', () => {
+    const { tokens, components } = createTheme({
+      components: { button: { container: { backgroundColor: 'red' } } },
+    });
+
+    it('should have component agnostic tokens', () => {
+      expect(tokens).toBeDefined();
+      expect(components).toBeDefined();
+      expect(components?.button?.container?.backgroundColor).toBe('red');
+    });
+
+    it('should return proper React Native token types', () => {
+      const { tokens } = createTheme({});
+      expect(typeof tokens.opacities[10]).toBe('number');
+      expect(typeof tokens.fontWeights.bold).toBe('string');
+    });
+  });
+
+  describe('with mixture of value and no value', () => {
+    const { tokens } = createTheme({
+      tokens: {
+        colors: {
+          neutral: {
+            100: { value: 'hotpink' },
+          },
+          font: {
+            secondary: { value: '{colors.red.10}' },
+            tertiary: { value: '{colors.red.10.value}' },
+          },
+          background: {
+            primary: '{colors.black}',
+            secondary: '{colors.white.value}',
+          },
+        },
+        // Using the web default theme should just work
+        space: defaultTheme.tokens.space,
+      },
+    });
+
+    it('should resolve references from the default theme when the referenced has .value', () => {
+      expect(tokens.colors.font.primary).toEqual('hotpink');
+    });
+
+    it('should resolve references from .value to the default theme without .value', () => {
+      expect(tokens.colors.font.secondary).toEqual('hsl(0, 75%, 95%)');
+    });
+
+    it('should resolve references from .value to the default theme with .value', () => {
+      expect(tokens.colors.font.secondary).toEqual('hsl(0, 75%, 95%)');
+    });
+
+    it('should resolve references from without .value to the default theme without .value', () => {
+      expect(tokens.colors.background.primary).toEqual('hsl(0, 0%, 0%)');
+    });
+
+    it('should resolve references from without .value to the default theme with .value', () => {
+      expect(tokens.colors.background.secondary).toEqual('hsl(0, 0%, 100%)');
+    });
+  });
+
+  describe('with components', () => {
+    it('should resolve references in a functional component theme', () => {
+      const { components } = createTheme({
+        components: {
+          button(tokens: StrictTokens) {
+            return {
+              container: {
+                backgroundColor: tokens.colors.background.primary,
+              },
+            };
+          },
+        },
+      });
+      expect(components?.button?.container?.backgroundColor).toBe(
+        'hsl(0, 0%, 100%)'
+      );
+    });
+
+    it('should resolve references in an object-based theme', () => {
+      const { components } = createTheme({
+        tokens: {
+          colors: {
+            background: {
+              primary: '{colors.white}',
+            },
+          },
+        },
+        components: {
+          button: {
+            container: {
+              backgroundColor: '{colors.background.primary}',
+              padding: '{space.xl}',
+            },
+          },
+        },
+      });
+      expect(components?.button?.container?.backgroundColor).toBe(
+        'hsl(0, 0%, 100%)'
+      );
+      expect(components?.button?.container?.padding).toBe(32);
+    });
+
+    it('should respect colorMode', () => {
+      const { components } = createTheme(
+        {
+          components: {
+            button(tokens: StrictTokens) {
+              return {
+                container: {
+                  // default value is a reference to colors.white
+                  backgroundColor: tokens.colors.background.primary,
+                },
+              };
+            },
+          },
+          overrides: [
+            {
+              colorMode: 'dark',
+              tokens: {
+                colors: {
+                  white: 'black',
+                },
+              },
+            },
+          ],
+        },
+        'dark'
+      );
+      expect(components?.button?.container?.backgroundColor).toBe('black');
+    });
+
+    it('should properly resolve with overrides', () => {
+      const { components } = createTheme(
+        {
+          tokens: {
+            colors: {
+              background: {
+                primary: '{colors.white}',
+              },
+            },
+          },
+          overrides: [
+            {
+              colorMode: 'dark',
+              tokens: {
+                colors: {
+                  background: {
+                    primary: '{colors.black}',
+                  },
+                },
+              },
+            },
+          ],
+          components: {
+            button: {
+              container: { backgroundColor: '{colors.background.primary}' },
+            },
+          },
+        },
+        'dark'
+      );
+      expect(components?.button?.container?.backgroundColor).toBe(
+        'hsl(0, 0%, 0%)'
+      );
+    });
+  });
+
+  describe('with dark mode override', () => {
+    const { tokens } = createTheme(
+      {
+        overrides: [
+          {
+            colorMode: 'dark',
+            tokens: {
+              colors: {
+                neutral: {
+                  100: 'white',
+                },
+              },
+            },
+          },
+        ],
+      },
+      'dark'
+    );
+
+    it('should properly resolve references', () => {
+      expect(tokens.colors.font.primary).toEqual('white');
+    });
+  });
+});

package/src/theme/__tests__/useTheme.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider';
+
+import { createTheme } from '../createTheme';
+import { useTheme } from '../useTheme';
+
+describe('useTheme', () => {
+  it('should return a theme object when provided through theme', () => {
+    const customTheme = {
+      name: 'my-theme',
+      tokens: {
+        colors: {
+          brand: {
+            primary: {
+              10: 'red',
+            },
+          },
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => (
+        <ThemeProvider theme={customTheme}>{children}</ThemeProvider>
+      ),
+    });
+
+    expect(result.current).toStrictEqual(createTheme(customTheme));
+  });
+
+  it('should return a default theme if not provided through context', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+
+    expect(result.current).toStrictEqual(createTheme());
+  });
+
+  it('should return a default theme when there is no context', () => {
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current).toStrictEqual(createTheme());
+  });
+
+  it('should output the base tokens as expected', () => {
+    const { result } = renderHook(useTheme);
+
+    expect(result.current.tokens).toMatchSnapshot();
+  });
+});

package/src/theme/createTheme.ts

@@ -0,0 +1,130 @@
+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 { Theme, StrictTheme, ColorMode } 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 = (theme: StrictTheme) => {
+  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) as object;
+      } else {
+        output[key] = value;
+      }
+    }
+  }
+  return resolveObject({
+    ...theme.tokens,
+    components: output,
+  }).components;
+};
+
+const setupToken = ({
+  token,
+  path = [],
+  spaceModifier,
+}: {
+  token: {
+    value: string | number;
+  };
+  path: Array<string>;
+  spaceModifier: number;
+}): 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
+    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?: Theme,
+  colorMode?: ColorMode
+): StrictTheme => {
+  // 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
+  ]) as StrictTheme;
+
+  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,
+        ]) as StrictTheme['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 });
+      },
+    }) as StrictTheme['tokens']
+  );
+
+  let { components } = mergedTheme;
+
+  // Resolve component token references too
+  if (mergedTheme.components) {
+    components = setupComponents({ ...mergedTheme, tokens });
+  }
+
+  return { ...mergedTheme, tokens, components };
+};

package/src/theme/defaultTheme.ts

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

package/src/theme/index.ts

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

package/src/theme/types/style-dictionary.d.ts

@@ -0,0 +1,21 @@
+declare module 'style-dictionary/lib/utils/deepExtend' {
+  // based on the typing specified by style-dictionary:
+  // https://github.com/amzn/style-dictionary/blob/main/lib/utils/deepExtend.js#L18-L22
+  export default function deepExtend(
+    objects: (object | undefined)[],
+    collision?: Function,
+    path?: string[]
+  ): object;
+}
+
+declare module 'style-dictionary/lib/utils/references/usesReference' {
+  // based on the typing specified by style-dictionary:
+  // https://github.com/amzn/style-dictionary/blob/main/lib/utils/references/usesReference.js
+  export default function usesReference(value: string): boolean;
+}
+
+declare module 'style-dictionary/lib/utils/resolveObject' {
+  // based on the typing specified by style-dictionary:
+  // https://github.com/amzn/style-dictionary/blob/main/lib/utils/resolveObject.js
+  export default function resolveObject<T>(object: T): T;
+}