Develop

We have put interface elements together to create a collection of reusable components inside the Synerise application. Every person that contributes by building products for Synerise can refer to the library of components to combine them and create coherent designs for merchants.
This way, instead of making over the interface elements, we can stay concentrated on finding solutions to unique challenges.

Getting started

React UI component library, inspired by Ant Design was introduced to support developers in implementing the best experience for Synerise merchants.

• Components are written in TypeScript with predictable static types.
• Internationalization by react-intl
• Each component contains its own styles passed by styled-component library, so there is no need to import any additional styles

How to use

Each component is installed separately. If you want to use one of them you have to use DSProvider first.

DSProvider is located in @synerise/ds-core package.

‍

DSProvider serves the functions of:

- ThemeProvider (https://styled-components.com/docs/advanced#theming)

- IntlProvider (https://formatjs.io/docs/react-intl/components#intlprovider)

It provides a theme with all variables, colors and so on, which are required for proper working of all components, and passes the configuration of internationalization. DSProvider is required by all components.

Installation

Before the component installation, you must add react-intl, styled-components and antd packages.

‍

• For yarn

yarn add react-intl styled-components antd@4.7.0

‍

• For npm

npm install react-intl styled-components antd@4.7.0 --save

‍

And then, you can install a component (example with the Button component):

‍

• For yarn

yarn add @synerise/ds-core @synerise/ds-button

‍

• For npm

npm install @synerise/ds-core @synerise/ds-button —-save

‍

Usage

import { DSProvider } from "@synerise/ds-core";
import Button from "@synerise/ds-button";
<DSProvider>
  <Button>Click me!</Button>
</DSProvider>

‍