https://github.com/fed/ui-component-example
https://github.com/fed/ui-component-example
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fed/ui-component-example
- Owner: fed
- Created: 2016-08-25T12:30:50.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-25T12:32:33.000Z (almost 10 years ago)
- Last Synced: 2025-12-25T20:59:22.505Z (6 months ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Authors: AUTHORS.md
Awesome Lists containing this project
README
# ui-component-example
This is a simple ui-component consisting just of a button that changes its background color randomly as it gets clicked on. This demo module was created to illustrate how ui-components work and get integrated to bigger projects.
> Created with [generator-ui-component](https://github.com/fknussel/generator-ui-component) v0.1.0.
## Prerequisites
1. Setup [npm](https://nodejs.org/) properly for your development environment.
2. Run `npm install -g grunt-cli` to to install Grunt's command line interface (CLI) globally (you might as well use `npm start`, `npm build` and `npm test` if you don't want to install `grunt-cli` globally since it comes shipped as a dev dependency).
## Setup
```
npm install
```
## Run tests
```
grunt test
```
## Build assets
```
grunt build
```
## Build, run and watch for changes
```
grunt
```
## Creating your module
1. Edit mustache, SASS, JS files in `./src` (e.g. `./src/component.mustache`, `./src/component.scss`, and `./src/component.js`).
2. Add mock JSON data model to `./model/usecases.json`.
4. Build and run the app, and visit [http://localhost:4567](http://localhost:4567) in your browser.
## Release versions
This repo uses [grunt-bump](https://github.com/gruntjs/grunt-bump) and Semantic Versioning to version and tag releases. To release a new version, run the appropriate command:
```
grunt release:major # bump major version, eg. 1.0.2 -> 2.0.0
grunt release:minor # bump minor version, eg. 0.1.3 -> 0.2.0
grunt release:patch # bump patch version, eg. 0.0.1 -> 0.0.2
grunt release:prerelease # bump pre-release version, eg. 1.0.0 -> 1.0.0-1
```
Make sure to push tags:
```
git push --tags origin master
```
Publish the package to [npm's public registry](https://www.npmjs.com/):
```
npm publish
```
**Heads up!** To publish, you must have a user on the npm registry. If you don't have one, create it with `npm adduser`. If you created one on the site, use `npm login` to store the credentials on the client. You can use `npm config ls` to ensure that the credentials are stored on your client. Check that it has been added to the registry by going to [http://npmjs.com/~](http://npmjs.com/~).
## Semantic versioning
Given a version number `MAJOR.MINOR.PATCH`, increment the:
1. `MAJOR` version when you make incompatible API changes,
2. `MINOR` version when you add functionality in a backwards-compatible manner, and
3. `PATCH` version when you make backwards-compatible bug fixes.
See the [Semantic Versioning](http://semver.org/) specification for more information.
## Release history
See the [CHANGELOG](CHANGELOG.md).