npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

infinitymodules_snakarnir

v0.3.0

Published

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 InfinityModule

Downloads

5

Readme

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.