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!
It can be overwhelming trying to learn everything on web components. We recommend our short guide and the included "Recommended Resources" section.
Each component of our library is encapsulated into one JavaScript file. You can add Shinobi by downloading the source files (src.zip) from the releases page, then adding them to your project. Alternatively, you can link to the auto-generated CDN link, provided by jsdelivr.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/core_rate.js"></script>
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
Note:
- 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.
Our project uses the Standard JavaScript Style, (also known as StandardJS), found at standardjs.com
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 dependencies and devDependencies in the package.json. This will have the most up-to-date list.
This is a list of each dependencies:
- mocha: unit tests
- showroom:
- chai: asserts
- husky: pre-commit tasks using Github hooks
- standard: linter
- testcafe: browser testing framework
- testcafe-browser-provider-saucelabs: use testcafe with saucelabs
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!