Porcupine-ui NPM

Super Infinity Modules: Your Gateway to A Convenient, Super-Stylish Project!

super-infinity-modules are a npm package that provides various components with their own logic, style and purposes. The package was developed for Reykjavik University for the course T-427-WEPO Web Programming by authors Edda Steinunn Rúnarsdóttir, Darri Valgarðsson and Sigurður Sturla Bjarnason. Information on the package can be viewed on https://www.npmjs.com/package/super-infinity-modules.

Installing the package

Run the following command in your project directory in order to install the package:

username$ npm install --save super-infinity-modules

Additional package requirements

The super-infinity-modules package uses icons from FontAwesome. Therefore in order to get expected behaviour from the super-infinity-modules package one must include the following line of code in the index.html of the project that uses the package (this enables usage of the icons from the FontAwesome library):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

The Components

Modal

Modal is similar to the dialog component of MaterialUI and react-modal component of react. It is essentially a white alert box that appears on the center of the screen, providing a gray opague overlay on all material "beneath" the modal to catch a user's focus. The modal component takes in the following props:

isOpen: Boolean. Specifies whether modal is open or not. This value defaults to false if this prop is not provided.
onClose (Required!): Function. Specifies which actions are taken when the modal closes.

In addition to this, the modal can contain the following children (all of which are optional):

Modal.Title: JSX. The Modal title appearing at the top of the Modal screen.
Modal.Body: JSX. The Modal body appearing in the middle of the Modal screen.
Modal.Footer: JSX: The Modal footer appearing in the bottom left corner of the Modal.

Modal Example Usage:

The following shows a button that shows the Modal component. The modal component renders title, body and footer.

JSX:

import { Modal } from 'super-infinity-modules';

<button onClick={() => this.setState({showModule: true})}>Show Modal</button>
<Modal
  isOpen={this.state.showModule}
  onClose={() => this.setState({showModule: false})}
>
    <Modal.Title>I am the title</Modal.Title>
    <Modal.Body>
        <p>Well hello, I am the modal body</p>
        <p>I don't need to be text, can also be html elements, look:</p>
        <input type="text" placeholder="pretty cool, huh!"/>
    </Modal.Body>
    <Modal.Footer>This is the footer of the Modal</Modal.Footer>
</Modal>

Result:

alt text

ProgressBar

The progress bar visually shows user the progress of an event. It takes in as props the following values:

progress(Required!) Number in the range of 0-100. An error is raised if this prop is invalid, i.e. not a number or not within the given range. This value specifies in percentage the progress the progress bar shows.
state (Required!): A string that's either 'info', 'success', 'warning' or 'danger'. Determines the progress bar color.
striped: Boolean. Determines whether bar is striped. This value defaults to false if this prop is not provided.
animated: Boolean. Determines whether bar is animate. This value defaults to false if this prop is not provided. NOTE HOWEVER that this prop has no effect if the striped prop is false. Animation is based solely on progress bar stripes.

the Progress Bar Striped and Animated Props

The following demonstrates how setting the striped prop to true for a progress bar changes it's appearance:

Striped prop true

alt text

Striped prop false

alt text

If animated, the stripes move forward infinitely and linearily. NOTE HOWEVER that the animated props has no effect if the striped prop is set to false. The animation depends solely on the progress bar being striped.

the Progress Bar Progress Prop

The following demonstrates various percentages of progress for a progress bar:

alt text

The progress is the % of the progress bar width as whole.

the Progress Bar State Prop

As stated, the state prop changes progress bar colors. The following demonstrates how the state prop varies by which prop user gives it. In order of appearence: 'info', 'success', 'warning' and last 'danger.

alt text

ProgressBar Example Usage:

JSX:

import { ProgressBar } from 'super-infinity-modules';

<ProgressBar 
	progress={50}
	animated={true}
	striped={true}
	state='info'
/>

Result:

alt text

NameCard

The NameCard component displays a name card for user given name, email, telephone and imageURL. It takes in as props (all of which are required):

name(Required!): String. name of cardholder.
email(Required!): String. email of cardholder.
telephone(Required!): String. telephone of cardholder.
imageUrl(Required!): String. URL for cardholder profile image to be displayed on card.

NameCard Example Usage:

JSX:

import { NameCard } from 'super-infinity-modules';

<NameCard
	name="Mojo Jojo"
	email="ilovebananas@thebads.com"
	telephone="+666-777-888"
	imageUrl="https://yt3.ggpht.com/a-/AJLlDp0Fqzwoio4JgrqFLkb53ZumHHCfm5jYTuDTyw=s900-mo-c-c0xffffffff-rj-k-no"
/>

Result:

alt text

Carousel

The Carousel component displays specified images in a slideshow that can be navigated. It's size can be manipulated. It takes in as props:

images(Required!): Array of Strings. URL to images to be displayed in carousel.
size: String, either 'small', 'medium' or 'large'. Determines the size of carousel. Defaults to medium if none is provided.

Carousel Navigation

The Carousel can be navigated either by the arrows the carousel provides or by the squares appearing at the bottom. These squares essentially correspond to image array indices. The following demonstrates both ways of navigating the carousel:

alt text

Carousel Example Usage:

JSX:

import { Carousel } from 'super-infinity-modules';

<Carousel 
	images={["http://7wallpapers.net/wp-content/uploads/16_Jared-Padalecki.jpg","https://media1.popsugar assets.com/files/thumbor/SvTqx-9t-SqT1V2Ndezi7UxMzGQ/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2015/08/13/925/n/1922398/0a63aaf8015ce614_jared_padalecki-friday_the_13th-14/i/OhMyGod-Shirtless-Shot.jpg", "http://7wallpapers.net/wp-content/uploads/2_Jared-Padalecki.jpg", "http://7wallpapers.net/wp-content/uploads/5_Jared-Padalecki.jpg"]}
	size="small"
/>

Result:

alt text

Row and Col

The rows and col components correspond to a gridsystem very similar to the bootstrap grid system. The row component takes in col components and children and the col component takes in the following prop

size(Required!) Number in the range of 0-12. An error is raised if number is invalid and not in the range. Corresponds to column size. 12 is a full row, 6 is a half-row, etc.

Row with Multiple Col component

Rows can contain multiple columns. The following demonstrates a row with multiple columns of various sizes:

alt text

Rows' height adjusts with Col component height

Rows' height are automatically adjusted by the Col height and corresponds to the Row's highest Col. The following demonstrates a row with multiple columns which vary in height:

alt text

Overflowing Col Components in a Row

When the sum of Col component's size prop in a single Row exceed 12, the Col that exceeded 12 is moved to the next row below. The following demonstrates such overflow with component of size 3,5 and 6. Since 3+5+6 = 14, the last Col, Col of size 6 overflows to a new row below: alt text

Row and Col Example Usage:

JSX:

import { Row, Col } from 'super-infinity-modules';

<Row>
	<Col size={2}>IM SIZE TWO</Col>
	<Col size={2}>IM SIZE TWO</Col>
	<Col size={4}>IM SIZE FOUR</Col>
	<Col size={3}>IM SIZE THREE</Col>
	<Col size={1}>IM SIZE ONE</Col>
</Row>

Result:

alt text

TimePicker

The TimePicker component poses as an input box which when clicked expands into an time picker interface with a interactive clock showing user which time he has picked. Hours and minutes can be altered both by clicking them (in which case an input box appears, prompting user to input an hour or minute) or by using the arrows above the hours or minutes to increment and decrement them. The TimePicker can either take the form of a military time picker (24HRS) or 12H time picker (which then provides AM/PM identifier). The TimePicker component takes in as props:

format: Number, either 12 or 24. Determines whether time picker shows military time or 12H with AM/PM identifier. Defaults to 24 (military time).
onTimePick (Required!): Actions taken when user picks a time. Takes in time string as parameter.

Using the TimePicker

The following shows a 24HRS format TimePicker to demonstrate how user can pick a time, both by using the arrow to increment his time and by clicking the time and using an input box to change it:

Military Time TimePicker:

alt text

12H AM/PM TimePicker:

alt text

TimePicker Usage:

JSX:

import { TimePicker } from 'super-infinity-modules';

<TimePicker
	onTimePick={time => this.setState({ time: time }}
	format={24}
/>
<p>Time from timepicker: {this.state.time}</p>

Result:

alt text

DatePicker

The DatePicker component poses as an input box which when clicked expands into a date picker interface, i.e. calendar, prompting user to choose a date. Once user clicks a day in calendar, the input box shows user's selected date.

onDatePick(Required!): Function. Specifies what should happen when a date has been picked. Takes in date as string parameter.
locale: String. Specifies in which locale the time should be in, e.g. 'is-IS', 'en-EN'. Defaults to 'is-IS' (Icelandic Locale) if none is provided.

DatePicker locale differences

The following demonstrates the effect locale has on return type of DatePicker component string:

Locale en-EN:

alt text

__Locale ar-EG:-

alt text

DatePicker example usage

JSX:

import { DatePicker } from 'super-infinity-modules';

<DatePicker
        onDatePick={date => this.setState({date: date})}
        locale='en-EN'
/>
<p>Date from datepicker: {this.state.date} </p>

Result:

alt text

Tabs and Tab Components

The Tabs component is a way to display a selection menu in a very easy manner. It can be used to seperate different content into seperate panes, making only one tab visible at a time. The Tabs component takes in the following props:

theme: String, either 'light' or 'dark'. Denotes which theme the tab bar should conform to. Defaults to 'light' if none is provided.
layout: String, either 'horizontal' or 'vertical'. Denotes which way the tabs should render.
onSelect(Required!): Function. Specifies what should happen when tabs are clicked on.
currentSelectedTab(Required!): Number. Specifies what tab is selected when the component renders.

The Tab component is a child of the Tabs component . A Tabs component can include any number of Tab components. The Tab component takes in the following props:

selectionKey(Required!): Number. A unique key that differentiates one tab from another. Must be unique between tabs!
title(Required!): String. The title of the tab. Is displayed in the tab header.

Tabs Theme and Tab Orientation

The following demonstrates the differences of 'light' and 'dark' themes of Tabs component:

alt text

The following demonstrates a 'vertical' Tabs component:

alt text

Tabs example usage

JSX:

import { Tabs, Tab } from 'super-infinity-modules';

<Tabs
        theme={'light'}
        layout={'horizontal'}
        onSelect={newTab => this.setState({currentSelectedTab: newTab})}
        currentSelectedTab={1} >
        <Tab selectionKey={1} title={"Edda"}>
          <form action="/action_page.php">
            First name:
            <input type="text" name="firstname" placeholder="Edda" />
            Last name:
            <input type="text" name="lastname" placeholder="Steinunn" />
          </form> 
        </Tab>
        <Tab selectionKey={2} title={"Darri"}>
          <h3>Darri er</h3>
          <ol>
            <li>88% Coffee</li>
            <li>11% Beard</li>
            <li>1% Tattoos</li>
          </ol> 
        </Tab>
        <Tab selectionKey={3} title={"Stulli"}>
          <h2>Stulli</h2>
          <h3>Stulli</h3>
          <p>Stulli</p>
        </Tab>
      </Tabs>

Result:

alt text

CartoonNetworkSpinner

The CartoonNetworkSpinner component includes a spinner including your favorite characters from Cartoon Network. The component displays one character at a time, then spins in a washing machine effect before changing to the next character. The CartoonNetworkSpinner takes in the following props:

interval: Number. Denotes number of seconds that the spinner should wait before changing displayed character. The value defaults to 3 if not provided.

CartoonNetworkSpinner example usage

JSX:

import { CartoonNetworkSpinner } from 'super-infinity-modules';

<CartoonNetworkSpinner interval={2} />

Result: