starticket-react-admin-theme v1.2.1-beta

Admin Blue Look and Feel Theme

Admin Blue Look and Feel Theme presents simple and clean theme which can be used in many Starticket backend internal projects. The theme contains already predefined Layouts, Menus, Forms, Form controls, List, Dialog etc. with appropriate colors scheme which fits with Starticket brand colors as well.

Table of Contents

• Installation
• Example usage
• Components API
  • Layout
  • LayoutDashboard
  • Panel
  • Form
  • List
  • Dialog
  • DialogError
  • Alert
  • Title
• Licence
• Versioning
• Authors

Installation

npm install starticket-admin-theme

After npm installation is finished you have to include those links (or some other font you opt for) in index.html.

google fonts

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

bootstrap css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

After that, in main index.js file you have to put this code (<App/> component should be replaced with appropriate component related to your project).

import React                 from 'react';
import ReactDOM              from 'react-dom';
import {BrowserRouter}       from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import App                   from './App';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

Example usage

Now, when you have all prerequsities set, next you need to create a wrapper component which will house our Layout (in the future you will use that wrapper component as your layout component). It should be located in separate folder, for example components folder. This component won't just be a wrapper to our Layout component but it will hold all props need to be passed to Layout component.

Layout.js

import React, { Component } from 'react';
import { Layout }           from 'starticket-react-admin-theme';

import '../../node_modules/starticket-react-admin-theme/style.css';

/**
 * @class src/components/LayoutWrapper
 */
class LayoutWrapper extends Component
{
    state = {
        selectedId : '10',
        section : 'show',
        selectedMenuItem : 'Show Management',
        name : 'New Show',
        topNavigationMenuItems : {
            'Dashboard' : {
                'href' : '/',
                'icon' : {
                    'path' : './images/home.svg',
                    'alt' : 'Home'
                },
                'dropdown' : null
            }
        },
        sidebarNavigationMenuItems : {
            'Show Management' : {
                'items' : {
                    'Shows' : {
                        'href' : '/shows',
                        'number' : 10
                    },
                    'Devices' : {
                        'href' : '/devices',
                        'number' : 50
                    },
                    'Actions' : {
                        'href' : '/actions',
                        'number' : 5
                    }
                }
            }
        }
    };

    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };

    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Layout topNavigationMenuItems={this.state.topNavigationMenuItems}
                          sidebarNavigationMenuItems={this.state.sidebarNavigationMenuItems}
                          selectedMenuItem={this.state.selectedMenuItem}
                          id={this.state.selectedId}
                          section={this.state.section} name={this.state.name}
                          logoutFunction={this.logout}>
                {this.props.children}
            </Layout>
        );
    };
}

export default LayoutWrapper;

After that, next thing you need to do, is to make a route wrapper which will be used to render certain scene with certain layout for certain path. It should be located in your main application component (in this example it is <App/> component) and it will be just a simple component like it is shown bellow.

App.js

import { Route }           from 'react-router-dom';

/**
 * Route wrapper.
 *
 * @param {XML} Component
 * @param {XML} Layout
 * @param {Object} rest
 *
 * @returns {XML}
 */
const RouteWrapper = ({ component: Component, layout: Layout, ...rest }) => (
    <Route {...rest} render={props => (
        <Layout>
            <Component {...props} />
        </Layout>
    )} />
);

Next, everything you have to do is to use this RouteWrapper component, inside your render method, and pass to it path, layout (the layout wrapper you created few steps ago) and scene you want to render.

App.js

import { Switch }           from 'react-router-dom';
import { LayoutWrapper }    from './components';
import { HomeScene }        from './scenes/Home';

...

/**
 * @returns {XML}
 */
render() {
    return (
      <div className="App">
          <Switch>
              <RouteWrapper path='/' exact component={HomeScene} layout={LayoutWrapper} />
          </Switch>
      </div>
    );
}

Here you may see the example of HomeScene component with registration form:

HomeScene.js

import { SceneTitle,
         Panel,
         Form,
         Input,
         Email,
         Button }           from 'starticket-react-admin-theme';

...

/**
 * @returns {XML}
 */
render()
{
    return (
        <div>
            <SceneTitle text="Home Scene"/>
            <Panel title="Registration Form">
                <Form>
                    <Input label="First name" name="first-name" getValue={this.getFirstNameValue} />
                    <Input label="Last name" name="last-name" getValue={this.getLastNameValue} />
                    <Email label="Email" name="email" getValue={this.getEmailValue} />
                </Form>
                <Button onClickHandler={this.submitForm}>Submit form</Theme.Button>
            </Panel>
        </div>
    );
};

Components API

Layout

Usage example

import React, { Component } from 'react';
import { Layout }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        selectedId : '10',
        section : 'show',
        selectedMenuItem : 'Show Management',
        name : 'New Show',
        topNavigationMenuItems : {
            'Dashboard' : {
                'href' : '/',
                'icon' : {
                    'path' : './images/home.svg',
                    'alt' : 'Home'
                },
                'dropdown' : null
            }
        },
        sidebarNavigationMenuItems : {
            'Show Management' : {
                'items' : {
                    'Shows' : {
                        'href' : '/shows',
                        'number' : 10
                    },
                    'Devices' : {
                        'href' : '/devices',
                        'number' : 50
                    },
                    'Actions' : {
                        'href' : '/actions',
                        'number' : 5
                    }
                }
            }
        }
    };
    
    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };

    /**
     * Return user one step backward.
     */
    goBack = () =>
    {
        // Go back functionality
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Layout  topNavigationMenuItems={this.state.topNavigationMenuItems}
                     sidebarNavigationMenuItems={this.state.sidebarNavigationMenuItems}
                     selectedMenuItem={this.state.selectedMenuItem}
                     id={this.state.selectedId}
                     section={this.state.section} 
                     name={this.state.name}
                     logoutFunction={this.logout}
                     goBack={this.goBack}>
                {this.props.children}
            </Layout>
        );
    };
}

export default Home;

Options

Interaction Options

LayoutDashboard

Usage example

import React, { Component } from 'react';
import { LayoutDashboard }  from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
            topNavigationMenuItems : {
                'Dashboard' : {
                    'href' : '/',
                    'icon' : {
                        'path' : './images/home.svg',
                        'alt' : 'Home'
                    },
                    'dropdown' : null
                }
            },
            dashboardMenuItems : {
                'Action Management' : {
                    'href' : '/dashboard/actions'
                }
            },
            path : '/dashboard/actions'
        };

    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };

    /**
     * Change tab handler.
     */
    changeTab = (tab) =>
    {
        this.setState({
            path : tab
        });
    };

    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Theme.LayoutDashboard  topNavigationMenuItems={this.state.topNavigationMenuItems}
                                    logoutFunction={this.logout}
                                    dashboardMenuItems={this.state.dashboardMenuItems}
                                    path={this.state.path}
                                    changeTabHandler={this.changeTab}
                                    withoutSidebar>
                {this.props.children}
            </Theme.LayoutDashboard>
        );
    };
}

export default Home;

Options

Interaction Options

Panel

Usage example

import React, { Component } from 'react';
import { Panel }            from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Panel title="Home Scene" colorize>
                {/*Panel content*/}
            </Panel>
        );
    };
}

export default Home;

Options

Interaction Options

Form

• Button
• Checkbox
• Email
• Password
• RadioGroup
• Search
• Select
• Switch
• Text
• Textarea
• ToggleSwitch

Button

Usage example

import React, { Component } from 'react';
import { Button }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Handles button click.
     */
    buttonClick = () => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Button onClickHandler={this.buttonClick}>Click me!</Button>
        );
    };
}

export default Home;

Options

Interaction Options

Checkbox

Usage example

import React, { Component } from 'react';
import { Form,
         Checkbox }         from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        isChecked : false
    };
    
    /**
     * Returns checkbox object with name and value.
     * 
     * @param {Object} checkbox
     */
    getValue = (checkbox) => 
    {
        if (this.state.isChecked !== checkbox.value) {
            this.state({
                isChecked : checkbox.value
            });
        }
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Checkbox name="terms" label="Terms and conditions" checked={this.state.isChecked} 
                          getValue={this.getValue}/>
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Email

Usage example

import React, { Component } from 'react';
import { Form,
         Email }            from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns email object with name and value.
     * 
     * @param {Object} email
     */
    getValue = (email) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Email label="Email" name="email" getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Password

Usage example

import React, { Component } from 'react';
import { Form,
         Password }         from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns password object with name and value.
     * 
     * @param {Object} password
     */
    getValue = (password) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Password label="Password" name="password" getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options`

RadioGroup

Usage example

import React, { Component } from 'react';
import { Form,
         RadioGroup }       from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        defaultValue : 'male',
        labels       : {
            'male'   : 'Male',
            'female' : 'Female'
        }
    }
    
    /**
     * Returns event object.
     * 
     * @param {Object} event
     */
    getValue = (event) => 
    {
        if (this.state.defaultValue !== event.target.value) {
            this.setState({
                defaultValue : event.target.value
            });
        }
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <RadioGroup name="sex" defaultValue={this.state.defaultValue} 
                            labels={this.state.labels} getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Search

Usage example

import React, { Component } from 'react';
import { Form,
         Search }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns search object with name and value.
     * 
     * @param {Object} search
     */
    getValue = (search) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Search name="search" getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Select

Usage example

import React, { Component } from 'react';
import { Form,
         Select }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        selectData : {
            'sr' : 'Serbia',
            'gr' : 'Greece',
            'it' : 'Italy'
        }
    }
    
    /**
     * Returns select object with uid and value.
     * 
     * @param {Object} select
     */
    getValue = (select) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Select name="search" data={this.state.selectData} getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Switch

Usage example

import React, { Component } from 'react';
import { Form,
         Switch }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        isChecked : false
    }
    
    /**
     * Returns switch value.
     * 
     * @param {Boolean} isChecked
     */
    getValue = (isChecked) => 
    {
        if (isChecked !== this.state.isChecked) {
            this.setState({
                isChecked : isChecked
            });
        }
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Switch name="isActive" label="Is active?" checked={this.state.isChecked} 
                        getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Text

Usage example

import React, { Component } from 'react';
import { Form,
         Text }             from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns text object with name and value.
     * 
     * @param {Object} text
     */
    getValue = (text) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Text label="Company" name="company" getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

Textarea

Usage example

import React, { Component } from 'react';
import { Form,
         Textarea }         from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns event.
     * 
     * @param {Object} event
     */
    getValue = (event) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <Textarea label="Biography" name="bio" getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

ToggleSwitch

Usage example

import React, { Component } from 'react';
import { Form,
         ToggleSwitch }     from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        labels : {
            '1' : 'superadmin',
            '2' : 'admin',
            '3' : 'contributor',
        }
    }
    
    /**
     * Returns toggle switch event.
     * 
     * @param {Object} event
     */
    getValue = (event) => 
    {
        
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Form>
                <ToggleSwitch name="role" labels={this.state.labels} getValue={this.getValue} />
            </Form>
        );
    };
}

export default Home;

Options

Interaction Options

List

Usage example

import React, { Component } from 'react';
import { List }             from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        listColumns : {
            'Id'    : {'subtitle':null},
            'Name'  : {'subtitle':null},
            'Date'  : {'subtitle':null},
        },
        listData : [
            [1,'Show 1','10-10-2020 10:00'],
            [2,'Show 2','12-12-2022 12:00']
        ]
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <List columns={this.state.listColumns} data={this.state.listData} />
        );
    };
}

export default Home;

Options

Dialog

Usage example

import React, { Component } from 'react';
import { Dialog }           from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        showDialog: true
    };
    
    /**
     * Handles dialog confirmation.
     */
    confirmDialog = () =>
    {

    };

    /**
     * Closes dialog.
     */
    closeDialog = () =>
    {
        this.setState({
            showDialog: false
        });
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Dialog title="Theme Dialog" show={this.state.showDialog} 
                          action={this.confirmDialog} closeDialog={this.closeDialog}>
                Starticket Theme Dialog
            </Dialog>
        );
    };
}

export default Home;

Options

Interaction Options

DialogError

Usage example

import React, { Component } from 'react';
import { DialogError }      from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        showDialogError: true
    };
    
    /**
     * Closes dialog.
     */
    closeDialog = () =>
    {
        this.setState({
            showDialogError: false
        });
    };
    
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <DialogError show={this.state.showDialogError} closeDialog={this.closeDialog}>
                Unfortunatelly an error occurred!
            </DialogError>
        );
    };
}

export default Home;

Options

Interaction Options

Alert

Usage example

import React, { Component }  from 'react';
import { Alert, 
         AlertTypeSuccess }  from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <Alert type={AlertTypeSuccess}>
                {/*Alert content*/}
            </Alert>
        );
    };
}

export default Home;

Options

Title

Usage example

import React, { Component }  from 'react';
import { SceneTitle }        from 'starticket-react-admin-theme';

/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <SceneTitle text="Home Scene"/>
        );
    };
}

export default Home;

Options

Licence

Private

Versioning

We use SemVer for versioning. Current version is v1.0.0-beta

Authors

• Ana Simonović - Developer - ana.simonovic@starticket.ch
• Stevan Tošić - Developer - stevan.tosic@starticket.ch
• Nikola Radović - Developer - nikola.radovic@starticket.ch
• Milivoje Vujadinović - Team Lead - milivoje.vujadinovic@starticket.ch

Built With

• React JS - The JavaScript Library Used