Shinobi Component Library
Table of Contents
- Shinobi Component Library
- Table of Contents
A project by Team Rockstar Ninjas
The Shinobi Component Library (SCL) is a collection of meticulously built standard web components for you to use in any web project. Visit our website here!
About Web Components
It can be overwhelming trying to learn everything on web components. We recommend our short guide and the included “Recommended Resources” section.
If you’d like to contribute or read the source code, you can:
- Install using
npm install shinobirockstar
- Download the zip file from Github
- Clone the project using
git clone https://github.com/ucsd-cse112/cse112-sp19-team10.git
- If you are using Font-Awesome icons, you need to follow their instructions to include their library in your project. Our library does not include Font-Awesome or other external libraries we are using in demos, such as Bootstrap.
- The CDN is auto-generated by jsdelivr from our project on npm, which is currently not auto-updated. Github will always have the most up to date files.
Each component is named
core-COMPONENT_NAME, where COMPONENT_NAME is the name of the component. Each component comes with default values allowing you to get started using just one simple line of code.
They can be used like so:
<core-tooltip> <core-switch></core-switch> </core-tooltip> <core-rate></core-rate>
Read more on the Getting Started page.
Component Specific API docs can be found: here
These include a full list of attributes for each component.
There are examples for each component:
Want to contribute? Read the guide on how to get started!
Learn how to set up the build environment and use the tools here: setting up the build pipeline.
Read more about our coding style here.
We are using a very straightforward architecture for the components. It should be easy to tell by reading the code. In case you are unsure, read this short explanation here.
Learn about how our project directories are set up here.
Dependencies are listed under
devDependencies in the
package.json. This will have the most up-to-date list.
This is a list of each dependencies:
- mocha: unit tests
- chai: asserts
- husky: pre-commit tasks using Github hooks
- standard: linter
- testcafe: browser testing framework
- testcafe-browser-provider-saucelabs: use testcafe with saucelabs
Updating the README
The README is using a shell script to generate the table of contents. Since the README is not often updated, this script must be manually run to update the table of contents, but they can also be edited manually.
To run the script, follow the directions to set up the script then run:
./utils/gh-md-toc --insert README.md
- For unit tests, we are using Mocha and Showroom. Read about how to modify existing tests and write new ones in our unit testing guide.
- Browser tests are done through Testcafe and SauceLabs. Find our guide here.
- See our full list for all the tests for each component
- Browser tests on TestCafe/SauceLabs sometimes time out, usually with a ETIMEOUT or similar error. This causes Travis builds to fail and blocks pull requests on Github. Rerunning the build on Travis generally fixes this issue.
- We are using Showroom, Mocha, and Chai for our unit testing. Unfortunately, this does not integrate well with CodeClimate’s test coverage reporter. However, rest assured as we many have unit and browser tests and are confidently it covers a majority of cases.
This project is set up to use semantic-release to generate a change log from the git commit messages. Please follow the format as outline in their docs. However, it has not been fully tested or integrated to the master branch. You can read our implementation notes here.
The Shinobi Component Library is brought to you by Team Rockstar Ninjas, a group of students from UCSD’s CSE 112 course. Meet the team!