Skip to content

Latest commit

 

History

History
95 lines (63 loc) · 2.64 KB

getting_started.stories.mdx

File metadata and controls

95 lines (63 loc) · 2.64 KB
Raw

Zen UI

ZenGRC Components library

This library provides a set of components that should be used in every Zen-GRC micro-frontend app.



Installing

Prerequisites

Node.js
npm

Install ZenUI npm package

yarn add @reciprocity/zen-ui

Putting components in action

Registering all components

import { defineCustomElements } from '@reciprocity/zen-ui/loader';

defineCustomElements(window, { transformTagName: tagName => `YOUR_APP_ID-${tagName}` });

Notice the YOUR_APP_ID should be a single word without hyphens.

Using components

After importing components, just use them as any regular html element with the added prefix (let's take comply as example):

<comply-zen-dropdown>
  <comply-zen-option value="orange">Orange</comply-zen-option>
  <comply-zen-option value="lemon">Lemon</comply-zen-option>
  <comply-zen-option value="apple">Apple</comply-zen-option>
</comply-zen-dropdown>

General notes

Notes here apply to all components from Zen UI library. Read this before consuming these components.

Unique prefixes

When registering ZenUI components in you application make sure that you're using a non-existent prefix to avoid any unexpected behavior by name collision.

React bindings

When working with a React application, instead of manually creating wrappers for the web components, you can use this library React bindings and import the components directly into your JSX.

First, install the bindings alognside the library:

yarn add @reciprocity/zen-ui @reciprocity/zen-ui-react

Then, setup the library and the bindings:

import { defineCustomElements } from '@reciprocity/zen-ui/loader';
import { setTagTransform } from '@reciprocity/zen-ui-react';

const transformTagName = tagName => `YOUR_APP_ID-${tagName}`;
defineCustomElements(window, { transformTagName });
setTagTransform(transformTagName);
  1. Since using a prefix is required, you need to set it both for the library and the bindings.
  2. The reason you need to do it "twice" it's because defineCustomElements supports extra options that the bindings don't.

Once the library and bindings are configured, you can just create a component and import the components:

import React from 'react';
import { ZenDropdown, ZenOption } from '@reciprocity/zen-ui-react';

export const MyDropdown = () => (
  <ZenDropdown>
    <ZenOption value="orange">Orange</ZenOption>
    <ZenOption value="lemon">Lemon</ZenOption>
    <ZenOption value="apple">Apple</ZenOption>
  </ZenDropdown>
);