me-help

Help system for MethodExists apps.

Usage

<HelpWrapper> requires help namespace and help table to operate. <HelpWrapperReadOnly> could be used as is without model.

Setting up

Create help table with the schema as in '/abt/schema/help' mock in demo/src/apiService.js file.

Provide API Service into module using init method:

import { init as initHelp } from '@methodexists/me-help';

// ...

initHelp({
  apiService: APIService,
});

Register help model in the app:

import { model as helpModel } from '@methodexists/me-help';

// ...

app.model(helpModel);

Using backend-powered Help

Wrap text or component into <HelpWrapper> and provide required id prop:

import HelpWrapper from '@methodexists/me-help';

// ...

<HelpWrapper id="help-id-1">
  Wrapped text or component
</HelpWrapper>

It will show help topic stored by 'help-id-1' id in the help table. Admins may create and edit that topic. Other users may see it only if it has content.

Using readonly Help

Wrap text or component into <HelpWrapperReadOnly> and provide optional body and videoUrl props:

import { HelpWrapperReadOnly } from '@methodexists/me-help';

// ...

<HelpWrapperReadOnly body="Help text" videoUrl="http://...">
  Wrapped text or component
</HelpWrapperReadOnly>

HelpWrapperReadOnly acts as HelpWrapper for non-admin users. If both body and videoUrl are undefined then nothing will be rendered.

API

<HelpWrapper />

| Prop | Type | Description | --------------- | ------------------- | ----------- | * id | string | ID to access help topic from help table | isAdminSelector | func(state) => bool | Receives state as argument and returns true or false. By default returns true if auth.profile.groups[] includes 'Admins' | buttonClassName | string | Custom class for ? button

<HelpWrapperReadOnly />

| Prop | Type | Description | -------- | ------ | ----------- | body | string | Text to show in the popup | videoUrl | string | Video to show in the popup

Contributing

See CONTRIBUTING.md for how to develop a component.