fix: Add dark mode to storybook

.prettierignore

@@ -15,7 +15,7 @@ scripts
 .detoxrc.js
 .prettierignore
 locales
-.storybook
+.storybook/storybook.requires.js
 /ppom
 app/lib/ppom/ppom.html.js
-/app/lib/ppom/blockaid-version.js
+/app/lib/ppom/blockaid-version.js

.storybook/decorators/index.ts

@@ -1,2 +1,4 @@
+export { default as withMockStore } from './withMockStore';
 export { default as withNavigation } from './withNavigation';
 export { default as withSafeArea } from './withSafeArea';
+export { default as withTheme } from './withTheme';

.storybook/decorators/withMockStore.tsx

@@ -0,0 +1,16 @@
+// Third party dependencies
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+// External dependencies
+import { storybookStore } from '../storybook-store';
+
+const mockStore = configureMockStore();
+const store = mockStore(storybookStore);
+
+const withMockStore = (story: any) => {
+  return <Provider store={store}>{story()}</Provider>;
+};
+
+export default withMockStore;

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ThemeProvider from '../../app/component-library/providers/ThemeProvider/ThemeProvider';
+
+const withTheme = (storyFn: () => React.ReactNode) => (
+  <ThemeProvider>{storyFn()}</ThemeProvider>
+);
+
+export default withTheme;

.storybook/preview.js

@@ -1,15 +1,15 @@
-import { ThemeContext, mockTheme } from '../app/util/theme';
-import { withNavigation, withSafeArea } from './decorators';
+import {
+  withMockStore,
+  withTheme,
+  withNavigation,
+  withSafeArea,
+} from './decorators';
 
 export const decorators = [
-  // Using a decorator to apply padding for every story
-  (StoryFn) => (
-    <ThemeContext.Provider value={mockTheme}>
-      {<StoryFn />}
-    </ThemeContext.Provider>
-  ),
+  withTheme,
   withSafeArea,
   withNavigation,
+  withMockStore,
 ];
 
 export const parameters = {

.storybook/storybook-store.js

@@ -0,0 +1,5 @@
+import { AppThemeKey } from '../app/util/theme/models';
+
+export const storybookStore = {
+  user: { appTheme: AppThemeKey.os },
+};

app/component-library/providers/ThemeProvider/ThemeProvider.constants.ts

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+// Test IDs
+export const THEMEPROVIDER_TESTID = 'theme-provider';

app/component-library/providers/ThemeProvider/ThemeProvider.test.tsx

@@ -0,0 +1,37 @@
+// Third party dependencies
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { View } from 'react-native';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+// External dependencies
+import { mockTheme } from '../../../util/theme';
+
+// Internal dependencies
+import ThemeProvider from './ThemeProvider';
+import { THEMEPROVIDER_TESTID } from './ThemeProvider.constants';
+
+// Create a mock store
+const mockStore = configureStore([]);
+const store = mockStore({
+  user: {
+    appTheme: mockTheme.themeAppearance, // or any other relevant initial state
+  },
+});
+
+describe('ThemeProvider', () => {
+  it('should provide the correct theme to its children', () => {
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ThemeProvider>
+          <View />
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(getByTestId(THEMEPROVIDER_TESTID).props.style.backgroundColor).toBe(
+      mockTheme.colors.background.alternative,
+    );
+  });
+});

app/component-library/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,30 @@
+// Third party dependencies
+import React from 'react';
+import { Dimensions, View } from 'react-native';
+
+// External dependencies
+import { useAppTheme, ThemeContext } from '../../../util/theme';
+
+// Internal dependencies
+import { THEMEPROVIDER_TESTID } from './ThemeProvider.constants';
+
+const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
+  const theme = useAppTheme();
+  return (
+    <ThemeContext.Provider value={theme}>
+      <View
+        style={{
+          width: windowWidth,
+          height: windowHeight,
+          backgroundColor: theme.colors.background.alternative,
+        }}
+        testID={THEMEPROVIDER_TESTID}
+      >
+        {children}
+      </View>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;