Installation

NPM

npm install @cegid/cds-react@latest react@^18.2.0 react-dom@^18.2.0 @emotion/react@^11.9.3 @emotion/styled@^11.9.3

You may be required to install

date-fns

SVG icons and illustrations

In order to use prebuilt SVG icons, such as those found in the icons demos or illustrations found in the illustrations demos you must first install the

@cegid/icons-react

@cegid/illustrations-react

// icons for react
npm install @cegid/icons-react

// illustrations for react
npm install @cegid/illustrations-react

React setup

Providers

The design system exposes a set of providers that may be required to work properly

ThemeProvider - Mandatory

This is the core provider of the design system. It must wrap all the design system components to ensure they have proper styles.

import { ThemeProvider } from "@cegid/cds-react";

<ThemeProvider>{children}</ThemeProvider>

How to apply client theme ?

As describe in our theming guidelines, what we call primary color can be updated by your clients and you can’t predict what it will be.

The design system is resilient to all colors and ensure accessibility regardless it is white or black, and everything in between.

In order to create this custom theme, you can use the following snippet:

import { createTheme, ThemeProvider } from "@cegid/cds-react";

const defaultTheme = createTheme();
const myApplicationTheme = createTheme({
  palette: {
    primary: defaultTheme.palette.augmentColor({
      main: "#ClientColor", // Fetch this color from anywhere you can
    }),
  },
});

<ThemeProvider theme={myApplicationTheme}>{children}</ThemeProvider>

GlobalFeatureProvider

The design system can be used in various occasions. Because it can be anywhere, we want it to be easily configurable without impacting current implementations.

There are today 2 global features:

cookies: enable or disable access to cookies configuration / privacy policy though the user profile

unpaidAlert: display the unpaid banner to the admin

import { GlobalFeatureProvider } from "@cegid/cds-react";

<GlobalFeatureProvider cookies={cookiesEnabled} unpaidAlert={unpaidAlertEnabled}>
    {children}
</GlobalFeatureProvider>

This component is not in charge of fetching the informations, you must provide them to your implementation.

CultureProvider

Some labels that are visible - or only for screen readers - are embedded in the design system library. In order to expose the label in the user language, you need to wrap all your components in this CultureProvider with the user current language.

import { CultureProvider } from "@cegid/cds-react";

<CultureProvider culture="en-GB">
    {children}
</CultureProvider >

The culture should be ISO 639-1 format.

Ex: en-GB, fr-FR

DatePickerUtilsProvider

We recommend you to use date-fns and provide utils as follow

import DateFnsUtils from "@date-io/date-fns";
import { DatePickerUtilsProvider } from "@cegid/cds-react";

<DatePickerUtilsProvider dateAdapter={DateFnsUtils}>
    {children}
</DatePickerUtilsProvider>

ToasterProvider

Enables the capacity to use the useToaster hook to display messages

import { ToasterProvider } from "@cegid/cds-react";

<ToasterProvider>
    {children}
</ToasterProvider>

Wrapping up

A complete implementation should look like

import {
  ThemeProvider,
  CultureProvider,
  DatePickerUtilsProvider,
  ToasterProvider,
  GlobalFeatureProvider,
} from "@cegid/cds-react";

import DateFnsUtils from "@date-io/date-fns";

const DesignSystemProvider = ({ children }) => {
  return (
    <GlobalFeatureProvider cookies unpaidAlert>
        <ThemeProvider>
            <DatePickerUtilsProvider dateAdapter={DateFnsUtils}>
                <ToasterProvider>
                    <CultureProvider culture="en-GB">
                        {children}
                    </CultureProvider>
                </ToasterProvider>
            </DatePickerUtilsProvider>
        </ThemeProvider>
    </GlobalFeatureProvider>
  );
};

export default DesignSystemProvider;