Zignaly UI

View Storybook

UI Kit of Zignaly.

How to use it?

If you're working on the Zignaly momnorepo, you already are using it.

If you're using it on an outside project... OK let's get started.

Have peer dependencies installed

This library expects these peer dependencies:

"react": "18.2.0",
"react-dom": "18.2.0",
"@types/react": "18.0.35",
"@types/react-dom": "18.0.11",

(duh)

"react-i18next": "14.0.1",   
"i18next": "23.8.1",

for components with translations (ZigInputAmount, ZigImageInput, ZigFilters, ZigTable, ZigRisk, ZScoreRing, ZigSearch and ZModal)

"react-router-dom": "6.22.3"

for the ZigMenu and ZigSubHeader components

"@emotion/react": "11.9.3",
"@emotion/styled": "11.9.3",

for styled components.

Install it

yarn add @zignaly-open/ui

Provide for it

You probably won't be able to claim @zignaly-open/ui as a dependent on your tax returns but you still have tpo provide for it.

import { ThemeProvider, getZignalyThemeExport } from '@zignaly-open/ui';
import { addZignalyUiResources } from '@zignaly-open/ui/i18n';

import i18n from './your/i18next';

// adds the translationsdefined in zignaly-ui to your i18next instance as resources
addZignalyUiResources(i18n);

// create the base theme
const mui = getZignalyThemeExport('dark');

export default () => {
    return (
        <ThemeProvider theme={mui}>
            <I18nextProvider i18n={i18n}>
                <YourAppGoesHere />
            </I18nextProvider>
        </ThemeProvider>
    );
};