Challenge Overview
1. Context:
PROJECT CONTEXT
Modularize the provided codebase to create a library of components so that:
-
The library of components can be installed via npm
-
The library of components will contain the required HTML and Typescript templates
-
The required CSS for the components will be imported from a separate library
-
The components will meet the provided design specifications
-
The components will meet the provided functionality specifications, including all inputs and outputs
2. Expected Outcome:
-
Updated code with components added in the library
-
Updated code with the usage of the components added in the main application
3. Challenge Details
INDIVIDUAL REQUIREMENTS
The provided codebase has the following structure:
-
src/app
-
It contains the pattern components that need to be refactored.
-
They need to be refactored with desired inputs and outputs and moved to the fuse-components library, and then these pattern components should be updated to use the library component
-
-
fuse-components
-
It’s the component library, and refactored components should be added into this library
-
An excel file will also be provided to you with following columns:
-
OLD Pattern Name - the old pattern name
-
OLD Pattern ID - you should be able find the corresponding pattern component by checking the src/app/app-routing.module.ts file
-
New Pattern Name - the name of new pattern component, the library component should follow naming like: fuse-xxx, where xxx is the new pattern name. The xxx should only contain lower case characters and hyphen.
-
New Pattern ID - the id of the new pattern component - you can ignore this column.
-
Inputs - the desired input of the refactored library component
-
Outputs - the desired output of refactored library component
-
Base Specs - the spec of the new pattern
-
if it contains a link
-
-
Interaction Notes - the interaction notes of the new pattern
-
Additional Notes for the pattern
-
for CTA-2_Button, this column says: “Do not create a unique module for this component. Utilize modularized patterns 17 and 18 in a layout”. It means you don’t need to create a library component for this pattern, it can simply use the library components created for pattern 17 & 18.
-
Note that:
-
Multiple OLD patterns can be combined into a single NEW pattern, and a single OLD pattern can be split into multiple NEW patterns.
-
The scss files should be empty, you should use the imported scss directly
-
The base specs and interaction notes are already implemented in the pattern component, your task is mainly to create library component with the desired inputs and outputs and when used, render the same result as the pattern component.
-
You need to ensure the pattern requirements defined in the pattern specification and excel document are still addressed properly.
-
Angular Best Practice must be followed (e.g. interfaces should be defined for inputs, any should be avoided)
The following patterns are in scope for this components
-
row 25 - row 42
Provided Assets
-
The current codebase will be provided
-
Excel document containing the refactor requirements
-
The specifications for each pattern
TECHNOLOGY STACK
-
Angular 8
-
Angular library
Final Deliverables
-
Source Code - updated codebase (and patch file), and make sure each library component is demonstrated properly in the main app. The winner is responsible for sending a MR.
-
Deployment and Verification Guide
4. Scorecard Aid:
JUDGING CRITERIA
- Major requirements are the library component refactor and pattern component demonstration
- Minor requirements are the minor UI issues