@mintlab/ui

@mintlab/ui

Mintlab Preact UI components used in Zaaksysteem.

Installation

yarn add @mintlab/ui

Usage

import {
  Button,
  Dialog,
  // ...
} from '@mintlab/ui';

Contributing

This repository has two different user roles:

1. Developer
   • works on the code in ./App and pushes changes to the VCS
   • Cf. ./App/README.md
2. Publisher
   • publishes to the npm registry

Starting the application

Run

$ docker-compose up ui

and in another tab

$ docker-compose exec ui sh

or in a single step (bash):

$ ./dev.sh

The first time in the guest you'll want to run

$ yarn

to install dependencies and then

$ yarn start

to run storybook.

Configuration and infrastructure documentation

• Storybook
• webpack configuration
  • cf. ./storybook/webpack
• Jest configuration
• PLOP

Experimental: Documentation

• ESDoc

You can generate ./documentation by running

$ yarn esdoc

TODO: There is some overlap between

• prop-types
  • Use cases:
    • High level documentation
      • Storybook info addon
    • IDE integration
    • Google Chrome Developer Tools
• READMEs
  • Use cases:
    • High level documentation
    • Storybook
    • GitLab project browsing
• ESDoc
  • Use cases:
    • Technical documentation
    • IDE integration

This needs discussion.

Publishing to the npm registry

You need to be a member of the @mintlab organization with write privileges for the package.

1. On the guest:
   1. run yarn build
2. On the host (only publish with the npm CLI):
   1. run npm version (patch|minor|major) to bump the version (never update the version field manually)
      • This also creates a git tag.
   2. (optional) run npm pack and inspect the tar ball if you want to see what's beeing published
   3. run npm publish --access public
   4. push the changes to the git remote

FAQ

Q: Why do I see so many peer dependency warnings about React when I install modules?

A: preact-compat is aliased as react in the Storybook webpack configuration.

Q: Why do I see "Warning: Failed prop type: The prop className is marked as required in Resizer, but its value is undefined." in the console?

A: That's caused by an installed dependency. If it bugs you, find out which one and file an issue.

Q: What should actually be published?

A: With the excpetions of the README, LICENSE and package.json files, nothing that's under version control (cf. .gitignore and .npmignore):

- `distribution/ui.js` (`main` in `package.json`)
- `distribution/ui.css`  

License

Copyright 2017 Mintlab B.V.

Licensed under the EUPL, Version 1.1 or – as soon they will be approved by the European Commission - subsequent versions of the EUPL (the "Licence").

You may not use this work except in compliance with the Licence.

You may obtain a copy of the Licence at: https://joinup.ec.europa.eu/software/page/eupl