OUI (Ottery-UI)

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

For example:

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

Headers

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

See source code for more details

<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 type="outline" />
<AddButton type="text" />
<AddButton type="filled" />

See source code for more details

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

See source code for more details

<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 
    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/>
<br></br>
<SelectionButton state="error"/>
<br></br>
<SelectionButton state="success"/>

See source code for more details

<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>
    <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 src="gear" alt="gear" width="100px" height="100px" />

See source code for more details

Inputs

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

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

See source code for more details

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

See source code for more details

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

See source code for more details

<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 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 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 numFields={3} current={val} onClick={(val)=>{setVal(val)}} />

See source code for more details

Containers

<Shadowbox>
    contents
</Shadowbox>

See source code for more details

Text

<Faded>
    faded text
</Faded>

See source code for more details

<Link>
    this is a link
</Link>

See source code for more details

<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.