feat(react-web): extract custom ThemeProvider and useTheme hook

Create our own `ThemeContext` that has a default value
This way components that we convert to web-components don't
have to be individually wrapped by a `ThemeProvider`

packages/components/react-web/.storybook/preview.js

@@ -1,16 +1,14 @@
 import React from 'react';
-import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider } from '../src';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: { grid: { cellSize: 16, opacity: 0.25 } },
 };
 
-const theme = require('@compassion-gds/tokens');
-
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider>
       <Story />
     </ThemeProvider>
   ),

packages/components/react-web/src/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,26 @@
+import React, { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import PropTypes from 'prop-types';
+import { useContext, createContext } from 'react';
+import defaultTheme from "@compassion-gds/tokens";
+
+const ThemeContext = createContext(defaultTheme);
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ theme = defaultTheme, children }) => (
+    <ThemeContext.Provider value={theme}>
+        <EmotionThemeProvider theme={theme}>
+            {children}
+        </EmotionThemeProvider>
+    </ThemeContext.Provider>
+);
+
+ThemeProvider.propTypes = {
+    theme: PropTypes.shape({
+        component: PropTypes.objectOf(PropTypes.object).isRequired,
+    }),
+};
+
+ThemeProvider.defaultProps = {
+    theme: defaultTheme,
+};

packages/components/react-web/src/ThemeProvider/index.js

@@ -0,0 +1 @@
+export * from './ThemeProvider';

packages/components/react-web/src/hooks/index.js

@@ -0,0 +1 @@
+export { useTheme } from '../ThemeProvider';

packages/components/react-web/src/index.js

@@ -10,3 +10,5 @@ export * from './Select';
 export * from './Image';
 export * from './ProgressBar';
 export * from './Uploader';
+export * from './ThemeProvider';
+export * from './hooks';