Socket
Socket
Sign inDemoInstall

@genesislcap/foundation-zero

Package Overview
Dependencies
Maintainers
0
Versions
920
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@genesislcap/foundation-zero

Genesis Foundation Zero Design System


Version published
Weekly downloads
3.4K
increased by37.23%
Maintainers
0
Weekly downloads
 
Created
Source

lerna TypeScript

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

Module Federation Details:

Remote NamePort
foundationZero4020

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

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:

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:

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:

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 for more details.

Licensed components

Genesis low-code platform

FAQs

Package last updated on 22 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc