odeum-app

ODEUM Code Web App Framework. All the basic components to set up the ODEUM Code Web App framework with default styling, menus, tabs, routes and help.

Showing:

Popularity

Downloads/wk

7

GitHub Stars

3

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

9

Size (min+gzip)

211.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ODEUM Code Web App Framework

ODEUM App

ODEUM Code Web App Framework. All the basic components to set up the ODEUM Code Web App framework with default styling, menus, tabs, routes and help.

Build Status npm NPM license

1. Components:

  • AppContainer
  • Header
  • MenuPanel
  • Menu
  • Tab
  • Workspace
  • Page
  • Footer

2. Installation

npm install odeum-app
yarn add odeum-app

3. Usage

import {    
    AppContainer, 
    Header, 
    MenuPanel, 
    Menu, 
    Tab, 
    Footer } from 'odeum-app'

// together with ... 

import { 
    Button, 
    ButtonPanel, 
    Modal, 
    Dropdown, 
    Input, 
    Checkbox, 
    ToggleSwitch } from 'odeum-ui'

import { Heading, Text } from 'odeum-primitives'

3.1. Additional ODEUM Code packages

  • ODEUM UI (odeum-app)
  • ODEUM Primitives (odeum-primitives)

3.2. Support packages for your styling and data management

  • Styled Components (styled-components)
  • Redux (redux)
  • Code splitting
  • and all the other cool React stuff you love ...

4. How to use odeum-app

4.1. Theme

Default theme is ODEUM Code theme. The theme file contains objects for colors, fonts and sizes for the selected theme.

A theme is passed as a theme prop to the component.

If no theme is provided to the AppContainer by the user, the AppContainer loads the default theme provided in the odeum-app package.

import theme from './theme/bluehorizon.js'
...
<AppContainer theme={theme}>

On a later stage we might provide setTheme and getTheme functions to pattern check the contents of the theme file to ensure that the objects contains the required values.

4.2. Configuration:

All components exported from odeum-app and odeum-app has propTypes and defaultProps.

All defaultProps are loaded with default values so a fully scaled down App template will look like this: App_default.js

A template with named values and more props passed would look like this: App_normal.js

Default logo is odeumcode_logo.svg which is loaded default by Header component unless it is overwritten by the Header prop "logo={'pathtologo.svg'}"

4.2.2. Help

Help ID is initially propagated through props on Menu and Tab components through a helpID prop.

<Menu {...props} helpID={'e8ea36f3-db70-44c0-85d6-61507b029373'}>
    <Tab {...props} helpID={'386bf263-92ba-4b9e-94b6-aa3ac194af44'}>
    </Tab>
</Menu>

4.3. Routing

Routing will be encapsulated and processed by the routable components through a route prop. The routable components are:

  • AppContainer (makes the logo ('/') routable)
  • Menu
  • Tab

Examples:

<Menu {...props} route={'/dashboard'} helpID={'e8ea36f3-db70-44c0-85d6-61507b029373'}>
<Tab {...props} route={'/dashboard/timeline'} />

If no route props is provided the Menu or Tab component label will be used for automatically creating a route.

4.4. Quick Navigation

To pass styles to the responsive Quick Navigation button use the following in MenuPanel directly:

<MenuPanel quicknav={{ label: 'Quick Navigation', icon: 'menu', ... }}>

Or pass a style object:

const quicknavStyles = {
    label: 'Quick Navigation', 
    icon: 'menu',
    ...
}
...
<MenuPanel quicknav={quicknavStyles}>

4.5. Login

Component that composes the actual login process for the owner app. The keep the API footprint light we only exhibits the Login component, the rest is up to the app developer.

Example:

import {    
    ..., 
    Login } from 'odeum-app'
...

this.state = {
    isLoggedIn: false
...
handleLogin = () => {   
    this.setState({ isLoggedIn: })
}


}
<Page route={'/'} exact>
    <Login loggedIn={''}>
        <LoginForm onLoginSuccess={this.handleLogin}/>
    </Login>
</Page>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial