Refactor story decorators to enable use of useTheme (#43108)

web/.storybook/preview.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import { rest, setupWorker } from 'msw';
-import { addDecorator, addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/react';
 import {
   darkTheme,
   lightTheme,
@@ -48,7 +48,7 @@ if (typeof global.process === 'undefined') {
 history.init();
 
 // wrap each story with theme provider
-const ThemeDecorator = (storyFn, meta) => {
+const ThemeDecorator = (Story, meta) => {
   let ThemeProvider;
   let theme;
 
@@ -75,27 +75,29 @@ const ThemeDecorator = (storyFn, meta) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Box p={3}>{storyFn()}</Box>
+      <Box p={3}>
+        <Story />
+      </Box>
     </ThemeProvider>
   );
 };
 
 // wrap stories with an argument of {userContext: true} with user context provider
-const UserDecorator = (storyFn, meta) => {
+const UserDecorator = (Story, meta) => {
   if (meta.args.userContext) {
     const UserProvider = UserContextProvider;
     return (
       <UserProvider>
-        <Box p={3}>{storyFn()}</Box>
+        <Story />
       </UserProvider>
     );
   }
 
-  return <Box p={3}>{storyFn()}</Box>;
+  return <Story />;
 };
 
-addDecorator(UserDecorator);
-addDecorator(ThemeDecorator);
+export const decorators = [UserDecorator, ThemeDecorator];
+
 addParameters({
   options: {
     showPanel: false,