[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)

# Genesis Zero Design System

This package is a Design System (Zero). It is built on top of the `foundation-ui` and provides a set of components that are ready to use without any additional configuration.

## [API Docs](./docs/api/index.md)

## [Module Federation Details](https://webpack.js.org/concepts/module-federation):

| Remote Name           | Port  |
| --------------------- | ----- |
| foundationZero        | 4020  |

## Installation

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

1. Add `@genesislcap/foundation-zero` 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-zero": "latest"
  },
}
```

## Setting Up the Design System

The setup involves providing and registering Design System components from `foundation-zero` 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-zero';

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 `zero-` 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 { zeroButton, zeroDesignSystemProvider, provideDesignSystem } from '@genesislcap/foundation-zero';

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

  /**
   * Button component
   */
  zeroButton()
);
```

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

```typescript
import { provideDesignSystem, zeroButton, zeroCard, zeroDesignSystemProvider, zeronModal } from '@genesislcap/foundation-zero';

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

  /**
   * Components that will be registered in the Zero Design System
   */
  zeroButton(),
  zeroCard(),
  zeroModal()
);
```

### 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-zero';
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 Zero UI components from the Zero Design System, Foundation Layout, G2Plot Charts, and Grid Pro.

## 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