Team7 - The Seven Deadly Sins

Our Products:

• NPM package of our custom web components (rate, checkbox, upload, comment): pandoras-box
  • Follow this link to install
  • Please follow the instruction here to install
  • To learn about the web components, refer to the overview of the compoenents and the API doc
• Extensible evaluation web service: Rateit
  • Try out making a evaluation requestor
  • Try out rating on a subject
  • User guide for Rateit is here

Repo Overview:

• bash_scripts: The script files run by bash are in this folder, e.g. linting script Config: Configuration files for wepack are in this folder; no need to touch this folder unless
• coverage: The test coverage are auto-generated into this folder Docs: The API docs are auto-generated into this folder (which only exist in master branch)
• manual: The files to generate the manual documentation are in this folder
• pages: All files that have a web page to be displayed goes into this folder; js files are stored in “script” subfolders
  • element: Stores all of our web components related files
• test: The unit tests run by Karma are in this folder
• testcafe: The browser-testing files for testcafe and saucelab are in this folder
• stories: The test files for pixel testing are in this folder

Also check here for repo info

Documentation:

On-boarding members: Go to this link! In general: Go to this link! API doc: Go to this link!

Our Build Pipeline:

Development Process Introduction:

We followed the agile lifecycle to develop our products and the build pipeline in the following three sprints:

1. Sprint 0
   
2. Sprint 1
   
3. Sprint 2
   

Technologies Used:

Husky:
Style Enforcement: this can enforce our code to be consistent and readable, so that all teammates or the users read the code smoothly.
Linting:
Linting is used to enforce code styling rules to create cleaner and easier to read code.
ESDoc:
Use as part of the pipeline! Husky will go through the folder we specify (the scripts folder as of now), go through our comments in the code, and generate documentation in the docs folder
Travis CI:
Atuo triggered tool integrated with github.
Mocha & Chai:
Mocha is a feature-rich JavaScript test framework we chose that runs on Node.js and in the browser.
Karma:
Karma is a tool that enables the running of source code (i.e. JavaScript) against real browsers via the CLI.
Code Climate
Code Climate provides meaningful and actionable engineering insights for the entire engineering organization.

Important Links:

Notion
Team Website

TEAM PROCESS

Sprint 0: Setup & Pipeline Creation & Web Compenent

What we did in sprint 0 are:

• Create To-do list for members
• Find the instructions for the first tools we decided to use
• We created our first development pipeline! Check out our pipeline HERE!
• We also have our first attempt of web component, core-hello

Our pipeline in sprint 0:

Sprint 1 : Porting Web Component

In this sprint, we ported some awesome web components:

Component 1: Rating

Attributes

• v-model (number): The value of the starts, or the number of stars selected
• max (number): The number of stars in the rating bar
• disabled (boolean): If true, then the rating bar is not clickable and not modifiable
• low-threshold (number): The threshold value between low and medium level. This value is included in the low level
• high-threshold (number): The threshold value between medium and high level. This value is included in the high level
• colors (string, or array of string) : The color of the icons. If it is an array (has to be array size of 3), each entry corresponds to each level determined by low-threshold and high-threshold
• void-color (string): The color of the unselected icons
• disabled-void-color (string): The color of the unselected icons when disabled
• icons (string, or array of string): The icon type used for the rating, specifically the CSS code of the icon in the format of "\XXXX". If it is an array (has to be array size of 3), each entry corresponds to each level determined by low-threshold and high-threshold. This is modified from the original icon-classes which uses class name instead
• void-icon (string): The icon type of the unselected rating item. This is modified from the original void-icon-class from Element
• disabled-void-icon (string): The icon type of the unselected rating item when disabled. This is modified from the original disabled-void-icon-class from Element
• show-text (boolean): If true, display the text next to the rating bar
• show-score (boolean): If true, display the current rating score. This attribute is prioritized over show-text, so score will be displayed instead of text
• text-color (string): The color of the text
• texts (array of string): The array of displayed text whose entries will correspond to each rating score
• score-template (string): The template format for the displayed score. If score-template="{value} Points", then "2 Points" will be displayed

Component 2: Checkbox

Attributes

• v-model (string): A value represented by the checkbox. It will not appear on the frontend unless used by other html tags
• true-label (string): The v-model value when checked
• false-label (string): The v-model value when unchecked
• disabled (boolean): If true, then the checkbox is not clickable and not modifiable
• border (boolean): If true, border will be added around the checkbox
• size ("medium," "small," or "mini"): The size of the border. Only these three string value is acceptable; otherwise, the default value which is "medium" will be used
• checked (boolean): Corresponds to whether the checkbox is checked or not
• name (string): The "name" attribute used by the original checkbox

Our pipeline in sprint 1:

Sprint 2: More web components, npm package, and web service!

• In this sprint, we ported more fantastic Web Components: upload and comment
• We also combined our web components into a website! The ideas of our website:
  1. course reviews forum (or a general one)
  2. Smth similar to roten tomato
  3. Smth similar to ratemyprofessor
  4. Smth similar to the meme creater done in CSE134B
  5. smth similar to when2meet
  6. smth similar to reddit + rating
• For the backend of this service, we used the real time database of firebase.
• Check out our web service for evaluation Rateit!!*
• What's more, we even published our web components to npm !

  1. Current Package

  2. Try to install our packages with

      npm install pandoras-box
     

     and import it using

      import "pandoras-box"
     

  3. Now you can use the web components we builded! For example, you can create a html file and try out our RATER:

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <script type="module" src="index.js"></script>
      </head>
      <body>
        <sds-rate class= "card-text" author = "Team7" des="Max 10 stars with blue colored custom texts" img="img/1.jpg" 
                                max = "10" show-text="1" text-color="blue" low-threshold="3" high-threshold="8"
                                icons="\e901,\e902,\e903" void-icon="\e900" 
                                style="font-family: icomoon!important;"
                                colors="rgb(153, 169, 191); rgb(247, 186, 42); rgb(255, 153, 0)"
                                texts = "Get Out!,Seriously?,Nah,Hmm,OK,Good,Nice,Wow,Bang,You're the BEST"></sds-rate>
      </body>
      </html>
     

     index.js

      import "pandoras-box"; // runs the code in index.js of our package, which imports the web components
     

Component 3: Upload

Attributes

• hide-file-list (boolean): If true, the list of files that are uploaded will not be shown
• drag (boolean): If true, the upload will enable upload through drag and drop files
• display-thumbnail (boolean): If true, the file list will be displayed along with a thumbnail

Component 4: Comment

Attributes

• color (string): The color of the comment box
• Disabled (boolean): If true, the user cannot make any comments but only view other’s comment
• hide-comment (boolean): If true, the user cannot view other’s comments
• show-rating (boolean): If true, rate bar will be integrated into the comment web components so that users can add rating to the comments
• show-tags (boolean): If true, checkbox will be integrated into the comment web components so that users can add tags to the comments
• init-with (string): The subject, or the database entry name, which will be fetched when the comment component is initialized

Our Final Pipeline Diagram:

Team Members:

Name	Role
Etsu Nakahara	Lead/Comms
Li-An Yang	Co-lead/Comms
Chunan Huang	Quality Assurance
Christian Schroeder	Quality Assurance
Eric Shaoan Liu	DevOps
Dan Nguyen	DevOps
Cortez Page	Tool&Utility
Ethan Brand	Tool&Utility
Yiming Wang	Coders
Ryan Murase	Coders