Code Monkey home page Code Monkey logo

app-services-ui-components's Introduction

@rhoas/app-services-ui-components

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

npm version codecov

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-i18next': {
            singleton: true,
            requiredVersion: peerDependencies['react-i18next'],
          },
          '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: '*',
          },
        },
      })
    ]
  };
}

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'),
        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>
);

See Also

License

Apache

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.