chore: Fix up storyboards that broke during various refactoring

lifeomic · Jul 24, 2023 · b9f7248 · b9f7248
1 parent 4c2b009
commit b9f7248
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 73 deletions.
diff --git a/example/storybook/helpers/DataProviderDecorator.tsx b/example/storybook/helpers/DataProviderDecorator.tsx
@@ -7,12 +7,14 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { ActiveAccountContext, ActiveProjectContext } from '../../../src/hooks';
 
 export const DataProviderDecorator = (
-  builder: (adapter: MockAdapter) => void,
+  builder?: (adapter: MockAdapter) => void,
 ) => {
   const axiosInstance = axios.create();
   const mock = new MockAdapter(axiosInstance);
 
-  builder(mock);
+  if (builder) {
+    builder(mock);
+  }
 
   const EnvironmentDecorator: DecoratorFunction<any> = (StoryFn, storyCtx) => {
     return (

diff --git a/example/storybook/stories/CustomAppTileScreen.stories.tsx b/example/storybook/stories/CustomAppTileScreen.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
 import {
@@ -15,18 +14,48 @@ import {
   HomeStackParamList,
   HomeStackScreenProps,
 } from '../../../src/navigators/types';
+import { DataProviderDecorator } from '../helpers/DataProviderDecorator';
+import { ScreenSurface } from '../../../src/components/ScreenSurface';
 
-storiesOf('Custom App Tile Screen', module).add('demo', () => (
-  <DeveloperConfigProvider
-    developerConfig={{
-      appTileScreens: {
-        'https://lifeomic.com/custom-app-tile-1': MyCustomAppTileScreen1,
-      },
-    }}
-  >
-    <HomeStack />
-  </DeveloperConfigProvider>
-));
+storiesOf('Custom App Tile Screen', module)
+  .addDecorator(
+    DataProviderDecorator((mock) => {
+      mock.onGet().reply(() => [
+        200,
+        {
+          homeTab: {
+            appTiles: [
+              {
+                id: 'custom-app-tile-1',
+                title: 'Working',
+                source: {
+                  url: 'https://lifeomic.com/custom-app-tile-1',
+                },
+              },
+              {
+                id: 'custom-app-tile-2',
+                title: 'Error 1',
+                source: {
+                  url: 'https://lifeomic.com/custom-app-tile-2',
+                },
+              },
+            ],
+          },
+        },
+      ]);
+    }),
+  )
+  .add('demo', () => (
+    <DeveloperConfigProvider
+      developerConfig={{
+        appTileScreens: {
+          'https://lifeomic.com/custom-app-tile-1': MyCustomAppTileScreen1,
+        },
+      }}
+    >
+      <HomeStack />
+    </DeveloperConfigProvider>
+  ));
 
 function MyCustomAppTileScreen1() {
   return (
@@ -39,46 +68,46 @@ function MyCustomAppTileScreen1() {
 
 function HomeScreen({ navigation, route }: HomeStackScreenProps<'Home'>) {
   return (
-    <View style={{ flex: 1 }}>
-      <SafeAreaView>
-        <ScrollView
-          overScrollMode="always"
-          showsVerticalScrollIndicator={false}
+    <>
+      <ScreenSurface testID="home-screen">
+        <TilesList navigation={navigation} route={route} />
+        <View
+          style={{
+            marginHorizontal: 24,
+            marginBottom: 24,
+          }}
         >
-          <TilesList navigation={navigation} route={route} />
-          <View style={{ padding: 8 }}>
-            <Tile
-              id="app-tile-invalid"
-              title="Error 2"
-              onPress={() => {
-                navigation.navigate('Home/CustomAppTile', {
-                  appTile: {
-                    id: 'app-tile-invalid',
-                    title: 'Title 3',
-                    source: {
-                      url: 'https://lifeomic.com/custom-app-tile-3',
-                    },
+          <Tile
+            id="app-tile-invalid"
+            title="Error 2"
+            onPress={() => {
+              navigation.navigate('Home/CustomAppTile', {
+                appTile: {
+                  id: 'app-tile-invalid',
+                  title: 'Title 3',
+                  source: {
+                    url: 'https://lifeomic.com/custom-app-tile-3',
                   },
-                });
-              }}
-            />
+                },
+              });
+            }}
+          />
+          <View>
+            <Text>
+              Error 1 is an issue where the app is configured with an app tile
+              whose URL is meant to be overridden via DeveloperConfigProvider,
+              but is not. In this case, the real URL is navigated to in a
+              browser, so a friendly error message could be displayed there for
+              this edge case.
+            </Text>
+            <Text>
+              Error 2 is an edge case where Home/CustomAppTile is manually
+              navigated to with a bogus appTile configuration
+            </Text>
           </View>
-        </ScrollView>
-        <View>
-          <Text>
-            Error 1 is an issue where the app is configured with an app tile
-            whose URL is meant to be overridden via DeveloperConfigProvider, but
-            is not. In this case, the real URL is navigated to in a browser, so
-            a friendly error message could be displayed there for this edge
-            case.
-          </Text>
-          <Text>
-            Error 2 is an edge case where Home/CustomAppTile is manually
-            navigated to with a bogus appTile configuration
-          </Text>
         </View>
-      </SafeAreaView>
-    </View>
+      </ScreenSurface>
+    </>
   );
 }
 

diff --git a/example/storybook/stories/Notifications/NotificationsScreen.stories.tsx b/example/storybook/stories/Notifications/NotificationsScreen.stories.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 import { NotificationsScreen } from '.';
 import { PushNotificationsProvider } from '../../../../src/hooks/usePushNotifications';
+import { DataProviderDecorator } from '../../helpers/DataProviderDecorator';
 
-storiesOf('NotificationsScreen', module).add('demo', () => (
-  <PushNotificationsProvider>
-    <NotificationsScreen />
-  </PushNotificationsProvider>
-));
+storiesOf('NotificationsScreen', module)
+  .addDecorator(DataProviderDecorator())
+  .add('demo', () => (
+    <PushNotificationsProvider>
+      <NotificationsScreen />
+    </PushNotificationsProvider>
+  ));
diff --git a/example/storybook/stories/OAuth.stories.tsx b/example/storybook/stories/OAuth.stories.tsx
@@ -11,10 +11,11 @@ import { AuthContextProvider, useAuth } from '../../../src/hooks/useAuth';
 import { CenterView } from '../helpers/CenterView';
 import { BrandConfigProvider } from '../../../src/components/BrandConfigProvider';
 import { authConfig } from '../helpers/oauthConfig';
+import { DataProviderDecorator } from '../helpers/DataProviderDecorator';
 
 storiesOf('OAuth', module)
   .addDecorator((story) => <CenterView>{story()}</CenterView>)
-
+  .addDecorator(DataProviderDecorator())
   .add('demo', () => {
     // Actions:
     const loginOnSuccess = (result: AuthorizeResult) => {

diff --git a/example/storybook/stories/TrackTile/AdvancedTrackerDetails.stories.tsx b/example/storybook/stories/TrackTile/AdvancedTrackerDetails.stories.tsx
@@ -9,7 +9,6 @@ import {
 } from '../../../../src/components/TrackTile/services/TrackTileService';
 import { date, select, withKnobs } from '@storybook/addon-knobs';
 import { activity, mindful, nutrition, sleep } from './util/ontologies';
-import { CenterView } from '../../helpers/CenterView';
 
 const ontology = {} as any;
 
@@ -18,7 +17,6 @@ storiesOf('AdvancedTrackerDetails', module)
   .addDecorator((storyFn, context) =>
     MockEnvironmentDecorator({ ontology })(storyFn, context),
   )
-  .addDecorator((story) => <CenterView>{story()}</CenterView>)
   .add('default', () => {
     const pillarType = select(
       'Pillar Type',

diff --git a/example/storybook/stories/TrackTile/util/MockEnvironmentDecorator.tsx b/example/storybook/stories/TrackTile/util/MockEnvironmentDecorator.tsx
@@ -13,6 +13,7 @@ import {
 } from '../../../../../src/components/TrackTile/hooks/useAxiosTrackTileService';
 import { nutrition } from './ontologies';
 import { HttpClientContextProvider } from '../../../../../src/hooks/useHttpClient';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 const axiosInstance = axios.create();
 const mock = new MockAdapter(axiosInstance);
@@ -52,9 +53,11 @@ export const MockEnvironmentDecorator = ({
 
   const EnvironmentDecorator: DecoratorFunction<any> = (StoryFn, storyCtx) => {
     return (
-      <HttpClientContextProvider injectedAxiosInstance={axiosInstance}>
-        <Provider>{StoryFn(storyCtx)}</Provider>
-      </HttpClientContextProvider>
+      <QueryClientProvider client={new QueryClient()}>
+        <HttpClientContextProvider injectedAxiosInstance={axiosInstance}>
+          <Provider>{StoryFn(storyCtx)}</Provider>
+        </HttpClientContextProvider>
+      </QueryClientProvider>
     );
   };
 

diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts
@@ -1,28 +1,38 @@
+// The order of these imports dictates the order the stories are shown.
+
+// Keep Welcome.stories as the top import
+import './Welcome/Welcome.stories';
+
+// For the rest of these, keep them alphabetized by story kind names.
+
+import './ActivityIndicatorView.stories';
+import './TrackTile/AdvancedTrackerDetails.stories';
+import './TrackTile/AdvancedTrackerEditor.stories';
 import './BrandConfigProvider/BrandConfigProvider.stories';
 import './CustomAppTileScreen.stories';
 import './CustomScreenInjection/CustomScreenInjection.stories';
 import './ExampleApp/ExampleApp.stories';
+import './TrackTile/Indicator.stories';
+import './TrackTile/ManageTrackers.stories';
 import './MyData';
 import './NoInternetToastProvider.stories';
 import './Notifications/NotificationsScreen.stories';
 import './OAuth.stories';
-import './ActivityIndicatorView.stories';
-import './SharingRenderers';
-import './TrackTile/AdvancedTrackerDetails.stories';
-import './TrackTile/Indicator.stories';
-import './TrackTile/AdvancedTrackerEditor.stories';
-import './TrackTile/ManageTrackers.stories';
 import './TrackTile/Pillar.stories';
 import './TrackTile/PillarsTile.stories';
-import './TrackTile/Tracker.stories';
-import './TrackTile/TrackerDetails.stories';
-import './TrackTile/TrackerHistoryChart.stories';
-import './TrackTile/TrackTiles.stories';
+import './SharingRenderers';
 import './Wearables/SelectorRow.stories';
 import './Wearables/SelectorView.stories';
 import './Wearables/SwitchRow.stories';
 import './Wearables/SyncTypeSelectionRow.stories';
 import './Wearables/SyncTypeSelectionView.stories';
+import './TrackTile/Tracker.stories';
+import './TrackTile/TrackerDetails.stories';
+import './TrackTile/TrackerHistoryChart.stories';
+import './TrackTile/TrackTiles.stories';
 import './Wearables/WearableRow.stories';
 import './Wearables/WearablesView.stories';
-import './Welcome/Welcome.stories';
+
+// TODO: Over time, we may want to re-group several stories into the same story
+// kind, for example `storiesOf('Pillars', ...` could have everything related
+// to pillars.