feat(joyent-manifest-editor): initial implementation

packages/manifest-editor/.babelrc

@@ -0,0 +1,35 @@
+{
+  "sourceMaps": true,
+  "presets": [
+    ["babel-preset-env", {
+      "targets": {
+        "ie": 9,
+        "uglify": true
+      },
+      "useBuiltIns": false
+    }]
+  ],
+  "plugins": [
+    "transform-react-jsx",
+    "syntax-jsx",
+    "transform-react-display-name",
+    "transform-class-properties",
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    ["transform-react-jsx", {
+      "useBuiltIns": true
+    }],
+    ["transform-runtime", {
+      "helpers": false,
+      "polyfill": false,
+      "regenerator": true
+    }],
+    "transform-react-jsx-source",
+    "transform-react-jsx-self",
+    ["transform-regenerator", {
+      "async": false
+    }],
+    "syntax-dynamic-import"
+  ]
+}

packages/manifest-editor/.eslintignore

@@ -0,0 +1,3 @@
+.nyc_output
+coverage
+dist

packages/manifest-editor/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "joyent-portal"
+}

packages/manifest-editor/.tern-project

@@ -0,0 +1,10 @@
+{
+  "libs": [
+    "ecmascript"
+  ],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "node": true
+  }
+}

packages/manifest-editor/README.md

@@ -0,0 +1,19 @@
+# manifest-editor
+
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
+[![npm](https://img.shields.io/npm/v/manifest-editor.svg)](https://npmjs.com/package/manifest-editor)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+- [Install](#install)
+- [Usage](#usage)
+- [License](#license)
+
+## Install
+
+## Usage
+
+## License
+
+MPL-2.0

packages/manifest-editor/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "joyent-manifest-editor",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MPL-2.0",
+  "description": "",
+  "keywords": [],
+  "repository": "github:yldio/joyent-portal",
+  "main": "dist/manifest-editor.umd.js",
+  "jsnext:main": "dist/manifest-editor.es.js",
+  "module": "dist/manifest-editor.es.js",
+  "entry": "src/index.js",
+  "scripts": {
+    "lint:css": "echo 0",
+    "lint-ci:css": "echo 0",
+    "lint:js": "eslint . --fix",
+    "lint-ci:js": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/manifest-editor.xml",
+    "lint": "redrun -s lint:*",
+    "lint-ci": "redrun -p lint-ci:*",
+    "test": "echo 0 # bup && NODE_ENV=test jest --coverage",
+    "test-ci": "echo 0 # NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/manifest-editor.xml jest --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/manifest-editor --testResultsProcessor='./node_modules/jest-junit'",
+    "build": "bup",
+    "prepublish": "redrun build"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.10",
+    "react-codemirror": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-preset-react-app": "^3.0.0",
+    "bup": "^1.0.9",
+    "codemirror": "^5.26.0",
+    "eslint": "^3.19.0",
+    "eslint-config-joyent-portal": "1.0.3",
+    "jest": "^20.0.4",
+    "react": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
+    "redrun": "^5.9.14"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "codemirror": "*",
+    "react-dom": "*"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testRegex": "test/index.js"
+  }
+}

packages/manifest-editor/src/index.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import ReactCodeMirror from 'react-codemirror';
+import PropTypes from 'prop-types';
+
+class ManifestEditor extends Component {
+  constructor({ value, defaultValue }) {
+    super();
+
+    this._refs = {};
+  }
+  ref(name) {
+    return ref => {
+      this._refs[name] = ref;
+    };
+  }
+  options({ mode, theme, keyMap }) {
+    const modes = {
+      json: {
+        name: 'javascript',
+        json: true
+      },
+      yaml: 'yaml'
+    };
+
+    return {
+      mode: modes[mode.toLowerCase()],
+      theme,
+      indentUnit: 2,
+      smartIndent: true,
+      tabSize: 2,
+      indentWithTabs: false,
+      electricChars: true,
+      keyMap,
+      lineNumbers: true,
+      inputStyle: 'contenteditable',
+      readOnly: false,
+      lint: true,
+      autoCloseBrackets: true,
+      styleActiveLine: true,
+      matchBrackets: true,
+      lineWrapping: true,
+      foldGutter: true,
+      autoCloseTags: true,
+      viewportMargin: Infinity,
+      gutters: [
+        'CodeMirror-lint-markers',
+        'CodeMirror-linenumbers',
+        'CodeMirror-foldgutter'
+      ]
+    };
+  }
+  render() {
+    return (
+      <ReactCodeMirror
+        ref={this.ref('cm')}
+        value={this.props.value || this.props.defaultValue}
+        onChange={this.props.onChange}
+        onFocusChange={this.props.onFocusChange}
+        options={this.options(this.props)}
+        autoSave={this.props.autoSave}
+        preserveScrollPosition={this.props.preserveScrollPosition}
+      />
+    );
+  }
+}
+
+ManifestEditor.defaultProps = {
+  mode: 'json',
+  theme: 'eclipse',
+  defaultValue: '',
+  onChange: () => null,
+  onFocusChange: () => null,
+  autoSave: true,
+  preserveScrollPosition: true,
+  keyMap: 'sublime'
+};
+
+ManifestEditor.propTypes = {
+  mode: PropTypes.oneOf(['json', 'yaml']),
+  theme: PropTypes.oneOf([
+    '3024-day',
+    '3024-night',
+    'abcdef',
+    'ambiance-mobile',
+    'ambiance',
+    'base16-dark',
+    'base16-light',
+    'bespin',
+    'blackboard',
+    'cobalt',
+    'colorforth',
+    'dracula',
+    'duotone-dark',
+    'duotone-light',
+    'eclipse',
+    'elegant',
+    'erlang-dark',
+    'hopscotch',
+    'icecoder',
+    'isotope',
+    'lesser-dark',
+    'liquibyte',
+    'material',
+    'mbo',
+    'mdn-like',
+    'midnight',
+    'monokai',
+    'neat',
+    'neo',
+    'night',
+    'panda-syntax',
+    'paraiso-dark',
+    'paraiso-light',
+    'pastel-on-dark',
+    'railscasts',
+    'rubyblue',
+    'seti',
+    'solarized',
+    'the-matrix',
+    'tomorrow-night-bright',
+    'tomorrow-night-eighties',
+    'ttcn',
+    'twilight',
+    'vibrant-ink',
+    'xq-dark',
+    'xq-light',
+    'yeti',
+    'zenburn'
+  ]),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocusChange: PropTypes.func,
+  autoSave: PropTypes.bool,
+  preserveScrollPosition: PropTypes.bool,
+  keyMap: PropTypes.oneOf(['sublime', 'vim', 'emacs'])
+};
+
+export default ManifestEditor;

packages/manifest-editor/test/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ManifestEditor from '../src/index';
+
+// It('renders <ManifestEditor /> correctly', () => {
+//   const tree = renderer.create(<ManifestEditor />).toJSON();
+//   expect(tree).toMatchSnapshot();
+// });