Teko Help Center

A Javascript Library for integrating Guideline in Teko Help Center to Admin Web Application.

Table of Contents

• Demo
• Installation
• Usage
• API
• Development

Demo

https://design-help-center.dev.teko.vn

Installation

# With yarn
yarn add teko-help-center

# With npm
npm install teko-help-center

Install Antd if you have not already

# With yarn
yarn add antd

# With npm
npm install antd

Usage

Import stylesheets manually:

// Import antd stylesheets if you haven't already
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

// Import teko-help-center stylesheets
import 'teko-help-center/dist/esm/index.css';

Init TekoHelpCenter before using its components

import TekoHelpCenter from "teko-help-center";

const App = () => {
  useEffect(() => {
    const initTekoHelpCenter = async () => {
      // domain: HELP_CENTER_DOMAIN, example:
      await TekoHelpCenter.init({
        domain: "https://admin-help-center.dev.teko.vn",
      });
    };

    initTekoHelpCenter();
  }, []);

  return (
    ...
  )
}

Include Teko Help Center's components directly into your component using import

import { Guide } from 'teko-help-center';

const Home: React.FC = () => {
  return (
    <AppContainer title={t('WelcomeText')}>
      <Guide
        serviceCode="staff-bff"
        pageCode="products"
        userGuideCode="create-product"
        popupProps={{
          title: 'Default Popup Guide',
        }}
        type="popup"
      />

      <Guide
        serviceCode="staff-bff"
        pageCode="products"
        userGuideCode="create-product"
        popoverProps={{
          title: 'Popover Guide',
          trigger: 'click',
        }}
        type="popover"
      />
    </AppContainer>
  );
};

API

Function init()

TekoHelpCenter.init({
  domain,
  language,
});

| name | mandatory | description | type | default | | -------- | :-------: | ------------------------------------------------------------------------------------------------- | ------------ | ------- | | domain | x | Domain of Help Center Admin | string | | | language | | Display language of SDK. Will support language of guide post from Help Center Admin in the future | "vi" or "en" | vi |

Component Guide's Props

<Guide />

| name | mandatory | description | type | default | | ------------- | :-------: | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- | --------------------------------------- | | serviceCode | x | keyMapping will be constructed by concatenating serviceCode, pageCode, and userGuideCode | string | | pageCode | | keyMapping will be constructed by concatenating serviceCode, pageCode, and userGuideCode | string | | userGuideCode | x | keyMapping will be constructed by concatenating serviceCode, pageCode, and userGuideCode | string | | type | | type of Guide component, it could be popup, popover, default | string | "default" | | popupProps | | props of Popup Guide component | AntdModalProps | - | | popoverProps | | props of Popover Guide component | AntdPopoverProps | - | | renderButton | | override Button trigger popup, popover | ReactNode | <QuestionOutlined /> (Antd Component) | | className | | | string | - |

Note:

• keyMapping need to be discussed by Content Writers (PO, CS Team, ...) and Developers to determine which guide will be displayed
• keyMapping will be constructed by concatenating serviceCode, pageCode, and userGuideCode:
  • Without pageCode: <serviceCode>:<userGuideCode>. Example: staff-bff:order-management
  • With pageCode: <serviceCode>:<pageCode>:<userGuideCode>. Example: staff-bff:products:create-product
• type need to be discussed by Content Writers (PO, CS Team, ...) and Developers to determine which type of guide (popup, popover, default) will be displayed

Development

Installation

# With yarn
yarn

# With npm
npm install

Build with Rollup

# With yarn
yarn build

# With npm
npm run build