Infinitymodules_snakarnir NPM

Assignment V The USA (Universal Style Assocation) needs your help! They feel like they are missing out (fomo..) because of all the new styling libraries such as MaterialUI and ReactBootstrap. They want to create a new styling library called InfinityModules. This module should work similarly as MaterialUI or ReactBootstrap. Every styles should be implemented using CSS Modules. If the component must use provided props for styling, the style props can be used. Let’s take a look at what it should implement: 1. (10%) - Create a component called Modal which should be a floating dialog. This component should receive as props: I. isOpen - default false II. onClose : func (3) The modal should contain a title which should be rendered as the following: <Modal.Title>My Modal Title</Modal.Title> (4) The modal should contain a body which should be rendered as the following: <Modal.Body>My Modal Body</Modal.Body> (5) The modal should contain an optional footer which should be rendered as the following: <Modal.Footer>My Modal Footer</Modal.Footer> 2. (10%) - Create a component called ProgressBar which should display a progress bar. This component should receive as props: I. progress (0 - 100) II. striped (true/false) - default false III. animated (true/false) - default false IV. state (info/success/warning/danger) 3. (10%) - Create a component called NameCard which should display a name card for a person. This component should receive as props: I. name II. email III. telephone IV. imageUrl 4. (10%) - Create a component called Carousel which should be a basic image slider with two arrows (left and right) to navigate between images. This component should receive as props: I. images (an array) II. size (small, medium, large) - default medium 5. (10%) - Create a component called Row which should contain Col (see below) within. This component should receive as props: I. children (node) 6. (10%) - Create a component called Col which should reside within a Row (see above) component. Each row should accept twelve , which results in a fully stacked row. Two also results in a fully stacked row. Whenever there is a combined size of more than twelve the column should jump to the next line. This component should receive as props: I. size - default 1 7. (10%) - Create a component called TimePicker which should be used to select time. This must a visual component, where a user picks a time, similar to the Material-UI Time Picker. This component should receive as props: I. onTimePick : func II. format (24/12) - determines the format either 24H or 12H (using AM/PM). It should default to 24 8. (10%) - Create a component called DatePicker which should be used to select a date. This must a visual component, where a user picks a date, similar to the Material-UI Date Picker. This component should receive as props: I. onDatePick : func, II. locale : (en-EN, is-IS, de-DE, …, ko-KR) - determines what locale the date string should be passed to onDatePick. It should default to is-IS. 9. (10%) - Create a component called Tabs which should serve as a container for tabs. Within Tabs one to many Tab can reside. This should look and feel like switching between tabs in the browser. Tabs should receive as props: I. theme (dark/light) - default light II. layout (horizontal/vertical) - default horizontal III. onSelect : func IV. currentSelectedTab : number Tab should receive as props: V. selectionKey : number (this number should correspond to currentSelectedTab in the Tabs component) VI. title 10. (10%) - Create a component called CartoonNetworkSpinner which should be like a washer which spins in an even interval (provided as props) and every time it spins it should display a new image from any Cartoon Network characters you want. The component should receive as props: I. interval : number (representing seconds) - default 3 Submission This package should be published using NPM (https://docs.npmjs.com/getting-started/ publishing-npm-packages) and the link to the NPM repository should be submitted in Canvas. External libraries No external libraries can be used for this assignment. Other Feel free to let your inner artist bloom. There will be a prize for the best looking styling library. As usual we will be aware of other tools such as Material-UI, React-Bootstrap, Elemental etc… If the code looks to similar to the code of the these libraries, the student/s will be brought in for questioning and if the result will be negative from the questioning the assignment will receive a grade of 0.