fix small integration issues and switch to loads.camelcae

README.md

@@ -455,19 +455,10 @@ Eject from `create-react-app` and use a custom webpack configuration with [`babi
 
 Set the style to `height: 100vh` on parent element.
 
-**Interface issues due to plugins**
-
-If you are having any issues with **plugins** or related api, fallback to `3.3.3`. Because plugins are still **WIP** !
-
 [npm-dm]: https://img.shields.io/npm/dm/terminal-in-react.svg
 [npm-dt]: https://img.shields.io/npm/dt/terminal-in-react.svg
 [npm-v]: https://img.shields.io/npm/v/terminal-in-react.svg
 [deps]: https://img.shields.io/david/nitin42/terminal-in-react.svg
 [dev-deps]: https://img.shields.io/david/dev/nitin42/terminal-in-react.svg
 [license]: https://img.shields.io/npm/l/terminal-in-react.svg
 [package-url]: https://npmjs.com/package/terminal-in-react
-
-## New updates
-
-Follow [@NTulswani](https://twitter.com/NTulswani) on Twitter for new updates and progress 😄
-

package.json

@@ -1,14 +1,14 @@
 {
   "name": "terminal-in-react",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "A component for making a terminal in React",
   "main": "lib/js/index.js",
   "module": "src/index.js",
   "repository": "https://www.github.com/nitin42/terminal-in-react",
   "author": "Nitin Tulswani",
   "license": "MIT",
   "dependencies": {
-    "camelcase": "^4.1.0",
+    "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "minimist": "^1.2.0",
     "platform": "^1.3.4",

src/js/args/utils.js

@@ -1,4 +1,4 @@
-import camelcase from 'camelcase';
+import camelcase from 'lodash.camelcase';
 import stringSimilarity from 'string-similarity';
 
 export default {

src/js/components/Terminal/terminal-utils.js

@@ -1,5 +1,5 @@
 import Command from '../../args/index';
-import {getOs} from '../../utils';
+import { getOs } from '../../utils';
 
 export const os = getOs();
 
@@ -24,17 +24,19 @@ export function uuidv4() {
 }
 
 export function getShortcuts(shortcuts, obj) {
-  Object.keys(obj).forEach((key) => {
-    const split = key.toLowerCase().replace(/\s/g, '').split(',');
-    split.forEach((osName) => {
-      if (osName === os) {
-        shortcuts = {
-          ...shortcuts,
-          ...obj[key],
-        };
-      }
+  if (typeof obj === 'object') {
+    Object.keys(obj).forEach((key) => {
+      const split = key.toLowerCase().replace(/\s/g, '').split(',');
+      split.forEach((osName) => {
+        if (osName === os) {
+          shortcuts = {
+            ...shortcuts,
+            ...obj[key],
+          };
+        }
+      });
     });
-  });
+  }
   return shortcuts;
 }
 

stories/index.js

@@ -1,31 +1,37 @@
 import React from 'react';
 import styled from 'styled-components';
-import PseudoFileSystem from 'terminal-in-react-pseudo-file-system-plugin'; // eslint-disable-line
+import createPseudoFileSystem from 'terminal-in-react-pseudo-file-system-plugin'; // eslint-disable-line
 
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line
 
 import Terminal from '../src/js/components/Terminal/index';
 
+const FileSystemPlugin = createPseudoFileSystem('/', 'db');
+
 const TerminalWrapper = styled.div`
   width : 100vw;
   height: 100vh;
 `;
 
+const withWrapper = child => () => (<TerminalWrapper>{child}</TerminalWrapper>);
+
 storiesOf('Terminal', module)
-  .add('basic', () => (<TerminalWrapper>
+  .add('basic', withWrapper(
     <Terminal
       msg="Hi everyone! This is a terminal component for React"
       commands={{ website: () => 'website', intro: () => 'My name is Foo!' }}
       descriptions={{ website: 'My website', intro: 'My introduction' }}
-    /></TerminalWrapper>))
-  .add('maximised', () => (<TerminalWrapper>
+    />,
+  ))
+  .add('maximised', withWrapper(
     <Terminal
       msg="Hi everyone! This is a terminal component for React"
       commands={{ website: () => 'website', intro: () => 'My name is Foo!' }}
       descriptions={{ website: 'My website', intro: 'My introduction' }}
       startState="maximised"
-    /></TerminalWrapper>))
-  .add('with custom colors', () => (<TerminalWrapper>
+    />,
+  ))
+  .add('with custom colors', withWrapper(
     <Terminal
       color="blue"
       backgroundColor="red"
@@ -34,11 +40,13 @@ storiesOf('Terminal', module)
       msg="Hi everyone! This is a terminal component for React"
       commands={{ website: () => 'website', intro: () => 'My name is Foo!' }}
       descriptions={{ website: 'My website', intro: 'My introduction' }}
-    /></TerminalWrapper>))
-  .add('with FileSystem plugin', (<TerminalWrapper>
+    />,
+  ))
+  .add('with FileSystem plugin', withWrapper(
     <Terminal
       plugins={[
-        new PseudoFileSystem(),
+        FileSystemPlugin,
       ]}
-    /></TerminalWrapper>))
+    />,
+  ))
 ;

webpack/config.js

@@ -38,14 +38,14 @@ const plugins = () => [
 const externals = () => ({
   react: 'react',
   'react-dom': 'react-dom',
-  camelcase: 'camelcase',
+  'lodash.camelcase': 'lodash.camelcase',
   'lodash.isequal': 'lodash.isequal',
   minimist: 'minimist',
   platform: 'platform',
   'prop-types': 'prop-types',
   'react-object-inspector': 'react-object-inspector',
   'string-similarity': 'string-similarity',
-  'whatkey': 'whatkey'
+  whatkey: 'whatkey',
 });
 
 const entry = () => ({