Merge pull request #92 from back4app/add-cloud-code-page

Add cloud code page

Author: paivaric

package-lock.json

@@ -46,13 +46,18 @@
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.2.1",
     "json-file-plus": "^3.2.0",
+    "jstree": "^3.3.5",
     "lodash": "^4.17.10",
     "material-design-iconic-font": "^2.2.0",
     "package-json": "^4.0.1",
     "passport": "^0.3.2",
     "passport-local": "^1.0.0",
     "popper.js": "^1.12.9",
+    "react-file-reader": "^1.1.4",
+    "react-syntax-highlighter": "^9.0.0",
     "react-tabs": "^2.2.2",
+    "sweetalert2": "^7.28.10",
+    "sweetalert2-react-content": "^1.0.1",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import React    from 'react';
+import Field    from 'components/Field/Field.react';
+import B4AAlert from 'components/B4AAlert/B4AAlert.react';
+
+export const component = B4AAlert;
+
+export const demos = [
+  {
+    render: () => (
+      <Field
+        label={<B4AAlert title='This is my text.' description='This is my description.' />}
+        input={null} />
+    )
+  }, {
+    render: () => (
+      <Field
+        label={<B4AAlert show={false} title='This is my text.' description='This is my description.' />}
+        input={null} />
+    )
+  }, {
+    render: () => (
+      <Field
+        label={<B4AAlert show={true} title='This is my text.' description='This is my description.' />}
+        input={null} />
+    )
+  },
+];

src/components/B4AAlert/B4AAlert.example.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import { centered } from 'components/Field/Field.scss';
+import PropTypes    from 'lib/PropTypes';
+import React        from 'react';
+import styles       from 'components/B4AAlert/B4AAlert.scss';
+
+export default class B4AAlert extends React.Component {
+  constructor() {
+    super()
+
+    this.state = {
+      show: false
+    }
+  }
+
+  componentWillMount() {
+    if (typeof this.props.show !== 'undefined')
+      return this.setState({ show: this.props.show })
+    this.setState({ show: true })
+  }
+
+  async onClose() {
+    await this.setState({ show: false })
+    this.props.handlerCloseEvent && this.props.handlerCloseEvent(this.props.title)
+  }
+
+  render() {
+    let padding = (this.props.padding || 20) + 'px';
+    return this.state.show && (
+      <div
+        className={styles.label}
+        style={{ padding }}>
+        <div
+          className={styles.title} >
+          {this.props.title}
+          <a
+            className={`zmdi zmdi-close ${styles.close}`}
+            onClick={this.onClose.bind(this)}>
+          </a>
+        </div>
+        {this.props.description ? <div className={styles.description}>{this.props.description}</div> : null}
+      </div>
+    );
+  }
+}
+
+B4AAlert.PropTypes = {
+  title: PropTypes.node.describe(
+    'The main title/node of the label.'
+  ),
+  description: PropTypes.node.describe(
+    'The secondary title/node of the label.'
+  ),
+  padding: PropTypes.number.describe(
+    'Allows you to override the left-right padding of the label.'
+  ),
+  handlerCloseEvent: PropTypes.func.describe(
+    'Handler event function to close alert'
+  )
+};

src/components/B4AAlert/B4AAlert.react.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+@import 'stylesheets/globals.scss';
+
+.label {
+  font-family: Noto Sans;
+  font-size: 14px;
+  line-height: 32px;
+  margin-bottom: 22px;
+  border-radius: 4px;
+  border: solid 1px #bcdff1;
+  background-color: #d9edf7;
+  color: #31708f;
+
+  .close {
+    float: right;
+    width: 14px;
+    height: 14px;
+    font-size: 16px;
+    margin-top: -10px;
+    margin-right: -10px;
+  }
+
+  p {
+    height: fit-content;
+    margin-bottom: 0px;
+  }
+}
+
+.title {
+  font-weight: bold;
+}
+
+
+

src/components/B4AAlert/B4AAlert.scss

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import React       from 'react';
+import B4ACloudCodeView from 'components/B4ACloudCodeView/B4ACloudCodeView.react';
+
+export const component = B4ACloudCodeView;
+
+export const demos = [
+  {
+    render() {
+      return (
+        <B4ACloudCodeView source={this.props.source} extension='js' />
+      )
+    }
+  }
+];

src/components/B4ACloudCodeView/B4ACloudCodeView.example.js

@@ -0,0 +1,43 @@
+import React             from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import style             from 'react-syntax-highlighter/styles/hljs/tomorrow-night-eighties';
+
+export default class B4ACloudCodeView extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  extensionDecoder() {
+    if (this.props.extension)
+      switch (this.props.extension) {
+        case 'js':
+          return 'javascript'
+        case 'ejs':
+          return 'html'
+        default:
+          // css, html, ...
+          return this.props.extension
+      }
+    return 'javascript'
+  }
+
+
+  render() {
+    if (style.hljs) {
+      style.hljs.background = "#0c2337"
+      style.hljs.height = '100%'
+      style.hljs.padding = '1em 0.5em'
+    }
+    return <SyntaxHighlighter
+      showLineNumbers={true}
+      lineNumberStyle={{
+        "padding-right": 10,
+        "color": "rgb(169, 183, 198, 0.3)"
+      }}
+      wrapLines={true}
+      language={this.extensionDecoder()}
+      style={style}>
+        {this.props.source}
+      </SyntaxHighlighter>;
+  }
+}

src/components/B4ACloudCodeView/B4ACloudCodeView.react.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import React    from 'react';
+import B4ACodeTree from 'components/B4ACodeTree/B4ACodeTree.react';
+
+let source = {"tree":[{"text":"cloud","state":{"opened":true},"type":"folder","children":[{"text":"newFile.js","data":{"code":"data:plain/text;base64,Y29uc29sZS5sb2coIm5ldyBmaWxlIik7Cg=="}}]},{"text":"public","state":{"opened":true},"type":"folder","children":[{"text":"render.html","data":{"code":"data:plain/text;base64,ZXJyb3Igd2l0aCBzdGF0dXM9NTAwIGFuZCBib2R5PSJUeXBlRXJyb3I6IF9lcnJvcnMyLmRlZmF1bHQgaXMgbm90IGEgY29uc3RydWN0b3I8YnI+ICZuYnNwOyAmbmJzcDthdCAvaG9tZS9iYWNrNGFwcC9zY20vYmFjazRhcHAtY2xpLXNlcnZlci9saWIvYmFjay9CYWNrNGFwcFZlbmRvckFkYXB0ZXIuanM6MTE2OjIxPGJyPiAmbmJzcDsgJm5ic3A7YXQgdHJ5Q2F0Y2hlciAoL2hvbWUvYmFjazRhcHAvc2NtL2JhY2s0YXBwLWNsaS1zZXJ2ZXIvbm9kZV9tb2R1bGVzL2JsdWViaXJkL2pzL3JlbGVhc2UvdXRpbC5qczoxNjoyMyk8YnI+ICZuYnNwOyAmbmJzcDthdCBQcm9taXNlLl9zZXR0bGVQcm9taXNlRnJvbUhhbmRsZXIgKC9ob21lL2JhY2s0YXBwL3NjbS9iYWNrNGFwcC1jbGktc2VydmVyL25vZGVfbW9kdWxlcy9ibHVlYmlyZC9qcy9yZWxlYXNlL3Byb21pc2UuanM6NTEyOjMxKTxicj4gJm5ic3A7ICZuYnNwO2F0IFByb21pc2UuX3NldHRsZVByb21pc2UgKC9ob21lL2JhY2s0YXBwL3NjbS9iYWNrNGFwcC1jbGktc2VydmVyL25vZGVfbW9kdWxlcy9ibHVlYmlyZC9qcy9yZWxlYXNlL3Byb21pc2UuanM6NTY5OjE4KTxicj4gJm5ic3A7ICZuYnNwO2F0IFByb21pc2UuX3NldHRsZVByb21pc2UwICgvaG9tZS9iYWNrNGFwcC9zY20vYmFjazRhcHAtY2xpLXNlcnZlci9ub2RlX21vZHVsZXMvYmx1ZWJpcmQvanMvcmVsZWFzZS9wcm9taXNlLmpzOjYxNDoxMCk8YnI+ICZuYnNwOyAmbmJzcDthdCBQcm9taXNlLl9zZXR0bGVQcm9taXNlcyAoL2hvbWUvYmFjazRhcHAvc2NtL2JhY2s0YXBwLWNsaS1zZXJ2ZXIvbm9kZV9tb2R1bGVzL2JsdWViaXJkL2pzL3JlbGVhc2UvcHJvbWlzZS5qczo2OTM6MTgpPGJyPiAmbmJzcDsgJm5ic3A7YXQgQXN5bmMuX2RyYWluUXVldWUgKC9ob21lL2JhY2s0YXBwL3NjbS9iYWNrNGFwcC1jbGktc2VydmVyL25vZGVfbW9kdWxlcy9ibHVlYmlyZC9qcy9yZWxlYXNlL2FzeW5jLmpzOjEzMzoxNik8YnI+ICZuYnNwOyAmbmJzcDthdCBBc3luYy5fZHJhaW5RdWV1ZXMgKC9ob21lL2JhY2s0YXBwL3NjbS9iYWNrNGFwcC1jbGktc2VydmVyL25vZGVfbW9kdWxlcy9ibHVlYmlyZC9qcy9yZWxlYXNlL2FzeW5jLmpzOjE0MzoxMCk8YnI+ICZuYnNwOyAmbmJzcDthdCBJbW1lZGlhdGUuQXN5bmMuZHJhaW5RdWV1ZXMgKC9ob21lL2JhY2s0YXBwL3NjbS9iYWNrNGFwcC1jbGktc2VydmVyL25vZGVfbW9kdWxlcy9ibHVlYmlyZC9qcy9yZWxlYXNlL2FzeW5jLmpzOjE3OjE0KTxicj4gJm5ic3A7ICZuYnNwO2F0IHJ1bkNhbGxiYWNrICh0aW1lcnMuanM6NjM3OjIwKTxicj4gJm5ic3A7ICZuYnNwO2F0IHRyeU9uSW1tZWRpYXRlICh0aW1lcnMuanM6NjEwOjUpPGJyPiAmbmJzcDsgJm5ic3A7YXQgcHJvY2Vzc0ltbWVkaWF0ZSBbYXMgX2ltbWVkaWF0ZUNhbGxiYWNrXSAodGltZXJzLmpzOjU4Mjo1KVxuIgo="}}]}]}
+
+class Demo extends React.Component {
+  constructor() {
+    super();
+    this.state = { value: null };
+  }
+
+  render() {
+    return <B4ACodeTree files={source.tree} />
+  }
+}
+
+export const component = B4ACodeTree;
+
+export const demos = [
+  {
+    name: 'Code Tree',
+    render: () => ( <Demo /> )
+  }
+];