Merge pull request #33 from carvallegro/master

Added Storybook and StyledComponents. Removed Sass
nitin42 · Aug 19, 2017 · 43df64a · 43df64a
2 parents 349fb98 + f421541
commit 43df64a
Show file tree

Hide file tree

Showing 29 changed files with 1,662 additions and 780 deletions.
diff --git a/.hound.yml b/.hound.yml
@@ -1,4 +1,6 @@
+jslint:
+  enabled: false
 eslint:
-  enabled: true
+  enabled: false
   config_file: .eslintrc
   ignore_file: .eslintignore
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -0,0 +1,18 @@
+// 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.
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    loaders: [
+      // add your custom loaders.
+    ],
+  },
+};
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -9,6 +9,9 @@ I'm excited to have you helping out. Thank you so much for your time.
 Considering you've forked and cloned the repo on your system, switch to the directory and install the dependencies.
 
 ```
+npm install g babel-cli
+npm install g webpack-cli
+
 cd terminal-in-react
 npm install
 ```
@@ -24,12 +27,10 @@ npm install
 
 ### Starting development server
 
-To test your changes, there is a [starter](./starter) folder where you will find two files, `index.html` and `App.js`. 
+To test your changes [Storybook](https://storybook.js.org) is used. This is a neat tool to test your component in an isolated state.
 
-Make your changes to `App.js` and start the development server with -
+To start it, simply run `npm run storybook` and head to [http://localhost:6006]().
 
-```
-npm run start
-```
+To add a new use case, just add a new story in the `stories/index.js` file.
 
 That's it! I am excited to see your pull request.
diff --git a/README.md b/README.md
@@ -20,8 +20,6 @@
 
 * [Usage](#usage)
 
-* [Styling](#include-the-css)
-
 * [Working](#working)
 
 * [Plugins](#using-plugins-)
@@ -42,6 +40,8 @@
 
 * [Troubleshooting](#troubleshooting)
 
+* [Detailed reference](https://github.com/nitin42/terminal-in-react/wiki)
+
 ## Install
 
 ```
@@ -59,7 +59,6 @@ yarn add terminal-in-react
 ```jsx
 import React, { Component } from 'react';
 import Terminal from 'terminal-in-react';
-import 'terminal-in-react/lib/css/index.css';
 
 class App extends Component {
   showMsg = () => 'Hello World'
@@ -96,9 +95,6 @@ class App extends Component {
   }
 }
 ```
-#### Include the CSS
-
-Ensure that `terminal-in-react/lib/css/index.css` is loaded
 
 > Be careful when copying this example because it uses `window` object (`'open-google': () => window.open("https://www.google.com/", "_blank"),`) which is only available on the client-side and it will give you an error if you're doing server side rendering.
 

diff --git a/__tests__/__snapshots__/terminal.test.js.snap b/__tests__/__snapshots__/terminal.test.js.snap
@@ -2,24 +2,15 @@
 
 exports[`Terminal Component should render a terminal component 1`] = `
 <div
-  className="terminal-base"
-  style={Object {}}
+  className="terminal-base sc-bdVaJa krmIoX"
 >
   <div
-    className="terminal-container-wrapper"
-    style={
-      Object {
-        "color": "green",
-      }
-    }
+    className="sc-bwzfXH dLBnSZ"
+    style={Object {}}
   >
     <div
-      className="terminal-top-bar adjust-bar"
-      style={
-        Object {
-          "backgroundColor": "black",
-        }
-      }
+      className="sc-bxivhb hdqhPL"
+      style={Object {}}
     >
       <svg
         height="20"
@@ -31,69 +22,100 @@ exports[`Terminal Component should render a terminal component 1`] = `
           fill="red"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
         <circle
           cx="44"
           cy="14"
           fill="orange"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
         <circle
           cx="64"
           cy="14"
           fill="green"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
       </svg>
     </div>
     <div
-      className="terminal-container terminal-container-main"
-      onClick={[Function]}
+      className="sc-jTzLTM lfnIny"
+      style={Object {}}
+    >
+      <div
+        className="sc-cSHVUG jgYAxu"
+        onClick={[Function]}
+        onFocus={[Function]}
+        tabIndex={0}
+        title="bash"
+      >
+        bash
+      </div>
+      <div
+        className="sc-fjdhpX ghCJNo"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="sc-kAzzGY hjGnyC"
+          onClick={[Function]}
+        >
+          +
+        </div>
+      </div>
+    </div>
+    <div
+      className="sc-EHOje ezjTKM"
+      onKeyUp={[Function]}
       style={
         Object {
-          "backgroundColor": "yellow",
+          "overflowY": "auto",
         }
       }
+      tabIndex="0"
     >
       <div
-        className="terminal-holder"
+        className="sc-gZMcBi cwkXTh"
       >
         <div
-          className="terminal-content"
+          className="sc-gqjmRU gAcuTz"
         >
           <div
-            className="terminal-input-area"
+            className="sc-VigVT bYwkqd"
           >
             <pre
-              className="terminal-output-line"
+              className="sc-gzVnrw iGGAfs"
             >
               Hello World. My name is Nitin Tulswani
             </pre>
             <div
-              className="terminal-input"
+              className="sc-htoDjs iQSzyY"
             >
               <span
-                className="terminal-prompt"
-                style={
-                  Object {
-                    "color": "green",
-                  }
-                }
+                className="sc-dnqmqq dNrvp"
               >
                 &gt;
               </span>
               <input
-                className="terminal-main-input"
+                className="sc-iwsKbI jBOpwP"
                 onKeyDown={[Function]}
                 onKeyPress={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "yellow",
-                    "color": "green",
-                  }
-                }
                 tabIndex="-1"
                 type="text"
               />
@@ -108,24 +130,15 @@ exports[`Terminal Component should render a terminal component 1`] = `
 
 exports[`Terminal Component should work with plugins 1`] = `
 <div
-  className="terminal-base"
-  style={Object {}}
+  className="terminal-base sc-bdVaJa krmIoX"
 >
   <div
-    className="terminal-container-wrapper"
-    style={
-      Object {
-        "color": "green",
-      }
-    }
+    className="sc-bwzfXH dLBnSZ"
+    style={Object {}}
   >
     <div
-      className="terminal-top-bar adjust-bar"
-      style={
-        Object {
-          "backgroundColor": "black",
-        }
-      }
+      className="sc-bxivhb hdqhPL"
+      style={Object {}}
     >
       <svg
         height="20"
@@ -137,69 +150,95 @@ exports[`Terminal Component should work with plugins 1`] = `
           fill="red"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
         <circle
           cx="44"
           cy="14"
           fill="orange"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
         <circle
           cx="64"
           cy="14"
           fill="green"
           onClick={[Function]}
           r="5"
+          style={
+            Object {
+              "cursor": "pointer",
+            }
+          }
         />
       </svg>
     </div>
     <div
-      className="terminal-container terminal-container-main"
-      onClick={[Function]}
+      className="sc-jTzLTM lfnIny"
+      style={Object {}}
+    >
+      <div
+        className="sc-cSHVUG jgYAxu"
+        onClick={[Function]}
+        onFocus={[Function]}
+        tabIndex={0}
+        title="bash"
+      >
+        bash
+      </div>
+      <div
+        className="sc-fjdhpX ghCJNo"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="sc-kAzzGY hjGnyC"
+          onClick={[Function]}
+        >
+          +
+        </div>
+      </div>
+    </div>
+    <div
+      className="sc-EHOje dMFuoo"
+      onKeyUp={[Function]}
       style={
         Object {
-          "backgroundColor": "black",
+          "overflowY": "auto",
         }
       }
+      tabIndex="0"
     >
       <div
-        className="terminal-holder"
+        className="sc-gZMcBi cwkXTh"
       >
         <div
-          className="terminal-content"
+          className="sc-gqjmRU gAcuTz"
         >
           <div
-            className="terminal-input-area"
+            className="sc-VigVT bYwkqd"
           >
             <div
-              className="terminal-output-line"
-            >
-               
-            </div>
-            <div
-              className="terminal-input"
+              className="sc-htoDjs iQSzyY"
             >
               <span
-                className="terminal-prompt"
-                style={
-                  Object {
-                    "color": "green",
-                  }
-                }
+                className="sc-dnqmqq dNrvp"
               >
                 /home/user/ &gt;
               </span>
               <input
-                className="terminal-main-input"
+                className="sc-iwsKbI jLRkOo"
                 onKeyDown={[Function]}
                 onKeyPress={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "black",
-                    "color": "green",
-                  }
-                }
                 tabIndex="-1"
                 type="text"
               />