Awesome Dashboard

It's built for using on Mobagel 8ndpoint's project. We wrapped ant design's component or built some component for common scenery case. To make our develop effieciency.

Installation

• Install plugin

yarn add awesome-dashboard
// or with npm
npm install awesome-dashboard

Usage

For example to implement NotificationBar component.

import { NotificationBar } from 'awesome-dashboard';

...
        <NotificationBar
          styles={customStyle}
          message={formatMessage({
            id: 'common.message.upgrade',
            defaultMessage: `Your trial plan has expired. Please upgrade to an advanced plan to continue using 8ndpoint's AI services`,
          })}
          cancelButtonLabel={formatMessage({
            id: 'common.action.learn',
            defaultMessage: 'Learn more',
          })}
          cancelButtonProp={{
            href: 'https://www.8ndpoint.com/restock#pricing-plan',
            target: '_blank',
          }}
          confirmButtonLabel={formatMessage({
            id: 'common.action.upgrade',
            defaultMessage: 'Upgrade',
          })}
          confirmButtonProp={{ href: 'https://www.8ndpoint.com/contact', target: '_blank' }}
          onCloseBanner={handleCloseNotify}
        />
...

You can open Storybook to see more components you can use.

How to Develop

We advice you develop component on storybook. Because it can make our component's status individual. And you can demo component on storybook.

Start local environment

yarn

// start storybook
yarn storybook

Install lang

If you need to build component working with i18n.

• Add .env file fill airtable key

# AirTable parameters, plz check these in airtable doc
AIRTABLE_KEY=
AIRTABLE_I18N_BASE_COMMON=
AIRTABLE_I18N_TABLE_COMMON=
AIRTABLE_I18N_VIEW_COMMON=

• Install lang

// download lang.json
yarn i18n:fetch

Write unit test and storybook sample

Don't forget to update component sample on storybook. It can make next developer who can easily realize how to use component.

And update unit test to check component render or interactive case.

Deploy step

We have already integrated github action. You just need create version tag on github. And it will automatically build and deploy on npm.

You can see .github/workflow/publish.yml. It's CI/CD setting.

• if you still need to deploy from your local

yarn build

// Update package.json version
npm version [major | minor | patch]
// major 0.0.0 -> 1.0.0
// minor 0.0.0 -> 0.1.0
// patch 0.0.0 -> 0.0.1

npm publish

Storybook

You can see component's props on storybook or you can open component's type file to see what prop you can pass.

Link: Storybook