ottery-ui v1.9.9

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

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.