Angular Component Library
This repo is used to create a component API for your Angular 1.5 project.
Principles
- Todd Motto component architecture styleguide
- Stateless components
- Atomic Design
- BEM CSS
Setup
- Fork and clone the repo
- Run
npm install
- Dev, run:
npm run start
Contribute
- Run
npm run create
to create a new component using the Yeoman generator - Code is linted against: hyphenated_BEM (SCSS), ES6 with Angular plugin
Set up linting in your Text Editor
Using Atom you can set up the scss-lint, eslint, and linter-php automatically by installing the following plugins:
- https://atom.io/packages/linter
- https://atom.io/packages/linter-scss-lint
- https://atom.io/packages/linter-eslint
via apm
: apm install linter linter-scss-lint linter-eslint
Using [SublimeText] you can set up the scss-lint and eslint following these instructions
- http://www.sublimelinter.com/en/latest/
- http://jonathancreamer.com/setup-eslint-with-es6-in-sublime-text/
- https://github.com/attenzione/SublimeLinter-scss-lint
Committing
npm run lint
is run in a pre-commit hook, and if it fails, your code will not be committed.
Commit messages are validated using validate-commit-msg, which follows the Angular commit message guidelines.
Valid types are:
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing tests
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
Commit messages should use the imperative, present tense: “change” not “changed” nor “changes”.
Example commit messages:
feat: Add linting for javascript files in the /component folder
chore: Update eslint
Pushing
The components are tested with Karma/Jasmine automatically pre-push.