@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

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


`

Install

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

`bash

$ 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.

`js
// 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:

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

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

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!

`tsx
// App.tsx

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

const App: VoidFunctionComponent = () => (
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}
>

my app goes here


);
`

See Also

- redhat-developer/app-services-ui Managed Application Services main UI
- redhat-developer/kas-ui Control Plane UI (list Kafka instances, create Kafka instances)
- redhat-developer/kafka-ui Data Plane UI (details about a Kafka instance: metrics, topics, ACLs, etc.)
- redhat-developer/srs-ui Service Registry UI
- redhat-developer/cos-ui` Managed Connectors UI

License

Apache