create plugin

Author: tomoki1207

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "extends": "eslint-config-airbnb",
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "plugins": [
+        "react"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        "indent": ["error", 2],
+        "semi": "error",
+        "eol-last": "off",
+        "react/jsx-uses-vars": "error",
+        "react/jsx-uses-react": "error",
+        "comma-dangle": "off",
+        "react/jsx-filename-extension": ["error", {"extensions": [".js", ".jsx"]}],
+        "react/prefer-stateless-function": "off"
+    }
+}

.gitignore

@@ -0,0 +1,27 @@
+bundle.js
+node_modules/
+*.class
+*.log
+
+# sbt specific
+dist/*
+target/
+lib_managed/
+src_managed/
+project/boot/
+project/plugins/project/
+
+# Scala-IDE specific
+.scala_dependencies
+.classpath
+.project
+.cache
+.settings
+
+# IntelliJ specific
+.idea/
+.idea_modules/
+
+# Ensime
+.ensime
+.ensime_cache/

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "0.1.0",
+  "command": "npm",
+  "isShellCommand": true,
+  "showOutput": "always",
+  "suppressTaskName": true,
+  "tasks": [
+    {
+      "taskName": "install",
+      "args": ["install"]
+    },
+    {
+      "taskName": "update",
+      "args": ["update"]
+    },
+    {
+      "taskName": "test",
+      "args": ["run", "test"]
+    },
+    {
+      "taskName": "build",
+      "isBuildCommand": true,
+      "args": ["run", "build"]
+    },
+    {
+      "taskName": "watch",
+      "isBackground": true,
+      "args": ["run", "watch"]
+    },
+    {
+      "taskName": "release",
+      "args": ["run", "release"]
+    }
+  ]
+}

README.md

@@ -3,8 +3,6 @@ gitbucket-groupsmenu-plugin
 
 The plugin provides a file tree of repository [GitBucket](https://github.com/gitbucket/gitbucket).
 
-![screenshot](./screenshot.png)
-
 Version
 ---
 

build.sbt

@@ -0,0 +1,11 @@
+name := "gitbucket-explorer-plugin"
+organization := "io.github.gitbucket"
+version := "1.0.1"
+scalaVersion := "2.11.8"
+
+libraryDependencies ++= Seq(
+  "io.github.gitbucket"  %% "gitbucket"         % "4.9.0"   % "provided",
+  "javax.servlet"         % "javax.servlet-api" % "3.1.0" % "provided"
+)
+
+scalacOptions := Seq("-deprecation", "-feature", "-language:postfixOps")

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "gitbucket-explorer-plugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "browserify -t babelify ./scripts/index.js -o ./src/main/resources/explorer/assets/bundle.js | sbt package",
+    "watch": "watchify -t babelify ./scripts/index.js -o ./src/main/resources/explorer/assets/bundle.js",
+    "release": "set NODE_ENV=production && browserify ./scripts/index.js -t babelify -t envify | uglifyjs -c warnings=false > ./src/main/resources/explorer/assets/bundle.js | sbt clean package"
+  },
+  "author": "tomoki1207",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babelify": "^7.3.0",
+    "browserify": "^14.0.0",
+    "envify": "^4.0.0",
+    "eslint": "^3.14.1",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
+    "uglify-js": "^2.7.5",
+    "watchify": "^3.9.0"
+  },
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-localstorage": "^0.3.0",
+    "react-mixin": "^3.0.5",
+    "superagent": "^3.4.1"
+  }
+}

project/build.properties

@@ -0,0 +1 @@
+sbt.version = 0.13.12

project/plugins.sbt

@@ -0,0 +1,3 @@
+logLevel := Level.Warn
+
+addSbtPlugin("com.typesafe.sbt" % "sbt-twirl" % "1.0.4")

scripts/components/Directory.js

@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import ReactMixin from 'react-mixin';
+import LocalStorageMixin from 'react-localstorage';
+import request from 'superagent';
+import FileNodes from './FileNodes';
+
+export default class Directory extends React.Component {
+
+  static get propTypes() {
+    return {
+      url: PropTypes.string,
+      name: PropTypes.string
+    };
+  }
+  static get getDefaultProps() {
+    return {
+      url: '',
+      name: ''
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      children: [],
+      expanded: false,
+    };
+  }
+
+  toggleFolder(path) {
+    if (this.state.expanded) {
+      this.setState({
+        expanded: false,
+        children: []
+      });
+    } else {
+      this.setState({ expanded: true });
+      request
+        .get(path)
+        .end((err, res) => {
+          if (err) {
+            return;
+          }
+          this.setState({ children: JSON.parse(res.text) });
+        });
+    }
+  }
+
+  render() {
+    const arrow = this.state.expanded ? 'octicon octicon-chevron-down' : 'octicon octicon-chevron-right';
+    return (
+      <li className="folder-node">
+        <button className="folder-expander" onClick={() => this.toggleFolder(this.props.url)}>
+          <i className={arrow} />
+          <i className="menu-icon octicon octicon-file-directory" />
+          {this.props.name}
+        </button>
+        <FileNodes data={this.state.children} style={this.state.expanded ? {} : { display: 'none' }} />
+      </li>
+    );
+  }
+}
+ReactMixin(Directory.prototype, LocalStorageMixin);

scripts/components/File.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+
+export default class File extends React.Component {
+
+  static get propTypes() {
+    return {
+      url: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    return (
+      <li className="file-node">
+        <a href={this.props.url}>
+          <i className="menu-icon octicon octicon-file" />
+          {this.props.name}
+        </a>
+      </li>
+    );
+  }
+}

scripts/components/FileNodes.js

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import File from './File';
+import Directory from './Directory';
+
+export default class FileNodes extends React.Component {
+
+  static get propTypes() {
+    return {
+      data: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const nodes = this.props.data.map(node => (
+      node.isDirectory ?
+        <Directory localStorageKey={node.url} key={node.url} name={node.name} url={node.url.replace('/tree/', '/explore/')} />
+        : <File key={node.url} name={node.name} url={node.url} />
+    ));
+    return (
+      <ul>
+        {nodes}
+      </ul>
+    );
+  }
+}

scripts/components/Root.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import FileNodes from './FileNodes';
+import Directory from './Directory';
+
+export default class Root extends Directory {
+
+  componentWillMount() {
+    // FIXME: exists altanarive way?
+    const baseUrl = document.querySelector('header.main-header a.logo').getAttribute('href');
+    const relPath = document.location.pathname.replace(baseUrl, '');
+    this.setState({
+      rootPath: `${baseUrl}${relPath.match(/^\/?[^/]+\/[^/]+/)}`,
+    });
+  }
+
+  render() {
+    const arrow = this.state.expanded ? 'octicon octicon-chevron-down' : 'octicon octicon-chevron-right';
+    return (
+      <div className="tree-node">
+        <button className="root-expander" onClick={() => this.toggleFolder(`${this.state.rootPath}/explore/`)} >
+          <i className={arrow} />
+        </button>
+        <a href={this.state.rootPath} className="submenu-files" >
+          <i className="menu-icon octicon octicon-file-directory" />
+          Files
+        </a>
+        <div className="file-tree" style={this.state.expanded ? {} : { display: 'none' }} >
+          <FileNodes data={this.state.children} />
+        </div>
+      </div>
+    );
+  }
+}

scripts/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'react-dom';
+import Root from './components/Root';
+
+render(
+  <Root />,
+  document.querySelector('div.main-sidebar ul.sidebar-menu li:first-child')
+);