ru-design-enterprise v0.1.1

ru-design-enterprise

ru-design-enterprise is a material inspired react-component package.

Pre-requisites

React react-css-modules proptypes

Usage

ru-design-enterprise exposes an object containing all components. example of importation:

import { Tabs, Tab } from 'ru-design-enterprise'
// You can now use the Tabs or Tab components

Modal

Modal is a floating dialogue that should recieve the following as props: 1. isOpen - a boolean, defaults to false 2. onClose - a function, is required

The following subcomponents are included in the Modal component: 1. Modal.Title - a required child component 2. Modal.Body - a required child component 3. Modal.Footer - a optional child component

Example of usage:

import { Modal } from 'ru-design-enterprise'

<Modal
isOpen={this.state.isOpen}                              // defaults to false
onClose={() => this.setState({isOpen:false})}>          // onClose is required
    <Modal,Title>This is a modal title</Modal.Title>    // this child component is required
    <Modal.Body>This is a modal body</Modal.Body>       // this child component is required
    <Modal.Footer>This is a modal footer</Modal.Footer> // this child component is optional
</Modal>

ProgressBar

ProgressBar is a progress bar that can be animated and can be striped. The ProgressBar component takes in the following props: 1. progress - a number between 0-100, is required 2. striped - a boolean, defaults to false. 3. animated - a boolean, defaults to false. 4. state - a string, is required, that is one of the following: 1. info 2. success 3. warning 4. danger

Example of usage:

import { ProgressBar } from 'ru-design-enterprise'

<ProgressBar 
progress={100}
striped={true}
animated={true}
state='danger'
/>

NameCard

NameCard is a component that creates a styled name card with the supplied information. The NameCard component takes in the following props: 1. name - string, defaults to empty string. 2. email - string, defaults to empty string. 3. telephone - string, defaults to empty string. 4. imageUrl - string, defaults to a preset image url.

Example of usage:

import { NameCard } from 'ru-design-enterprise'

<NameCard
name='Eythor Senpai'
email='example@example.example'
telephone='1234567'
imageUrl='http://randomurl.com/randompic.png'
/>

Carousel

Carousel is a component that creates a styled image slider. The Carousel component takes in the following props: 1. images - array of image url's, is required 2. size - string, defaults to medium, one of the following: 1. small 2. medium 3. large

Example of usage:

import { Carousel } from 'ru-design-enterprise'

<Carousel
images={['http://randomurl.com/randompic.png','http://randomurl.com/randompic2.png']}
size='small'
/>

Row and Col

Row is a container component for the Col components. Col is a component that resides in a row. Each row can accept any number of col's. The row becomes fully stack once the sum of the sizes of the col's is 12. Once the row becomes fully stacked the following col's will be wrapped to the next line.

Row

The Row component takes in children of type Col

Col

The Col component takes in the following props: 1. size - integer between 1-12, defaults to 1.

Example of usage:

import { Row, Col } from 'ru-design-enterprise'

<Row>
    <Col size={1}>colContent 1</Col>
    <Col size={2}>colContent 2</Col>
    <Col size={4}>colContent 3</Col>
    <Col size={6}>colContent 4</Col>
    <Col size={12}>colContent 5</Col>
</Row>

In the example above, Row will contain two fully stacked lines. The first line will contain colContent 1-4, while the second line will contain colContent 5.

TimePicker

TimePicker is a component that creates a stylized floating time picker. The TimePicker component takes in the following props: 1. onTimePick - a function, is required. 2. format - a number, either 24 or 12, defaults to 24.

Example of usage:

import { TimePicker } from 'ru-design-enterprise'

<TimePicker onTimePick={time => this.setState({time})} format={12}/>

TimePicker

TimePicker is a component that creates a stylized floating date picker. The TimePicker component takes in the following props: 1. onDatePick - a function, is required. 2. locale - a string, defaults to is-IS

Example of usage:

import { DatePicker } from 'ru-design-enterprise'

<DatePicker onTimePick={date => this.setState({date})} locale='en-EN'/>

Tabs and Tab

Tabs is a container component for Tabs components. Multiple Tab components can reside in a single Tabs container.

Tabs

The Tabs component takes in children of type Tab and the following props: 1. theme - string, either 'dark' or 'light', defaults to light. 2. layout - string, either 'horizontal' or 'vertical', defaults to horizontal. 3. onSelect - a function, is required. 4. currentSelectedTab - a number, is required.

Tab

Tab component takes in the following props: 1. selectionKey - a number, is required. 2. title - a string, is required.

Example of usage:

import { Tabs, Tab } from 'ru-design-enterprise'

<Tabs
theme='dark'
layout='vertical'
onSelect={(newTab) => this.setState({currTab: newTab})}
currentSelectedTab={this.state.currTab}>
    <Tab selectionKey={1} title='tab 1'>
        content
    </Tab>
    <Tab selectionKey={2} title='tab 2'>
        content
    </Tab>
</Tabs>

CartoonNetworkSpnner

CartoonNetworkSpinner is a component that creates a stylized image that changes with an animation on a certain interval. CartoonNetworkSpinner takes in the following props: 1. interval - a number, defaults to 3. (determines interval between animation in seconds)

Example of usage:

import { CartoonNetworkSpinner } from 'ru-design-enterprise'

<CartoonNetworkSpinner interval={1}/>

Made by

The Ru-Design-Enterprise package was made by Eyþór Andri Einarsson, Hlynur Óskar Guðmundsson and Sigurður Helgason. For the course WebProgramming II in Reykjavík University.