@genesislcap/foundation-ui

Genesis Foundation UI

This package contains our core foundation UI component library + FAST components. These base components are abstracted from their style. Apps shouldn't have a dependency on this unless they have very good reason to. Instead, they should depend on the design system variant that takes this foundation and applies styling etc.

• See Rapid Design System.

API Docs

Module Federation Details:

Remote Name	Port
foundationUi	4010

Installation

To enable this module in your application, follow the steps below.

1. Add @genesislcap/foundation-ui as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.

{
  "dependencies": {
    "@genesislcap/foundation-ui": "latest"
  },
}

Setting Up the Design System

The setup involves providing and registering Design System components from foundation-ui or other places. Here's how you can do it:

Providing the Design System & Registering All Components

Tipically, in the components.ts file (or your entry-point for app-level setups), you provide the design system using provideDesignSystem and register components against that design system. Here's an example:

import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(baseComponents);

In the example above, baseComponents is a collection of components that are part of the same Design System. You can also register additional components if needed (even from other Design Systems, which will be prefixed with foundation- in this case).

Registering Specific Components

If you want to register specific components, you can do so by importing them from the design system and registering them. Here's an example:

import { foundationButton, foundationDesignSystemProvider, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(
  /**
   * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
   */
  foundationDesignSystemProvider(),

  /**
   * Button component
   */
  foundationButton()
);

In the example above, foundation-button will be the only component registered in the Foundation Design System. YOu can also register multiple components at once:

import { foundationButton, foundationCard, foundationDesignSystemProvider, foundationModal, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(
  /**
   * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
   */
  foundationDesignSystemProvider(),

  /**
   * Components that will be registered in the Foundation Design System
   */
  foundationButton(),
  foundationCard(),
  foundationModal()
);

Registering Third-Party Components

We provide a few "third-party" components that are not part of the Design System package. These can be registered in the same way as the other Design System components. Here's an example:

import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import { gridComponents } from '@genesislcap/grid-pro';

provideDesignSystem().register(
  baseComponents,

  /**
   * Third-party components
   */
  foundationLayoutComponents,
  g2plotChartsComponents,
  gridComponents
);

The example above registers Foundation UI components from the Foundation Design System, Foundation Layout, G2Plot Charts, and Grid Pro.

Extra - Multiple Design Systems

You can also provide multiple design systems in your application. Here's an example:

import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';
import { baseComponents as rapidBaseComponents, provideDesignSystem as provideRapidDesignSystem } from '@genesislcap/rapid-design-system';

provideDesignSystem().register(baseComponents);
provideRapidDesignSystem().register(rapidBaseComponents);

In the example above, we provide two different design systems: the base design system and the rapid design system.

With those in place you can now use the components from the different design systems in your application:

<foundation-button>Base Button</foundation-button>
<rapid-button>Rapid Button</rapid-button>

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform