@mintlab/ui

@mintlab/ui

Mintlab Preact UI components used in Zaaksysteem.

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 dependenecies 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 should be discussed with the whole team.

Publishing to the npm registry

• You need to be a member of the @mintlbab organization with write privileges for the package.
• Run npm version (patch|minor|major) to bump the version; never update the version field manually.
  • This also creates a git tag.
• If you want to see what's beeing published, run npm-pack and inspect the tar ball.
• 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
• Only publish with the npm CLI.
• The build is a prepublish task so just run npm publish --access public.

• Official Node.js Docker repository

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: Why do I see both yarn and npm used in package.json scripts?

A: Yarn is used for managing dependencies in development, npm is only used for either

• publishing to the registry
• GitLab pipeline jobs (TODO: look into base images with yarn)

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