Toolkit-ui NPM

Toolkit-ui

This repository contains every UI elements of the AFP-Toolkit application.

The UI can be serve using a Docker container.

If you want to use it along with others Toolkit services, you should take a look here

The UI is built and rendered with Nuxt. It means that the pages are first ssr-rendered, then the app plays on your browser. The tools are lazy loaded so they're fetched from the server when it's necessary.

The UI connects with the API server with Rest on the server side, and Socket.io on the client side.

Build

Build Docker image :

npm run docker-build

Serve

Run development web server with

npm run docker

Open http://localhost:3000

Common styling with modules

The styles used in common in Toolkit-ui and in the tools are kept in the @afp/toolkit-styles npm modules.

Styles are applyed in /src/assets/styles/main.scss

Styles variables are available in /src/assets/styles/variables.scss

$assets_path: '~@afp/toolkit-styles/assets/';
@import '~@afp/toolkit-styles/scss/main.scss';

It provides fonts, colors, variables, mixins, and basic CSS components, but no layouts.

In modules, it can be included the same way, but shouldn't be exported.

Test

Tests are in /test/index.test.js

First, build your docker image

npm run docker-build

Then run the tests

npm run docker-test

Using ava 2.0.0

Continuous Integration

The important file is ./.gitlab-ci.yml. It contains a list of jobs and the order of their executions. For now, it runs the tests described just before and if they succeed, builds/pushs a new docker image in the gitlab registry.

If you push to branch dev, it will also deploy the latest environment on a distant server.

How to register a tool

To register a new tool, first create it using the sample tool example.

Build it as an universal package and publish it to npm.

Then you can install it here using npm install --save yourtool.

Tool integration

You must create a new tool object in src/store.tools.js, two svg icons in src/assets/svg/tools, and a directory in src/pages/_lang/use/

Then, create some pages where you can implement your tool.

Styles

It's very easy to require your tool's CSS styles : import 'yourtool/dist/styles.min.css'

Component

You can choose between simply import your component :

import { yourMainToolComponent } from 'yourtool'

components: { yourMainToolComponent }

or lazy-load the component browser-side :

import Vue from 'vue'

async mounted () {
  const { yourMainToolComponent } = await import('yourtool')
  Vue.component('your-tool', yourMainToolComponent)
}

Store

You can also import your tool's store. It will be placed in the store under a NAMESPACE you define in your tool. Please don't interfere with existant store modules.

data () {
  return {
    componentNamespace: null
  }
},

async mounted () {
  const { yourToolStore, NAMESPACE } = await import('yourtool')
  this.componentNamespace = NAMESPACE
  this.$store.registerModule(this.componentNamespace, ChartStore)
},

destroyed () {
  // Remove it before leaving.
  this.$store.unregisterModule(this.componentNamespace)
}