Use mock in StoryBook

components/brave_new_tab_ui/api/brave_news/index.ts

@@ -20,7 +20,10 @@ export default function getBraveNewsController () {
   // doesn't try to connect, or pages which use exported types
   // but ultimately don't fetch any data.
   if (!braveNewsControllerInstance) {
-    braveNewsControllerInstance = BraveNews.BraveNewsController.getRemote()
+    // In Storybook, we have a mocked BraveNewsController because none of the
+    // mojo apis are available.
+    // @ts-expect-error
+    braveNewsControllerInstance = window.storybookBraveNewsController || BraveNews.BraveNewsController.getRemote()
   }
   return braveNewsControllerInstance
 }

components/brave_new_tab_ui/components/braveNews/Modal.tsx

@@ -26,7 +26,7 @@ export default function BraveNewsModal () {
         if (dialogRef.current?.open && !page) { dialogRef.current?.close?.() }
         if (!dialogRef.current?.open && page) { dialogRef.current?.showModal?.() }
     }, [page])
-    return <Dialog ref={dialogRef as any}>
+    return page && <Dialog ref={dialogRef as any}>
         <Configure />
     </Dialog>
 }

components/brave_new_tab_ui/stories/default/data/todayStorybookState.ts

@@ -1,6 +1,6 @@
 import { boolean } from '@storybook/addon-knobs'
 import { BraveTodayState } from '../../../reducers/today'
-import { feed, publishers } from './braveNewsController'
+import { feed, publishers } from './mockBraveNewsController'
 
 export default function getTodayState (): BraveTodayState {
   const hasDataError = boolean('Today data fetch error?', false)

components/brave_new_tab_ui/stories/regular.tsx

@@ -2,6 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+// Import BraveNewsControllerMock first.
+import './default/data/mockBraveNewsController'
+
 import * as React from 'react'
 import { Dispatch } from 'redux'
 import { Provider as ReduxProvider } from 'react-redux'