Skip to content
/ ui Public

Components and related resources for the DHIS2 design system

License

Notifications You must be signed in to change notification settings

dhis2/ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

547de1d · Dec 8, 2024
Dec 2, 2024
May 5, 2021
Oct 9, 2023
Dec 8, 2024
Dec 8, 2024
Dec 8, 2024
Jun 3, 2024
Dec 8, 2024
Dec 8, 2024
Dec 2, 2024
Dec 8, 2024
Mar 6, 2020
Apr 25, 2024
Mar 6, 2020
Oct 12, 2023
Oct 12, 2023
Apr 25, 2024
Apr 25, 2024
May 10, 2022
Mar 6, 2020
Feb 2, 2023
Jun 21, 2021
Dec 8, 2024
Nov 28, 2024
Jan 5, 2021
Mar 6, 2020
Jun 3, 2024
Dec 2, 2024
Apr 25, 2024
Apr 21, 2022
Jul 1, 2020
Oct 29, 2024
Oct 29, 2024
Oct 29, 2024
Oct 29, 2024
Dec 9, 2020
Dec 8, 2024
Nov 21, 2024

Repository files navigation

DHIS2 UI

@dhis2/ui on npm semantic-release conventional commits

@dhis2/ui is a suite of frontend components for building DHIS 2 applications

To install @dhis2/ui run:

yarn install @dhis2/ui

All components can be imported directly from @dhis2/ui like so:

import { Button } from '@dhis2/ui'

We recommend that you use @dhis2/ui as the entrypoint for all imports of our frontend components (as in the example above). That way your imports won't break if any of the underlying packages change.

Documentation

@dhis2/ui is based on the specifications in our design-system: https://github.com/dhis2/design-system. See the documentation there for more information.

Bundled packages

Package Link Status
@dhis2/ui collections/ui Active
@dhis2/ui-constants constants Active
@dhis2/ui-forms collections/forms Active
@dhis2/ui-icons icons Active

@dhis2/ui-constants

This package provides access to shared constants, such as colors, spacers and elevation values. They are used across our frontend components and can be used directly in applications as well. Our constants can be imported like so:

import { colors } from '@dhis2/ui'

See our api docs for a full list of the available constants.

@dhis2/ui-icons

This package provides a collection of icons as react components. For tree shaking purposes the icon name, variant and size are all expressed in the component name. Our icons can be imported like so:

import { IconApps16 } from '@dhis2/ui'

For a list of all the available icons see the ui-icons package. Note that during their transformation to React components the svg filenames are PascalCased and prefixed with Icon. So apps-16.svg becomes IconApps16 and can then be imported as in the example above.

The default fill of our icons is inherited from color with currentColor. To set a custom icon color you can use the color prop like so:

<IconApps16 color="#DE683D" />

@dhis2/ui-forms

This package provides several components that allow for easy integration of our form components with react-final-form. Besides form components, we also export several validator functions for common usecases. Components from this library can be imported like so:

import { TextAreaFieldFF } from '@dhis2/ui'

The FF suffix ensures that these components don't clash with our regular field components from the widgets package and is an abbreviation of final-form. See our api docs or the live docs for a full list of the available components and validators.

Development

git clone [email protected]:dhis2/ui.git && cd ui

yarn install
yarn d2-style install
yarn setup
yarn start

# in case manager complains about the main.manager.bundle.js, e.g. cannot import @dhis2/ui-constants, then use:
yarn start --no-manager-cache

Conditional E2E Test Recording

To record e2e tests in Cypress Cloud, you can use one of the following methods based on your needs:

  • Commit Message: Include [e2e record] in your commit messages to activate recording.
  • GitHub Labels: Apply the e2e record label to your pull request to trigger recording.

This setup helps in managing Cypress Cloud credits more efficiently, ensuring recordings are only made when explicitly required.

Reporting an issue or opening a PR

See CONTRIBUTING.md