feat(ThemeProvider)!: restructure default component theme (#3582)

example/App.tsx

@@ -59,4 +59,16 @@ export default () => {
 
 const theme = createTheme({
   mode: 'dark',
+  components: {
+    Button: (props) => ({
+      buttonStyle: {
+        backgroundColor: props.type === 'outline' ? 'red' : 'blue',
+      },
+    }),
+    Text: {
+      h1Style: {
+        fontSize: 80,
+      },
+    },
+  },
 });

packages/themed/.ci/testHelper.tsx

@@ -6,15 +6,20 @@ import {
   fireEvent,
   act,
 } from '@testing-library/react-native';
-import { ThemeProvider, FullTheme, createTheme } from '../src/config';
+import {
+  ThemeProvider,
+  FullTheme,
+  createTheme,
+  CreateThemeOptions,
+} from '../src/config';
 
 export { fireEvent, act };
 
 // for getting findByType e.g. wrapper.findByType(Icon) see implementation in Avatar Component
 export const renderWithWrapper = (
   children: React.ReactElement<any, string | JSXElementConstructor<any>>,
   wrapperTestID?: string,
-  themeProp: Partial<FullTheme> = {},
+  themeProp: Partial<CreateThemeOptions> = {},
   renderOptions?: RenderOptions
 ) => {
   const options: RenderOptions = {
@@ -27,6 +32,6 @@ export const renderWithWrapper = (
     <ThemeProvider theme={createTheme(themeProp)}>{children}</ThemeProvider>,
     options
   );
-  const wrapper = renderApi.queryByTestId(wrapperTestID || 'wrapper');
+  const wrapper = renderApi.queryByTestId(wrapperTestID || 'wrapper')!;
   return { wrapper, ...renderApi };
 };

packages/themed/src/Avatar/__tests__/Avatar.test.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import Avatar from '..';
 import { Image } from 'react-native';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('Avatar Component', () => {
   it('should apply values from theme', () => {
-    const theme: Partial<FullTheme> = {
-      Avatar: {
-        source: { uri: 'https://i.imgur.com/0y8Ftya.jpg' },
+    const theme: Partial<CreateThemeOptions> = {
+      components: {
+        Avatar: {
+          source: { uri: 'https://i.imgur.com/0y8Ftya.jpg' },
+        },
       },
     };
     const { wrapper } = renderWithWrapper(<Avatar />, '', theme);

packages/themed/src/Badge/__tests__/Badge.test.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import Badge from '..';
 import { Text } from 'react-native';
 import { renderWithWrapper } from '../../../.ci/testHelper';
+import { CreateThemeOptions } from '../../config';
 
 describe('Badge Component', () => {
   it('should use values set by the theme', () => {
-    const testTheme = {
-      Badge: {
-        textStyle: { color: 'red' },
+    const testTheme: Partial<CreateThemeOptions> = {
+      components: {
+        Badge: {
+          textStyle: { color: 'red' },
+        },
       },
     };
     const { wrapper } = renderWithWrapper(<Badge value="red" />, '', testTheme);

packages/themed/src/BottomSheet/__tests__/BottomSheet.test.tsx

@@ -12,8 +12,10 @@ describe('BottomSheet Component', () => {
       />,
       '',
       {
-        BottomSheet: {
-          containerStyle: { backgroundColor: 'rgba(1, 0.5, 0.25, 1.0)' },
+        components: {
+          BottomSheet: {
+            containerStyle: { backgroundColor: 'rgba(1, 0.5, 0.25, 1.0)' },
+          },
         },
       }
     );

packages/themed/src/Button/__tests__/Button.test.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { ActivityIndicator } from 'react-native';
 import { renderWithWrapper } from '../../../.ci/testHelper';
+import { createTheme, CreateThemeOptions } from '../../config';
 import { FullTheme } from '../../config/theme';
 import Button from '../index';
 
 describe('Button Component', () => {
   it('should apply props from theme', () => {
-    const testTheme: Partial<FullTheme> = {
-      Button: {
-        loading: true,
+    const testTheme: Partial<CreateThemeOptions> = {
+      components: {
+        Button: {
+          loading: true,
+        },
       },
     };
     const { wrapper } = renderWithWrapper(
@@ -20,12 +23,15 @@ describe('Button Component', () => {
   });
 
   it('should apply title from theme', () => {
-    const testTheme: Partial<FullTheme> = {
-      Button: {
-        title: 'Custom Button',
+    const title = 'Custom Button';
+    const testTheme = {
+      components: {
+        Button: {
+          title,
+        },
       },
     };
     const { queryByText } = renderWithWrapper(<Button />, '', testTheme);
-    expect(queryByText(String(testTheme.Button.title))).toBeTruthy();
+    expect(queryByText(String(title))).toBeTruthy();
   });
 });

packages/themed/src/ButtonGroup/__tests__/ButtonGroup.test.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import ButtonGroup from '../index';
 import { renderWithWrapper } from '../../../.ci/testHelper';
 import { Text } from 'react-native';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 const buttons = ['Button 1', 'Button 2', 'Button 3'];
 
 describe('ButtonGroup Component', () => {
   it('should apply props from theme', () => {
-    const testTheme: Partial<FullTheme> = {
-      ButtonGroup: {
-        selectedTextStyle: {
-          color: 'red',
+    const testTheme: Partial<CreateThemeOptions> = {
+      components: {
+        ButtonGroup: {
+          selectedTextStyle: {
+            color: 'red',
+          },
         },
       },
     };

packages/themed/src/CheckBox/__tests__/CheckBox.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import CheckBox from '..';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('CheckBox Component', () => {
   it('should use values from theme', () => {
-    const testTheme: Partial<FullTheme> = {
-      CheckBox: {
-        title: 'George is Cool',
+    const testTheme: Partial<CreateThemeOptions> = {
+      components: {
+        CheckBox: {
+          title: 'George is Cool',
+        },
       },
     };
     const { wrapper } = renderWithWrapper(

packages/themed/src/Dialog/__tests__/Dialog.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import Dialog from '..';
-import { FullTheme } from '../..';
+import { CreateThemeOptions } from '../..';
 import { renderWithWrapper } from '../../../.ci/testHelper';
 
 describe('Dialog Component', () => {
   it('should apply props from theme', () => {
-    const theme: Partial<FullTheme> = {
-      Dialog: {
-        transparent: false,
+    const theme: Partial<CreateThemeOptions> = {
+      components: {
+        Dialog: {
+          transparent: false,
+        },
       },
     };
     const { wrapper } = renderWithWrapper(

packages/themed/src/Divider/__tests__/Divider.test.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import Divider from '../index';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('Divider Component', () => {
   it('should apply values from theme', () => {
-    const theme: Partial<FullTheme> = {
-      Divider: {
-        style: {
-          backgroundColor: 'red',
+    const theme: Partial<CreateThemeOptions> = {
+      components: {
+        Divider: {
+          style: {
+            backgroundColor: 'red',
+          },
         },
       },
     };

packages/themed/src/FAB/__tests__/FAB.test.tsx

@@ -5,16 +5,13 @@ import { renderWithWrapper } from '../../../.ci/testHelper';
 
 describe('FAB Component', () => {
   it('render with theme', () => {
-    const testTheme = {
-      FAB: {
-        placement: 'right',
+    const { wrapper } = renderWithWrapper(<FAB placement="right" />, '', {
+      components: {
+        FAB: {
+          placement: 'right',
+        },
       },
-    };
-    const { wrapper } = renderWithWrapper(
-      <FAB placement="right" />,
-      '',
-      testTheme
-    );
+    });
     expect(wrapper.findByType(Animated.View).props.style).toMatchObject({
       position: 'absolute',
       bottom: 0,

packages/themed/src/Header/__tests__/Header.test.tsx

@@ -4,16 +4,13 @@ import { renderWithWrapper } from '../../../.ci/testHelper';
 
 describe('Header Component', () => {
   it('should apply props from theme', () => {
-    const testTheme = {
-      Header: {
-        backgroundColor: 'pink',
+    const { wrapper } = renderWithWrapper(<Header />, 'headerContainer', {
+      components: {
+        Header: {
+          backgroundColor: 'pink',
+        },
       },
-    };
-    const { wrapper } = renderWithWrapper(
-      <Header />,
-      'headerContainer',
-      testTheme
-    );
+    });
     expect(wrapper.props.style).toMatchObject({
       backgroundColor: 'pink',
     });

packages/themed/src/Icon/__tests__/Icon.test.tsx

@@ -4,15 +4,16 @@ import { renderWithWrapper } from '../../../.ci/testHelper';
 
 describe('Icon component', () => {
   it('should apply values from theme', () => {
-    const localTheme = {
-      Icon: {
-        size: 26,
-      },
-    };
     const { wrapper } = renderWithWrapper(
       <Icon name="edit" />,
       'RNE__ICON__Component',
-      localTheme
+      {
+        components: {
+          Icon: {
+            size: 26,
+          },
+        },
+      }
     );
     expect(wrapper.props.style[0].fontSize).toBe(26);
   });

packages/themed/src/Image/__tests__/Image.test.tsx

@@ -17,9 +17,11 @@ describe('Image Component', () => {
     const { queryByTestId } = renderWithWrapper(
       <Image source={{ uri: FAKE_URI }} />,
       '',
-      textTheme
+      {
+        components: textTheme,
+      }
     );
-    const placeholder = queryByTestId('RNE__Image__placeholder');
+    const placeholder = queryByTestId('RNE__Image__placeholder')!;
     expect(placeholder.props.style.backgroundColor).toBe('red');
   });
 

packages/themed/src/Input/__tests__/Input.test.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import Input from '../index';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('Input component', () => {
   it('should apply values from theme', () => {
-    const testTheme: Partial<FullTheme> = {
-      Input: {
-        placeholder: 'Enter text',
+    const testTheme: Partial<CreateThemeOptions> = {
+      components: {
+        Input: {
+          placeholder: 'Enter text',
+        },
       },
     };
     const { queryByTestId } = renderWithWrapper(<Input />, '', testTheme);
-    const component = queryByTestId('RNE__Input__text-input');
-    expect(component.props.placeholder).toBe(testTheme.Input.placeholder);
+    const component = queryByTestId('RNE__Input__text-input')!;
+    expect(component.props.placeholder).toBe('Enter text');
   });
 });

packages/themed/src/LinearProgress/__tests__/LinearProgress.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import LinearProgress from '../index';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('LinearProgress Component', () => {
   it('should apply props from theme', () => {
-    const theme: Partial<FullTheme> = {
-      LinearProgress: {
-        color: 'rgb(255, 0, 0)',
+    const theme: Partial<CreateThemeOptions> = {
+      components: {
+        LinearProgress: {
+          color: 'rgb(255, 0, 0)',
+        },
       },
     };
     const { wrapper } = renderWithWrapper(

packages/themed/src/ListItem/__tests__/ListItem.test.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import ListItem from '..';
 import { renderWithWrapper } from '../../../.ci/testHelper';
-import { FullTheme } from '../../config';
+import { CreateThemeOptions, FullTheme } from '../../config';
 
 describe('ListItem component', () => {
   it('should apply values from theme', () => {
-    const theme: Partial<FullTheme> = {
-      ListItemTitle: {
-        style: {
-          color: 'red',
+    const theme: Partial<CreateThemeOptions> = {
+      components: {
+        ListItemTitle: {
+          style: {
+            color: 'red',
+          },
         },
       },
     };