https://github.com/odeum/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.
https://github.com/odeum/odeum-app
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/odeum/odeum-app
- Owner: odeum
- License: mit
- Created: 2017-11-08T22:07:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-08T07:15:35.000Z (over 7 years ago)
- Last Synced: 2025-03-27T15:55:42.634Z (10 months ago)
- Language: JavaScript
- Homepage: http://www.odeumcode.com
- Size: 294 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
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.
[](https://travis-ci.org/odeum/odeum-app)
[](https://www.npmjs.com/package/odeum-app)
- [1. Components:](#1-components)
- [2. Installation](#2-installation)
- [3. Usage](#3-usage)
- [3.1. Additional ODEUM Code packages](#31-additional-odeum-code-packages)
- [3.2. Support packages for your styling and data management](#32-support-packages-for-your-styling-and-data-management)
- [4. How to use odeum-app](#4-how-to-use-odeum-app)
- [4.1. Theme](#41-theme)
- [4.2. Configuration:](#42-configuration)
- [4.2.1. Logo](#421-logo)
- [4.2.2. Help](#422-help)
- [4.3. Routing](#43-routing)
- [4.4. Quick Navigation](#44-quick-navigation)
- [4.5. Login](#45-login)
# 1. Components:
- AppContainer
- Header
- MenuPanel
- Menu
- Tab
- Workspace
- Page
- Footer
# 2. Installation
```sh
npm install odeum-app
yarn add odeum-app
```
# 3. Usage
```js
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.
```js
import theme from './theme/bluehorizon.js'
...
```
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](./src/App_default.js)
A template with named values and more props passed would look like this:
[App_normal.js](./src/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.
```js
```
## 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:
```js
```
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:
```js
```
Or pass a style object:
```js
const quicknavStyles = {
label: 'Quick Navigation',
icon: 'menu',
...
}
...
```
## 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:
```js
import {
...,
Login } from 'odeum-app'
...
this.state = {
isLoggedIn: false
...
handleLogin = () => {
this.setState({ isLoggedIn: })
}
}
```