chore: Remove style-dictionary dependency from React Native package

.changeset/sharp-kiwis-remember.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui": patch
+---
+
+chore: Copy `style-dictionary` functions to ui package and export from there. Remove `style-dictionary` dependency from React Native package. 

packages/react-native/package.json

@@ -32,8 +32,7 @@
   "dependencies": {
     "@aws-amplify/ui": "6.6.2",
     "@aws-amplify/ui-react-core": "3.0.26",
-    "@aws-amplify/ui-react-core-notifications": "2.0.26",
-    "style-dictionary": "3.9.1"
+    "@aws-amplify/ui-react-core-notifications": "2.0.26"
   },
   "peerDependencies": {
     "aws-amplify": "^6.6.0",

packages/react-native/src/theme/createTheme.ts

@@ -1,6 +1,4 @@
-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 { deepExtend, resolveObject, usesReference } from '@aws-amplify/ui';
 import { isFunction, setupTokens } from '@aws-amplify/ui';
 import {
   Theme,
@@ -15,13 +13,15 @@ import { defaultTheme } from './defaultTheme';
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
+interface TokensAndComponents {
+  components: Components;
+  tokens: StrictTokens;
+}
+
 const setupComponents = ({
   components,
   tokens,
-}: {
-  components: Components;
-  tokens: StrictTokens;
-}) => {
+}: TokensAndComponents): Components => {
   const output = components
     ? Object.entries(components).reduce(
         (acc, [key, value]) => ({
@@ -32,7 +32,7 @@ const setupComponents = ({
       )
     : {};
 
-  return resolveObject({
+  return resolveObject<TokensAndComponents>({
     ...tokens,
     components: output,
   }).components;
@@ -103,12 +103,7 @@ export const createTheme = (
 ): 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;
+  const mergedTheme = deepExtend<StrictTheme>([{}, defaultTheme, theme]);
 
   let { tokens: mergedTokens } = mergedTheme;
   const { spaceModifier = 1 } = mergedTheme;
@@ -119,11 +114,11 @@ export const createTheme = (
   if (theme?.overrides?.length) {
     theme.overrides.forEach((override) => {
       if (override?.colorMode === colorMode) {
-        mergedTokens = deepExtend([
+        mergedTokens = deepExtend<StrictTheme['tokens']>([
           {},
           mergedTokens,
           override.tokens,
-        ]) as StrictTheme['tokens'];
+        ]);
       }
       // more overrides in the future could happen here
     });
@@ -132,13 +127,13 @@ export const createTheme = (
   // 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(
+  const tokens = resolveObject<StrictTheme['tokens']>(
     setupTokens({
       tokens: mergedTokens,
       setupToken: ({ token, path }) => {
         return setupToken({ token, path, spaceModifier });
       },
-    }) as StrictTheme['tokens']
+    })
   );
 
   let components;

packages/ui/jest.config.ts

@@ -8,8 +8,6 @@ const config: Config = {
     '!<rootDir>/src/index.ts',
     // ignore internal `debugUtils` from coverage thresholds
     '!<rootDir>/**/debugUtils.ts',
-    // ignore coverage for style-dictionary type declaration file
-    '!<rootDir>/src/theme/types/style-dictionary.d.ts',
   ],
   coverageThreshold: {
     global: {

packages/ui/src/theme/createTheme/__tests__/resolveObject.test.ts

@@ -0,0 +1,269 @@
+import { resolveObject } from '../resolveObject';
+
+describe('resolveObject', () => {
+  it('should not mutate the original object', () => {
+    const original = {
+      test: '1',
+      a: {
+        b: {
+          c: 1,
+          d: '{e.f.g}',
+        },
+      },
+      e: {
+        f: {
+          g: 2,
+          h: '{a.b.c}',
+        },
+      },
+      i: '{e.f.g}',
+    };
+    const test = resolveObject(original);
+    expect(original).toHaveProperty('a.b.d', '{e.f.g}');
+    expect(test).toHaveProperty('a.b.d', 2);
+  });
+
+  it('should do simple references', () => {
+    const test = resolveObject({
+      foo: 'bar',
+      bar: '{foo}',
+    });
+    expect(test).toHaveProperty('bar', 'bar');
+  });
+
+  it('should do simple interpolation for both strings and numbers', () => {
+    const test = resolveObject({
+      a: 'test1 value',
+      b: 123,
+      c: '{a} text after',
+      d: 'text before {a}',
+      e: 'text before {a} text after',
+      f: '{b} text after',
+      g: 'text before {b}',
+      h: 'text before {b} text after',
+    });
+    expect(test).toHaveProperty('c', 'test1 value text after');
+    expect(test).toHaveProperty('d', 'text before test1 value');
+    expect(test).toHaveProperty('e', 'text before test1 value text after');
+    expect(test).toHaveProperty('f', '123 text after');
+    expect(test).toHaveProperty('g', 'text before 123');
+    expect(test).toHaveProperty('h', 'text before 123 text after');
+  });
+
+  it('should do nested references', () => {
+    const obj = {
+      test: '1',
+      a: {
+        b: {
+          c: 1,
+          d: '{e.f.g}',
+        },
+      },
+      e: {
+        f: {
+          g: 2,
+          h: '{a.b.c}',
+        },
+      },
+      i: '{e.f.g}',
+    };
+    const test = resolveObject(obj);
+    expect(test).toHaveProperty('i', 2);
+    expect(test).toHaveProperty('a.b.d', 2);
+    expect(test).toHaveProperty('e.f.h', 1);
+  });
+
+  it('should handle nested pointers', () => {
+    const test = resolveObject({
+      a: 1,
+      b: '{a}',
+      c: '{b}',
+      d: '{e}',
+      e: '{c}',
+    });
+    expect(test).toHaveProperty('b', 1);
+    expect(test).toHaveProperty('c', 1);
+  });
+
+  it('should handle deep nested pointers', () => {
+    const test = resolveObject({
+      a: '{b}',
+      b: '{c}',
+      c: '{d}',
+      d: '{e}',
+      e: '{f}',
+      f: '{g}',
+      g: 1,
+    });
+    expect(test).toHaveProperty('a', 1);
+    expect(test).toHaveProperty('b', 1);
+    expect(test).toHaveProperty('c', 1);
+    expect(test).toHaveProperty('d', 1);
+    expect(test).toHaveProperty('e', 1);
+    expect(test).toHaveProperty('f', 1);
+    expect(test).toHaveProperty('g', 1);
+  });
+
+  it('should handle deep nested pointers with string interpolation', () => {
+    const test = resolveObject({
+      a: '{b} bar',
+      b: '{c} baz',
+      c: '{d} bla',
+      d: '{e} boo',
+      e: '{f} bae',
+      f: '{g} bee',
+      g: 'foo bon',
+    });
+    expect(test).toHaveProperty('a', 'foo bon bee bae boo bla baz bar');
+    expect(test).toHaveProperty('b', 'foo bon bee bae boo bla baz');
+    expect(test).toHaveProperty('c', 'foo bon bee bae boo bla');
+    expect(test).toHaveProperty('d', 'foo bon bee bae boo');
+    expect(test).toHaveProperty('e', 'foo bon bee bae');
+    expect(test).toHaveProperty('f', 'foo bon bee');
+    expect(test).toHaveProperty('g', 'foo bon');
+  });
+
+  it('should handle deep nested pointers and nested references', () => {
+    const test = resolveObject({
+      a: {
+        a: {
+          a: '{b.b.b}',
+        },
+      },
+      b: {
+        b: {
+          b: '{c.c.c}',
+        },
+      },
+      c: {
+        c: {
+          c: '{d.d.d}',
+        },
+      },
+      d: {
+        d: {
+          d: '{e.e.e}',
+        },
+      },
+      e: {
+        e: {
+          e: '{f.f.f}',
+        },
+      },
+      f: {
+        f: {
+          f: '{g.g.g}',
+        },
+      },
+      g: {
+        g: {
+          g: 1,
+        },
+      },
+    });
+    expect(test).toHaveProperty('a.a.a', 1);
+    expect(test).toHaveProperty('b.b.b', 1);
+    expect(test).toHaveProperty('c.c.c', 1);
+    expect(test).toHaveProperty('d.d.d', 1);
+    expect(test).toHaveProperty('e.e.e', 1);
+    expect(test).toHaveProperty('f.f.f', 1);
+    expect(test).toHaveProperty('g.g.g', 1);
+  });
+
+  it('should keep the type of the referenced property', () => {
+    const referenceType = {
+      a: 1,
+      b: {
+        c: 2,
+      },
+      d: '{a}',
+      e: '{b}',
+      f: [1, 2, 3],
+      g: '{f}',
+    };
+    const test = resolveObject<typeof referenceType>(referenceType);
+    expect(test).toHaveProperty('d', 1);
+    expect(typeof test.d).toBe('number');
+    expect(typeof test.e).toBe('object');
+    expect(Array.isArray(test.f)).toBeTruthy();
+    expect(test).toHaveProperty('e.c', 2);
+  });
+
+  it('should handle and evaluate items in an array', () => {
+    const withArray = {
+      a: 1,
+      b: {
+        c: 2,
+      },
+      d: ['{b.c}', '{a}'],
+      e: [
+        {
+          a: '{a}',
+        },
+        {
+          a: '{b.c}',
+        },
+      ],
+    };
+    const test = resolveObject<typeof withArray>(withArray);
+    expect(test.d[0]).toBe(2);
+    expect(test.d[1]).toBe(1);
+    expect(test.e[0].a).toBe(1);
+    expect(test.e[1].a).toBe(2);
+  });
+
+  it('should correctly replace multiple references without reference errors', function () {
+    const obj = resolveObject({
+      prop1: { value: 'test1 value' },
+      prop2: { value: 'test2 value' },
+      prop3: { value: '{prop1.value}' },
+      prop4: { value: '{prop3.value}' },
+      prop5: { value: 5 },
+      prop6: { value: 6 },
+      prop7: { value: '{prop5.value}' },
+      prop8: { value: '{prop7.value}' },
+      prop12: { value: '{prop1.value}, {prop2.value} and some extra stuff' },
+      prop124: { value: '{prop1.value}, {prop2.value} and {prop4.value}' },
+      prop15: { value: '{prop1.value}, {prop5.value} and some extra stuff' },
+      prop156: { value: '{prop1.value}, {prop5.value} and {prop6.value}' },
+      prop1568: {
+        value: '{prop1.value}, {prop5.value}, {prop6.value} and {prop8.value}',
+      },
+    });
+    expect(JSON.stringify(obj)).toBe(
+      JSON.stringify({
+        prop1: { value: 'test1 value' },
+        prop2: { value: 'test2 value' },
+        prop3: { value: 'test1 value' },
+        prop4: { value: 'test1 value' },
+        prop5: { value: 5 },
+        prop6: { value: 6 },
+        prop7: { value: 5 },
+        prop8: { value: 5 },
+        prop12: { value: 'test1 value, test2 value and some extra stuff' },
+        prop124: { value: 'test1 value, test2 value and test1 value' },
+        prop15: { value: 'test1 value, 5 and some extra stuff' },
+        prop156: { value: 'test1 value, 5 and 6' },
+        prop1568: { value: 'test1 value, 5, 6 and 5' },
+      })
+    );
+  });
+
+  it('should handle spaces', () => {
+    const withSpaces = {
+      foo: { value: 'bar' },
+      bar: { value: '{ foo.value }' },
+    };
+    const test = resolveObject<typeof withSpaces>(withSpaces);
+    expect(test).toHaveProperty('foo.value', test.bar.value);
+  });
+
+  it('should handle 0', () => {
+    const withZero = {
+      test: { value: '{zero.value}' },
+      zero: { value: 0 },
+    };
+    const test = resolveObject<typeof withZero>(withZero);
+    expect(test.test.value).toBe(0);
+  });
+});