@edekadigital/backoffice-ui

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