JavaScript CSS Other
Switch branches/tags
tocco-util@0.1.9 tocco-util@0.1.8 tocco-util@0.1.7 tocco-util@0.1.6 tocco-util@0.1.5 tocco-util@0.1.4 tocco-ui@0.1.12 tocco-ui@0.1.11 tocco-ui@0.1.10 tocco-ui@0.1.9 tocco-ui@0.1.8 tocco-ui@0.1.7 tocco-ui@0.1.6 tocco-ui@0.1.5 tocco-ui@0.1.4 tocco-ui@0.1.3 tocco-ui-showcase@0.1.7 tocco-ui-showcase@0.1.6 tocco-ui-showcase@0.1.5 tocco-ui-showcase@0.1.4 tocco-theme@0.2.1 tocco-theme@0.2.0 tocco-theme@0.1.21 tocco-theme@0.1.20 tocco-theme@0.1.19 tocco-theme@0.1.18 tocco-theme@0.1.17 tocco-theme@0.1.16 tocco-theme@0.1.15 tocco-theme@0.1.14 tocco-theme@0.1.13 tocco-theme@0.1.12 tocco-theme@0.1.11 tocco-theme@0.1.9 tocco-theme@0.1.7 tocco-theme@0.1.6 tocco-theme@0.1.5 tocco-theme@0.1.4 tocco-test-util@0.1.2 tocco-simple-form@0.1.3 tocco-simple-form@0.1.2 tocco-simple-form@0.1.1 tocco-scheduler@0.1.2 tocco-scheduler@0.1.1 tocco-resource-scheduler@0.2.0 tocco-resource-scheduler@0.1.13 tocco-resource-scheduler@0.1.12 tocco-resource-scheduler@0.1.12-hotfix217.1 tocco-resource-scheduler@0.1.11 tocco-resource-scheduler@0.1.10 tocco-resource-scheduler@0.1.9 tocco-resource-scheduler@0.1.8 tocco-resource-scheduler@0.1.6 tocco-resource-scheduler@0.1.4 tocco-merge@0.2.13 tocco-merge@0.2.12 tocco-merge@0.2.11 tocco-merge@0.2.10 tocco-merge@0.2.9 tocco-login@0.1.26 tocco-login@0.1.25 tocco-login@0.1.24 tocco-login@0.1.23 tocco-login@0.1.22 tocco-login@0.1.21 tocco-login@0.1.20 tocco-login@0.1.19 tocco-login@0.1.18 tocco-entity-list@0.1.12 tocco-entity-list@0.1.11 tocco-entity-list@0.1.10 tocco-entity-list@0.1.9 tocco-entity-list@0.1.8 tocco-entity-list@0.1.7 tocco-entity-list@0.1.6 tocco-entity-list@0.1.5 tocco-entity-list@0.1.4 tocco-entity-detail@0.1.12 tocco-entity-detail@0.1.11 tocco-entity-detail@0.1.10 tocco-entity-detail@0.1.9 tocco-entity-detail@0.1.8 tocco-entity-detail@0.1.7 tocco-entity-detail@0.1.6 tocco-entity-detail@0.1.5 tocco-entity-detail@0.1.4 tocco-entity-browser@0.8.2 tocco-entity-browser@0.8.1 tocco-entity-browser@0.8.0 tocco-entity-browser@0.7.1 tocco-entity-browser@0.7.0 tocco-entity-browser@0.6.4 tocco-entity-browser@0.6.3 tocco-entity-browser@0.6.2 tocco-entity-browser@0.6.1 tocco-entity-browser@0.6.0 tocco-entity-browser@0.5.4 tocco-entity-browser@0.5.3 tocco-entity-browser@0.5.2 tocco-entity-browser@0.5.1
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Tocco Client

travics-ci Build Status codecov devDependencies Status saucelabs Build Status

This repository contains the web client for the Tocco Business Framework.

This project is based on following technologies, tools and libraries:

Initial project structure is based on:

Project Structure

This project uses Lerna for package management. The repository is maintained as monorepo.

Packages are located in folder packages/. Every package maintains its own dependencies and can be re-used in other packages.

Package naming

  • tocco-... naming is used in package.json; in folder structure tocco- prefix can be omitted

Please ensure that every package is prefixed with tocco-

Package tocco-ui

Package tocco-ui is a collection of reusable components. Components can be seen in action in the showcase-app deployed on GitHub. Content of this page is re-generated by Travis-CI on any change to packages tocco-ui or tocco-ui-showcase.


Since this project heavily uses Redux and Sagas, you should be aware of it's concepts and also ES6. A good starting point can be found in these docs:


Getting started

Just install yarn and execute the following commands:

npm install --global lerna@v2.9.1
yarn setup
yarn start --package={PACKAGE_NAME}

Open http://localhost:3000 and start coding!

Add --noMock parameter to disable mocked data. In this case you must run the Tocco Business Framework application with enabled REST API on: http://localhost:8080


Tests are using following tools and libraries:

All packages:

npm test

Single Package:

yarn test --package={PACKAGE_NAME}

During development with watch:

yarn test:dev --package={PACKAGE_NAME}


The project provides some code generators. Generators are developed with Plop and can be executed with:

npm run plop

At the moment there is a generator to create a react-component and a generator to add a redux-action.

Publish bundle

Once the package is ready to publish, run following npm scripts. This registers the bundle in the npm registry, increases versions and creates a git tag. Scope flag is optional and allows you to publish a subset of packages.

lerna publish [--scope {PACKAGE_NAME}] --exact -m "chore: publish" 

Only build:

yarn compile:dev --package={PACKAGE_NAME}
yarn compile:prod --package={PACKAGE_NAME}

Optional the --bundle-analyzer parameter can be added to open BundleAnalyzerPlugin to investigate the bundle sizes.


Eslint is used for linting. Linting will also be executed automatically on our CI.

npm run lint

And automatically fix issues:

npm run lint:fix


Pull requests

  • Create a remote branch that fits the following naming convention: pr/{package}-{description-of-contribution}
  • Push commits to this branch. Set a commit message as described below.
  • Once all changes are pushed, create a pull request. The changes should never break a package and therefore must be self-contained.
  • The pull request will be verified by TravisCI and Codecov. If one of them returns a bad result, the problems have to be fixed.
  • Optionally assign a reviewer manually.
  • Once the pull request is merged, the branch must be deleted.

Git Commit Msg

Similar to Karma commit messages follow this convention:

<type>(<scope>): <subject>


Message subject (first line)

First line must not be longer than 70 characters, second line is always blank and other lines should be wrapped at 80 characters.

Allowed <type> values:

  • feat (new feature)
  • fix (bug fix)
  • docs (changes to documentation)
  • style (formatting etc.; no code change)
  • refactor (refactoring production code)
  • test (adding missing tests, refactoring tests; no production code change)
  • chore (updating grunt tasks etc; no production code change)

Example <scope> values:

  • If the changes affect a single package the scope is set to package name (e.g. login)
  • If the change is a global or difficult to assign to a single package the parentheses are omitted.
  • If changes affect the monorepo itself, the scope is set to 'tocco-client'

Message body

  • uses the imperative, present tense: “change” not “changed” nor “changes”
  • includes motivation for the change and contrasts with previous behavior

Setup Linting with IntelliJ

  • Install ESLint Plugin
  • Settings (Preferences on OS X) | Languages & Frameworks | JavaScript | Code Quality Tools --enable
  • Settings (Preferences on OS X) | Editor | Inspections | Code style issues | Unterminated statement -- disable