Re-use NTP container in Storybook

Address brave/brave-browser#5180

Storybook stores several copies of container components. This
effort eliminates them in favor of reusing a real-world component.

Limitations apply such as lack of dynamic content. State changes
are triggered via Storybook Knobs hopefully making easier for non-technical
people to understand and hack around Brave features.

.storybook/locale.ts

@@ -318,7 +318,24 @@ const locale: Record<string, string> = {
  whyBraveRewardsDesc2: 'Well, you\'ve come to the right place. Brave welcomes you to the new internet. One where your time is valued, your personal data is kept private, and you actually get paid for your attention.',
  whyHow: 'Why & How',
  yourBalance: 'Your Balance',
- yourWallet: 'Your wallet'
+ yourWallet: 'Your wallet',
+ // New Tab Page
+ adsTrackersBlocked: 'Ads and Trackers Blocked',
+ httpsUpgraded: 'HTTPS Upgrades',
+ estimatedTimeSaved: 'Estimated Time Saved',
+ minutes: 'minutes',
+ photoBy: 'Photo by',
+ thumbRemoved: 'Top site removed',
+ undoRemoved: 'Undo',
+ close: 'Close',
+ hide: 'Hide',
+ dashboardSettingsTitle: 'Dashboard Settings',
+ showBackgroundImg: 'Show background image',
+ showBraveStats: 'Show Brave Stats',
+ showClock: 'Show Clock',
+ showTopSites: 'Show Top Sites',
+ showRewards: 'Show Rewards',
+ rewardsWidgetEnableBrandedWallpaperTitle: 'Get paid to view this sponsored background image.'
 }
 
 export default locale

components/brave_new_tab_ui/stories/default/data/topSites.ts → components/brave_new_tab_ui/data/defaultTopSites.ts

@@ -2,12 +2,12 @@
  * 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 AppStoreFavicon from './siteIcons/appstore.png'
-import BraveFavicon from './siteIcons/brave.png'
-import FacebookFavicon from './siteIcons/facebook.png'
-import PlayStoreFavicon from './siteIcons/playstore.png'
-import TwitterFavicon from './siteIcons/twitter.png'
-import YouTubeFavicon from './siteIcons/youtube.png'
+import AppStoreFavicon from '../../img/newtab/defaultTopSitesIcon/appstore.png'
+import BraveFavicon from '../../img/newtab/defaultTopSitesIcon/brave.png'
+import FacebookFavicon from '../../img/newtab/defaultTopSitesIcon/facebook.png'
+import PlayStoreFavicon from '../../img/newtab/defaultTopSitesIcon/playstore.png'
+import TwitterFavicon from '../../img/newtab/defaultTopSitesIcon/twitter.png'
+import YouTubeFavicon from '../../img/newtab/defaultTopSitesIcon/youtube.png'
 
 export const defaultTopSitesData = [
  {

components/brave_new_tab_ui/storage.ts

@@ -4,13 +4,18 @@
 
 // Utils
 import { debounce } from '../common/debounce'
+import {
+ getLoadTimeDataString,
+ getLoadTimeDataBoolean,
+ getChromeDataBoolean
+} from '../common/loadTimeDataUtils'
 
 const keyName = 'new-tab-data'
 
 const defaultState: NewTab.State = {
  initialDataLoaded: false,
- textDirection: window.loadTimeData.getString('textdirection'),
- featureFlagBraveNTPBrandedWallpaper: window.loadTimeData.getBoolean('featureFlagBraveNTPBrandedWallpaper'),
+ textDirection: getLoadTimeDataString('textdirection'),
+ featureFlagBraveNTPBrandedWallpaper: getLoadTimeDataBoolean('featureFlagBraveNTPBrandedWallpaper'),
  showBackgroundImage: false,
  showStats: false,
  showClock: false,
@@ -23,7 +28,7 @@ const defaultState: NewTab.State = {
  pinnedTopSites: [],
  gridSites: [],
  showEmptyPage: false,
- isIncognito: chrome.extension.inIncognitoContext,
+ isIncognito: getChromeDataBoolean('inIncognitoContext'),
  useAlternativePrivateSearchEngine: false,
  isTor: false,
  isQwant: false,
@@ -55,9 +60,9 @@ const defaultState: NewTab.State = {
  }
 }
 
-if (chrome.extension.inIncognitoContext) {
- defaultState.isTor = window.loadTimeData.getBoolean('isTor')
- defaultState.isQwant = window.loadTimeData.getBoolean('isQwant')
+if (getChromeDataBoolean('inIncognitoContext')) {
+ defaultState.isTor = getLoadTimeDataBoolean('isTor')
+ defaultState.isQwant = getLoadTimeDataBoolean('isQwant')
 }
 
 const getPersistentData = (state: NewTab.State): NewTab.PersistentState => {

components/brave_new_tab_ui/stories/default.tsx

@@ -3,22 +3,52 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import { Provider as ReduxProvider } from 'react-redux'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, select, boolean } from '@storybook/addon-knobs/react'
+import { withKnobs, select } from '@storybook/addon-knobs/react'
+import Theme from 'brave-ui/theme/brave-default'
+import DarkTheme from 'brave-ui/theme/brave-dark'
+import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
 
 // Components
-import NewTabPage from './default/index'
+import NewTabPage from '../containers/newTab'
+import * as actions from '../actions/new_tab_actions'
+import store from '../store'
+import { getNewTabData } from './default/data/storybookState'
 
-storiesOf('New Tab/Default', module)
+export default function Provider ({ story }: any) {
+ return (
+ <ReduxProvider store={store}>
+ <BraveCoreThemeProvider
+ dark={DarkTheme}
+ light={Theme}
+ initialThemeType={select(
+ 'Theme',
+ { ['Light']: 'Light', ['Dark']: 'Dark', ['System']: 'System' },
+ 'System'
+ )}
+ >
+ {story}
+ </BraveCoreThemeProvider>
+ </ReduxProvider>
+ )
+}
+
+storiesOf('New Tab/Containers', module)
  .addDecorator(withKnobs)
- .add('Page', () => {
+ .addDecorator(story => <Provider story={story()} />)
+ .add('Default', () => {
+ const doNothing = (value: boolean) => value
  return (
  <NewTabPage
- textDirection={select('Text direction', { ltr: 'ltr', rtl: 'rtl' } , 'ltr')}
- showBrandedWallpaper={boolean('Show branded wallpaper?', false)}
- showTopSitesNotification={boolean('Show top sites notification?', false)}
- isAdsOn={boolean('Ads on?', true)}
- isAdsSupported={boolean('Ads region supported?', true)}
+ newTabData={getNewTabData(store.getState().newTabData as NewTab.State)}
+ actions={actions}
+ saveShowBackgroundImage={doNothing}
+ saveShowClock={doNothing}
+ saveShowTopSites={doNothing}
+ saveShowStats={doNothing}
+ saveShowRewards={doNothing}
+ saveBrandedWallpaperOptIn={doNothing}
  />
  )
  })

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

@@ -0,0 +1,64 @@
+import { select, boolean, number } from '@storybook/addon-knobs/react'
+import { images } from '../../../data/backgrounds'
+import { defaultTopSitesData } from '../../../data/defaultTopSites'
+import dummyBrandedWallpaper from './brandedWallpaper'
+
+function generateStaticImages (images: NewTab.Image[]) {
+ const staticImages = {}
+ for (const image of images) {
+ Object.assign(staticImages, {
+ [image.author]: {
+ ...image,
+ source: require('../../../../img/newtab/' + image.source)
+ }
+ })
+ }
+ return staticImages
+}
+
+function generateTopSites (topSites: typeof defaultTopSitesData) {
+ const staticTopSites = []
+ for (const [index, topSite] of topSites.entries()) {
+ staticTopSites.push({
+ ...topSite,
+ index,
+ title: topSite.name,
+ letter: '',
+ thumb: '',
+ themeColor: '',
+ computedThemeColor: '',
+ pinned: false
+ })
+ }
+ return staticTopSites
+}
+
+function shouldShowBrandedWallpaperData (shouldShow: boolean) {
+ if (shouldShow === false) {
+ return {
+ BrandedWallpaper: '',
+ wallpaperImageUrl: '',
+ logo: { image: '', companyName: '', alt: '', destinationUrl: '' }
+ }
+ }
+ return dummyBrandedWallpaper
+}
+
+export const getNewTabData = (state: NewTab.State) => ({
+ ...state,
+ brandedWallpaperData: shouldShowBrandedWallpaperData(boolean('Show branded background image?', true)),
+ backgroundImage: select('Background image', generateStaticImages(images), generateStaticImages(images)['SpaceX']),
+ showBackgroundImage: boolean('Show background image?', true),
+ showStats: boolean('Show stats?', true),
+ showClock: boolean('Show clock?', true),
+ showTopSites: boolean('Show top sites?', true),
+ showRewards: boolean('Show rewards?', true),
+ textDirection: select('Text direction', { ltr: 'ltr', rtl: 'rtl' } , 'ltr'),
+ gridSites: generateTopSites(defaultTopSitesData),
+ stats: {
+ ...state.stats,
+ adsBlockedStat: number('Number of blocked items', 1337),
+ httpsUpgradesStat: number('Number of HTTPS upgrades', 1337)
+ },
+ initialDataLoaded: true
+})