Merge pull request #18 from maxime-rainville/feature/react-admin

React admin

.ss-storybook.js

@@ -0,0 +1,4 @@
+module.exports = {
+  src: 'client/src',
+  fileMatcher: /(\/bundle\.scss|[A-Za-z]-story\.jsx?)$/,
+};

README.md

@@ -12,67 +12,24 @@ This library provide a helpers to make it easy to create react component for Sil
 *
 
 ## Installation
-Add some installation instructions here, having a 1 line composer copy and paste is useful.
-Here is a composer command to create a new module project. Ensure you read the
-['publishing a module'](https://docs.silverstripe.org/en/developer_guides/extending/how_tos/publish_a_module/) guide
-and update your module's composer.json to designate your code as a SilverStripe module.
-
 ```
 composer require maxime-rainville/silverstripe-react
 ```
 
-**Note:** When you have completed your module, submit it to Packagist or add it as a VCS repository to your
-project's composer.json, pointing to the private repository URL.
-
-## License
-See [License](license.md)
-
-We have included a 3-clause BSD license you can use as a default. We advocate for the BSD license as
-it is one of the most permissive and open licenses.
-
-Feel free to alter the [license.md](license.md) to suit if you wan to use an alternative license.
-You can use [choosealicense.com](http://choosealicense.com) to help pick a suitable license for your project.
-
 ## Documentation
  * [Documentation readme](docs/en/readme.md)
 
 Add links into your docs/<language> folder here unless your module only requires minimal documentation
 in that case, add here and remove the docs folder. You might use this as a quick table of content if you
-mhave multiple documentation pages.
-
-## Example configuration (optional)
-If your module makes use of the config API in SilverStripe it's a good idea to provide an example config
- here that will get the module working out of the box and expose the user to the possible configuration options.
-
-Provide a yaml code example where possible.
-
-```yaml
-
-Page:
-  config_option: true
-  another_config:
-    - item1
-    - item2
-
-```
-
-## Maintainers
- * Person here <[email protected]>
- * Another maintainer <[email protected]>
-
-## Bugtracker
-Bugs are tracked in the issues section of this repository. Before submitting an issue please read over
-existing issues to ensure yours is unique.
-
-If the issue does look like a new bug:
+have multiple documentation pages.
 
- - Create a new issue
- - Describe the steps required to reproduce your issue, and the expected outcome. Unit tests, screenshots
- and screencasts can help here.
- - Describe your environment as detailed as possible: SilverStripe version, Browser, PHP version,
- Operating System, any installed SilverStripe modules.
+## Maintainer documentation
 
-Please report security issues to the module maintainers directly. Please don't file security issues in the bugtracker.
+### Rebuilding the pattern library
 
-## Development and contribution
-If you would like to make contributions to the module please ensure you raise a pull request and discuss with the module maintainers.
+This module integrate with the Silverstripe CMS pattern library. To view the pattern library:
+- Make sure you have installed `silverstripe/admin` from source.
+- Run `cd vendor/silverstripe/admin` from the root of your project.
+- Run `yarn install` to install the `silverstripe/admin` dependencies.
+- Run `yarn pattern-lib` to build the pattern library. This will auto-discover the `maxime-rainville/silverstripe-react` library.
+- Point your browser to http://localhost:6006. Stories specific to this module will be under "ReactAdmin".

babel.config.json

@@ -0,0 +1,6 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }

client/src/boot/index.js

@@ -1,6 +1,8 @@
 /* global window */
 import registerComponents from 'boot/registerComponents';
+import registerRoutes from 'boot/registerRoutes';
 
 window.document.addEventListener('DOMContentLoaded', () => {
+  registerRoutes();
   registerComponents();
 });

client/src/boot/registerComponents.js

@@ -1,8 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import Injector from 'lib/Injector';
+import { LeftAndMain } from 'components/LeftAndMain';
+import ReactAdminDefaultComponent from '../components/ReactAdminDefaultComponent';
+import ReactAdminErrorComponent from '../components/ReactAdminErrorComponent';
 
 export default () => {
   Injector.component.registerMany({
     // List your React components here so Injector is aware of them
+    LeftAndMain,
+    ReactAdminDefaultComponent,
+    ReactAdminErrorComponent
   });
 };

client/src/boot/registerRoutes.js

@@ -0,0 +1,19 @@
+/* global reactAdminConfig */
+import reactRouteRegister from 'lib/ReactRouteRegister';
+import Config from 'lib/Config';
+import ReactAdminBoostrap from 'components/ReactAdminBoostrap';
+
+export default () => {
+  if (typeof reactAdminConfig === 'undefined') {
+    // We are probably not in an ReactAdmin section ... let's bail
+    return;
+  }
+
+  const sectionConfig = Config.getSection(reactAdminConfig.configKey);
+
+  reactRouteRegister.add({
+    path: `/${sectionConfig.reactRoutePath}/*`,
+    component: ReactAdminBoostrap,
+    exact: false
+  });
+};

client/src/bundles/bundle.js

@@ -1,5 +1,5 @@
 // Include any legacy Entwine wrappers
-require('../legacy/entwine/');
+require('../legacy/entwine');
 
 // Include boot entrypoint
 require('boot');

client/src/components/LeftAndMain/ActionBar.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from 'components/Button/Button';
+
+const Action = ({ current, component: ActionComponent, className, title, children, ...props }) => {
+  const actionClassName = classNames(
+    className,
+    'action-bar__action',
+  );
+
+  return (
+    <ActionComponent {...props} className={actionClassName}>
+      {children || title}
+    </ActionComponent>
+  );
+};
+
+/**
+ * It is used to ship action buttons
+ *
+ * @param actions A array of actions that will be rendered as buttons
+ * @param isBottomActionBar Whether this bar should be placed at the bottom =
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ActionBar = ({ actions, className, component, position }) => {
+  if (!actions || actions.length === 0) {
+    return false;
+  }
+
+  const actionBarClass = classNames(
+    'action-bar',
+    'fill-width',
+    className,
+    { 'action-bar--bottom': position === 'bottom' },
+  );
+
+  return (
+    <div className={actionBarClass}>
+      <div className="btn-toolbar fill-width">
+        {actions.map(({ key, ...props }) => (
+          <Action key={key} component={component} {...props} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+ActionBar.propTypes = {
+  component: PropTypes.elementType,
+  className: PropTypes.string,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    title: PropTypes.string,
+    component: PropTypes.elementType,
+  })),
+  position: PropTypes.oneOf(['top', 'bottom']),
+};
+
+ActionBar.defaultProps = {
+  component: Button,
+  actions: [],
+  position: 'top'
+};
+
+export default ActionBar;

client/src/components/LeftAndMain/ActionBar.scss

@@ -0,0 +1,18 @@
+.action-bar {
+  height: 53px;
+
+  &--bottom {
+    position: absolute;
+    bottom: 0;
+    background-color: #f4f6f8;
+    border-top: 1px solid #dbe0e9;
+    left: 0;
+    padding-left: 1.5385rem;
+    padding-right: 1.5385rem;
+  }
+
+  .btn-toolbar {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}