linting errors and storybook update

package.json

@@ -40,17 +40,19 @@
     "lodash.flow": "^3.5.0",
     "prop-types": "^15.7.2",
     "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0"
+    "react-dnd-html5-backend": "^14.0",
+    "react-intl": "^6.2.0"
   },
   "peerDependencies": {
     "react": "0.14.x || 15.x || 16.x || 17.x"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^2.0.1",
-    "@storybook/react": "^6.2.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.12",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
-    "css-loader": "^6.2.0",
+    "css-loader": "5.2.6",
     "esbuild": "^0.12.5",
     "esbuild-loader": "^2.13.1",
     "eslint": "^7.27.0",
@@ -65,8 +67,9 @@
     "node-sass": "^6.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.1.0",
+    "sass": "^1.55.0",
+    "sass-loader": "10.1.1",
+    "style-loader": "2.0.0",
     "typescript": "^4.3.2",
     "webpack": "^4.29.1",
     "webpack-cli": "^4.7.0",

src/actions/default.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getIntl } from '../browser'
 
 const Actions = (props) => {
   const {
@@ -42,15 +43,15 @@ const Actions = (props) => {
       let actionText
       switch (selectedItemsAction[0].action) {
         case 'delete':
-          actionText = 'Deleting ...'
+          actionText = `${getIntl('Deleting')} ...`
           break
 
         case 'rename':
-          actionText = 'Renaming ...'
+          actionText = `${getIntl('Renaming')} ...`
           break
 
         default:
-          actionText = 'Moving ...'
+          actionText = `${getIntl('Moving')} ...`
           break
       }
 
@@ -70,7 +71,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Folder}
-               Add Subfolder
+               {getIntl('Add Subfolder')}
             </a>
           </li>
         )
@@ -86,7 +87,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Rename}
-              &nbsp;Rename
+              &nbsp;{getIntl('Rename')}
             </a>
           </li>
         )
@@ -99,7 +100,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Rename}
-              &nbsp;Rename
+              &nbsp;{getIntl('Rename')}
             </a>
           </li>
         )
@@ -114,7 +115,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Delete}
-              &nbsp;Delete
+              &nbsp;{getIntl('Delete')}
             </a>
           </li>
         )
@@ -127,7 +128,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Delete}
-              &nbsp;Delete
+              &nbsp;{getIntl('Delete')}
             </a>
           </li>
         )
@@ -142,7 +143,7 @@ const Actions = (props) => {
               role="button"
             >
               {icons.Download}
-              &nbsp;Download
+              &nbsp;{getIntl('Download')}
             </a>
           </li>
         )
@@ -165,7 +166,7 @@ const Actions = (props) => {
             role="button"
           >
             {icons.Folder}
-            &nbsp;Add Folder
+            &nbsp;{getIntl('Add Folder')}
           </a>
         </li>
       )

src/base-file.js

@@ -29,12 +29,13 @@ class BaseFile extends React.Component {
       moveFolder: PropTypes.func,
       renameFile: PropTypes.func,
       deleteFile: PropTypes.func,
+      actionTargets: PropTypes.object,
     }),
-  }
+  };
 
   state = {
     newName: this.getName(),
-  }
+  };
 
   selectFileNameFromRef(element) {
     if (element) {
@@ -70,26 +71,31 @@ class BaseFile extends React.Component {
       key: this.props.fileKey,
       extension: this.getExtension(),
     })
-  }
+  };
   handleItemClick = (event) => {
     event.stopPropagation()
-    this.props.browserProps.select(this.props.fileKey, 'file', event.ctrlKey || event.metaKey, event.shiftKey)
-  }
+    this.props.browserProps.select(
+      this.props.fileKey,
+      'file',
+      event.ctrlKey || event.metaKey,
+      event.shiftKey
+    )
+  };
   handleItemDoubleClick = (event) => {
     event.stopPropagation()
     this.handleFileClick()
-  }
+  };
 
   handleRenameClick = (event) => {
     if (!this.props.browserProps.renameFile) {
       return
     }
     this.props.browserProps.beginAction('rename', this.props.fileKey)
-  }
+  };
   handleNewNameChange = (event) => {
     const newName = event.target.value
     this.setState({ newName: newName })
-  }
+  };
   handleRenameSubmit = (event) => {
     if (event) {
       event.preventDefault()
@@ -108,7 +114,7 @@ class BaseFile extends React.Component {
       return
     }
     const invalidChar = ['/', '\\']
-    if (invalidChar.some(char => newName.indexOf(char) !== -1)) return
+    if (invalidChar.some((char) => newName.indexOf(char) !== -1)) return
     // todo: move to props handler
     // window.notify({
     //   style: 'error',
@@ -121,29 +127,29 @@ class BaseFile extends React.Component {
       newKey = `${this.props.fileKey.substr(0, slashIndex)}/${newName}`
     }
     this.props.browserProps.renameFile(this.props.fileKey, newKey)
-  }
+  };
 
   handleDeleteClick = (event) => {
     if (!this.props.browserProps.deleteFile) {
       return
     }
     this.props.browserProps.beginAction('delete', this.props.fileKey)
-  }
+  };
   handleDeleteSubmit = (event) => {
     event.preventDefault()
     if (!this.props.browserProps.deleteFile) {
       return
     }
 
     this.props.browserProps.deleteFile(this.props.browserProps.actionTargets)
-  }
+  };
 
   handleCancelEdit = (event) => {
     this.props.browserProps.endAction()
-  }
+  };
 
   connectDND(render) {
-    const inAction = (this.props.isDragging || this.props.action)
+    const inAction = this.props.isDragging || this.props.action
     if (
       typeof this.props.browserProps.moveFile === 'function' &&
       !inAction &&
@@ -195,7 +201,7 @@ const targetSource = {
     }
     const key = props.newKey || props.fileKey
     const slashIndex = key.lastIndexOf('/')
-    const path = (slashIndex !== -1) ? key.substr(0, slashIndex + 1) : ''
+    const path = slashIndex !== -1 ? key.substr(0, slashIndex + 1) : ''
     const item = monitor.getItem()
     if (item.files && props.browserProps.createFiles) {
       props.browserProps.createFiles(item.files, path)
@@ -221,6 +227,4 @@ const BaseFileConnectors = {
 }
 
 export default BaseFile
-export {
-  BaseFileConnectors,
-}
+export { BaseFileConnectors }

src/base-folder.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import PropTypes from 'prop-types'
 import React from 'react'
+import { getIntl } from './browser'
 import { moveFilesAndFolders } from './utils'
 
 class BaseFolder extends React.Component {
@@ -32,12 +33,14 @@ class BaseFolder extends React.Component {
       moveFolder: PropTypes.func,
       renameFolder: PropTypes.func,
       deleteFolder: PropTypes.func,
+
+      actionTargets: PropTypes.object,
     }),
-  }
+  };
 
   state = {
-    newName: this.props.isDraft ? 'New folder' : this.getName(),
-  }
+    newName: this.props.isDraft ? getIntl('New Folder') : this.getName(),
+  };
 
   selectFolderNameFromRef(element) {
     if (element) {
@@ -57,23 +60,28 @@ class BaseFolder extends React.Component {
 
   handleFolderClick = (event) => {
     event.stopPropagation()
-    this.props.browserProps.select(this.props.fileKey, 'folder', event.ctrlKey || event.metaKey, event.shiftKey)
-  }
+    this.props.browserProps.select(
+      this.props.fileKey,
+      'folder',
+      event.ctrlKey || event.metaKey,
+      event.shiftKey
+    )
+  };
   handleFolderDoubleClick = (event) => {
     event.stopPropagation()
     this.toggleFolder()
-  }
+  };
 
   handleRenameClick = (event) => {
     if (!this.props.browserProps.renameFolder) {
       return
     }
     this.props.browserProps.beginAction('rename', this.props.fileKey)
-  }
+  };
   handleNewNameChange = (event) => {
     const newName = event.target.value
     this.setState({ newName: newName })
-  }
+  };
   handleRenameSubmit = (event) => {
     event.preventDefault()
     event.stopPropagation()
@@ -91,15 +99,20 @@ class BaseFolder extends React.Component {
       return
     }
     const invalidChar = ['/', '\\']
-    if (invalidChar.some(char => newName.indexOf(char) !== -1)) return
+    if (invalidChar.some((char) => newName.indexOf(char) !== -1)) return
     // todo: move to props handler
     // window.notify({
     //   style: 'error',
     //   title: 'Invalid new folder name',
     //   body: 'Folder names cannot contain forward slashes.',
     // })
 
-    let newKey = this.props.fileKey.substr(0, this.props.fileKey.substr(0, this.props.fileKey.length - 1).lastIndexOf('/'))
+    let newKey = this.props.fileKey.substr(
+      0,
+      this.props.fileKey
+        .substr(0, this.props.fileKey.length - 1)
+        .lastIndexOf('/')
+    )
     if (newKey.length) {
       newKey += '/'
     }
@@ -110,33 +123,33 @@ class BaseFolder extends React.Component {
     } else {
       this.props.browserProps.renameFolder(this.props.fileKey, newKey)
     }
-  }
+  };
 
   handleDeleteClick = (event) => {
     if (!this.props.browserProps.deleteFolder) {
       return
     }
     this.props.browserProps.beginAction('delete', this.props.fileKey)
-  }
+  };
   handleDeleteSubmit = (event) => {
     event.preventDefault()
     event.stopPropagation()
     if (!this.props.browserProps.deleteFolder) {
       return
     }
     this.props.browserProps.deleteFolder(this.props.browserProps.actionTargets)
-  }
+  };
 
   handleCancelEdit = (event) => {
     this.props.browserProps.endAction()
-  }
+  };
 
   toggleFolder = () => {
     this.props.browserProps.toggleFolder(this.props.fileKey)
-  }
+  };
 
   connectDND(render) {
-    const inAction = (this.props.isDragging || this.props.action)
+    const inAction = this.props.isDragging || this.props.action
     if (this.props.keyDerived) {
       if (
         typeof this.props.browserProps.moveFolder === 'function' &&
@@ -187,6 +200,4 @@ const BaseFolderConnectors = {
 }
 
 export default BaseFolder
-export {
-  BaseFolderConnectors,
-}
+export { BaseFolderConnectors }