ssv-au-ui

UI components library for Aurelia by Sketch7.

NOTE: This project is under development and is not intended for general production use yet.

Quick links

Change logs | Project Repository

Installation

Get library via npm

npm install @ssv/au-ui --save

# install peers
npm install normalize-scss node-waves @ssv/core @ssv/au-core aurelia-dependency-injection aurelia-logging --save

Setup Plugin

Register au-ui plugin with optional global configuration and bootstrap.

import { UiConfig, UiBootstrapper, buttonType } from "@ssv/au-ui";

const uiConfig: UiConfig = {
    button: { type: buttonType.raised }
};
// register plugin with aurelia + configure
aurelia.use.plugin("@ssv/au-ui", uiConfig);

aurelia.start().then(() => {
    // invoke bootstrapper to initialize
    const uiBootstrapper = aurelia.container.get(UiBootstrapper) as UiBootstrapper;
    uiBootstrapper.init();
});

Styling

Register sass includePaths with the following naming.

"./node_modules/@ssv/au-ui/dist/sass",
"./node_modules/normalize-scss/sass",
"./node_modules/node-waves/src/scss",

Configure and import sass.

// configure/override
$ssv-primary-color: red;

// import all (vendors, core and components)
@import "@ssv/au-ui/all";

// import only vendors
@import "@ssv/au-ui/vendors";

// import only core
@import "@ssv/au-ui/core";

// import only components
@import "@ssv/au-ui/components";

Import fonts

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">

Features

| Feature | Status | Docs | Issue | |------------------|-------------------------------------|-------------------|----------------| | input | Preview | README | - | | button | Preview | README | - | | waves | Preview | README | - | | badge | Preview | README | - | | icon | Preview | README | - | | checkbox | Preview | README| - | | snackbar | Preview | README| - | | select | Preview | README | - | | chips | Preview | README | - | | datepicker | Not Started | | - | | switch | Not Started | | - | | radio | Not Started | | - | | alert | Not Started | | - | | modal | Not Started | | - | | collection | Not Started | | - | | tabs | Not Started | | - | | progress-bar | Not Started | | - | | progress-spinner | Not Started | | - | | tooltip | Not Started | | - | | card | Not Started | | - | | button toggle | Not Started | | - |

Value Converters

| Value Converters | Status | Docs | Issue | |------------------|---------|---------------------|-------| | highlight | Preview | README | - |

Getting Started

Setup Machine for Development

Install/setup the following:

• NodeJS v8+
• Visual Studio Code or similar code editor
• TypeScript 2.5+
• Git + SourceTree, SmartGit or similar (optional)
• Ensure to install global NPM modules using the following:

npm install -g git gulp yarn

Cloning Repo

• Run git clone https://github.com/sketch7/ssv-au-ui.git
• Switch to develop branch

Project Setup

The following process need to be executed in order to get started.

npm install

Building the code

gulp build
// or
npm run build

In order to view all other tasks invoke gulp or check the gulp tasks directly.

Running the tests

gulp test
// or
npm test

Development utils

Trigger gulp watch

Handles compiling of changes.

gulp watch
// or
npm start

Running Continuous Tests

Spawns test runner and keep watching for changes.

gulp tdd
// or
npm run tdd

Preparation for Release

gulp prepare-release --bump major|minor|patch|prerelease (default: patch)

Check out the release workflow guide in order to guide you creating a release and publishing it.

Library Size

Will be adding library file sizes once it will be completed.