Backoffice UI

React components based on Material Design. edekadigital.github.io/backoffice-ui

Usage

1. Install

npm i -S @edekadigital/backoffice-ui

2. Load "Roboto" font

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
/>

3. Render BackofficeUiProvider

import { BackofficeUiProvider } from '@edekadigital/backoffice-ui';

export const App = () => (
  <BackofficeUiProvider>
    <SomeComponent />
    {/* ... */}
  </BackofficeUiProvider>
);

4. Use components

import { Button } from '@edekadigital/backoffice-ui';

export const SomeComponent = () => (
  <>
    {/* ... */}
    <Button>Some label</Button>
  </>
);

Development

Commands

| Command | Description | | -------------------------- | ------------------------------------------------- | | npm run storybook | Start development mode (Storybook) | | npm run build-storybook | Export storybook into a static web app | | npm run build | Build library (cjs + es6) | | npm run test, npm test | Run tests (TODO) | | npm run check | Checks code for formatting and lint issues | | npm run fix | Fixes formatting and linting issues (if possible) | | npm run clean | Removes all files generated by the build |

Resources

• React
• Storybook

Tests and test coverage

For all tests in this project we use the jest framework and set a minimum coverage of 90% for the subfolders 'components', 'layouts', 'forms' and 'typography'. To run the tests locally, use the command:

npm run test

If the test coverage is below 90%, the tests will fail. To show a report of the test coverage in Google Chrome, use the command:

npm run show-coverage-report

Automated release workflow

This project contains an automated release setup using semantic-release.

Commits that get pushed to master branch will trigger the automated release workflow. The new version will be determined by semantic-release following the semantic versioning specification. Therefore, it is important to follow formalized conventions for commit messages.

The format of the commit messages will be validated at commit time as well as part of the automated pull request validation.

By running npm run commit (or npx git-cz) an interactive cli will provide assistance for writing useful commit messages following the formalized conventions for commit messages:

git add .
npm run commit