Adding the demo #5

Author: andrerpena

demo/Client.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Router} from 'react-router'
+import routes from './Routes';
+import configureStore from './store/configureStore';
+import {Provider} from 'react-redux';
+import {syncHistoryWithStore} from 'react-router-redux';
+import {browserHistory} from 'react-router'
+import {render} from 'react-dom';
+import './less/styles.less';
+
+const store = configureStore();
+const history = syncHistoryWithStore(browserHistory, store);
+
+render(
+    <Provider store={store}>
+        <Router history={history} routes={routes}/>
+    </Provider>,
+    document.getElementById('#app_container')
+);    

demo/Routes.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import App from './containers/App';
+import Demo from './pages/Demo.js';
+
+import { Route, Redirect } from 'react-router';
+
+export default (
+    <Route component={App}>
+        <Route path="/redux-autoform-bootstrap-ui/demo.html" component={Demo}/>
+        <Redirect from="*" to="/redux-autoform-bootstrap-ui/demo.html" />
+    </Route>
+);

demo/Server.js

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import React from 'react';
+import express from 'express';
+import path from 'path';
+import webpackConfig from '../webpack/webpack.config.demo.dev';
+import colors from 'colors';
+import webpackMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpack from 'webpack';
+
+const webpackCompiler = webpack(webpackConfig);
+
+require.extensions['.html'] = function (module, filename) {
+    module.exports = fs.readFileSync(filename, 'utf8');
+};
+
+const development = process.env.NODE_ENV !== 'production';
+let app = express();
+
+if (development) {
+    app.use(webpackMiddleware(webpackCompiler));
+    app.use(webpackHotMiddleware(webpackCompiler));
+    app.use(function renderApp(req, res) {
+        let wrap = require('./pages/BasePage.html')
+            .replace(/\$\{cssBundlePath\}/g, '')
+            .replace(/\$\{jsBundlePath\}/g, '/bundle.js');
+            
+        res.status(200).send(wrap);
+    });
+} else {
+    app.use(express.static(path.join(__dirname, '../demo-built')));
+}
+
+app.listen(4000, '0.0.0.0', function () {
+    console.log(colors.green(`React-metaform started at http://localhost:4000/. NODE_ENV: ${process.env.NODE_ENV}`));
+});

demo/actions/formOptions.js

@@ -0,0 +1,45 @@
+const UPDATE_FORM = 'UPDATE_FORM';
+const SET_STACKED_FIELD_LAYOUT = 'SET_STACKED_FIELD_LAYOUT';
+const SET_INLINE_FIELD_LAYOUT = 'SET_INLINE_FIELD_LAYOUT';
+const SET_EDIT_COMPONENT_FACTORY = 'SET_EDIT_COMPONENT_FACTORY';
+const SET_DETAILS_COMPONENT_FACTORY = 'SET_DETAILS_COMPONENT_FACTORY';
+
+/**
+ * Updates the form
+ */
+export const updateForm = (schema) => ({
+    type: UPDATE_FORM,
+    schema: schema
+});
+
+/**
+ * Sets the field layout as stacked
+ * @returns {{type: string}}
+ */
+export const setStackedFieldLayout = () => ({
+    type: SET_STACKED_FIELD_LAYOUT
+});
+
+/**
+ * Sets the field layout as inline
+ * @returns {{type: string}}
+ */
+export const setInlineFieldLayout = () => ({
+    type: SET_INLINE_FIELD_LAYOUT
+}); 
+
+export const setEditComponentFactory = () => ({
+    type: SET_EDIT_COMPONENT_FACTORY
+});
+
+export const setDetailsComponentFactory = () => ({     
+    type: SET_DETAILS_COMPONENT_FACTORY
+});
+
+export default {
+    UPDATE_FORM,
+    SET_STACKED_FIELD_LAYOUT,
+    SET_INLINE_FIELD_LAYOUT,
+    SET_EDIT_COMPONENT_FACTORY,
+    SET_DETAILS_COMPONENT_FACTORY
+}

demo/components/ButtonToolbar.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { ButtonToolbar, Button }from 'react-bootstrap'
+
+class Layout extends Component {
+    render() {
+
+        let { submitting } = this.props;
+
+        return (
+            <ButtonToolbar className="button-toolbar">
+                <Button className="pull-right" bsStyle="success" bsSize="large" type="submit"  disabled={submitting}>
+                    Submit
+                </Button>
+            </ButtonToolbar>
+        );
+    }
+}
+
+export default Layout;

demo/components/CodeEditor.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import AceEditor from 'react-ace';
+
+import 'brace/mode/jsx';
+import 'brace/theme/github.js';
+
+class CodeEditor extends Component {
+    render() {
+        let { value, name, readOnly, onChange, mode, width, height } = this.props;
+        mode = mode || 'jsx';
+        width =  width || '100%';
+        
+        // metadata
+        let props = { value, name, ref: 'input', readOnly, onChange, mode, width, theme: 'github', height, fontSize: 14,  editorProps: {$blockScrolling: true} };
+
+        return <AceEditor className="code-editor" {...props}/>;
+    }
+}
+
+export default CodeEditor;

demo/components/DevTools.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={false}
+  >
+    <LogMonitor />
+  </DockMonitor>
+);

demo/components/FormOptions.js

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import { ButtonGroup, Button, ButtonToolbar } from 'react-bootstrap'
+
+class FormOptions extends Component {
+    static propTypes = {
+        fieldLayout: PropTypes.string.isRequired,
+        setStackedFieldLayout: PropTypes.func.isRequired,
+        setInlineFieldLayout: PropTypes.func.isRequired
+    };
+    
+    render() {
+        let { fieldLayout, componentFactory, setStackedFieldLayout, setInlineFieldLayout, setEditComponentFactory, setDetailsComponentFactory, updateForm, editorSchema, schema} = this.props;
+            
+        return (
+            <ButtonToolbar className="form-options">
+                <ButtonGroup>
+                    <Button bsStyle="success" onClick={ () => updateForm(editorSchema) }>
+                        <i className="fa fa-refresh" aria-hidden="true"/> 
+                        Update
+                    </Button>
+                </ButtonGroup>
+                <ButtonGroup>
+                    <Button active={fieldLayout == 'stacked'} onClick={ () => setStackedFieldLayout() }>
+                        <i className="fa fa-ellipsis-v" aria-hidden="true"/>
+                        Stacked
+                    </Button>
+                    <Button active={fieldLayout == 'inline'} onClick={ () => setInlineFieldLayout() }>
+                        <i className="fa fa-ellipsis-h" aria-hidden="true"/> 
+                        Inline
+                    </Button>
+                </ButtonGroup>
+                <ButtonGroup>
+                    <Button active={componentFactory == 'edit'} onClick={ () => setEditComponentFactory() }>
+                        <i className="fa fa-pencil" aria-hidden="true"/> 
+                        Edit
+                    </Button>
+                    <Button active={componentFactory == 'details'} onClick={ () => setDetailsComponentFactory() }>
+                        <i className="fa fa-eye" aria-hidden="true"/>
+                        Details
+                    </Button>
+                </ButtonGroup>
+            </ButtonToolbar>
+        );
+    }
+}
+
+export default FormOptions;

demo/components/Layout.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import DevTools from './DevTools';
+
+class Layout extends Component {
+    render() {
+        let { children } = this.props;
+ 
+        return (
+            <div>
+                <div className="container-fluid">
+                    { children }
+                </div>
+                <DevTools />;
+            </div>
+        );
+    }
+}
+
+export default Layout;