Chardonnay

Chardonnay is the new design system for Vendor Portal which essentially will remove the legacy components library. Chardonnay is based on material-ui v5.

The Chardonnay Storybook is deployed here.

Usage

Please note that react >= 17.x.x, react-dom >= 17.x.x and typescript >= 4.x.x are mandatory requirements to use Chardonnay.

Install the peer dependencies for Chardonnay in your plugin/project. We encourage you to check all the required peer dependencies required for Chardonnay and their versions from package. Installing mui libraries specifically allows you to use components directly from mui if they are not yet available in Chardonnay.

  yarn add react react-dom @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material date-fns typescript

Now, install the Chardonnay library as below.

  yarn add @deliveryhero/vt-portal-chardonnay

To use components and utilities from Chardonnay, wrap your app with ChardonnayThemeProvider as below and provide it with a brand. vendor-portal-sdk has a method getPlatform() which can be used to get the current platform in the portal and provide it to Chardonnay.

import * as React from 'react';
import { Brand, ChardonnayThemeProvider } from '@deliveryhero/vt-portal-chardonnay/core';
import { Button } from '@deliveryhero/vt-portal-chardonnay/components';
import { getPlatform } from '@deliveryhero/vendor-portal-sdk';

interface Props {}

export const App: React.FC<Props> = () => {
  const { name } = getPlatform();

  return (
    <ChardonnayThemeProvider brand={Brand[name] || Brand.pandora}>
      <Button>Hello World</Button>
    </ChardonnayThemeProvider>
  );
};

Development

How to run Chardonnay storybook locally?

Copy .npmrc.dist into .npmrc:

cp .npmrc.dist .npmrc

In .npmrc, replace ${GITHUB_PACKAGE_TOKEN} with your github personal access token.
Run the app:

yarn start

Run linting:

yarn lint

Run tests:

yarn test

Run tests and update snapshots

yarn test -u

We have put all our documentations in the Readme of the Chardonnay codebase repository on Github and also, on Confluence. Please find the URLs related to Chardonnay here below.

NEW!!! Chardonnay