skbkontur/react-ui-tour

Name: react-ui-tour

Owner: Kontur

Description: Tours system for retail-ui

Created: 2018-02-08 08:43:20.0

Updated: 2018-02-08 08:44:15.0

Pushed: 2018-03-27 05:50:40.0

Homepage: null

Size: 1030

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

ReactUI tours library

Demo

Documentation

Basic usage:

Place TourProvider at the root of your app:

rProvider predicate={id => true}
          onTourShown={id => makeSmt()}>
ourApp />
urProvider>

Then, anywhere inside the TourProvider add a Tour with some steps:

r id='My Tour' >
ooltipStep
target={() => document.getElementById('id-1')}
positions={['bottom right', 'right bottom']}
header='Step 1'
content={(
 <div>Hi, there!</div>
)}
onOpen={() => console.log('Step was opened!')}

ooltipStep
target={() => document.getElementById('id-2')}
positions={['top left', 'top-right']}
header='Step 2'
content={(
 <div>Hi, there again!</div>
)}

ur>

Use group feature to invoke common callbacks (onAfter, onBefore) for all group, just pass group property as unique identifier for group:

r id='My Tour' >
ooltipStep
group="group1"
target={() => document.getElementById('id-1')}
positions={['bottom right', 'right bottom']}
header='Step 1'
content={(
 <div>Hi, there!</div>
)}
onBefore={() => /*some code*/}

ooltipStep
group="group1"
target={() => document.getElementById('id-2')}
positions={['top left', 'top-right']}
header='Step 2'
content={(
 <div>Hi, there again!</div>
)}
onAfter={() => /*some code*/}

ur>

Also you can use Tour and Tooltip as separate components without provider

rComponent onClose={() => console.log('Tour was closed!')}>
ooltipStep
target={() => document.getElementById('id-1')}
positions={['bottom right', 'right bottom']}
header='Step 1'
content={(
 <div>Hi, there!</div>
)}
     
urComponent>

sx
ltip
rgetGetter={() => document.getElementById('id-3')}
sitions={['right middle']}
nOptions={{ hasPin: false }}
Close={() => this.setState({ tooltipOpened: false })}

ooltip.Container>
<Tooltip.Header>Tooltip</Tooltip.Header>
<Tooltip.Body>
  <div>Simple tooltip</div>
</Tooltip.Body>
Tooltip.Container>
oltip>

Api

TourProvider

A wrapper component with the following props:

rface TourProviderProps {
edicate: (id: string) => boolean; // whether to show a tour with given id
TourShown: (id: string) => void; // will be called when a tour is closed

Tour

A sequence of steps to be shown wit connection to provider Should be provided with an unique identifier. Has the following props:

rface TourProps {
: string; // a string to identify a tour
          // will be passed to `predicate` and `onTourShown` callbacks of `TourProvider`

TourComponent

A sequence of steps to be shown without connection to provider. Has the following props:

rface TourComponentProps {
ildren: React.ReactNode;
Close?: () => void;

Steps

There are some types of steps: Step, ModalStep, TooltipStep All of these take the following props:

Fallback?: boolean; // that step to be showing if only tour was closed
Before?: () => Promise<void>;
After?: () => Promise<void>;
Open?: () => void;
oup?: string;
nder?: (props: StepInternalProps) => React.ReactElement<any>

Prop render provides ability to customize whole Step. It's a function of the following props:

rface StepInternalProps {
epIndex: number;
epsCount: number;
Prev: () => void;
Next: () => void;
Close: () => void;

Step It's clear component and hasn't any view

TooltipStep It provides step with tooltip view. Method render affects only to content of tooltip

rface TooltipStepOuterProps {
rget: () => Element; // element to be pointed to
sitions: string[];
ghlightTarget?: () => Element; // element to be highlighted to
ghlight?: React.ReactElement<any>; // highlight for pointed element
fset?: number;
dth?: number;
nOptions?: PinOptions;
ntent?: React.ReactElement<any> | string;
ader?: React.ReactElement<any> | string;
oter?: (props: StepInternalProps) => React.ReactElement<any>;
nder?: (props: StepInternalProps) => React.ReactElement<any>; // that ovveride usage of content, header and footer props

ModalStep It provides step with modal view. Method render affects only to content of modal

rface ModalStepOuterProps {
dth?: number;
ntent?: React.ReactElement<any> | string;
ader?: React.ReactElement<any> | string;
oter?: (props: StepInternalProps) => React.ReactElement<any>;
nder?: (props: StepInternalProps) => React.ReactElement<any>; // that ovveride usage of content, header and footer props

Tooltip

A component provides tooltip view with the following props:

rface TooltipProps {
rgetGetter: () => Element;
sitions?: string[];
fset?: number;
Close?: () => void;
nOptions?: PinOptions;
dth?: number;

Maintain

How to build it on your local machine

• npm i
• npm start
• => localhost:8080

How to build it in production environment

• npm i --production
• npm run build

How can I write some tests

• go to folder __tests__
• create test file with name *.test.ts (tsx)
• create your test suites with describe and expect syntax
• run npm test
• enjoy :)

How can I write some stories for storybook

• create your story file in folder stories
• go to folder .storybook/config.js
• add your file
• npm run storybook

How can I contribute

• create PR or MR
• write me