admin_core 0.0.1

data/client/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "admin-core-js",
+  "version": "0.0.1",
+  "engines": {
+    "node": "~6.10",
+    "npm": "~3.10",
+    "yarn": "~0.21"
+  },
+  "description": "Flexible admin framework for Rails",
+  "main": "lib/AdminCore.js",
+  "author": "Yuku Takahashi <yuku@qiita.com>",
+  "scripts": {
+    "build": "yarn run clean && run-p build:*",
+    "build:dist": "run-p build:dist:*",
+    "build:dist:js": "webpack && uglifyjs dist/admin-core.js -o dist/admin-core.min.js --source-map dist/admin-core.min.js.map --source-map-url admin-core.min.js.map",
+    "build:dist:css": "mkdir -p dist && node-sass --output-style compressed admin-core.scss > dist/admin-core.css",
+    "build:lib": "babel src -d lib -s && rm -fr lib/main.*",
+    "clean": "rm -fr dist lib",
+    "test": "flow"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/increments/admin_core.git"
+  },
+  "bugs": {
+    "url": "https://github.com/increments/admin_core/issues"
+  },
+  "homepage": "https://github.com/increments/admin_core#readme",
+  "dependencies": {
+    "axios": "^0.16.1",
+    "classnames": "^2.2.5",
+    "coreui.io": "^1.0.0-alpha.4",
+    "lodash.omit": "^4.5.0",
+    "lodash.reduce": "^4.6.0",
+    "lodash.topairs": "^4.3.0",
+    "react": "^15.5.4",
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-addons-transition-group": "^15.5.2",
+    "react-dom": "^15.5.4",
+    "react-router-dom": "^4.1.1",
+    "reactstrap": "^4.5.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.2",
+    "babel-loader": "^6.4.1",
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^3.19.0",
+    "eslint-plugin-flowtype": "^2.30.4",
+    "eslint-plugin-react": "^6.10.3",
+    "flow-bin": "^0.44.0",
+    "flow-typed": "^2.0.0",
+    "node-sass": "^4.5.2",
+    "npm-run-all": "^4.0.2",
+    "uglify-js": "^2.8.22",
+    "webpack": "^2.4.1"
+  }
+}

data/client/src/.eslintrc.yml

@@ -0,0 +1,23 @@
+---
+  env:
+    browser: true
+
+  plugins:
+  - flowtype
+  - react
+
+  rules:
+    flowtype/boolean-style: error
+    flowtype/define-flow-type: error
+    flowtype/delimiter-dangle: [error, always]
+    flowtype/generic-spacing: [error, never]
+    flowtype/no-dupe-keys: error
+    flowtype/no-primitive-constructor-types: error
+    flowtype/object-type-delimiter: [error, semicolon]
+    flowtype/space-after-type-colon: error
+    flowtype/space-before-generic-bracket: [error, never]
+    flowtype/space-before-type-colon: [error, never]
+    flowtype/union-intersection-spacing: error
+    flowtype/use-flow-type: error
+    react/jsx-uses-react: error
+    react/jsx-uses-vars: error

data/client/src/AdminCore.jsx

@@ -0,0 +1,44 @@
+// @flow
+import React from "react";
+import {BrowserRouter, Route, Switch} from "react-router-dom";
+
+import EditPage from "./resource-page/edit";
+import Header from "./components/header";
+import IndexPage from "./resource-page/index";
+import NewPage from "./resource-page/new";
+import ShowPage from "./resource-page/show";
+import Sidebar from "./components/sidebar";
+import type {ResourceManager, SidebarItem} from "./decls";
+
+export default class App extends React.Component {
+  props: {
+    sidebar: SidebarItem[];
+    resourceManagers: ResourceManager[];
+    children?: any;
+    siteName: string;
+  }
+
+  render() {
+    return (
+      <BrowserRouter>
+        <div className="app">
+          <Header siteName={this.props.siteName} />
+          <div className="app-body">
+            <Sidebar items={this.props.sidebar} />
+            <Switch>
+              {this.props.children}
+              {this.props.resourceManagers.map((resourceManager, i) => [
+                <Route exact path={resourceManager.indexPath} component={IndexPage(resourceManager)} key={`index-${i}`} />,
+                resourceManager.newPath && <Route exact path={resourceManager.newPath} component={NewPage(resourceManager)} key={`new-${i}`} />,
+                <Route exact path={resourceManager.showPath} component={ShowPage(resourceManager)} key={`show-${i}`} />,
+                resourceManager.editPath && <Route exact path={resourceManager.editPath} component={EditPage(resourceManager)} key={`edit-${i}`} />,
+              ].filter(route => route))}
+            </Switch>
+          </div>
+        </div>
+      </BrowserRouter>
+    );
+  }
+}
+
+App.displayName = "AdminCore";

data/client/src/components/Breadcrumb.jsx

@@ -0,0 +1,18 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+
+const Breadcrumb = ({ links, current }: { links: string[][]; current: ?string; }) => (
+  <ol className="breadcrumb">
+    {links.map(([text, path], i) =>
+      <span className="breadcrumb-item" key={i}>
+        <Link to={path}>{text}</Link>
+      </span>
+    )}
+    <span className="breadcrumb-item">
+      {current || "..."}
+    </span>
+  </ol>
+);
+
+export default Breadcrumb;

data/client/src/components/Header.jsx

@@ -0,0 +1,45 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+
+export default class Header extends React.Component {
+  props: {
+    siteName: string;
+  }
+
+  sidebarToggle(e: SyntheticEvent) {
+    e.preventDefault();
+    this.toggle("sidebar-hidden");
+  }
+
+  mobileSidebarToggle(e: SyntheticEvent) {
+    e.preventDefault();
+    this.toggle("sidebar-mobile-show");
+  }
+
+  asideToggle(e: SyntheticEvent) {
+    e.preventDefault();
+    this.toggle("aside-menu-hidden");
+  }
+
+  toggle(name: string) {
+    const body = document.body;
+    if (body) {
+      body.classList.toggle(name);
+    }
+  }
+
+  render() {
+    return (
+      <header className="app-header navbar">
+        <button className="navbar-toggler mobile-sidebar-toggler hidden-lg-up" onClick={this.mobileSidebarToggle.bind(this)} type="button">&#9776;</button>
+        <Link to="/" className="navbar-brand">{this.props.siteName}</Link>
+        <ul className="nav navbar-nav hidden-md-down">
+          <li className="nav-item">
+            <a className="nav-link navbar-toggler sidebar-toggler" onClick={this.sidebarToggle.bind(this)} href="#">&#9776;</a>
+          </li>
+        </ul>
+      </header>
+    );
+  }
+}

data/client/src/components/Pagination.jsx

@@ -0,0 +1,72 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+
+export default class Pagination extends React.Component {
+  props: {
+    total: number;
+    current: number;
+    location: {
+      pathname: string;
+      search: string;
+      hash: string;
+    };
+  }
+
+  link(page: number) {
+    const queries = this.props.location.search.substring(1).split("&")
+      .filter(query => query && !query.startsWith("page="));
+    return {
+      pathname: this.props.location.pathname,
+      search: `?${queries.concat([`page=${page}`]).join("&")}`,
+      hash: this.props.location.hash,
+    };
+  }
+
+  renderPrev() {
+    return (
+      this.props.current === 1 ?
+        <li className="page-item disabled">
+          <a className="page-link" href="#">‹</a>
+        </li>
+      :
+        <li className="page-item">
+          <Link to={this.link(this.props.current - 1)} className="page-link">‹</Link>
+        </li>
+    );
+  }
+
+  renderNext() {
+    return (
+      this.props.current === this.props.total ?
+        <li className="page-item disabled">
+          <a className="page-link" href="#">›</a>
+        </li>
+      :
+        <li className="page-item">
+          <Link to={this.link(this.props.total)} className="page-link">›</Link>
+        </li>
+    );
+  }
+
+  render() {
+    const pages = [];
+    for (let i = 1; i <= this.props.total; i++) { pages.push(i); }
+    return (
+      <ul className="pagination">
+        {this.renderPrev()}
+        { pages.map(page =>
+          page === this.props.current ?
+            <li className="page-item active" key={page}>
+              <a className="page-link" href="#">{page}</a>
+            </li>
+          :
+            <li className="page-item" key={page}>
+              <Link to={this.link(page)} className="page-link">{page}</Link>
+            </li>
+        )}
+        {this.renderNext()}
+      </ul>
+    );
+  }
+}

data/client/src/components/ResourceFilters.jsx

@@ -0,0 +1,87 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+import type {Location} from "react-router-dom";
+import {Card, CardBlock, CardHeader, CardFooter} from "reactstrap";
+
+import type {ResourceFilter} from "../decls";
+import {renderFilter} from "../resource-filter-renderer";
+
+const REGEXP = /\Afilter\[[^]*]\]=/;
+
+export default class ResourceFilters extends React.Component {
+  props: {
+    filters: ResourceFilter[];
+    location: Location;
+  };
+
+  state: {
+    [string]: { operator: string; value: string; };
+  };
+
+  constructor(props: any) {
+    super(props);
+    const state = {};
+    this.props.filters.forEach(filter => {
+      state[filter.name] = {
+        operator: filter.query.operator,
+        value: filter.query.value,
+      };
+    });
+    this.state = state;
+  }
+
+  handleChange(name: string, operator: string, value: string) {
+    const state = {};
+    state[name] = { operator, value };
+    this.setState(state);
+  }
+
+  renderApply() {
+    const queries = this.props.location.search.substring(1).split("&").filter(kv => REGEXP.test(kv));
+    Object.keys(this.state).forEach(name => {
+      if (this.state[name].value) {
+        queries.push(`filter[${name}:${this.state[name].operator}]=${this.state[name].value}`);
+      }
+    });
+    const search = queries.join("&");
+    return (
+      <Link
+        to={{
+          pathname: this.props.location.pathname,
+          search: search ? `?${search}` : "",
+          hash: this.props.location.hash,
+        }}
+        className="btn btn-primary"
+      >
+        Apply
+      </Link>
+    );
+  }
+
+  render() {
+    return (
+      <Card>
+        <CardHeader>
+          <i className="fa fa-filter"/>
+          Filters
+        </CardHeader>
+        <CardBlock>
+          {this.props.filters.map((filter, i) =>
+            <div className="row" key={i}>
+              <div className="col-md-3 col-lg-12">
+                {filter.displayName}
+              </div>
+              <div className="col-md-9 col-lg-12">
+                {renderFilter(filter, this.handleChange.bind(this))}
+              </div>
+            </div>
+          )}
+        </CardBlock>
+        <CardFooter>
+          {this.renderApply()}
+        </CardFooter>
+      </Card>
+    );
+  }
+}

data/client/src/components/ResourceForm.jsx

@@ -0,0 +1,103 @@
+// @flow
+import React from "react";
+import classNames from "classnames";
+import {Redirect} from "react-router-dom";
+import type {RouterHistory} from "react-router-dom";
+
+import httpClient from "../http-client";
+import type {Resource, ResourceField} from "../decls";
+import {getValue, renderNew, renderEdit} from "../resource-field-renderer";
+
+export default class ResourceForm extends React.Component {
+  props: {
+    action: string;
+    resource: Resource;
+    history: RouterHistory;
+  };
+
+  state: {
+    redirectTo?: string;
+    errors: {
+      [string]: string[];
+    };
+    values: {
+      [string]: any;
+    };
+  }
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      errors: {},
+      values: {},
+    };
+    props.resource.fields.forEach(field => {
+      this.state.values[field.name] = getValue(field);
+    });
+  }
+
+  request(data: any) {
+    return this.props.resource.showPath ? httpClient.put(this.props.action, data) : httpClient.post(this.props.action, data);
+  }
+
+  handleSubmit(e: SyntheticEvent) {
+    e.preventDefault();
+    const data = {};
+    data[this.props.resource.name] = this.state.values;
+    this.request(data)
+      .then(r => this.setState({ redirectTo: r.data.redirectTo }))
+      .catch(e => this.setState({ errors: e.response.data.errors }));
+  }
+
+  handleChange(name: string, value: any) {
+    const values = this.state.values;
+    values[name] = value;
+    this.setState({ values });
+  }
+
+  handleClickCancel() {
+    this.props.history.goBack();
+  }
+
+  shouldComponentUpdate(_: any, prevState: $PropertyType<ResourceForm, "state">) {
+    return this.state.errors !== prevState.errors ||
+      this.state.redirectTo !== prevState.redirectTo;
+  }
+
+  renderField(field: ResourceField) {
+    const renderer = this.props.resource.showPath ? renderEdit : renderNew;
+    return renderer(field, this.handleChange.bind(this));
+  }
+
+  render() {
+    if (this.state.redirectTo) {
+      return <Redirect to={this.state.redirectTo} />;
+    }
+    return (
+      <form onSubmit={this.handleSubmit.bind(this)} className="form-horizontal">
+        {this.props.resource.fields.map((field, i) =>
+          <div
+            className={classNames("form-group", "row", { "has-danger": this.state.errors[field.name] })}
+            key={i}
+          >
+            <label className="col-md-3 form-control-label" htmlFor={field.name}>
+              {field.displayName}
+            </label>
+            <div className="col-md-9">
+              {this.renderField(field)}
+              {this.state.errors[field.name] && this.state.errors[field.name].map((error, i) =>
+                <div className="form-control-feedback" key={i}>
+                  {error}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        <button type="submit" className="btn btn-primary">Submit</button>
+        <span className="btn btn-secondary" onClick={this.handleClickCancel.bind(this)}>
+          Cancel
+        </span>
+      </form>
+    );
+  }
+}

data/client/src/components/ResourcesCollection.jsx

@@ -0,0 +1,41 @@
+// @flow
+import React from "react";
+import {Link} from "react-router-dom";
+
+import type {Resource} from "../decls";
+import {renderIndex} from "../resource-field-renderer";
+
+export default class ResourcesCollection extends React.Component {
+  props: {
+    attributes: string[];
+    resources: Resource[];
+  }
+
+  render() {
+    return (
+      <table className="table table-bordered table-hover table-sm">
+        <thead>
+          <tr>
+            {this.props.attributes.map((attribute, i) =>
+              <th key={i}>{attribute}</th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.resources.map((resource, i) =>
+            <tr key={i}>
+              {resource.fields.map((field, j) => {
+                const showPath = resource.showPath;
+                if (j === 0 && showPath) {
+                  return <td key={j}><Link to={showPath}>{renderIndex(field)}</Link></td>;
+                } else {
+                  return <td key={j}>{renderIndex(field)}</td>;
+                }
+              })}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    );
+  }
+}

data/client/src/components/Sidebar.jsx

@@ -0,0 +1,90 @@
+// @flow
+import React from "react";
+import {NavLink} from "react-router-dom";
+
+import type {
+  SidebarDropdown,
+  SidebarItem,
+  SidebarLink,
+  SidebarTitle,
+} from "../decls";
+
+export default class Sidebar extends React.Component {
+  props: {
+    items: SidebarItem[];
+  }
+
+  handleClick(e: SyntheticEvent) {
+    e.preventDefault();
+    const target = e.target;
+    if (target instanceof HTMLElement) {
+      const parent = target.parentElement;
+      if (parent) {
+        parent.classList.toggle("open");
+      }
+    }
+  }
+
+  renderSidebarItem(item: SidebarItem, key: number) {
+    if (item.type === 'title') {
+      return this.renderSidebarTitle(item, key);
+    } else if (item.type === 'link') {
+      return this.renderSidebarLink(item, key);
+    } else if (item.type === 'dropdown') {
+      return this.renderSidebarDropdown(item, key);
+    }
+  }
+
+  renderSidebarTitle(sidebarTitle: SidebarTitle, key: number) {
+    return (
+      <li className="nav-title" key={key}>
+        {sidebarTitle.displayName}
+      </li>
+    );
+  }
+
+  renderSidebarDropdown(sidebarDropdown: SidebarDropdown, key: number) {
+    return (
+      <li className="nav-item nav-dropdown" key={key}>
+        <a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}>
+          {sidebarDropdown.displayName}
+        </a>
+        <ul className="nav-dropdown-items">
+          {sidebarDropdown.links.map((link, i) =>
+            this.renderSidebarLink(link, i)
+          )}
+        </ul>
+      </li>
+    )
+  }
+
+  renderSidebarLink(link: SidebarLink, key: number) {
+    return (
+      <li className="nav-item" key={key}>
+        {link.external ?
+          <a href={link.link} className="nav-link">
+            {link.displayName}
+          </a>
+        :
+          <NavLink to={link.link} className="nav-link" activeClassName="active">
+            {link.displayName}
+          </NavLink>
+        }
+      </li>
+    );
+  }
+
+  render() {
+    return (
+      <div className="sidebar">
+        <nav className="sidebar-nav">
+          <ul className="nav">
+            {this.props.items.map((item, i) =>
+              this.renderSidebarItem(item, i)
+            )}
+          </ul>
+        </nav>
+      </div>
+    );
+  }
+}