Merge pull request #22 from open-sausages/pulls/test-react

Added TestReactFormBuilder admin section

.editorconfig

@@ -10,6 +10,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[{*.js,*.jsx}]
+indent_size = 2
+
 [{*.yml,package.json}]
 indent_size = 2
 

.eslintignore

@@ -0,0 +1,2 @@
+client/dist/
+client/lang/

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "max-len": [2, 120, 4]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+/**/*.js.map

client/dist/legacy.js

@@ -0,0 +1,14 @@
+!function(t){function e(r){if(n[r])return n[r].exports
+var o=n[r]={exports:{},id:r,loaded:!1}
+return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={}
+return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict"
+n(1)},function(t,e,n){"use strict"
+function r(t){return t&&t.__esModule?t:{"default":t}}var o=n(2),i=r(o),u=n(3),c=r(u),s=n(4),a=r(s),l=n(5),f=n(6),d=r(f)
+i["default"].entwine("ss",function(t){t(".TestReactFormBuilder").entwine({onmatch:function e(){var t=this
+setTimeout(function(){return t._renderForm()},100),this[0].style.setProperty("overflow-y","scroll","important")},onunmatch:function n(){this._clearForm(),this.css("overflow-y",!1)},open:function r(){this._renderForm()
+
+},close:function o(){this._clearForm()},_renderForm:function i(){var t=this,e=window.ss.store,n=e.getState().config.sections.TestReactFormBuilder,r=n.form.TestEditForm.schemaUrl
+a["default"].render(c["default"].createElement(l.Provider,{store:e},c["default"].createElement(d["default"],{schemaUrl:r,handleSubmit:function o(){return t._handleSubmit.apply(t,arguments)}})),this[0])
+
+},_clearForm:function u(){a["default"].unmountComponentAtNode(this[0])},_handleSubmit:function s(t,e,n){return t.preventDefault(),n()}}),t(".TestReactFormBuilder .nav-link").entwine({onclick:function f(t){
+t.preventDefault()}})})},function(t,e){t.exports=jQuery},function(t,e){t.exports=React},function(t,e){t.exports=ReactDom},function(t,e){t.exports=ReactRedux},function(t,e){t.exports=FormBuilder}])

client/src/bundles/legacy.js

@@ -0,0 +1 @@
+require('../legacy/TestReactFormBuilder');

client/src/legacy/TestReactFormBuilder.js

@@ -0,0 +1,69 @@
+import jQuery from 'jQuery';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import FormBuilder from 'components/FormBuilder/FormBuilder';
+
+jQuery.entwine('ss', ($) => {
+  /**
+   * Kick off Test React FormBuilder admin section.
+   * Uses React to rebuild the list of fields from FrameworkTest's TestPages.
+   */
+  $('.TestReactFormBuilder').entwine({
+    onmatch() {
+      setTimeout(() => this._renderForm(), 100);
+      // need to force scrollable .css() doesn't work with important which is needed for this case
+      this[0].style.setProperty('overflow-y', 'scroll', 'important');
+    },
+
+    onunmatch() {
+      this._clearForm();
+      this.css('overflow-y', false);
+    },
+
+    open() {
+      this._renderForm();
+    },
+
+    close() {
+      this._clearForm();
+    },
+
+    _renderForm() {
+      const store = window.ss.store;
+      const sectionConfig = store.getState()
+        .config.sections['TestReactFormBuilder'];
+      const schemaUrl = sectionConfig.form.TestEditForm.schemaUrl;
+
+      ReactDOM.render(
+        <Provider store={store}>
+          <FormBuilder
+            schemaUrl={schemaUrl}
+            handleSubmit={(...args) => this._handleSubmit(...args)}
+          />
+        </Provider>,
+        this[0]
+      );
+    },
+
+    _clearForm() {
+      ReactDOM.unmountComponentAtNode(this[0]);
+      // this.empty();
+    },
+
+    _handleSubmit(event, fieldValues, submitFn) {
+      event.preventDefault();
+
+      return submitFn();
+    },
+
+  });
+
+  $('.TestReactFormBuilder .nav-link').entwine({
+    onclick: function (e) {
+      // this is required because the React version of e.preventDefault() doesn't work
+      // this is to stop React Tabs from navigating the page
+      e.preventDefault();
+    }
+  });
+});

code/TestReactFormBuilder.php

@@ -0,0 +1,53 @@
+<?php
+
+use SilverStripe\Admin\LeftAndMain;
+use SilverStripe\View\Requirements;
+use SilverStripe\Forms\Form;
+use SilverStripe\Forms\FieldList;
+
+class TestReactFormBuilder extends LeftAndMain
+{
+    private static $url_segment = 'test-react';
+    private static $menu_title = 'Test React FormBuilder';
+
+    public function getClientConfig()
+    {
+        $baseLink = $this->Link();
+        return array_merge(parent::getClientConfig(), [
+            'reactRouter' => false,
+            'form' => [
+                'TestEditForm' => [
+                    'schemaUrl' => $this->Link('schema/TestEditForm'),
+                ],
+            ]
+        ]);
+    }
+    public function getTestEditForm($id = null) {
+        /* @var $page BasicFieldsTestPage */
+        $page = BasicFieldsTestPage::create();
+
+        $form = Form::create($this, 'TestEditForm', $page->getCMSFields(), FieldList::create([]));
+        return $form;
+    }
+
+    public function TestEditForm() {
+        return $this->getTestEditForm();
+    }
+
+    /**
+     * @todo Implement on client
+     *
+     * @param bool $unlinked
+     * @return ArrayList
+     */
+    public function breadcrumbs($unlinked = false)
+    {
+        return null;
+    }
+
+    public function getEditForm($id = null, $fields = null) {
+        Requirements::javascript('frameworktest/client/dist/legacy.js');
+
+        return Form::create($this, 'TestEditForm', FieldList::create(), FieldList::create());
+    }
+}

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "silverstripe-asset-admin",
+  "version": "0.0.0",
+  "description": "Asset management for the SilverStripe CMS",
+  "main": "./client/src/boot/index.js",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open-sausages/silverstripe-asset-admin.git"
+  },
+  "homepage": "https://github.com/open-sausages/silverstripe-asset-admin",
+  "bugs": {
+    "url": "https://github.com/open-sausages/silverstripe-asset-admin/issues"
+  },
+  "author": "SilverStripe Ltd",
+  "engines": {
+    "node": "4.x"
+  },
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --config ./webpack-dev.config.js --watch",
+    "lock": "npm-shrinkwrap --dev",
+    "test": "NODE_PATH=\"./client/src\" jest",
+    "coverage": "NODE_PATH=\"./client/src\" jest --coverage",
+    "lint": "eslint client/src & sass-lint -v"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "testDirectoryName": "tests",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react"
+    ],
+    "mocksPattern": "mocks",
+    "testPathDirs": [
+      "client/src"
+    ],
+    "bail": true,
+    "testRunner": "<rootDir>/node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js"
+  },
+  "dependencies": {
+    "react": "^15.3.1",
+    "react-addons-css-transition-group": "^15.3.1",
+    "react-bootstrap-ss": "^0.30.5",
+    "react-dom": "^15.3.1",
+    "react-redux": "^4.4.1",
+    "react-router": "^2.4.1",
+    "react-router-redux": "^4.0.5",
+    "redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz",
+    "redux-thunk": "^2.1.0",
+    "tether": "^1.3.2",
+    "url": "^0.11.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.4.0",
+    "babel-core": "^6.7.4",
+    "babel-jest": "^9.0.3",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
+    "babel-plugin-transform-object-assign": "^6.5.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.5.3",
+    "eslint-config-airbnb": "^6.2.0",
+    "eslint-plugin-react": "^4.2.3",
+    "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "imports-loader": "^0.6.5",
+    "jest-cli": "^0.9.2",
+    "node-sass": "^3.8.0",
+    "npm-shrinkwrap": "^6.0.1",
+    "postcss-loader": "^0.10.1",
+    "react-addons-test-utils": "^15.3.1",
+    "redux-logger": "^2.6.1",
+    "resolve-url-loader": "^1.6.0",
+    "sass-lint": "^1.9.1",
+    "sass-loader": "^4.0.0",
+    "script-loader": "^0.7.0",
+    "semver": "^5.1.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2"
+  },
+  "babel": {
+    "presets": [
+      "react",
+      "es2015"
+    ]
+  }
+}

webpack-dev.config.js

@@ -0,0 +1,12 @@
+const webpack = require('webpack');
+const Config = require('./webpack.config');
+
+Config.plugins = [
+    new webpack.ProvidePlugin({
+      jQuery: 'jQuery',
+      $: 'jQuery',
+    }),
+];
+Config.devtool = 'source-map';
+
+module.exports = Config;

webpack.config.js

@@ -0,0 +1,113 @@
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+// const SprityWebpackPlugin = require('sprity-webpack-plugin');
+
+const PATHS = {
+  MODULES: './node_modules',
+  JS_SRC: './client/src',
+  JS_DIST: './client/dist',
+};
+
+// Used for autoprefixing css properties (same as Bootstrap Aplha.2 defaults)
+const SUPPORTED_BROWSERS = [
+  'Chrome >= 35',
+  'Firefox >= 31',
+  'Edge >= 12',
+  'Explorer >= 9',
+  'iOS >= 8',
+  'Safari >= 8',
+  'Android 2.3',
+  'Android >= 4',
+  'Opera >= 12',
+];
+
+const config = {
+    // TODO Split out with new 'admin' module
+    name: 'js',
+    entry: {
+      legacy: `${PATHS.JS_SRC}/bundles/legacy.js`,
+    },
+    resolve: {
+      modulesDirectories: [PATHS.MODULES],
+    },
+    output: {
+      path: 'client/dist',
+      filename: '[name].js',
+    },
+
+    // lib.js provies these globals and more. These references allow the framework bundle
+    // to access them.
+    externals: {
+        'components/Breadcrumb/Breadcrumb': 'Breadcrumb',
+        'components/FormBuilderModal/FormBuilderModal': 'FormBuilderModal',
+        'components/FormBuilder/FormBuilder': 'FormBuilder',
+        'components/Toolbar/Toolbar': 'Toolbar',
+        'state/breadcrumbs/BreadcrumbsActions': 'BreadcrumbsActions',
+        'deep-freeze-strict': 'DeepFreezeStrict',
+        i18n: 'i18n',
+        jQuery: 'jQuery',
+        'lib/Backend': 'Backend',
+        'lib/Config': 'Config',
+        'lib/Injector': 'Injector',
+        'lib/ReducerRegister': 'ReducerRegister',
+        'lib/Router': 'Router',
+        'lib/ReactRouteRegister': 'ReactRouteRegister',
+        'lib/SilverStripeComponent': 'SilverStripeComponent',
+        'page.js': 'Page',
+        'react-addons-css-transition-group': 'ReactAddonsCssTransitionGroup',
+        'react-addons-test-utils': 'ReactAddonsTestUtils',
+        'react-dom': 'ReactDom',
+        'react-redux': 'ReactRedux',
+        'react-router-redux': 'ReactRouterRedux',
+        'react-router': 'ReactRouter',
+        react: 'React',
+        'redux-thunk': 'ReduxThunk',
+        redux: 'Redux',
+    },
+    module: {
+      loaders: [
+        {
+          test: /\.js$/,
+          exclude: /(node_modules|thirdparty)/,
+          loader: 'babel',
+          query: {
+            presets: ['es2015', 'react'],
+            plugins: ['transform-object-assign', 'transform-object-rest-spread'],
+            comments: false,
+          },
+        },
+        {
+          test: '/i18n.js/',
+          loader: 'script-loader',
+        },
+      ],
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        jQuery: 'jQuery',
+        $: 'jQuery',
+      }),
+      new webpack.DefinePlugin({
+        'process.env':{
+          // Builds React in production mode, avoiding console warnings
+          'NODE_ENV': JSON.stringify('production')
+        }
+      }),
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          unused: false,
+          warnings: false,
+        },
+        output: {
+          beautify: false,
+          semicolons: false,
+          comments: false,
+          max_line_len: 200,
+        },
+      }),
+    ],
+  };
+
+// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
+module.exports = config;