fix: storybook render without error (#862)

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>

.storybook/config.js

@@ -3,8 +3,8 @@ import '../src/index.css'
 
 const req = require.context('../src', true, /\.stories\.js$/)
 
-function loadStories() {
+function loadStories () {
   req.keys().forEach((filename) => req(filename))
 }
 
-configure(loadStories, module);
+configure(loadStories, module)

src/components/checkbox/Checkbox.stories.js

@@ -16,13 +16,13 @@ storiesOf('Checkbox', module)
       <Checkbox className='ma2' label='Click me!' onChange={action('Checked')} />
     </div>
   ))
-  .add('Big', () => (
+  .add('Disabled', () => (
     <div>
-      <Checkbox style={bigPicture} label='Click me!' className='ma2' onChange={action('Checked')} />
+      <Checkbox label='Click me!' className='ma2' disabled onChange={action('Checked')} />
     </div>
   ))
-  .add('Disabled', () => (
+  .add('Big', () => (
     <div>
-      <Checkbox style={bigPicture} label='Click me!' className='ma2' disabled onChange={action('Checked')} />
+      <Checkbox style={bigPicture} label='Click me!' className='ma2' onChange={action('Checked')} />
     </div>
   ))

src/components/language-selector/LanguageSelector.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { translate } from 'react-i18next'
 import { getCurrentLanguage } from '../../lib/i18n'
 
 // Components
@@ -29,11 +28,11 @@ class LanguageSelector extends Component {
         </div>
 
         <Overlay show={this.state.isLanguageModalOpen} onLeave={this.onLanguageEditClose} >
-          <LanguageModal className='outline-0' onLeave={this.onLanguageEditClose} />
+          <LanguageModal className='outline-0' onLeave={this.onLanguageEditClose} t={t} />
         </Overlay>
       </div>
     )
   }
 }
 
-export default translate('settings')(LanguageSelector)
+export default LanguageSelector

src/components/language-selector/LanguageSelector.stories.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import i18n from '../../i18n'
+import LanguageSelector from './LanguageSelector'
+
+storiesOf('Language Selector', module)
+  .add('Default', () => (
+    <div className='pa4 bg-light-gray'>
+      <LanguageSelector t={i18n.getFixedT('en', 'settings')} />
+    </div>
+  ))

src/components/language-selector/language-modal/LanguageModal.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { translate } from 'react-i18next'
 import i18n, { localesList } from '../../../i18n'
 import { getLanguage } from '../../../lib/i18n'
 
@@ -48,4 +47,4 @@ LanguageModal.defaultProps = {
   className: ''
 }
 
-export default translate('settings')(LanguageModal)
+export default LanguageModal

src/components/notify/Toast.stories.js

@@ -6,14 +6,14 @@ import Toast from './Toast'
 
 storiesOf('Toast', module)
   .addDecorator(checkA11y)
-  .add('default', () => (
+  .add('Default', () => (
     <div style={{ height: '100vh' }}>
       <Toast onDismiss={action('cancel')}>
         <b>Hurray!</b> New things are available.
       </Toast>
     </div>
   ))
-  .add('error', () => (
+  .add('Error', () => (
     <div style={{ height: '100vh' }}>
       <Toast onDismiss={action('cancel')} error>
         Oh no! Something dreadful has occured.

src/dnd-decorator.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import DnDBackend from './lib/dnd-backend'
+import { DragDropContextProvider } from 'react-dnd'
+
+export default function DndDecorator (fn) {
+  return (
+    <DragDropContextProvider backend={DnDBackend}>
+      {fn()}
+    </DragDropContextProvider>
+  )
+}

src/files/breadcrumbs/Breadcrumbs.stories.js

@@ -2,16 +2,16 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { checkA11y } from '@storybook/addon-a11y'
+import i18n from '../../i18n-decorator'
 import Breadcrumbs from './Breadcrumbs'
 
 storiesOf('Files', module)
   .addDecorator(checkA11y)
+  .addDecorator(i18n)
   .add('Breadcrumbs', () => (
-    <div>
+    <div className='ma3'>
       <Breadcrumbs
-        className='ma2'
         path='/IPFS/MFS Home/images/other'
-        onClick={action('Navigate')}
-      />
+        onClick={action('Navigate')} />
     </div>
   ))

src/files/context-menu/ContextMenu.stories.js

@@ -2,22 +2,24 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { checkA11y } from '@storybook/addon-a11y'
+import i18n from '../../i18n-decorator'
 import ContextMenu from './ContextMenu'
 
 storiesOf('Files', module)
   .addDecorator(checkA11y)
+  .addDecorator(i18n)
   .add('Context Menu', () => (
-    <div className='ma2'>
+    <div className='ma3'>
       <ContextMenu
         top={10}
         left={10}
+        hash={'QmQK3p7MmycDutWkWAzJ4hNN1YBKK9bLTDz9jTtkWf16wC'}
         onShare={action('Share')}
         onInspect={action('Inspect')}
         onRename={action('Rename')}
         onDownload={action('Download')}
         onDelete={action('Delete')}
         onNavigate={action('Navigate')}
-        onCopyHash={action('Copy Hash')}
-      />
+        onCopyHash={action('Copy Hash')} />
     </div>
   ))

src/files/delete-modal/DeleteModal.stories.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import i18n from '../../i18n-decorator'
 import DeleteModal from './DeleteModal'
 
 storiesOf('Files', module)
+  .addDecorator(i18n)
   .add('Delete Modal', () => (
-    <div>
-      <DeleteModal className='ma3' onCancel={action('Cancel')} onDelete={action('Delete')} files={0} folders={1} />
-      <DeleteModal className='ma3' onCancel={action('Cancel')} onDelete={action('Delete')} files={0} folders={2} />
-      <DeleteModal className='ma3' onCancel={action('Cancel')} onDelete={action('Delete')} files={1} folders={0} />
-      <DeleteModal className='ma3' onCancel={action('Cancel')} onDelete={action('Delete')} files={4} folders={0} />
-      <DeleteModal className='ma3' onCancel={action('Cancel')} onDelete={action('Delete')} files={1} folders={1} />
+    <div className='ma3'>
+      <DeleteModal
+        onCancel={action('Cancel')}
+        onDelete={action('Delete')}
+        files={4}
+        folders={0} />
     </div>
   ))

src/files/files-list/FilesList.js

@@ -13,7 +13,7 @@ import { join } from 'path'
 import { sorts } from '../../bundles/files'
 import { Trans, translate } from 'react-i18next'
 
-class FileList extends React.Component {
+export class FilesList extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     files: PropTypes.array.isRequired,
@@ -350,7 +350,9 @@ const dropCollect = (connect, monitor) => ({
   canDrop: monitor.canDrop()
 })
 
+export const FilesListWithDropTarget = DropTarget(NativeTypes.FILE, dropTarget, dropCollect)(translate('files')(FilesList))
+
 export default connect(
   'selectNavbarWidth',
-  DropTarget(NativeTypes.FILE, dropTarget, dropCollect)(translate('files')(FileList))
+  FilesListWithDropTarget
 )

src/files/files-list/FilesList.stories.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import FilesList from './FilesList'
+import i18nDecorator from '../../i18n-decorator'
+import DndDecorator from '../../dnd-decorator'
 import fixture from './fixtures/root.json'
+import { FilesListWithDropTarget as FilesList } from './FilesList'
 
 storiesOf('Files', module)
+  .addDecorator(i18nDecorator)
+  .addDecorator(DndDecorator)
   .add('Files List', () => (
-    <div className='ma2'>
+    <div className='ma4'>
       <FilesList
         root='/'
         files={fixture}
@@ -17,6 +21,7 @@ storiesOf('Files', module)
         onDelete={action('Delete')}
         onNavigate={action('Navigate')}
         onCancelUpload={action('Cancel Upload')}
-      />
+        maxWidth={'100%'}
+        sort={{ by: 'name', asc: true }} />
     </div>
   ))

src/files/rename-modal/RenameModal.stories.js

@@ -1,11 +1,16 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import i18n from '../../i18n-decorator'
 import RenameModal from './RenameModal'
 
 storiesOf('Files', module)
+  .addDecorator(i18n)
   .add('Rename Modal', () => (
-    <div className='ma2'>
-      <RenameModal filename='my-agenda.markdown' onCancel={action('Cancel')} onSubmit={action('Rename')} />
+    <div className='ma3'>
+      <RenameModal
+        filename='my-agenda.markdown'
+        onCancel={action('Cancel')}
+        onSubmit={action('Rename')} />
     </div>
   ))

src/files/selected-actions/SelectedActions.js

@@ -68,14 +68,15 @@ class SelectedActions extends React.Component {
       return this.props.t('finished')
     }
 
-    switch (this.props.downloadProgress) {
-      case 100:
-        return this.props.t('finished')
-      case null:
-        return this.props.t('actions.download')
-      default:
-        return this.props.downloadProgress.toFixed(0) + '%'
+    if (!this.props.downloadProgress) {
+      return this.props.t('actions.download')
     }
+
+    if (this.props.downloadProgress === 100) {
+      return this.props.t('finished')
+    }
+
+    return this.props.downloadProgress.toFixed(0) + '%'
   }
 
   render () {

src/files/selected-actions/SelectedActions.stories.js

@@ -1,36 +1,24 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
+import i18n from '../../i18n-decorator'
 import SelectedActions from './SelectedActions'
 
 storiesOf('Files', module)
-  .add('Actions for One File', () => (
-    <div className='ma2'>
+  .addDecorator(withKnobs)
+  .addDecorator(i18n)
+  .add('Selected Actions', () => (
+    <div className='ma3'>
       <SelectedActions
-        count={1}
+        className='mb4'
+        count={number('Count', 1)}
         size={345345}
-        downloadProgress={null}
         unselect={action('Unselect All')}
         remove={action('Delete Files')}
         share={action('Share Files')}
         download={action('Download Files')}
         rename={action('Rename Files')}
-        inspect={action('Inspect Files')}
-      />
-    </div>
-  ))
-  .add('Actions for Multiple Files', () => (
-    <div className='ma2'>
-      <SelectedActions
-        count={17}
-        size={8518484848}
-        downloadProgress={null}
-        unselect={action('Unselect All')}
-        remove={action('Delete Files')}
-        share={action('Share Files')}
-        download={action('Download Files')}
-        rename={action('Rename Files')}
-        inspect={action('Inspect Files')}
-      />
-    </div>
+        inspect={action('Inspect Files')} />
+    </div >
   ))

src/files/share-modal/ShareModal.stories.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import i18n from '../../i18n-decorator'
+import ShareModal from './ShareModal'
+
+storiesOf('Files', module)
+  .addDecorator(i18n)
+  .add('Share Modal', () => (
+    <div className='ma3'>
+      <ShareModal link='https://ipfs.io/ipfs/QmQK3p7MmycDutWkWAzJ4hNN1YBKK9bLTDz9jTtkWf16wC' />
+    </div>
+  ))

src/i18n-decorator.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from './i18n'
+
+export default function i18nDecorator (fn) {
+  return (
+    <I18nextProvider i18n={i18n}>
+      {fn()}
+    </I18nextProvider>
+  )
+}

src/lib/i18n.js

@@ -7,6 +7,8 @@ export const getCurrentLanguage = () => {
 }
 
 export const getLanguage = (localeCode) => {
+  if (!localeCode) return 'Unknown'
+
   const info = languages[localeCode]
 
   if (!info) {

src/navigation/NavBar.css

@@ -0,0 +1,6 @@
+
+@media only screen and (max-height: 680px) {
+  .navbar-footer {
+    display: none;
+  }
+}