DJEY's UI TOOLKIT FOR REACT

DEPENDENCIES

Be sure to comply with following dep versions!

Peer (REQUIRED client-side)

• aws-amplify: 4.3.12
• @aws-amplify/core: 4.3.12
• react: 17.0.2, prop-types: 15.7.2 and react-dom: 17.0.2 of course

Automatic

• @aws-amplify/ui-react: 2.1.7: authentication UI
• @fortawesome/react-fontawesome: 0.1.16, @fortawesome/fontawesome-svg-core: 1.2.36, @fortawesome/free-solid-svg-icons: 5.15.4 and @fortawesome/free-regular-svg-icons: 5.15.4: icons
• classnames: 2.3.1: proper handling of CSS class names
• date-fns: 2.28.0: date time handling
• quagga: 0.12.1: barcode reading
• react-modal: 3.14.3: modals
• react-select: 5.2.1: drop-down lists
• react-toastify: 8.0.3: toast notifications

HOW-TO-USE

Import lib in the client's node_modules: yarn add djeys-ui-toolkit-react

Component

import { Button } from 'djeys-ui-toolkit-react/dist/
components';

...

<Button />

Helper

import { getCurrentDateTime } from 'djeys-ui-toolkit-react/dist/utils/DateTimeHelper';

CSS

import 'djeys-ui-toolkit-react/dist/styles/index.css';

, will import all required stylesheets.

API DOCS

Components and helpers

cf. styleguide

AWS Scripts

Configuration

WARNING: do not commit this file if your app repo is intended to be public!! As it contains AWS account sensitive information.

AWS scripts rely on following configuration file, as an example:

{
    "aws": {
        "amplify": {
            "environments": {
                "one": {
                    "apiId": "xyz123"
                },
                "two": {}
            },
            "models": ["Model1", "Model2"]
        },
        "region": "eu-west-1"
    }
}

The file has to be located in scripts directory of the project, with name config.json.

It should contain (there's no default values): - environments: dictionary of AWS Amplify environments for your backend resources: - every dict key is an environment name, containing: - apiId (not mandatory): amplify API ID to target related resources from this env; by default, tools will require apiId via command line argument. - models: list of model entities names matching some DynamoDB tables.

• aws -> region: AWS specific parameters, used to create clients

CSS

index.css includes all usable stylesheets:

• common: global rules, fixes
• reset: uses reset.css
• variables: to be used by client system.

styleguide.css is used only by lib tooling.

DEVELOPMENT

Styleguide

• yarn sg: runs component gallery

• yarn sg:build: generates static files for gallery.

Lint

• JS only: yarn lint:js
• CSS only: yarn lint:css
• All: yarn lint

Unit tests

yarn test, or yarn test:watch for interactive mode.

BUILD AND RELEASE

Locally/test

From main branch:

1. yarn release:pack: compile to js files into dist directory and create tgz file
2. npm link: deploy lib to local repository (.../lib/node_modules/djeys-ui-toolkit)
3. npm link djeys-ui-toolkit-react (in a test project): create symbolic link to local repository.

To NPM repo

From release branch:

1. Merge main branch into it
2. Make sure released version is correctly set into package.json file
3. npm login if necessary
4. yarn release:repository, will:
   • execute all lint tasks
   • run unit tests with coverage
   • transpile to js files into dist directory
   • create tgz file and publish to npmjs.

After succesful release:

1. Commit everything left
2. git tag x.y.z to tag the release
3. git push && git push --tags to push everything including new release tag.

When switching back to development (main branch), make sure next dev version is correctly set into package.json file: x.y.z-dev.