[](https://lerna.js.org/)
[](https://www.typescriptlang.org/)
# 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](../foundation-ds/rapid-design-system/README.md).
## [API Docs](./docs/api/index.md)
## [Module Federation Details](https://webpack.js.org/concepts/module-federation):
| 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](https://learn.genesis.global/secure/web/basics/package-json-basics/) page.
```json
{
"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:
```typescript
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:
```typescript
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:
```typescript
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:
```typescript
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:
```typescript
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:
```html
Base 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](https://genesis.global/contact-us/) for more details.
### Licensed components
Genesis low-code platform