OUI (Ottery-UI)

This is a React-based UI framework following the Ottery design schema. The objective of this software is to provide a straightforward React library used by Ottery and others who like it. The hope is that it allows users to get the benefits of fast paced design while still feeling easy to use like classic HTML.

Getting Started

Copy the file into your src folder in a React app and access components either from oui/index.js or directly from their own files. To run the app, you need to make sure that you have some dependencies installed. They can be quickly installed using the following code:

npm install ottery-ui

Possible issues:

• Ensure you have no node modules installed in oui. These should be in your main application.

Components

All components are handled based on their global styles. These can be found in oui/styles. They are a list of const exports that are used in the generation of the styled react. These can be edited at the users leisure in order to make a more stylized UI.

Components can be imported in two different ways. The first is through accessing the index.js exports or by going directly to the component root. Both do the same thing. However it's always nice to know the options :)

For example:

import { MultiFieldHeader } from "ottery-ui";
//or
import MultiFieldHeader from "ottery-ui/headers/MainHeader";

Headers

MainHeader

The MainHeader component is the main header of the application. It is used as a banner that spreads from left to right, but it does not spread itself forcefully to the top of the page automatically. For it todo so, it needs to be put in a container that does so, directly modified to do so using the class name oui-main-header, or attaching an id or class name as a property.

Usage:

<MainHeader
    left={<IconButton icon="back" />}
    main={<h3>HOME</h3>}
    right={<IconButton icon="info" />}
/>

See source code for more details

MultiFieldHeader

The MultiFieldHeader component allows for a header with multiple fields through the use of a key callback. It also includes an edit button that can be called using the onEdit callback. This header will fill to fit the width of the parent container. This can be changed by editing the className oui-multi-field-header or by passing in a class name or id.

Usage:

<MultiFieldHeader
    title="Title"
    src="pfp"
    onTab={(key)=>{/*change a value based on key*/}}
>
    <span key="1">1</span>
    <span key="2">2</span>
    <span key="3">3</span>
</MultiFieldHeader>

See source code for more details

Buttons

AddButton

The AddButton component is a button with an onClick callback and looks like a generic add sign. It has three states that it is able to be in:

1. filled (default)
2. outline
3. text

Usage:

<AddButton type="outline" />
<AddButton type="text" />
<AddButton type="filled" />

See source code for more details

Button

The Button component is a button with an onClick callback. It has three states that it is able to be in:

1. filled (default)
2. outline
3. text

Usage:

<Button type="outline">outlined</Button>
<Button type="text">text</Button>
<Button type="filled">filled</Button>

See source code for more details

IconButton

The IconButton component is a large set of buttons that the user is able to chose from and modify. These images were found in react-icons

Usage:

<IconButton icon="back" />
<IconButton icon="forward" />
<IconButton icon="menu" />
<IconButton icon="home" />
<IconButton icon="user" />
<IconButton icon="dropoff" />
<IconButton icon="pickup" />
<IconButton icon="settings" />
<IconButton icon="calendar" />
<IconButton icon="info" />
<IconButton icon="search" />
<IconButton icon="pluss" />
<IconButton icon="minus" />
<IconButton icon="edit" />

See source code for more details

ImageButton

The ImageButton component allows the user to create buttons with built in image alignment (which is pretty nifty). It has three states that it can be in:

1. default
2. selected
3. error

Usage:

<ImageButton 
    content={"ImageButton"}
    right={"pfp"}
/>
<br></br>
<ImageButton 
    content={"ImageButton"}
    right={"pfp"}
    state={"error"}
/>
<br></br>
<ImageButton 
    content={"ImageButton"}
    right={"pfp"}
    state={"success"}
/>

See source code for more details

SelectionButton

The SelectionButton component is used in tandem with a list of items. As items get selected, its number increases through the val field. The button can be pressed by the user when they have the number of elements selected that they desire. It has two other states it can be in

1. error
2. success

Usage:

<SelectionButton/>
<br></br>
<SelectionButton state="error"/>
<br></br>
<SelectionButton state="success"/>

See source code for more details

TabButtons

The TabButton component is for buttons that are in a line. They work the same was that the tabs on your browser work, but are in fact modeled after radio buttons (in the sense that you can only have one selected at a time). They are used to toggle between views and pages. It is important to note that the children of this element are the ones that should have the onClick (not the tabBar).

Usage:

<TabButtons>
    <div onClick={click}>Tab 1</div>
    <div onClick={click}>Tab 2</div>
    <div onClick={click}>Tab 3</div>
</TabButtons>

See source code for more details

Footers

NavBar

The NavBar is designed for use on phone applications at the bottom of the screen. It takes the children passed into the component and displays them in the nav bar style. All items in the nav are displaced evenly, regardless of how many elements there are in it.

Usage:

<NavBar>
    <IconButton icon={"dropoff"} onClick={()=>{console.log("action 1")}} />
    <IconButton icon={"calendar"} primaryTextColor={"gray"} onClick={()=>{console.log("action 2")}}/>
    <IconButton icon={"home"} onClick={()=>{console.log("action 3")}}/>
    <IconButton icon={"user"} primaryTextColor={"gray"} onClick={()=>{console.log("action 4")}}/>
    <IconButton icon={"pickup"} onClick={()=>{console.log("action 5")}}/>
</NavBar>
<br></br>
<NavBar>
    <IconButton icon={"dropoff"} onClick={()=>{console.log("action 1")}} />
    <IconButton icon={"home"} onClick={()=>{console.log("action 3")}}/>
    <IconButton icon={"pickup"} onClick={()=>{console.log("action 5")}}/>
</NavBar>

See source code for more details

Images

Image

This is the same as a regular image tag, however it has a few extra features. First, it allows the user access to default images. Second, it throws warnings when best practices are not followed.

Usage:

<Image src="gear" alt="gear" width="100px" height="100px" />

See source code for more details

Inputs

Info

Additionally, I believe that all user input should be carefully validated to help both the user and application. In order to do so, an input prop called regex is used. When this field is passed in, the input field will change colors to success and error based on if the users input is valid according to the regex prop passed in.

There are a few different types of inputs:

• Text inuts
• Date inputs
• Menu inputs

These three inputs can be used interchangeably. However. there are a few differences between them that you need to be aware of.

view the parent class source code for more details

Text Input

Text inputs are used for text input fields. They behave like regular text input fields and can be handled using standard best practices.

Usage:

<Input 
    type="text"
    label="Text Input"
    value={val}
    onChange={(e)=>{setVal(e.target.value)}}
/>

See source code for more details

Password Input

Password inputs are just text inputs that hide the user input. They behave like regular text input fields and can be handled using standard best practices.

Usage:

<Input 
    type="passwod"
    label="password"
    value={val}
    onChange={(e)=>{setVal(e.target.value)}}
/>

See source code for more details

Date Input

Date inputs are used for date input fields. They are used to get a date from the user. The date is saved in the format yyyy-mm-dd.

Usage:

<Input type="date" label="date" value={val} onChange={(e)=>{setVal(e.target.value)}}/>

See source code for more details

Menu Input

Description - WIP

Usage:

<Input 
    type="countries"
    label="countries"
    value={countries}
    onChange={(e)=>{setCountries(e.target.value)}}
/>
<Input 
    type="countries"
    label="supported countries"
    value={countries}
    onChange={(e)=>{setCountries(e.target.value)}}
    supported
/>
<Input 
    type="states"
    label="states"
    value={states}
    onChange={(e)=>{setStates(e.target.value)}}
/>
<Input 
    type="states"
    label="supported states"
    value={states}
    onChange={(e)=>{setStates(e.target.value)}}
    supported
/>
<Input 
    type="menu"
    label="custom"
    value={custom}
    onChange={(e)=>{setCustom(e.target.value)}}
    fields={["field1", "field2"]}
/>

See source code for more details

Lists

OrderedList

OrderedList is used to display a list of items in a container while providing an optional way to add new items. Additionally it accepts a function which is used to sort the children. If the onClick is excluded the option to add new items is not available.

Usage:

<OrderedList sort={(a,b)=>{
        return (a.props.key < a.props.key) ? -1 : 1;
      }}>
    <ImageButton key={1} content={"user 1"} right="pfp"/>
    <ImageButton key={2} content={"user 2"} right="pfp"/>
    <ImageButton key={3} content={"user 3"} right="pfp"/>
</OrderedList>

See source code for more details

UnorderedList

UnorderedList is used to display a list of items in a container while providing an optional way to add new items. If the onClick is excluded the option to add new items is not available.

Usage:

<UnorderedList onClick={()=>{}}>
    <ImageButton content={"user 1"} right="pfp"/>
    <ImageButton content={"user 2"} right="pfp"/>
    <ImageButton content={"user 3"} right="pfp"/>
</UnorderedList>

See source code for more details

Progress Bars

StepBar

The StepBar component is designed to be used in multifield forms allowing quick on click access to a page of the form an clear denotation of your location in the form.

Usage:

<StepBar numFields={3} current={val} onClick={(val)=>{setVal(val)}} />

See source code for more details

Containers

Shadowbox

the shadow box is designed to make a div that shows a bit of pop. So that it is distinguished from the background

Usage:

<Shadowbox>
    contents
</Shadowbox>

See source code for more details

Text

Faded

Background text. For when you want non important background information to be displayed like a wallpaper

Usage:

<Faded>
    faded text
</Faded>

See source code for more details

Link

This is for making a link. You could use an "a" tag but this allows for the style of the text to be changed at a global level

Usage:

<Link>
    this is a link
</Link>

See source code for more details

Error

This is used for any error text

Usage:

<Error>
    something went wrong
</Error>

See source code for more details

Styles

OUI takes advantage of the use of global values to quickly make elements follow the desired global theme. Below is a description of each set of values, what they do, and where they can be found.

Colors

These are the colors that are used to define the default values for the source code. They can be modified in order to have a more custom usage of OUI.

Clickable

These are the variables that are used for clickable objects. This UI was designed for web applications, and so the sizes for clickable objects are scaled for that. If you wanted to switch to a PC-based website, you could edit that here.

Banners

These are used for handling the sizes of banners such as the header.

Image

Here you can find the standards for the different types of images that you can have.

Radius

These are the different types of radi that can be used in the web app. If you wanted to switch to a more square shaped vibe you could change the variables in here.

Shadows

These are the different types of shadows that can be used in styeled components.