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

(back to top)

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

(back to top)

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>
  );
};

(back to top)

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

(back to top)

Development

Installation

# With yarn
yarn

# With npm
npm install

Build with Rollup

# With yarn
yarn build

# With npm
npm run build

(back to top)