Hitachi Vantara UI Kit - React

React components for the Hitachi Vantara Design System.

Quickly build apps that follow the HV Design System's patterns and specifications.

Installation

HV UI Kit is available as multiple npm packages. You can install them in any working React v16.x project.

Configuring the npm registry

The packages are being published to a corporate Hitachi Vantara npm registry. To be able to use them, you need to associate the @hv scope with that registry using npm config:

npm config set @hv:registry https://repo.orl.eng.hitachivantara.com/artifactory/api/npm/uikit-npm-release-orl/

You can check if your ~/.npmrc is already configured by running npm config ls.

Package installation

Install the @hv/uikit-react-core package and its peer dependencies:

npm install @hv/uikit-react-core @material-ui/core@^4.11.0 plotly.js-basic-dist@^1.55.2

Other packages available

If you need to use any non-core community contributed package, install the @hv/uikit-react-lab package.

npm install @hv/uikit-react-lab

Also available:

code-editor - npm install @hv/uikit-react-code-editor
icons - npm install @hv/uikit-react-icons
themes - npm install @hv/uikit-common-themes

The @hv/uikit-react-icons is installed as a dependency of @hv/uikit-react-core and the @hv/uikit-common-themes shouldn't be necessary out of a very specific use case.

Installing an older version

The above commands will install the latest version of UI Kit 3.x. It implements the DS 3.x specifications.

If your project's design follows DS 1.x you must use the UI Kit 2.x release. Install it by suffixing "@2.*" to the package names:

npm install @hv/uikit-react-core@2.*

The peer dependencies will also be different:

npm install @material-ui/core@~4.8.0 plotly.js@>1.34.0

Usage

Wrap your application with the HvProvider provided by @hv/uikit-react-core.

import { HvProvider } from "@hv/uikit-react-core"

// Do this at the root of your application
function App({ children }) {
  return <HvProvider>{children}</HvProvider>
}

Optionally, you can configure the active theme and locale, among others. Check the Provider's API documentation for further details.

Now you can start using components:

import { HvButton } from "@hv/uikit-react-core"

function Example() {
  return <HvButton>Hello from UI Kit!</HvButton>
}

Documentation

Check out our documentation website.

Changelog

Recently Updated? Please read the packages changelog: core, code-editor, icons, lab, themes.

Contributing

Please check out our Contribution Guidelines for detailed information.

You need to ask to be added as a project member, to be able to contribute:

#ui-kit slack channel on the hitachivantara-eng workspace.
#ui-kit slack channel on the hitachi-design workspace.

Bugs

If you find a bug in the source code, you can help us by submitting an issue to this repo. Even better you can submit a Pull Request with a fix.

Feature Requests

You can request a new feature by submitting an issue to this repo. Features can be new components or changes to existing.

License

This project is licensed under the terms of the Apache 2.0 license.

Team

The UI Kit is maintained by a small group of invaluable core contributors, with the support and involvement of the Hitachi Vantara community. 😄

Diogo Mariano (@diogofscmariano)
Paulo Lagoa(@plagoa)
Francisco Guilherme (@francisco-guilherme)
Elio Freitas (@eliofreitas)
Bruno Henriques (@zettca)
Nelson Antunes (@nantunes)
Júlio Costa (@jsccosta)
Hugo Figueira (@hugompfigueira)

Get involved with our development by opening an issue or submitting a pull request. Read the contributing guidelines for information on how we develop.

Join and support the project!

zettca/hv-uikit-react-old