Bindable

Bindable is a design system that aims to provide the video products in Verizon Media tools to build cohesive and consistent interfaces. Bindable will provide a common pattern for desginers and engineers to follow. Bindable is developed as an Aurelia plugin and built with the aurelia-cli.

Table of Contents

• Background
• Install
• Usage
• Contributing
• License

Background

We are a team of designers and engineers building online tools to help customers manage their video content. As our team expanded and the features we needed to build grew we needed something to help us stay on the same page. This started with a pattern library and it worked great for a while. Over time though we noticed different teams using the pattern library differently. We started to build Bindable to help with that. Instead of just a list of CSS classes Bindable provides a more structured way of building user interfaces. We have found this keeps us from rebuilding the wheel over and over. We are far from done but Bindable is now in a state where others might enjoying using it.

Install

npm install @bindable-ui/bindable

Usage

Project Setup

Add Bindable as a plugin into your Aurelia project:

aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('@bindable-ui/bindable'));

Depending on your Webpack config, you may be required to handle CSS imports from Bindable manually.

Using Helper classes

import {LocalStorageHelper} from '@bindable-ui/bindable';
...
LocalStorageHelper.loadOrDefault('exampleKey', null);

Using TS Interfaces

import {CTableCol} from '@bindable-ui/bindable';
...
public listCols: CTableCol[] = [];

Import CSS Modules classes

If you need access to a specific class in a component, you can import the json file for it to get all of the style class names.

import cTileCssJson from '@bindable-ui/bindable/dist/native-modules/components/tile/c-tile/c-tile.css.json';
...
console.log(cTileCssJson.tile);

Use Bindable ViewModels and Views

If you need to use a custom view and ViewModel (in a table for instance)

import {CTableCol} from '@bindable-ui/bindable';
...
public listCols: CTableCol[] = [
    {
        checkChanged: row => console.log(row),
        colClass: 't30',
        colHeadName: 'selected',
        colHeadSelectedChanged: isChecked => console.log(isChecked),
        colHeadSelectedVal: false,
        colHeadValue: 'Select',
        colWidth: 30,
        view: PLATFORM.moduleName('@bindable-ui/bindable/components/tables/td-contents/c-td-check/c-td-check.html'),
        viewModel: PLATFORM.moduleName('@bindable-ui/bindable/components/tables/td-contents/c-td-check/c-td-check'),
    }
];

Contributing

This Aurelia plugin project has a built-in dev app to simplify development.

1. The local src/ folder, is the source code for the plugin.
2. The local dev-app/ folder, is the code for the dev app, just like a normal app bootstrapped by aurelia-cli.
3. You can use normal npm start and npm test in development just like developing an app.
4. To ensure compatibility to other apps, always use PLATFORM.moduleName() wrapper in files inside src/. You don't need to use the wrapper in dev-app/ folder as CLI built-in bundler supports module name without the wrapper.

The dev-app contains the docs. Use that to view what parameters are available when using the components in Bindable.

Run dev app

Run npm start, then open http://localhost:9000

Unit tests

Run npm test

Release

This is used when updating Bindable.

With your changes update the version number in dev-app/app.html in the title attribute (around line 37), and the package.json and package-lock.json files. Then make a release on Github.

Update your app to point to the new release in package.json and package-lock.json and npm install.

Please refer to the contributing.md file for information about how to get involved. We welcome issues, questions, and pull requests.

Maintainers

Luke Larsen: [email protected]

Joe Ipson: [email protected]

License

This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.