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

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-
-import { ThemeProvider } from '../ThemeProvider';
-import { Label } from '../../primitives';
-
-const labelText = 'The answer is 42';
-const App = () => {
-  return <Label>{labelText}</Label>;
-};
-
-describe('ThemeProvider', () => {
-  it('renders without props', () => {
-    const { getByText } = render(
-      <ThemeProvider>
-        <App />
-      </ThemeProvider>
-    );
-
-    const label = getByText(labelText);
-    expect(label).toBeDefined();
-  });
-});

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

@@ -1,226 +0,0 @@
-// 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, 10%, 58%)",
-      "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, 10%, 58%)",
-      "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, 10%, 58%)",
-      "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, 10%, 58%)",
-      "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

@@ -1,244 +0,0 @@
-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('number conversions', () => {
-    it('should convert strings to numbers where applicable', () => {
-      const { tokens } = createTheme({
-        tokens: {
-          borderWidths: {
-            small: '4',
-            medium: '1rem',
-            large: 6,
-          },
-          opacities: {
-            '10': '0.2',
-          },
-          space: {
-            small: 4,
-            medium: '6',
-            large: '{space.small.value}',
-          },
-          fontSizes: {
-            small: '1rem',
-          },
-        },
-      });
-      expect(tokens.borderWidths.small).toBe(4);
-      expect(tokens.borderWidths.medium).toBe(16);
-      expect(tokens.borderWidths.large).toBe(6);
-      expect(tokens.opacities['10']).toBe(0.2);
-      expect(tokens.space.small).toBe(4);
-      expect(tokens.space.medium).toBe(6);
-      expect(tokens.space.large).toBe(4);
-      expect(tokens.fontSizes.small).toBe(16);
-    });
-
-    it('should use the spaceModifier for space tokens with rem', () => {
-      const { tokens } = createTheme({
-        spaceModifier: 1.25,
-        tokens: {
-          space: {
-            small: 4,
-            medium: '1rem',
-          },
-        },
-      });
-
-      expect(tokens.space.small).toEqual(4);
-      expect(tokens.space.medium).toEqual(20);
-    });
-  });
-
-  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

@@ -1,51 +0,0 @@
-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/tsconfig.dist.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../configs/ts/tsconfig.react-native.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "src"
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules"]
-}