Add storybook

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  const req = require.context('../src/ui', true, /\-story\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,58 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [
+      {
+        exclude: [
+          /\.html$/,
+          /\.(js|jsx)$/,
+          /\.css$/,
+          /\.json$/,
+        ],
+        loader: require.resolve('file-loader'),
+      },
+      {
+        test: /\.css$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+              plugins: () => [
+                require('postcss-flexbugs-fixes'),
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                  ],
+                  flexbox: 'no-2009',
+                }),
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+};

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.5",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-fa": "^4.2.0",
@@ -44,12 +45,17 @@
     "webpack": "2.6.1",
     "webpack-dev-server": "2.4.5",
     "webpack-manifest-plugin": "1.1.0",
-    "whatwg-fetch": "2.0.3"
+    "whatwg-fetch": "2.0.3",
+    "@storybook/react": "^3.2.14",
+    "@storybook/addon-actions": "^3.2.14",
+    "@storybook/addon-links": "^3.2.14"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "test": "node scripts/test.js --env=jsdom",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "jest": {
     "collectCoverageFrom": [

src/App.css

@@ -66,7 +66,7 @@
   height: 30px;
   background-color: #222222;
   border-radius: 15%;
-  animation: spinner 1.3s cubic-bezier(0.13, 0.85, 0.43, 1.13) infinite;
+  animation: spinner 1.5s cubic-bezier(0.1, 0.03, 0.1, 1.17) infinite;
   transform: opacity;
 }
 
@@ -103,25 +103,35 @@
   background-color: #222;
 }
 
+.ToolBar-filetree_left,
 .ToolBar-filetree_right {
   display: inline-flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .ToolBar-editor_pane {
   display: flex;
   flex-direction: row;
   flex-grow: 2;
   align-items: center;
+  justify-content: space-between;
   padding-left: 20px;
-  padding-right: 20px;
+  padding-right: 14px;
   background-color: #3F3F3F;
   color: #dcdcdc;
 }
 .sidebar-hidden .ToolBar-editor_pane {
   padding-left: 4px;
 }
 
+.ToolBar-editor_left,
+.ToolBar-editor_right {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .ToolBar-preview_pane {
   display: flex;
   flex-direction: row;

src/ToolBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Icon} from 'react-fa';
 import url from 'url';
+import { IconButton } from './ui/Button';
 import './App.css';
 
 const { REACT_APP_PRINT_PAGE_HOST_URL, REACT_APP_VFS_ROOT_URL } = process.env;
@@ -150,30 +151,25 @@ export default class ToolBar extends React.Component {
         {!sidebarHidden &&
           <div className="ToolBar-filetree_pane" ref={it => this.filetreePaneElement = it}>
             <div className="ToolBar-filetree_left">
-              <div className="ToolBar-button" onClick={this.onHideSidebarButtlnClick}>
-                <Icon name="caret-square-o-left" />
-              </div>
+              <IconButton name="caret-square-o-left" onClick={this.onHideSidebarButtlnClick} />
             </div>
             <div className="ToolBar-filetree_right">
-              <div className="ToolBar-button" onClick={this.onUploadButtonClick}>
-                <Icon name="upload" />
-              </div>
-              <div className="ToolBar-button" onClick={this.onCreateNewFileButtonClick}>
-                <Icon name="plus" />
-              </div>
-              <div className="ToolBar-button" onClick={this.onCreateNewFolderButtonClick}>
-                <Icon name="folder" />
-              </div>
+              <IconButton name="upload" onClick={this.onUploadButtonClick} />
+              <IconButton name="plus" onClick={this.onCreateNewFileButtonClick} />
+              <IconButton name="folder" onClick={this.onCreateNewFolderButtonClick} />
             </div>
           </div>
         }
         <div className="ToolBar-editor_pane" ref={it => this.editorPaneElement = it}>
-          {sidebarHidden &&
-            <div className="ToolBar-button" onClick={this.onShowSidebarButtlnClick}>
-              <Icon name="caret-square-o-right" />
-            </div>
-          }
-          <span className="ToolBar-filename">{this.state.filename}</span>
+          <div className="ToolBar-editor_left">
+            {sidebarHidden &&
+              <IconButton name="caret-square-o-right" onClick={this.onShowSidebarButtlnClick} />
+            }
+            <span className="ToolBar-filename">{this.state.filename}</span>
+          </div>
+          <div className="ToolBar-editor_right">
+            <IconButton name="cog" onClick={() => { }} />
+          </div>
         </div>
         <div className="ToolBar-preview_pane" ref={it => this.previewPaneElement = it}>
           <label>

src/ui/Button/Button-story.js

@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { IconButton } from './index.js';
+
+storiesOf('Button', module)
+  .add('IconButton', () => (
+    <div>
+      <IconButton name="upload" onClick={action('clicked')} />
+      <IconButton name="plus" onClick={action('clicked')} />
+      <IconButton name="folder" onClick={action('clicked')} />
+    </div>
+  ));

src/ui/Button/Button.css

@@ -0,0 +1,21 @@
+.IconButton_button {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  margin: 0 3px;
+  cursor: pointer;
+  transition: background-color 0.1s ease-out;
+  background-color: transarent;
+  color: #dcdcdc;
+}
+.IconButton_button:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.IconButton_button:active {
+  color: #dcdcdc;
+  background-color: rgba(0, 0, 0, 0.4);
+}

src/ui/Button/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Icon} from 'react-fa';
+import classnames from 'classnames';
+import './Button.css';
+
+const IconButton = ({
+  className, name,
+  ...other
+}) => {
+  const buttonClasses = classnames(className, 'IconButton_button');
+
+  return (
+    <div {...other} className={buttonClasses}>
+      <Icon name={name} />
+    </div>
+  );
+};
+
+export {
+  IconButton,
+};