An Aurelia component library
npm install @bindable-ui/bindable
Bindable is a design system that aims to provide the video products in Edgecast 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.
- Background
- Install
- Usage
- Contributing
- License
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.
``bash`
npm install @bindable-ui/bindable
Add Bindable as a plugin into your Aurelia project:
`js`
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.
`js`
import {LocalStorageHelper} from '@bindable-ui/bindable';
...
LocalStorageHelper.loadOrDefault('exampleKey', null);
`js`
import {CTableCol} from '@bindable-ui/bindable';
...
public listCols: CTableCol[] = [];
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.
`js`
import cTileCssJson from '@bindable-ui/bindable/dist/native-modules/components/tile/c-tile/c-tile.css.json';
...
console.log(cTileCssJson.tile);
If you need to use a custom view and ViewModel (in a table for instance)
`js`
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'),
}
];
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.dev-app/
2. The local folder, is the code for the dev app, just like a normal app bootstrapped by aurelia-cli.yarn start
3. You can use normal and yarn test in development just like developing an app.PLATFORM.moduleName()
4. To ensure compatibility to other apps, always use 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 yarn start, then open http://localhost:9000
Run yarn test to run all unit tests.
To test one file and watch for changes, run:
`shell`
yarn test:1
This is used when updating Bindable.
Run yarn update-version. This will update the version in package.json and the title attribute in dev-app/app.html to the new version you specify.
Once you merge your changes to master, create a new release on Github.
Update your app to point to the new release in package.json (and package-lock.json if you're not using Yarn) and then yarn install or npm install`.
Please refer to the contributing.md file for information about how to get involved. We welcome issues, questions, and pull requests.
Harley Jessop: @harlio
Luke Larsen: luke@lukelarsen.com
Joe Ipson: joe@ipson.me
This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.