Amity Diana Design System for web

What is it?

This package contains a set of "ready to use" React components for our web products.

How to install it?

• From npm: npm install @amityco/diana-bot
• From yarn: yarn add @amityco/diana-bot

How to publish a new version?

In your local machine:

1. Update the latest develop branch with: git checkout develop && git pull
2. Release by running: npm run release

How to use it?

Diana Provider

import 'antd/dist/antd.css'; // dont forget this part!

import React from 'react';
import ReactDOM from 'react-dom';

import { DianaProvider } from '@amityco/diana-bot';

import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <DianaProvider>
      <App />
    </DianaProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Customisation

Theming

The theme interface is available when importing import { Theme } from '@amityco/diana-bot'. You can pass any partial theme object matching this interface to the Ui-Kit provider to customise the look and feel of our components:

const theme = {
  palette: {
    primary: "#ff0000",
  },
}

// ...

<DianaProvider theme={theme}>{...}</DianaProvider>

Internationalisation

We support english out of the box, but you can also add your own language (as for now we only support LTR languages).

const languages = {
  th: {
    i18nkey: 'hello world',
  },
}

// ...

<DianaProvider languages={languages} locale="th">{...}</DianaProvider>

Debugging locally

1. In your application folder: npm install @amityco/diana-bot if not already done
2. In your diana-bot local folder: npm link
3. In your application folder: npm link @amityco/diana-bot. it will replace files from 2. with folder from 1.
4. In a separate terminal, go to diana-bot local folder + npm watch to start dev mode
5. In your application terminal, you can start the watch mode as well and start coding!

After debugging/coding, do:

1. In your application folder: npm unlink @amityco/diana-bot to remove reference to local folder
2. On Github: make a PR and/or publish new version of @amityco/diana-bot on npm
3. In your application folder: install the new version of @amityco/diana-bot with npm i -s @amityco/diana-bot@latest
4. In your application folder: commit package.json and package-lock!