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.
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.
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";
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.
<MainHeader
left={<IconButton icon="back" />}
main={<h3>HOME</h3>}
right={<IconButton icon="info" />}
/>
See source code for more details
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.
<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
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:
- filled (default)
- outline
- text
<AddButton type="outline" />
<AddButton type="text" />
<AddButton type="filled" />
See source code for more details
The Button component is a button with an onClick callback. It has three states that it is able to be in:
- filled (default)
- outline
- text
<Button type="outline">outlined</Button>
<Button type="text">text</Button>
<Button type="filled">filled</Button>
See source code for more details
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
<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
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:
- default
- selected
- error
<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
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
- error
- success
<SelectionButton/>
<br></br>
<SelectionButton state="error"/>
<br></br>
<SelectionButton state="success"/>
See source code for more details
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).
<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
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.
<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
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.
<Image src="gear" alt="gear" width="100px" height="100px" />
See source code for more details
The inputs are unique in the fact that they all filter through one tag "" Input fields are already messy, so adding multiples ways to get input from the user only made it messier. As a result, we wanted to make all forms of input easy to use and similar in their application.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 inputs are used for text input fields. They behave like regular text input fields and can be handled using standard best practices.
<Input
type="text"
label="Text Input"
value={val}
onChange={(e)=>{setVal(e.target.value)}}
/>
See source code for more details
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.
<Input
type="passwod"
label="password"
value={val}
onChange={(e)=>{setVal(e.target.value)}}
/>
See source code for more details
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.
<Input type="date" label="date" value={val} onChange={(e)=>{setVal(e.target.value)}}/>
See source code for more details
Description - WIP
<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
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.
<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 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.
<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
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.
<StepBar numFields={3} current={val} onClick={(val)=>{setVal(val)}} />
See source code for more details
the shadow box is designed to make a div that shows a bit of pop. So that it is distinguished from the background
<Shadowbox>
contents
</Shadowbox>
See source code for more details
Background text. For when you want non important background information to be displayed like a wallpaper
<Faded>
faded text
</Faded>
See source code for more details
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
<Link>
this is a link
</Link>
See source code for more details
This is used for any error text
<Error>
something went wrong
</Error>
See source code for more details
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.
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.
See source code for more detailsThese 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.
See source code for more detailsThese are used for handling the sizes of banners such as the header.
See source code for more detailsHere you can find the standards for the different types of images that you can have.
See source code for more detailsThese 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.
See source code for more detailsThese are the different types of shadows that can be used in styeled components.
See source code for more details