add components files to merge with master

create multiple components files, install react-metismenu and save it into package.json, probably there are some error in Eslint rules, but it will fix it later.

initial commit, add template style to our app, and comment some css rules, to avoid errors when make run is executed

se incluyen archivos parcialmente funcionales, para incluirlos al master

Commit inicial

create multiple components files, install react-metismenu and save it into package.json, probably there are some error in Eslint rules, but it will fix it later.

add components files to merge with master

src/components/alert.jsx

+import React from 'react';
+
+export default class Alert extends React.Component {
+    constructor() {
+        super();
+
+        this.withCloseClassName = '';
+        this.btnClose = '';
+        this.toggle = {
+            display: 'block'
+        };
+    }
+
+    componentWillMount() {
+        if (this.props.withClose) {
+            this.btnClose = (
+                <button
+                    type='button'
+                    className='close'
+                    data-dismissible='alert'
+                    aria-label='Close'
+                >
+                    <span
+                        aria-hidden='true'
+                        style={{color: '#000'}}
+                    >{'x'}</span>
+                </button>
+            );
+        }
+    }
+
+    render() {
+        return (
+            <div
+                id='flash'
+                style={this.toggle}
+            >
+                <div
+                    className={this.props.className + this.withCloseClassName}
+                    role='alert'
+                >
+                    {this.btnClose}
+                    <i className={this.props.iconClass}></i>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Alert.propTypes = {
+    className: React.PropTypes.string,
+    iconClass: React.PropTypes.string,
+    withClose: React.PropTypes.bool,
+    children: React.PropTypes.any
+};
+
+Alert.defaultProps = {
+    className: 'alert flash-success',
+    iconClass: 'fa fa-check-circle-o',
+    withClose: false,
+    children: ''
+};

src/components/button.jsx

+import React from 'react';
+
+export default class Button extends React.Component {
+    render() {
+        return (
+            <a {...this.props.btnAttrs}>{this.props.children}</a>
+        );
+    }
+}
+
+Button.propTypes = {
+    btnAttrs: React.PropTypes.object,
+    children: React.PropTypes.any
+};
+
+Button.defaultProps = {
+};

src/components/label.jsx

+import React from 'react';
+
+export default class Label extends React.Component {
+    render() {
+        return (
+            <span className={this.props.classes}>
+                {this.props.children}
+            </span>
+        );
+    }
+}
+
+Label.propTypes = {
+    classes: React.PropTypes.string,
+    children: React.PropTypes.any
+};
+
+Label.defaultProps = {
+    classes: '',
+    children: ''
+};

src/components/link.jsx

+import React from 'react';
+import If from './if.jsx';
+
+export default class Link extends React.Component {
+    render() {
+        return (
+            <li {...this.props.attrs}>
+                <a href={this.props.url}>
+                    <span className='nav-label'>
+                        {this.props.label}
+                    </span>
+                    <If condition={this.props.isBadge}>
+                        <span className={this.props.badgeClass}>
+                            {this.props.badgeName}
+                        </span>
+                    </If>
+                </a>
+            </li>
+        );
+    }
+}
+
+Link.propTypes = {
+    badgeName: React.PropTypes.string,
+    isBadge: React.PropTypes.bool,
+    badgeClass: React.PropTypes.string,
+    url: React.PropTypes.string,
+    label: React.PropTypes.string,
+    attrs: React.PropTypes.object
+};
+
+Link.defaultProps = {
+    badgeName: '',
+    isBadge: false,
+    badgeClass: '',
+    url: '#!',
+    label: '',
+    attrs: {}
+};

src/components/page_info.jsx

+import React from 'react';
+
+export default class PageInfo extends React.Component {
+    render() {
+        return (
+            <div className='normalheader transition animated fadeIn small-header'>
+                <div className='hpanel'>
+                    <div className='panel-body'>
+                        <h2 className='font-light m-b-xs'>
+                            {this.props.titlePage}
+                        </h2>
+                        <small>{this.props.descriptionPage}</small>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+PageInfo.propTypes = {
+    titlePage: React.PropTypes.string.isRequired,
+    descriptionPage: React.PropTypes.string
+};
+
+PageInfo.defaultProps = {
+    descriptionPage: ''
+};

src/components/pagination.jsx

+import React from 'react';
+import Link from './link.jsx';
+
+export default class Pagination extends React.Component {
+    render() {
+        return (
+            <div
+                className={this.props.classes}
+                id={this.props.id}
+            >
+                <ul className={this.props.ulClasses}>
+                    {this.props.linksArray.map((link, i) => {
+                        return (
+                          <Link
+                              key={i}
+                              url={link.url}
+                              label={link.label}
+                              attrs={link.props}
+                          />
+                        );
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+Pagination.propTypes = {
+    classes: React.PropTypes.string,
+    id: React.PropTypes.string,
+    ulClasses: React.PropTypes.string,
+    linksArray: React.PropTypes.array
+};
+
+Pagination.defaultProps = {
+    classes: '',
+    id: 'pagination',
+    ulClasses: 'pagination',
+    linksArray: []
+};

src/components/panel.jsx

+import React from 'react';
+import Button from './button.jsx';
+
+export default class Panel extends React.Component {
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        return (
+            <div className='hpanel'>
+                <div className='panel-heading hbuilt clearfix'>
+                    <div className='pull-right'>{btns}</div>
+                    <div className='heading-buttons'>
+                        {this.props.title}
+                    </div>
+                </div>
+                <div className='panel-body'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Panel.propTypes = {
+    btnsHeader: React.PropTypes.array,
+    title: React.PropTypes.string,
+    children: React.PropTypes.any
+};
+
+Panel.defaultProps = {
+    btnsHeader: [],
+    title: ''
+};

src/components/panelForm.jsx

+import React from 'react';
+
+export default class PanelForm extends React.Component {
+    render() {
+        return (
+            <form {...this.props.formAttrs}>
+                <input
+                    type='hidden'
+                    name='utf8'
+                    value='✓'
+                />
+                <div className='input-group'>
+                    <input {...this.props.hiddenAttrs}/>
+                    <input {...this.props.inputAttrs}/>
+                    <span className='input-group-btn'>
+                        <button
+                            className='btn btn-default'
+                            type='submit'
+                        >
+                            <span className={this.props.iconClasses}></span>
+                        </button>
+                    </span>
+                </div>
+            </form>
+        );
+    }
+}
+
+PanelForm.propTypes = {
+    formAttrs: React.PropTypes.object,
+    hiddenAttrs: React.PropTypes.object,
+    inputAttrs: React.PropTypes.object,
+    iconClasses: React.PropTypes.string
+};
+
+PanelForm.defaultProps = {
+    iconClasses: 'fa fa-search',
+    formAttrs: {name: 'search_domain'},
+    hiddenAttrs: {type: 'hidden'},
+    inputAttrs: {}
+};

src/components/panelTable.jsx

+import React from 'react';
+import Button from './button.jsx';
+import PanelForm from './panelForm.jsx';
+import Pagination from './pagination.jsx';
+import Alert from './alert.jsx';
+
+export default class PanelTable extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            data: [
+                {name: 'zbox', casillas: '2', descripcion: 'Caracas', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2NNS', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'microsoft', casillas: '34NS', descripcion: 'Solteros', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'descargasnsn', casillas: '2NNS', descripcion: 'Descripción', estado: 'migrando', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2NNS', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'machinesoft', casillas: '', descripcion: 'Hola que tal', estado: 'inactive', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2S', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'getonboard', casillas: '45NS', descripcion: 'Casados', estado: 'inactive', props: {className: 'domain-row'}}
+            ],
+            pagination: [
+                {url: './domains/1', label: '1', active: 'active'},
+                {url: './domains/2', label: '2'},
+                {url: './domains/3', label: '3'},
+                {url: './domains/prev', label: 'prev'},
+                {url: './domains/next', label: 'next'}
+            ]
+        };
+    }
+
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        let content;
+
+        if (this.state.data.length <= 0) {
+            content = <div className='empty-search'>Sin resultados para tu búsqueda</div>;
+        } else {
+            const rows = this.state.data.map((row, i) => {
+                return (
+                    <tr
+                        key={i}
+                        {...row.props}
+                    >
+                        <td>
+                            {row.name}
+                        </td>
+
+                        <td>
+                            {row.casillas}
+                        </td>
+
+                        <td>
+                            {row.descripcion}
+                        </td>
+
+                        <td>
+                            <span className={'label-fat label-domain-status-' + row.estado}>
+                                {row.estado}
+                            </span>
+                        </td>
+                    </tr>
+                );
+            });
+
+            content = (
+                <div>
+                    <div
+                        id='index-domains-table'
+                        className='table-responsive'
+                    >
+                        <table className='table table-condensed table-striped vertical-align'>
+                            <thead>
+                                <tr>
+                                    <th>Nombre</th>
+                                    <th>Casillas Usadas</th>
+                                    <th>Descripción</th>
+                                    <th>Estado</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {rows}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <Pagination linksArray={this.state.pagination}/>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <Alert
+                    className='alert alert-success'
+                    withClose={true}
+                >
+                    <a href='./goTo'>Tu datos han sido guardados!.</a>
+                </Alert>
+                <div className='hpanel'>
+                    <div className='panel-heading hbuilt clearfix'>
+                        <div className='pull-right'>{btns}</div>
+                        <div className='panel-header-search'>
+                            <PanelForm
+                                formAttrs={{name: 'search_name', 'data-remote': true}}
+                                inputAttrs={{type: 'text', name: 'search[query]', id: 'search_query', className: 'form-control', placeholder: 'Buscar Dominio Por Nombre'}}
+                            />
+                        </div>
+                    </div>
+                    <div className='panel-body'>
+                        {content}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+PanelTable.propTypes = {
+    btnsHeader: React.PropTypes.array
+};
+
+PanelTable.defaultProps = {
+    btnsHeader: []
+};

src/components/panelTabs.jsx

+import React from 'react';
+import Button from './button.jsx';
+import PanelForm from './panelForm.jsx';
+import Pagination from './pagination.jsx';
+import Alert from './alert.jsx';
+import Link from './link.jsx';
+
+export default class Panel extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            data: [
+                {email: '@zbox', name: '2', type: 'Caracas', actions: [
+                    {
+                        props: {
+                            href: '/mailboxes/8758658/edit',
+                            className: 'btn btn-primary btn-xs'
+                        },
+                        label: 'Editar'
+                    },
+
+                    {
+                        props: {
+                            href: '/mailboxes/8758658/delete',
+                            className: 'btn btn-danger btn-xs'
+                        },
+                        label: 'Eliminar'
+                    }
+                ], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [
+                    {
+                        props: {
+                            href: '/mailboxes/86767676/edit',
+                            className: 'btn btn-danger btn-xs'
+                        },
+                        label: 'Editar'
+                    }
+                ], props: {className: 'domain-row'}},
+                {email: '@microsoft', name: '34NS', type: 'Solteros', actions: [], props: {className: 'domain-row'}},
+                {email: '@descargasnsn', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@machinesoft', name: '', type: 'Hola que tal', actions: [], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2S', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@getonboard', name: '45NS', type: 'Casados', actions: [], props: {className: 'domain-row'}}
+            ],
+            pagination: [
+                {url: './domains/1', label: '1', props: {className: 'active'}},
+                {url: './domains/2', label: '2'},
+                {url: './domains/3', label: '3'},
+                {url: './domains/prev', label: 'prev'},
+                {url: './domains/next', label: 'next'}
+            ],
+
+            tabs: [
+                {url: '/mailboxes', label: 'Todas (100)', props: {id: 'tab-all'}},
+                {url: '/archiving', label: 'Archiving', props: {id: 'tab-archiving'}},
+                {url: '/tab-basic', label: 'Básico', props: {style: {display: 'none'}}},
+                {url: '/professional', label: 'Professional', props: {style: {display: 'none'}}},
+                {url: '/premium', label: 'Premium', props: {style: {display: 'none'}}},
+                {url: '/unknown', label: 'Sin Plan (130)', props: {id: 'tab-unknown'}},
+                {url: '/locked', label: 'bloqueada (1)', props: {id: 'tab-locked'}}
+            ]
+        };
+    }
+
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        let content;
+
+        if (this.state.data.length <= 0) {
+            content = <div className='empty-search'>Sin resultados para tu búsqueda</div>;
+        } else {
+            const rows = this.state.data.map((row, i) => {
+                return (
+                    <tr
+                        key={i}
+                        {...row.props}
+                    >
+                        <td>
+                            {row.email}
+                        </td>
+
+                        <td>
+                            {row.name}
+                        </td>
+
+                        <td>
+                            {row.type}
+                        </td>
+
+                        <td>
+                            {row.actions.map((btn, j) => {
+                                return (
+                                    <Button
+                                        key={j}
+                                        btnAttrs={btn.props}
+                                    >
+                                        {btn.label}
+                                    </Button>
+                                );
+                            })}
+                        </td>
+                    </tr>
+                );
+            });
+
+            content = (
+                <div>
+                    <div
+                        id='index-domains-table'
+                        className='table-responsive'
+                    >
+                        <table className='table table-condensed table-striped vertical-align'>
+                            <thead>
+                                <tr>
+                                    <th>Email</th>
+                                    <th>Nombre</th>
+                                    <th>Tipo</th>
+                                    <th>Acciones</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            {rows}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            );
+        }
+
+        const tab = this.state.tabs.map((li, i) => {
+            return (
+                <Link
+                    key={i}
+                    attrs={li.props}
+                    url={li.url}
+                    label={li.label}
+                />
+            );
+        });
+
+        let tabs = (
+            <ul className='nav nav-tabs'>
+                {tab}
+            </ul>
+        );
+
+        return (
+            <div
+                id='index-mailboxes'
+                className='col-md-12 panel-width-tabs mailboxes-index'
+                data-domain=''
+            >
+                <Alert
+                    className='alert alert-success'
+                    withClose={true}
+                >
+                    <button>Tu datos han sido guardados! ok .</button>
+                </Alert>
+
+                <div className='hpanel'>
+                    {tabs}
+                    <div className='tab-content'>
+                        <div
+                            id='tab-index-mailboxes'
+                            className='tab-pane active'
+                        >
+                            <div className='panel-body'>
+                                <div className='panel-heading hbuilt clearfix'>
+                                    <div className='pull-right'>{btns}</div>
+                                    <div className='panel-header-search'>
+                                        <PanelForm
+                                            formAttrs={{name: 'search_name', 'data-remote': true}}
+                                            inputAttrs={{type: 'text', name: 'search[query]', id: 'search_query', className: 'form-control', placeholder: 'Buscar Dominio Por Nombre'}}
+                                        />
+                                    </div>
+                                </div>
+
+                                {content}
+
+                                <Pagination linksArray={this.state.pagination}/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Panel.propTypes = {
+    btnsHeader: React.PropTypes.array
+};
+
+Panel.defaultProps = {
+    btnsHeader: []
+};

src/index.jsx

@@ -103,6 +103,8 @@ function renderRootComponent() {
 }
 
 global.window.setup_root = () => {
+    // Do the pre-render setup and call renderRootComponent when done
+    // preRenderSetup(renderRootComponent);];
     // Do the pre-render setup and call renderRootComponent when done
     preRenderSetup(renderRootComponent);
 };