@rhoas/app-services-ui-components NPM

@rhoas/app-services-ui-components

@rhoas/app-services-ui-components contains a number of components for the Managed Application Services UI.

The project is documented using Storybook, published on GitHub Pages.

Usage

import { Something } from '@rhoas/app-services-ui-components';

<Something />

Install

With npm installed, add the package to your peer and development dependencies.

$ npm install --save-dev --save-peer --save-exact @rhoas/app-services-ui-components

It's not recommended installing the package as a direct dependency to avoid having it bundled in your project's bundle.

Finally, make sure to list the dependency as a shared singleton in your federated module section on the Webpack's config file.
Be sure to enable the singleton option in order to have the internationalization layer work correctly.

// webpack.js

const { dependencies, peerDependencies } = require('./package.json');

module.exports = () => {
  return {
    // ...
    plugins: [
      // other plugins
      new webpack.container.ModuleFederationPlugin({
        name: 'my-module',
        filename: 'my-module.js',
        exposes: {
          './MyModule': './src/MyModule',
        },
        shared: {
          ...dependencies,
          ...peerDependencies,
          react: {
            eager: true,
            singleton: true,
            requiredVersion: peerDependencies['react'],
          },
          'react-dom': {
            eager: true,
            singleton: true,
            requiredVersion: peerDependencies['react-dom'],
          },
          'react-router-dom': {
            singleton: true,
            requiredVersion: peerDependencies['react-router-dom'],
          },
          '@rhoas/app-services-ui-components': {
            singleton: true,
            requiredVersion: peerDependencies['@rhoas/app-services-ui-components'],
          },
          '@rhoas/app-services-ui-shared': {
            singleton: true,
            requiredVersion: peerDependencies['@rhoas/app-services-ui-shared'],
          },
          '@patternfly/quickstarts': {
            singleton: true,
            requiredVersion: '*',
          },
        },
      })
    ]
  };
}

i18n

This project implements i18n using react-i18next.

You can translate strings by using one of the methods provided by react-18next, like the useTranslation hook.

To make life easier when developing a new Managed Application Services UI or when writing unit tests that also cover translations, the whole react-i18next library is re-exported by @rhoas/app-services-ui-components.

You can translate your content without directly including react-i18next as a direct dependency of your project by doing:

import { useTranslation } from '@rhoas/app-services-ui-components';

const MyComponent = () => {
    const { t } = useTranslation();
    return <span>{t('common:status')}</span>
}

Refer to the react-i18next documentation for more information.

Optional: set up the shared context providers

This step is required only if you want to run your application without the app-services-ui dev server. Never place the following code in components you make available as a federated module!

// App.tsx

import { VoidFunctionComponent } from "react";
import { I18nProvider, ModalProvider } from "@rhoas/app-services-ui-components";

const App: VoidFunctionComponent = () => (
  <I18nProvider
    lng={'en'}
    resources={{
      en: {
        common: () => import('@rhoas/app-services-ui-components/locales/en/common.json'),
        'create-kafka-instance': () => import('@rhoas/app-services-ui-components/locales/en/create-kafka-instance.json'),
        kafka: () => import('@rhoas/app-services-ui-components/locales/en/kafka.json'),
        metrics: () => import('@rhoas/app-services-ui-components/locales/en/metrics.json'),
        overview: () => import('@rhoas/app-services-ui-components/locales/en/overview.json'),
        datascienceoverview: () => import('@rhoas/app-services-ui-components/locales/en/datascienceoverview.json'),
        kafkaoverview: () => import('@rhoas/app-services-ui-components/locales/en/kafkaoverview.json'),
        topic: () => import("../locales/en/topic.json"),
        apimgmtoverview: () => import('@rhoas/app-services-ui-components/locales/en/apimgmtoverview.json'),
        "manage-kafka-permissions": () => import("@rhoas/app-services-ui-components/locales/en/manage-kafka-permissions.json"),},
    }}
    debug={true}
  >
    <ModalProvider>
      my app goes here
    </ModalProvider>
  </I18nProvider>
);