Introduce Storybook, beginning with New Tab Page

.storybook/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}

.storybook/addons.js

@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+// for docs see https://github.com/echoulen/storybook-addon-styled-component-theme
+import 'storybook-addon-styled-component-theme/dist/src/register'
+
+// for docs see https://www.npmjs.com/package/@storybook/addon-backgrounds
+import '@storybook/addon-backgrounds/register'
+
+// for docs see https://github.com/storybooks/storybook/tree/master/addons/actions
+import '@storybook/addon-actions/register'
+
+// for docs see https://github.com/storybooks/storybook/tree/master/addons/knobs
+import '@storybook/addon-knobs/register'
+
+// for docs see https://github.com/storybooks/storybook/tree/master/addons/options
+import '@storybook/addon-options/register'
+
+// for docs see https://github.com/dump247/storybook-state
+// this addon is surfacing in every panel ATM. this is a bug. track it here:
+// https://github.com/dump247/storybook-state/pull/12
+// import '@dump247/storybook-state/register'

.storybook/config.js

@@ -0,0 +1,40 @@
+import { withBackgrounds } from '@storybook/addon-backgrounds'
+import { configure, addDecorator, addParameters } from '@storybook/react'
+import { withOptions } from '@storybook/addon-options'
+import { initLocale } from 'brave-ui/helpers'
+import locale from './locale'
+import { withThemesProvider } from 'storybook-addon-styled-component-theme'
+import DarkTheme from 'brave-ui/theme/brave-dark'
+import DefaultTheme from 'brave-ui/theme/brave-default'
+
+// Fonts
+import '../ui/webui/resources/fonts/muli.css'
+import '../ui/webui/resources/fonts/poppins.css'
+
+const themes = [DefaultTheme, DarkTheme]
+addDecorator(withThemesProvider(themes))
+
+addParameters({
+  backgrounds: [
+    { name: 'Neutral300', value: '#DEE2E6', default: true },
+    { name: 'Grey700', value: '#5E6175' },
+    { name: 'White', value: '#FFF' },
+    { name: 'Grey900', value: '#1E2029' }
+  ]
+})
+
+addParameters({
+  options: {
+    name: 'Brave Browser UI',
+    url: 'https://github.com/brave/brave-core',
+    panelPosition: 'right'
+  }
+})
+
+function loadStories() {
+  initLocale(locale)
+  const req = require.context('../components/', true, /\/stories\/.*\.tsx$/)
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

.storybook/locale.ts

@@ -0,0 +1,223 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+const locale: Record<string, string> = {
+  about: 'about',
+  accept: 'Accept',
+  activityCopy: '©2016 –2018 Brave Software. Brave is a registered trademark of Brave Software. Site names may be trademarks or registered trademarks of the site owner.',
+  activityNote: 'To protect your privacy, this Brave Rewards statement is not saved, recorded or logged anywhere other than on your device (this computer). It cannot be retrieved from Brave in the event of data loss on your device.',
+  addFunds: 'add funds',
+  addFundsFAQ: 'the FAQ',
+  addFundsNote: 'Reminder: The Brave Wallet is unidirectional and BAT flows to publisher sites. For more information about Brave Payments, please visit',
+  addFundsQR: 'Show QR Code',
+  addFundsText: 'Be sure to use the address below that matches the type of cryto you own. It will be converted automatically to BAT by Uphold and appear as an increased balance in your Brave Rewards wallet. Please allow up to one hour for your wallet balance to update.',
+  addFundsTitle: 'Send cryptocurrency from your external account to your Brave Rewards wallet.',
+  allowTip: 'Allow tips on',
+  amount: 'Amount',
+  autoTipText: 'You are automatically sending a tip to:',
+  backup: 'Backup',
+  backupNow: 'Backup Now',
+  backupWalletTitle: 'Backup Wallet',
+  bat: 'BAT',
+  braveAdsDesc: 'No action required. Just collect tokens. Your data is safe with our Shields.',
+  braveAdsTitle: 'Brave Ads',
+  braveContributeDesc: 'Set budget and browse normally. Your favorite sites get paid automatically.',
+  braveContributeTitle: 'Auto-Contribute',
+  braveRewards: 'Brave Rewards',
+  braveRewardsDesc: 'Earn tokens for viewing privacy-respecting ads, and pay it forward by supporting content creators you love!',
+  braveRewardsOptInText: 'Yes, I\'m In!',
+  braveRewardsSubTitle: 'Get Rewarded for Browsing!',
+  braveRewardsTeaser: 'How it works...',
+  braveRewardsTitle: 'Brave Rewards',
+  braveVerified: 'Brave Verified Publishers',
+  cancel: 'Cancel',
+  captchaDrag: 'Drag the BAT Icon on to the',
+  captchaLuckyDay: 'It’s your lucky day!',
+  captchaOnTheWay: 'Your token grant is on its way.',
+  captchaProveHuman: 'Prove that you are human!',
+  captchaTarget: 'target.',
+  captchaMissedTarget: 'Hmm… Not Quite. Try Again.',
+  claim: 'Claim',
+  closeBalance: 'Closing Balance',
+  contribute: 'Contribute',
+  contributeAllocation: 'Auto-Contribute Allocation',
+  contributeTooltip: 'Auto-Contribute Settings',
+  copy: 'Copy',
+  currentDonation: 'You’re currently donating {{currentDonation}} BAT to this site every month.',
+  braveRewardsCreatingText: 'Creating wallet',
+  date: 'Date',
+  deposit: 'Deposit',
+  deposits: 'Deposits',
+  description: 'Description',
+  disabledPanelOff: 'Off',
+  disabledPanelSettings: 'Settings.',
+  disabledPanelPrivateText: 'Brave Rewards is not available while in a Private Window.',
+  disabledPanelText: 'You are not currently accruing any Rewards benefits while browsing. Turn Rewards back on in',
+  disabledPanelTitle: 'Brave Rewards is',
+  dndCaptchaText1: 'Drag and drop the token logo onto the',
+  dndCaptchaText2: 'target',
+  donation: 'Donation',
+  donationAmount: 'Donation amount',
+  donateMonthly: 'Tip this site Monthly',
+  donateNow: 'Send a tip…',
+  donationFailureMsg: 'Looks like something went wrong. Please try again later.',
+  donationSent: 'Donation Sent!',
+  donationTips: 'Donation & Tips',
+  done: 'Done',
+  doMonthly: 'Set recurring donation',
+  downloadPDF: 'Download as PDF',
+  earningsAds: 'Earnings from Ads',
+  earningsClaimBat: 'BAT,',
+  earningsClaimDefault: 'Your Ads earnings are available.',
+  earningsClaimOne: 'Your Ads earnings,',
+  earningsClaimTwo: 'are available.',
+  enableTips: 'Enable Tips',
+  excludeSite: 'Exclude this site',
+  excludedSitesText: 'Sites excluded from Auto-Contributions:',
+  expiresOn: 'expires on',
+  firstTipDateText: 'Your first monthly tip will be sent on:',
+  for: 'for',
+  grants: 'Grants',
+  grantDisclaimer: 'Unused tokens by the expiration date will be automatically returned to the Brave User Growth Pool.',
+  grantExpire: 'Grant Expiration Date',
+  import: 'import',
+  includeInAuto: 'Include in Auto-Contribute',
+  learnMore: 'Learn More',
+  makeMonthly: 'Make this monthly',
+  manageWallet: 'Manage Your Wallet',
+  monthApr: 'Apr',
+  monthAug: 'August',
+  monthDec: 'December',
+  monthFeb: 'February',
+  monthJan: 'January',
+  monthJul: 'July',
+  monthJun: 'June',
+  monthMar: 'March',
+  monthMay: 'May',
+  monthNov: 'November',
+  monthOct: 'October',
+  monthSep: 'September',
+  monthlyText: 'Monthly',
+  monthlyTips: 'Monthly Tips!',
+  newGrant: 'A free token grant is available.',
+  newTokenGrant: 'New Token Grant',
+  noActivity: 'No activities yet…',
+  noGrants: 'Currently no token grant is available.',
+  notEnoughTokens: 'Not enough tokens. Please',
+  noThankYou: 'No, thank you',
+  off: 'off',
+  ok: 'ok',
+  on: 'on',
+  oneTime: 'One time',
+  oneTimeDonation: 'One-time Tips',
+  openBalance: 'Opening Balance',
+  payment: 'Payment',
+  paymentMonthly: 'Payment made every {{day}}th day in each month.',
+  paymentNotMade: 'Payment not made.',
+  paymentWarning: 'When your balance is not enough to cover the combined total of Auto-Contribute and the recurring donations, these payments are skipped for the period.',
+  pinnedSitesHeader: 'Pinned sites are now',
+  pinnedSitesMsg: 'Here\'s how monthly tips work:',
+  pinnedSitesOne: 'Monthly tips do not come out of your Auto-Contribute payment. They\'re separate.',
+  pinnedSitesTwo: 'Each site is paid a fixed amount monthly.',
+  pinnedSitesThree: 'Monthly tips are paid out all at once, each month. If you\'re using Auto-Contribute, tips go out at the same time as your monthly Auto-Contribute payment.',
+  pinnedSitesFour: 'You can remove any site receiving monthly tips from inside of the Tips panel.',
+  pleaseNote: 'Please note:',
+  print: 'Print',
+  readyToTakePart: 'Ready to get started?',
+  readyToTakePartOptInText: 'Yes I\'m Ready!',
+  readyToTakePartStart: 'You can start with the',
+  recoveryKeys: 'Recovery Key',
+  recurring: 'Recurring',
+  recurringDonation: 'Recurring Donation',
+  recurringDonations: 'Monthly Tips',
+  remove: 'remove',
+  reservedAmountText: 'You’ve designated {{reservedAmount}} BAT for creators who haven’t yet signed up to receive contributions. We’ll keep trying to contribute until they verify, or until 90 days have passed.',
+  reservedMoreLink: 'Learn more.',
+  restore: 'Restore',
+  restoreAll: 'Restore All',
+  reviewSitesMsg: 'Your pinned sites have been moved to',
+  rewardsBackupText1: 'Backup your Wallet',
+  rewardsBackupText2: 'Keep this recovery key safe.',
+  rewardsBackupText3: 'You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It\'s probably safest to write it down on a piece of paper, or wherever else you keep important info.',
+  rewardsBannerText1: 'Thanks for stopping by. We joined Brave’s vision of protecting your privacy because we believe that fans like you would support us in our effort to keep the web a clean and safe place to be.',
+  rewardsBannerText2: 'Your donation is much appreciated and it encourages us to continue to improve our content.',
+  rewardsContribute: 'Auto-Contribute',
+  rewardsContributeAttention: 'Attention',
+  rewardsContributeAttentionScore: 'Attention',
+  rewardsContributeText1: 'You’re currently supporting',
+  rewardsOffText1: 'Do you know that you’ve been paying for the web content with your data for the digital ads? You didn’t have a voice in it and worse, you’re exposed to privacy and security risks.',
+  rewardsOffText2: 'Brave Rewards allows you to take control back.',
+  rewardsOffText3: 'How does it work?',
+  rewardsOffText4: 'Your attention is valuable. Get paid for the ads. And pay directly the favorite content creators at your will. That way, they can grow and continue delivering the content that delights you.',
+  rewardsPanelEmptyText1: 'Sadly, no tokens yet.',
+  rewardsPanelEmptyText2: '3 ways to fill your wallet:',
+  rewardsPanelEmptyText3: 'You can add funds.',
+  rewardsPanelEmptyText4: 'You can earn tokens from Brave Ads.',
+  rewardsPanelEmptyText5: 'Occasionally, you will also received token grants from Brave. So keep an eye out for the alert!',
+  rewardsPanelOffText1: 'Get Rewarded for Browsing!',
+  rewardsPanelOffText2: 'Earn tokens for your attention to ads and pay it forward to support content creators you value!',
+  rewardsPanelText1: 'Add, withdraw and manage funds at',
+  rewardsPanelText2: 'Brave wallet is managed by',
+  rewardsPanelText3: 'Brave Rewards is built on the Basic Attention Token. Learn more about BAT',
+  rewardsPanelText4: 'here',
+  rewardsRestoreText1: 'Restore your Wallet',
+  rewardsRestoreText2: 'Use your recovery key to restore your wallet.',
+  rewardsRestoreText3: 'Restoring with a recovery key will replace your current wallet. So make sure you empty or back up your current wallet before restoring.',
+  rewardsRestoreText4: 'Enter your recovery key or',
+  rewardsSummary: 'Rewards Summary',
+  rewardsWhy: 'Why Brave Rewards…',
+  saveAsFile: 'Save',
+  seeAllItems: 'See all {{numItems}} items',
+  seeAllSites: 'See all {{numSites}} sites',
+  sendDonation: 'Send my donation',
+  sendTip: 'Send my Tip',
+  settings: 'Settings',
+  site: 'site',
+  siteBannerNoticeNote: 'NOTE:',
+  siteBannerNoticeText: 'This creator has not yet verified their site. As soon as they verify with Brave, they will receive your tip.',
+  sites: 'sites',
+  thankYou: 'Thank You!',
+  tipOnLike: 'Tip on like',
+  tipText: 'You\'ve just sent a tip to:',
+  titleBAT: 'Basic Attention token (BAT)',
+  titleBTC: 'BitCoin (BTC)',
+  titleETH: 'Etherium (ETH)',
+  titleLTC: 'Lite Coin (LTC)',
+  tokenGrant: 'Token Grants',
+  tokenGrantClaimed: 'Token Grants Claimed',
+  tokens: 'tokens',
+  total: 'Total',
+  transactions: 'Transactions',
+  turnOnRewardsDesc: 'This enables both Brave Ads and Auto-Contribute. You can always opt out each any time.',
+  turnOnRewardsTitle: 'Turn on Rewards',
+  type: 'Type',
+  uhOh: 'Uh oh…',
+  unVerifiedPublisher: 'Not yet verified',
+  unVerifiedText: 'This creator has not yet signed up to receive contributions from Brave users.',
+  unVerifiedTextMore: 'Learn more.',
+  verifiedPublisher: 'Brave Verified Publisher',
+  viewDetails: 'View Details',
+  viewMonthly: 'View Monthly Statement for Details',
+  walletActivity: 'Wallet Activity',
+  walletAddress: 'Wallet Address',
+  walletBalance: 'wallet balance',
+  walletFailedButton: 'Re-try',
+  walletFailedTitle: 'Wallet creation failed',
+  walletFailedText: 'Please check your internet connection.',
+  welcome: 'Welcome!',
+  welcomeButtonTextOne: 'Start Earning Now!',
+  welcomeButtonTextTwo: 'Join Rewards',
+  welcomeDescOne: 'You can now earn tokens for watching privacy focused Brave Ads. Your contribution stays the same.',
+  welcomeDescTwo: 'Earn tokens for watching Ads and pay it forward to your favorite content creators.',
+  welcomeFooterTextOne: 'Check out what’s improved',
+  welcomeFooterTextTwo: 'Learn More',
+  welcomeHeaderOne: 'Brave Payments is now Brave Rewards with many upgrades.',
+  welcomeHeaderTwo: 'You are about to start a very Brave way to browse the web.',
+  whyBraveRewards: 'Why Brave Rewards?',
+  whyBraveRewardsDesc1: 'With conventional browsers, you pay to browse the web by viewing ads with your valuable attention, spending your valuable time downloading invasive ad technology, that transmits your valuable private data to advertisers — without your consent.',
+  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.',
+  yourWallet: 'Your wallet'
+}
+
+export default locale

.storybook/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path')
+
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
+  .default
+
+function getStyledComponentDisplay (filename, bindingName) {
+  return bindingName
+}
+
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  // Make whatever fine-grained changes you need
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('awesome-typescript-loader'),
+    options: {
+      configFileName: path.resolve(__dirname, '..', 'tsconfig-storybook.json'),
+      getCustomTransformers: () => ({
+        before: [
+          createStyledComponentsTransformer({
+            options: {
+              getDisplayName: getStyledComponentDisplay
+            }
+          })
+        ]
+      })
+    }
+  })
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'brave-ui': path.resolve(__dirname, '../node_modules/brave-ui/src')
+  }
+  config.resolve.extensions.push('.ts', '.tsx')
+  return config
+}