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.
1. Components:
- AppContainer
- Header
- MenuPanel
- Menu
- Tab
- Workspace
- Page
- Footer
2. Installation
npm install odeum-appyarn add odeum-app
3. Usage
// together with ...
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.
...<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
4.2.1. Logo
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:
... thisstate = isLoggedIn: false... { this} <Page route='/' exact> <Login loggedIn=''> <LoginForm onLoginSuccess=thishandleLogin/> </Login></Page>