Challenge Overview

• Implement a set of ReactJS standalone components following the provided Marvel design. GUIKit at Topcoder components will be integrated at various places on the Topcoder site.

Project Background

Currently, we are in the process of developing GUI kit components at Topcoder. This is an attempt in a series of challenges for which we need your help, energy, and dedication.

Technology Stack

Node.js

JavaScript

React.js

SCSS

Code Access

The work is to be done in the community-app repo (develop branch).

Individual Requirements

1) Text input (Textbox) - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states and sizes(regular and small) are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=2:7

2) Textarea -https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=8:13

3) Checkbox - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states and sizes are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=14:16

4) Radio button - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states and sizes are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=17:19

5) Datepicker - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=20:25

• reuse https://www.npmjs.com/package/react-dates module if possible. It is present in the community app. Other modules please confirm in the forum.

6) DropdownTerms - https://marvelapp.com/prototype/f0i4ece/screen/72146958/handoff

• all states are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=26:31

• This is the tech skills dropdown. Note how users should be able to type skills that are not listed.

• Selected skills set should be unique without duplicating items.

7) Toggle - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states and sizes are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=32:34

8) Dropdown - https://marvelapp.com/prototype/4f8i35i/screen/61272620

• all states are in scope

• props/functionality required - https://docs.google.com/spreadsheets/d/1NOQrHBCiVQBQQlCiifIj02RBXz4HOEJhdMQ22r9uhU0/edit#gid=0&range=35:40

General Requirements

• Put all the developed(with all assets and styles inclusive) components in src/shared/components/GUIKit folder of community-app.

• The mobile view of the components is in scope. There is no mobile design provided thus we will follow the desktop and make sure it looks similar on mobile.

• All sizes provided in the design are in scope. Use xs, sm, lg prefixes to make the differentiation.

• Create a demo page with all components in place for testing. It should be accessible via /examples/GUIKit route in community-app. See other example implementations for reference.

• For the dropdowns(select) components please re-use the https://react-select.com/ module already present in community-app. Note that it is outdated but we want to keep it so due to bigger issues if you update it to the latest version. Try to use it as it is(v1).

• You should follow the best practices established in the repository;

• Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

• Properly use babel-plugin-react-css-modules and / or react-css-theme for styling;

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Basic snapshot testing of the new components should be implemented.

• Do not break existing unit tests.

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Final Submission Guidelines

• Submit a git patch with the updated code;

• Verification document (doc or video)