@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.
import { Something } from '@rhoas/app-services-ui-components';
<Something />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: '*',
},
},
})
]
};
}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.
This step is required only if you want to run your application without the
app-services-uidev 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>
);redhat-developer/app-services-uiManaged Application Services main UIredhat-developer/kas-uiControl Plane UI (list Kafka instances, create Kafka instances)redhat-developer/kafka-uiData Plane UI (details about a Kafka instance: metrics, topics, ACLs, etc.)redhat-developer/srs-uiService Registry UIredhat-developer/cos-uiManaged Connectors UI
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent