Skip to content

Commit

Permalink
Merge pull request #27 from nitin42/3.x.x
Browse files Browse the repository at this point in the history
3.x.x
  • Loading branch information
jcgertig authored Jul 16, 2017
2 parents 74fd0de + 0ad3c41 commit ac322cd
Show file tree
Hide file tree
Showing 12 changed files with 500 additions and 444 deletions.
25 changes: 9 additions & 16 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
{
"presets": ["es2015", "react", "stage-0"],
"env": {
"production": {
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-react-remove-prop-types"
]
},
"development": {
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
}
"presets": ["es2015", "react", "stage-0"],
"plugins": [
"transform-decorators-legacy",
["transform-es2015-modules-umd", {
"globals": {
"react": "React"
}
}]
]
}
3 changes: 3 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ xunit.xml
components
starter
webpack
__mocks__
__tests__
examples

CONTRIBUTING.md
todo.md
Expand Down
74 changes: 66 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Let's take an example. You want to open a website with a command `open-google`
<Terminal commands={{ 'open-google': () => window.open("https://www.google.com/", "_blank")}} />
```

### Adding description of your command
### Adding description of your command

Add a description of your command using prop `description`.

Expand All @@ -84,7 +84,8 @@ Add a description of your command using prop `description`.

### Console logging

You can have the terminal watch console.log/info function and print out.
You can have the terminal watch console.log/info function and print out.
It does so by default.

```jsx
<Terminal watchConsoleLogging />
Expand Down Expand Up @@ -166,11 +167,11 @@ The command API has three parameters `arguments`, `print`, and `runCommand`.
- `runCommand` is a method to call other commands it takes a string and will
attempt to run the command given

Let's take an another example -
Let's take an another example -

```jsx
<Terminal
commands={{
commands={{
'type-text': (args, print, runCommand) => {
const text = args.slice(1).join(' ');
print('');
Expand All @@ -189,6 +190,63 @@ Let's take an another example -
<img src="https://i.gyazo.com/ef2427464989b1ce14bc44bb4fc94689.gif" />
</p>

### Keyboard shortcuts
You can define keyboard shortcuts. They have to be grouped by os. The three available are
`win`, `darwin`, and `linux`. You can group multiple os by a `,` for example if the
shortcut was for all platforms `win,darwin,linux` would be fine as a key

```jsx
<Terminal
shortcuts={{
'darwin,win,linux': {
'ctrl + a': 'echo whoo',
},
}}
/>
```

But you might want to specific

```jsx
<Terminal
shortcuts={{
'win': {
'ctrl + a': 'echo hi windows',
},
'darwin': {
'cmd + a': 'echo hi mac'
},
'linux': {
'ctrl + a': 'echo hi linux'
}
}}
/>
```

You can mix and match

```jsx
<Terminal
shortcuts={{
'win,linux': {
'ctrl + b': 'echo we are special',
},
'win': {
'ctrl + a': 'echo hi windows',
},
'darwin': {
'cmd + a': 'echo hi mac'
},
'linux': {
'ctrl + a': 'echo hi linux'
}
}}
/>
```

The value of the shortcut should be a command to run.


### Using plugins 🔥

We have also developed a plugin system for the `<Terminal />` component which helps you develop custom plugins. Here is one example of plugin which creates a fake file system called [terminal-in-react-pseudo-file-system-plugin](https://github.com/jcgertig/terminal-in-react-pseudo-file-system-plugin).
Expand All @@ -198,7 +256,7 @@ We have also developed a plugin system for the `<Terminal />` component which he
```jsx
import PseudoFileSystem from 'terminal-in-react-pseudo-file-system-plugin'

<Terminal
<Terminal
plugins={[
new PseudoFileSystem(),
]}
Expand All @@ -214,21 +272,21 @@ Awesome! Right? Let us know if you make something interesting 😃

<p align="center">
<img src="https://i.gyazo.com/3e719f4091cbd72f3e1f99209493e50d.gif" />
</p>
</p>

### Multiline input

via `shift + enter`

<p align="center">
<img src="http://g.recordit.co/AznpOohzJL.gif" />
</p>
</p>

### Check history of your commands

<p align="center">
<img src="https://i.gyazo.com/6fa55a8fbb961787c51e406e612e0bb8.gif" />
</p>
</p>

## Customization

Expand Down
14 changes: 14 additions & 0 deletions components/Plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default class Plugin {
constructor(name = '', version = '1.0.0') {
this.name = name;
this.version = version;
}

load = () => {};

afterLoad = () => {};

getPublicMethods = () => ({});

readStdOut = () => true;
}
Loading

0 comments on commit ac322cd

Please sign in to comment.