Runner Web Design Base Components

This projects delivers:

• Library of reusable UI components that allow to build browser GUI for Runner Runtime (codezillas/runner-runtime>),
• Zoovu Web Design CLI - commandline interface for building production-ready Web Designs according to the contract that is expected by integration code.

Overview

This project aims to deliver as reusable as possible library of UI components that can be used to assemble Web Designs of different flavours and UX.

Web Design class is defined by WebDesignDefinition:

export interface WebDesignDefinition {
    webDesignName: string;
    AdvisorView: Component<any>;
    componentRegistry: ComponentRegistry;
    styleRegistry: StyleRegistry;
    rootContainerStyle?: ComponentStyleDefinition;
    plugins?: AdvisorWebDesignPlugin[];
}

and can be created using factory from Runner Browser API (see: codezillas/runner-runtime>):

const WebDesignClass = CreateWebDesignClass({
    webDesignName: "bikes-assistant",
    AdvisorView: componentRegistry.getComponent("AdvisorView"),
    componentRegistry,
    styleRegistry
});

(full example can be seen for example in theme-1 source code located in codezillas/runner-themes>)

As we can see from those two snippets, minimal set of data, that we need in order to create our own Web Design, is:

• Web Design name
• AdvisorView, that is root vue component that will be mounted to DOM. AdvisorView determines Vue instance as in https://vuejs.org/v2/guide/instance.html
• Components Registry - as Runner Browser API provides number of custom built annotations and even supports injecting different child components in runtime, it is necessary to allow framework to scan all Vue components that are being used by the Web Design
• Styles Registry - preferred way of styling components is to use JSS (https://cssinjs.org) attached to each component. JSS was chosen because allows to drive styling through JSON configuration, it allow componentization, re-usability and styles isolation. Styles Registry defines which Vue component should use which JSS.

Guide

If you would like contribute to the project please read through our guide.

Table of contents:

• Components development
• Adding custom features to themes
• Setting up development environment
• GitLab configuration
• How to contribute