[](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 [Zero Design System](../foundation-ds/foundation-zero/README.md).
- 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 zero 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 zero 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';
import { baseComponents as zeroBaseComponents, provideDesignSystem as provideZeroDesignSystem } from '@genesislcap/foundation-zero';
provideDesignSystem().register(baseComponents);
provideRapidDesignSystem().register(rapidBaseComponents);
provideZeroDesignSystem().register(zeroBaseComponents);
```
In the example above, we provide three different design systems: the base design system, the rapid design system, and the zero 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
Zero 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