• Home
  • Get started / Develop

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) and 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
  • for npm
npm install react-intl styled-components antd --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>

Troubleshooting

In case of any issues you encounter while working with the Colloid Design System, visit our Github repo for guidelines and support.

If the issue you experienced hasn't been reported yet, please create one.

Create an issue