@genesislcap/rapid-design-system

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.

{
  "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:

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/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).

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 { 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:

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()
);

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/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.

Theming flexlayout-react

flexlayout-react is a third-party docking layout that apps install themselves (it is not bundled into Foundation). The Rapid Design System owns the single source of truth for how it looks, so the theme can never fall out of sync across apps. The platform theme is a self-contained stylesheet — the vendored flexlayout-react base theme plus the rapid token overrides — so apps should never import flexlayout-react's own stylesheets or copy the overrides locally.

Colours resolve from rapid design tokens, so render flexlayout-react under a <rapid-design-system-provider> (CSS custom properties inherit across shadow boundaries).

// Light DOM: install once at app bootstrap (injects into document, idempotent).
import { installRapidFlexLayoutReactStyles } from '@genesislcap/rapid-design-system';

installRapidFlexLayoutReactStyles();

// Shadow DOM: adopt the shared, cached stylesheet into the shadow root that hosts <Layout>.
import { getRapidFlexLayoutReactStyleSheet } from '@genesislcap/rapid-design-system';

shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, getRapidFlexLayoutReactStyleSheet()];

Also exported: rapidFlexLayoutReactStyleText (raw CSS string), rapidFlexLayoutReactStyles (FAST ElementStyles), and RAPID_FLEXLAYOUT_REACT_VERSION (the flexlayout-react version the theme targets — see the optional flexlayout-react peerDependency for the compatible range).

Maintaining the theme

• Edit the look: change src/flexlayout-react-theme/flexlayout-react.overrides.css, then run pnpm --filter @genesislcap/rapid-design-system flexlayout:generate (the package build does this automatically). The overrides are applied last, so they win over the base theme.
• Bump flexlayout-react: regenerate the theme in the same change. The build regenerates flexlayout-react-theme.generated.ts from the installed version, so a bump without a regenerate leaves the working tree dirty and fails CI's "Check working tree" gate.

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