fix(38312): Update dependencies as indicated by Snyk

.storybook/main.ts

@@ -1,20 +1,22 @@
-import type {StorybookConfig} from '@storybook/core-common';
+import type {StorybookConfig} from '@storybook/types';
 
-type Main = {
-    managerHead: (head: string) => string;
-} & StorybookConfig;
-
-const main: Main = {
-    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-    addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-react-native-web'],
+const main: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-webpack5-compiler-babel'],
     staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts'}],
-    core: {
-        builder: 'webpack5',
-    },
-    managerHead: (head: string) => `
+    core: {},
+
+    managerHead: (head) => `
         ${head}
         ${process.env.ENV === 'staging' ? '<meta name="robots" content="noindex">' : ''}
     `,
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: false,
+    },
 };
 
 export default main;

.storybook/manager-head.html

@@ -1,3 +1,2 @@
-<link rel="icon" type="image/png" href="logo.png" />
 <link rel="stylesheet" type="text/css" href="css/fonts.css" />
 <link rel="stylesheet" type="text/css" href="index.css" />

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import {PortalProvider} from '@gorhom/portal';
-import type {Parameters} from '@storybook/addons';
+import type {Parameters} from '@storybook/types';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import {SafeAreaProvider} from 'react-native-safe-area-context';

.storybook/theme.ts

@@ -1,5 +1,5 @@
 import type {ThemeVars} from '@storybook/theming';
-import {create} from '@storybook/theming';
+import {create} from '@storybook/theming/create';
 // eslint-disable-next-line @dword-design/import-alias/prefer-alias
 import colors from '../src/styles/theme/colors';
 
@@ -13,6 +13,7 @@ const theme: ThemeVars = create({
     colorPrimary: colors.productDark400,
     colorSecondary: colors.green,
     appContentBg: colors.productDark100,
+    appPreviewBg: colors.productDark100,
     textColor: colors.productDark900,
     barTextColor: colors.productDark900,
     barSelectedColor: colors.green,

.storybook/webpack.config.ts

@@ -87,6 +87,12 @@ const webpackConfig = ({config}: {config: Configuration}) => {
         loader: require.resolve('@svgr/webpack'),
     });
 
+    config.plugins.push(
+        new DefinePlugin({
+            __DEV__: process.env.NODE_ENV === 'development',
+        }),
+    );
+
     return config;
 };
 

__mocks__/@react-native-community/netinfo.ts

@@ -1,16 +1,15 @@
-import {NetInfoCellularGeneration, NetInfoStateType} from '@react-native-community/netinfo';
 import type {addEventListener, configure, fetch, NetInfoState, refresh, useNetInfo} from '@react-native-community/netinfo';
 
-const defaultState: NetInfoState = {
-    type: NetInfoStateType?.cellular,
+const defaultState = {
+    type: 'cellular',
     isConnected: true,
     isInternetReachable: true,
     details: {
         isConnectionExpensive: true,
-        cellularGeneration: NetInfoCellularGeneration?.['3g'],
+        cellularGeneration: '3g',
         carrier: 'T-Mobile',
     },
-};
+} as NetInfoState;
 
 type NetInfoMock = {
     configure: typeof configure;

__mocks__/@react-navigation/native/index.ts

@@ -1,8 +1,11 @@
-import {useIsFocused as realUseIsFocused} from '@react-navigation/native';
+import {useIsFocused as realUseIsFocused, useTheme as realUseTheme} from '@react-navigation/native';
 
-// We only want this mocked for storybook, not jest
+// We only want these mocked for storybook, not jest
 const useIsFocused: typeof realUseIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;
 
+// @ts-expect-error as we're mocking this function
+const useTheme: typeof realUseTheme = process.env.NODE_ENV === 'test' ? realUseTheme : () => ({});
+
 export * from '@react-navigation/core';
 export * from '@react-navigation/native';
-export {useIsFocused};
+export {useIsFocused, useTheme};