Genesis Rapid Design System

This package is a Design System (Rapid). 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

Installation

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

1. Add @genesislcap/rapid-design-system 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.

``json
{
"dependencies": {
"@genesislcap/rapid-design-system'": "latest"
},
}
`

Setting Up the Design System

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

$3

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/rapid-design-system';

provideRapidDesignSystem().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 rapid- in this case).

$3

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 { rapidButton, rapidDesignSystemProvider, provideDesignSystem } from '@genesislcap/rapid-design-system';

provideRapidDesignSystem().register(
/**
* Design system provider element used to declaratively apply rapid config to every dom node in the host tree.
*/
rapidDesignSystemProvider(),

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

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

`typescript
import { provideDesignSystem, rapidButton, rapidCard, rapidDesignSystemProvider, rapidnModal } from '@genesislcap/rapid-design-system';

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

/**
* Components that will be registered in the Rapid Design System
*/
rapidButton(),
rapidCard(),
rapidModal()
);
`

$3

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/rapid-design-system';
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 Rapid UI components from the Rapid 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 for more details.

$3

Genesis low-code platform