├── .gitignore
├── .npmignore
├── README.md
├── audit-resolve.json
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── modules.js
    ├── paths.js
    ├── pnpTs.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── demo
    │   ├── accuracy.png
    │   ├── completed.png
    │   ├── consistent.png
    │   ├── correct.png
    │   ├── rules.png
    │   └── understable.png
    ├── favicon.ico
    ├── index.html
    ├── logo.png
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── person.png
    ├── robots.txt
    └── rtg-logo-white.png
├── scripts
    ├── build.js
    ├── demo.js
    ├── logo512.png
    ├── start.js
    └── test.js
├── src
    ├── demo
    │   ├── App.js
    │   ├── App.test.js
    │   ├── Pages
    │   │   ├── Horizonal
    │   │   │   ├── Horizontal.js
    │   │   │   └── Sections
    │   │   │   │   ├── Intro.js
    │   │   │   │   ├── Roentgen.js
    │   │   │   │   ├── Sources.js
    │   │   │   │   └── index.js
    │   │   ├── Vertical
    │   │   │   ├── Sections
    │   │   │   │   ├── Documentation.js
    │   │   │   │   ├── Footer.js
    │   │   │   │   ├── Header.js
    │   │   │   │   ├── Intro.js
    │   │   │   │   ├── List.js
    │   │   │   │   ├── Newsletter.js
    │   │   │   │   ├── Slider.js
    │   │   │   │   └── index.js
    │   │   │   └── Vertical.js
    │   │   └── hooks
    │   │   │   ├── useFullPageSlider.js
    │   │   │   └── useSlider.js
    │   ├── Tour
    │   │   ├── GuideTourHorizontal.js
    │   │   └── GuideTourVertical.js
    │   ├── index.css
    │   ├── index.js
    │   ├── serviceWorker.js
    │   └── style
    │   │   ├── colors.scss
    │   │   ├── components
    │   │       ├── buttons.scss
    │   │       ├── form.scss
    │   │       ├── fp-slider.scss
    │   │       ├── headings.scss
    │   │       ├── link.scss
    │   │       ├── mixins.scss
    │   │       ├── scrolls.scss
    │   │       └── slider.scss
    │   │   ├── general.scss
    │   │   ├── grid.scss
    │   │   ├── horizontal
    │   │       ├── horizontal.scss
    │   │       ├── intro.scss
    │   │       ├── roentgen.scss
    │   │       ├── rtg.scss
    │   │       └── sources.scss
    │   │   ├── main.scss
    │   │   └── vertical
    │   │       ├── documentation.scss
    │   │       ├── footer.scss
    │   │       ├── header.scss
    │   │       ├── intro.scss
    │   │       ├── list.scss
    │   │       ├── newsletter.scss
    │   │       ├── rtg.scss
    │   │       ├── slider.scss
    │   │       └── vertical.scss
    └── lib
    │   ├── components
    │       ├── Backdrop
    │       │   ├── Backdrop.js
    │       │   └── backdrop.scss
    │       ├── Badge
    │       │   ├── Badge.js
    │       │   └── badge.scss
    │       ├── CloseButton
    │       │   ├── CloseButton.js
    │       │   └── close-button.scss
    │       ├── Context
    │       │   └── Context.js
    │       ├── Control
    │       │   ├── Button.js
    │       │   ├── Control.js
    │       │   ├── Selector
    │       │   │   ├── Button.js
    │       │   │   └── Selector.js
    │       │   └── control.scss
    │       ├── Modal
    │       │   ├── Modal.js
    │       │   └── modal.scss
    │       ├── Pin
    │       │   ├── Pin.js
    │       │   └── pin.scss
    │       ├── Step
    │       │   └── Step.js
    │       ├── Tour
    │       │   ├── Tour.js
    │       │   └── tour.scss
    │       ├── hooks
    │       │   └── useTour.js
    │       └── utils
    │       │   ├── firstOf.js
    │       │   ├── getOverflowedParent.js
    │       │   ├── isMounted.js
    │       │   ├── offsetTop.js
    │       │   ├── placementToObj.js
    │       │   ├── scrollTo.js
    │       │   ├── throttle.js
    │       │   ├── toRange.js
    │       │   └── useStates.js
    │   └── index.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | build
14 | 
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | 
 4 | # testing
 5 | /coverage
 6 | 
 7 | # misc
 8 | .DS_Store
 9 | .env.local
10 | .env.development.local
11 | .env.test.local
12 | .env.production.local
13 | 
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Development folders and files
19 | public
20 | src
21 | scripts
22 | config
23 | demo
24 | CHANGELOG.md
25 | README.md
26 | UPGRADE.md
27 | .storybook


--------------------------------------------------------------------------------
/audit-resolve.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "decisions": {
  3 |     "1426|terser-webpack-plugin>serialize-javascript": {
  4 |       "decision": "fix",
  5 |       "madeAt": 1622840928280
  6 |     },
  7 |     "1548|terser-webpack-plugin>serialize-javascript": {
  8 |       "decision": "fix",
  9 |       "madeAt": 1622840928280
 10 |     },
 11 |     "1573|resolve-url-loader>adjust-sourcemap-loader>object-path": {
 12 |       "decision": "fix",
 13 |       "madeAt": 1622840975414
 14 |     },
 15 |     "1693|css-loader>icss-utils>postcss": {
 16 |       "decision": "fix",
 17 |       "madeAt": 1622841033237
 18 |     },
 19 |     "1693|css-loader>postcss": {
 20 |       "decision": "fix",
 21 |       "madeAt": 1622841033237
 22 |     },
 23 |     "1693|css-loader>postcss-modules-extract-imports>postcss": {
 24 |       "decision": "fix",
 25 |       "madeAt": 1622841033237
 26 |     },
 27 |     "1693|css-loader>postcss-modules-local-by-default>postcss": {
 28 |       "decision": "fix",
 29 |       "madeAt": 1622841033237
 30 |     },
 31 |     "1693|css-loader>postcss-modules-scope>postcss": {
 32 |       "decision": "fix",
 33 |       "madeAt": 1622841033237
 34 |     },
 35 |     "1693|css-loader>postcss-modules-values>postcss": {
 36 |       "decision": "fix",
 37 |       "madeAt": 1622841033237
 38 |     },
 39 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>css-declaration-sorter>postcss": {
 40 |       "decision": "fix",
 41 |       "madeAt": 1622841092367
 42 |     },
 43 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>cssnano-util-raw-cache>postcss": {
 44 |       "decision": "fix",
 45 |       "madeAt": 1622841092368
 46 |     },
 47 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss": {
 48 |       "decision": "fix",
 49 |       "madeAt": 1622841092368
 50 |     },
 51 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-colormin>postcss": {
 52 |       "decision": "fix",
 53 |       "madeAt": 1622841092368
 54 |     },
 55 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-convert-values>postcss": {
 56 |       "decision": "fix",
 57 |       "madeAt": 1622841092368
 58 |     },
 59 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-discard-comments>postcss": {
 60 |       "decision": "fix",
 61 |       "madeAt": 1622841092368
 62 |     },
 63 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-discard-duplicates>postcss": {
 64 |       "decision": "fix",
 65 |       "madeAt": 1622841092368
 66 |     },
 67 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-discard-empty>postcss": {
 68 |       "decision": "fix",
 69 |       "madeAt": 1622841092368
 70 |     },
 71 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-discard-overridden>postcss": {
 72 |       "decision": "fix",
 73 |       "madeAt": 1622841092368
 74 |     },
 75 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-merge-longhand>postcss": {
 76 |       "decision": "fix",
 77 |       "madeAt": 1622841092368
 78 |     },
 79 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-merge-longhand>stylehacks>postcss": {
 80 |       "decision": "fix",
 81 |       "madeAt": 1622841092368
 82 |     },
 83 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-merge-rules>postcss": {
 84 |       "decision": "fix",
 85 |       "madeAt": 1622841092368
 86 |     },
 87 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-minify-font-values>postcss": {
 88 |       "decision": "fix",
 89 |       "madeAt": 1622841092368
 90 |     },
 91 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-minify-gradients>postcss": {
 92 |       "decision": "fix",
 93 |       "madeAt": 1622841092368
 94 |     },
 95 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-minify-params>postcss": {
 96 |       "decision": "fix",
 97 |       "madeAt": 1622841092368
 98 |     },
 99 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-minify-selectors>postcss": {
100 |       "decision": "fix",
101 |       "madeAt": 1622841092368
102 |     },
103 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-charset>postcss": {
104 |       "decision": "fix",
105 |       "madeAt": 1622841092368
106 |     },
107 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-display-values>postcss": {
108 |       "decision": "fix",
109 |       "madeAt": 1622841092368
110 |     },
111 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-positions>postcss": {
112 |       "decision": "fix",
113 |       "madeAt": 1622841092368
114 |     },
115 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-repeat-style>postcss": {
116 |       "decision": "fix",
117 |       "madeAt": 1622841092368
118 |     },
119 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-string>postcss": {
120 |       "decision": "fix",
121 |       "madeAt": 1622841092368
122 |     },
123 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-timing-functions>postcss": {
124 |       "decision": "fix",
125 |       "madeAt": 1622841092368
126 |     },
127 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-unicode>postcss": {
128 |       "decision": "fix",
129 |       "madeAt": 1622841092368
130 |     },
131 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-url>postcss": {
132 |       "decision": "fix",
133 |       "madeAt": 1622841092368
134 |     },
135 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-normalize-whitespace>postcss": {
136 |       "decision": "fix",
137 |       "madeAt": 1622841092368
138 |     },
139 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-ordered-values>postcss": {
140 |       "decision": "fix",
141 |       "madeAt": 1622841092368
142 |     },
143 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-reduce-initial>postcss": {
144 |       "decision": "fix",
145 |       "madeAt": 1622841092368
146 |     },
147 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-reduce-transforms>postcss": {
148 |       "decision": "fix",
149 |       "madeAt": 1622841092368
150 |     },
151 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-svgo>postcss": {
152 |       "decision": "fix",
153 |       "madeAt": 1622841092368
154 |     },
155 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-unique-selectors>postcss": {
156 |       "decision": "fix",
157 |       "madeAt": 1622841092368
158 |     },
159 |     "1693|optimize-css-assets-webpack-plugin>cssnano>postcss": {
160 |       "decision": "fix",
161 |       "madeAt": 1622841092368
162 |     },
163 |     "1693|optimize-css-assets-webpack-plugin>cssnano>cssnano-preset-default>postcss-calc>postcss": {
164 |       "decision": "fix",
165 |       "madeAt": 1622841092368
166 |     },
167 |     "1693|postcss-flexbugs-fixes>postcss": {
168 |       "decision": "fix",
169 |       "madeAt": 1622841152030
170 |     },
171 |     "1693|postcss-loader>postcss": {
172 |       "decision": "fix",
173 |       "madeAt": 1622841197857
174 |     },
175 |     "1693|postcss-normalize>postcss": {
176 |       "decision": "fix",
177 |       "madeAt": 1622841237554
178 |     },
179 |     "1693|postcss-normalize>postcss-browser-comments>postcss": {
180 |       "decision": "fix",
181 |       "madeAt": 1622841237554
182 |     },
183 |     "1693|postcss-safe-parser>postcss": {
184 |       "decision": "fix",
185 |       "madeAt": 1622841287168
186 |     },
187 |     "1748|jest>jest-cli>@jest/core>@jest/reporters>jest-runtime>jest-config>jest-environment-jsdom>jsdom>ws": {
188 |       "decision": "fix",
189 |       "madeAt": 1622841661773
190 |     },
191 |     "1748|jest>jest-cli>@jest/core>jest-runner>jest-jasmine2>jest-runtime>jest-config>jest-environment-jsdom>jsdom>ws": {
192 |       "decision": "fix",
193 |       "madeAt": 1622841661773
194 |     },
195 |     "1748|jest>jest-cli>@jest/core>jest-runner>jest-runtime>jest-config>jest-environment-jsdom>jsdom>ws": {
196 |       "decision": "fix",
197 |       "madeAt": 1622841661773
198 |     },
199 |     "1748|jest>jest-cli>@jest/core>jest-runtime>jest-config>jest-environment-jsdom>jsdom>ws": {
200 |       "decision": "fix",
201 |       "madeAt": 1622841661773
202 |     },
203 |     "1748|jest>jest-cli>@jest/core>jest-runner>jest-config>jest-environment-jsdom>jsdom>ws": {
204 |       "decision": "fix",
205 |       "madeAt": 1622841661773
206 |     },
207 |     "1748|jest>jest-cli>@jest/core>jest-config>jest-environment-jsdom>jsdom>ws": {
208 |       "decision": "fix",
209 |       "madeAt": 1622841661773
210 |     },
211 |     "1748|jest>jest-cli>jest-config>jest-environment-jsdom>jsdom>ws": {
212 |       "decision": "fix",
213 |       "madeAt": 1622841661773
214 |     },
215 |     "1179|eslint-loader>loader-fs-cache>find-cache-dir>mkdirp>minimist": {
216 |       "decision": "fix",
217 |       "madeAt": 1622842211203
218 |     }
219 |   },
220 |   "rules": {},
221 |   "version": 1
222 | }


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFilename}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | const chalk = require('react-dev-utils/chalk');
  7 | const resolve = require('resolve');
  8 | 
  9 | /**
 10 |  * Get additional module paths based on the baseUrl of a compilerOptions object.
 11 |  *
 12 |  * @param {Object} options
 13 |  */
 14 | function getAdditionalModulePaths(options = {}) {
 15 |   const baseUrl = options.baseUrl;
 16 | 
 17 |   // We need to explicitly check for null and undefined (and not a falsy value) because
 18 |   // TypeScript treats an empty string as `.`.
 19 |   if (baseUrl == null) {
 20 |     // If there's no baseUrl set we respect NODE_PATH
 21 |     // Note that NODE_PATH is deprecated and will be removed
 22 |     // in the next major release of create-react-app.
 23 | 
 24 |     const nodePath = process.env.NODE_PATH || '';
 25 |     return nodePath.split(path.delimiter).filter(Boolean);
 26 |   }
 27 | 
 28 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 29 | 
 30 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
 31 |   // the default behavior.
 32 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
 33 |     return null;
 34 |   }
 35 | 
 36 |   // Allow the user set the `baseUrl` to `appSrc`.
 37 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
 38 |     return [paths.appSrc];
 39 |   }
 40 | 
 41 |   // If the path is equal to the root directory we ignore it here.
 42 |   // We don't want to allow importing from the root directly as source files are
 43 |   // not transpiled outside of `src`. We do allow importing them with the
 44 |   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
 45 |   // an alias.
 46 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 47 |     return null;
 48 |   }
 49 | 
 50 |   // Otherwise, throw an error.
 51 |   throw new Error(
 52 |     chalk.red.bold(
 53 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
 54 |         ' Create React App does not support other values at this time.'
 55 |     )
 56 |   );
 57 | }
 58 | 
 59 | /**
 60 |  * Get webpack aliases based on the baseUrl of a compilerOptions object.
 61 |  *
 62 |  * @param {*} options
 63 |  */
 64 | function getWebpackAliases(options = {}) {
 65 |   const baseUrl = options.baseUrl;
 66 | 
 67 |   if (!baseUrl) {
 68 |     return {};
 69 |   }
 70 | 
 71 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 72 | 
 73 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 74 |     return {
 75 |       src: paths.appSrc,
 76 |     };
 77 |   }
 78 | }
 79 | 
 80 | /**
 81 |  * Get jest aliases based on the baseUrl of a compilerOptions object.
 82 |  *
 83 |  * @param {*} options
 84 |  */
 85 | function getJestAliases(options = {}) {
 86 |   const baseUrl = options.baseUrl;
 87 | 
 88 |   if (!baseUrl) {
 89 |     return {};
 90 |   }
 91 | 
 92 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 93 | 
 94 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 95 |     return {
 96 |       'src/(.*)$': '<rootDir>/src/$1',
 97 |     };
 98 |   }
 99 | }
100 | 
101 | function getModules() {
102 |   // Check if TypeScript is setup
103 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
104 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
105 | 
106 |   if (hasTsConfig && hasJsConfig) {
107 |     throw new Error(
108 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109 |     );
110 |   }
111 | 
112 |   let config;
113 | 
114 |   // If there's a tsconfig.json we assume it's a
115 |   // TypeScript project and set up the config
116 |   // based on tsconfig.json
117 |   if (hasTsConfig) {
118 |     const ts = require(resolve.sync('typescript', {
119 |       basedir: paths.appNodeModules,
120 |     }));
121 |     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122 |     // Otherwise we'll check if there is jsconfig.json
123 |     // for non TS projects.
124 |   } else if (hasJsConfig) {
125 |     config = require(paths.appJsConfig);
126 |   }
127 | 
128 |   config = config || {};
129 |   const options = config.compilerOptions || {};
130 | 
131 |   const additionalModulePaths = getAdditionalModulePaths(options);
132 | 
133 |   return {
134 |     additionalModulePaths: additionalModulePaths,
135 |     webpackAliases: getWebpackAliases(options),
136 |     jestAliases: getJestAliases(options),
137 |     hasTsConfig,
138 |   };
139 | }
140 | 
141 | module.exports = getModules();
142 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const path = require('path');
  4 | const fs = require('fs');
  5 | const url = require('url');
  6 | 
  7 | // Make sure any symlinks in the project folder are resolved:
  8 | // https://github.com/facebook/create-react-app/issues/637
  9 | const appDirectory = fs.realpathSync(process.cwd());
 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 11 | 
 12 | const envPublicUrl = process.env.PUBLIC_URL;
 13 | 
 14 | function ensureSlash(inputPath, needsSlash) {
 15 |   const hasSlash = inputPath.endsWith('/');
 16 |   if (hasSlash && !needsSlash) {
 17 |     return inputPath.substr(0, inputPath.length - 1);
 18 |   } else if (!hasSlash && needsSlash) {
 19 |     return `${inputPath}/`;
 20 |   } else {
 21 |     return inputPath;
 22 |   }
 23 | }
 24 | 
 25 | const getPublicUrl = appPackageJson =>
 26 |   envPublicUrl || require(appPackageJson).homepage;
 27 | 
 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 29 | // "public path" at which the app is served.
 30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 32 | // We can't use a relative path in HTML because we don't want to load something
 33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 34 | function getServedPath(appPackageJson) {
 35 |   const publicUrl = getPublicUrl(appPackageJson);
 36 |   const servedUrl =
 37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
 38 |   return ensureSlash(servedUrl, true);
 39 | }
 40 | 
 41 | const moduleFileExtensions = [
 42 |   'web.mjs',
 43 |   'mjs',
 44 |   'web.js',
 45 |   'js',
 46 |   'web.ts',
 47 |   'ts',
 48 |   'web.tsx',
 49 |   'tsx',
 50 |   'json',
 51 |   'web.jsx',
 52 |   'jsx',
 53 | ];
 54 | 
 55 | // Resolve file paths in the same order as webpack
 56 | const resolveModule = (resolveFn, filePath) => {
 57 |   const extension = moduleFileExtensions.find(extension =>
 58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
 59 |   );
 60 | 
 61 |   if (extension) {
 62 |     return resolveFn(`${filePath}.${extension}`);
 63 |   }
 64 | 
 65 |   return resolveFn(`${filePath}.js`);
 66 | };
 67 | 
 68 | // config after eject: we're in ./config/
 69 | module.exports = {
 70 |   dotenv: resolveApp('.env'),
 71 |   appPath: resolveApp('.'),
 72 |   appBuild: resolveApp('build'),
 73 |   appDemoBuild: resolveApp('demo'), // CRL: Added for demo purposes
 74 |   appPublic: resolveApp('public'),
 75 |   appHtml: resolveApp('public/index.html'),
 76 |   appIndexJs: resolveModule(resolveApp, 'src/demo/index'), // CRL: Updated for demo purposes
 77 |   appPackageJson: resolveApp('package.json'),
 78 |   appSrc: resolveApp('src'),
 79 |   appTsConfig: resolveApp('tsconfig.json'),
 80 |   appJsConfig: resolveApp('jsconfig.json'),
 81 |   yarnLockFile: resolveApp('yarn.lock'),
 82 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
 83 |   proxySetup: resolveApp('src/setupProxy.js'),
 84 |   appNodeModules: resolveApp('node_modules'),
 85 |   publicUrl: getPublicUrl(resolveApp('package.json')),
 86 |   servedPath: getServedPath(resolveApp('package.json')),
 87 | 
 88 |   // CRL: New paths for demo build
 89 |   appDemoIndexJs: resolveModule(resolveApp, 'src/demo/index'),
 90 |   appDemoSrc: resolveApp('src/demo'),
 91 | 
 92 |   // CRL: New paths for library
 93 |   appLibIndexJs: resolveModule(resolveApp, 'src/lib/index'),
 94 |   appLibSrc: resolveApp('src/lib'),
 95 | };
 96 | 
 97 | 
 98 | 
 99 | module.exports.moduleFileExtensions = moduleFileExtensions;
100 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware('/'));
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-rtg",
  3 |   "description": "React Tour Guide - RTG - interactive tour through react app ",
  4 |   "homepage": "https://robert8888.github.io/rtg-demo",
  5 |   "repository": {
  6 |     "type": "git",
  7 |     "url": "https://github.com/robert8888/react-tour-guide"
  8 |   },
  9 |   "files": [
 10 |     "build/index.js",
 11 |     "build/index.css"
 12 |   ],
 13 |   "keywords": [
 14 |     "react",
 15 |     "tour guide",
 16 |     "interactive",
 17 |     "tutorial",
 18 |     "intro",
 19 |     "introduction",
 20 |     "step by step",
 21 |     "walkthrough",
 22 |     "presentation",
 23 |     "app intro",
 24 |     "product intro",
 25 |     "tooltips",
 26 |     "rtg"
 27 |   ],
 28 |   "version": "1.1.23",
 29 |   "main": "build/index.js",
 30 |   "scripts": {
 31 |     "start": "node scripts/start.js",
 32 |     "build": "node scripts/build.js",
 33 |     "demo": "node scripts/demo.js",
 34 |     "test": "node scripts/test.js"
 35 |   },
 36 |   "engines": {
 37 |     "node": ">=15"
 38 |   },
 39 |   "license": "MIT",
 40 |   "dependencies": {},
 41 |   "devDependencies": {
 42 |     "@babel/core": "7.6.0",
 43 |     "@babel/runtime": "^7.14.0",
 44 |     "@svgr/webpack": "4.3.2",
 45 |     "@typescript-eslint/eslint-plugin": "^2.34.0",
 46 |     "@typescript-eslint/parser": "^2.34.0",
 47 |     "babel-eslint": "10.0.3",
 48 |     "babel-jest": "^24.9.0",
 49 |     "babel-loader": "8.0.6",
 50 |     "babel-plugin-named-asset-import": "^0.3.7",
 51 |     "babel-preset-react-app": "^9.1.2",
 52 |     "camelcase": "^5.2.0",
 53 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 54 |     "css-loader": "^3.6.0",
 55 |     "dotenv": "6.2.0",
 56 |     "dotenv-expand": "5.1.0",
 57 |     "eslint": "^6.8.0",
 58 |     "eslint-config-react-app": "^5.2.1",
 59 |     "eslint-loader": "3.0.2",
 60 |     "eslint-plugin-flowtype": "3.13.0",
 61 |     "eslint-plugin-import": "2.18.2",
 62 |     "eslint-plugin-jsx-a11y": "6.2.3",
 63 |     "eslint-plugin-react": "7.14.3",
 64 |     "eslint-plugin-react-hooks": "^1.6.1",
 65 |     "file-loader": "3.0.1",
 66 |     "fs-extra": "7.0.1",
 67 |     "html-webpack-plugin": "4.0.0-beta.5",
 68 |     "identity-obj-proxy": "3.0.0",
 69 |     "is-wsl": "^1.1.0",
 70 |     "jest": "^27.0.4",
 71 |     "jest-environment-jsdom-fourteen": "0.1.0",
 72 |     "jest-resolve": "24.9.0",
 73 |     "jest-watch-typeahead": "0.4.0",
 74 |     "mini-css-extract-plugin": "0.8.0",
 75 |     "node-sass": "^4.14.1",
 76 |     "optimize-css-assets-webpack-plugin": "^6.0.0",
 77 |     "pnp-webpack-plugin": "1.5.0",
 78 |     "postcss": "^8.3.0",
 79 |     "postcss-flexbugs-fixes": "^5.0.2",
 80 |     "postcss-import": "^14.0.2",
 81 |     "postcss-loader": "^4.3.0",
 82 |     "postcss-normalize": "^10.0.0",
 83 |     "postcss-preset-env": "^6.7.0",
 84 |     "postcss-safe-parser": "^5.0.2",
 85 |     "prop-types": "^15.7.2",
 86 |     "react": "^17.0.2",
 87 |     "react-app-polyfill": "^1.0.6",
 88 |     "react-dev-utils": "^9.1.0",
 89 |     "react-dom": "^16.14.0",
 90 |     "react-router": "^5.2.0",
 91 |     "react-router-dom": "^5.2.0",
 92 |     "resolve": "1.12.0",
 93 |     "resolve-url-loader": "^4.0.0",
 94 |     "sass-loader": "^10.2.0",
 95 |     "semver": "6.3.0",
 96 |     "style-loader": "1.0.0",
 97 |     "terser-webpack-plugin": "^4.2.3",
 98 |     "ts-pnp": "1.1.4",
 99 |     "url-loader": "2.1.0",
100 |     "webpack": "^4.46.0",
101 |     "webpack-dev-server": "^3.11.2",
102 |     "webpack-manifest-plugin": "2.1.1",
103 |     "workbox-webpack-plugin": "4.3.1"
104 |   },
105 |   "eslintConfig": {
106 |     "extends": "react-app"
107 |   },
108 |   "browserslist": {
109 |     "production": [
110 |       ">0.2%",
111 |       "not dead",
112 |       "not op_mini all"
113 |     ],
114 |     "development": [
115 |       "last 1 chrome version",
116 |       "last 1 firefox version",
117 |       "last 1 safari version"
118 |     ]
119 |   },
120 |   "jest": {
121 |     "roots": [
122 |       "<rootDir>/src"
123 |     ],
124 |     "collectCoverageFrom": [
125 |       "src/**/*.{js,jsx,ts,tsx}",
126 |       "!src/**/*.d.ts"
127 |     ],
128 |     "setupFiles": [
129 |       "react-app-polyfill/jsdom"
130 |     ],
131 |     "setupFilesAfterEnv": [],
132 |     "testMatch": [
133 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
134 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
135 |     ],
136 |     "testEnvironment": "jest-environment-jsdom-fourteen",
137 |     "transform": {
138 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
139 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
140 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
141 |     },
142 |     "transformIgnorePatterns": [
143 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
144 |       "^.+\\.module\\.(css|sass|scss)$"
145 |     ],
146 |     "modulePaths": [],
147 |     "moduleNameMapper": {
148 |       "^react-native$": "react-native-web",
149 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
150 |     },
151 |     "moduleFileExtensions": [
152 |       "web.js",
153 |       "js",
154 |       "web.ts",
155 |       "ts",
156 |       "web.tsx",
157 |       "tsx",
158 |       "json",
159 |       "web.jsx",
160 |       "jsx",
161 |       "node"
162 |     ],
163 |     "watchPlugins": [
164 |       "jest-watch-typeahead/filename",
165 |       "jest-watch-typeahead/testname"
166 |     ]
167 |   },
168 |   "babel": {
169 |     "presets": [
170 |       "react-app"
171 |     ]
172 |   }
173 | }
174 | 


--------------------------------------------------------------------------------
/public/demo/accuracy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/accuracy.png


--------------------------------------------------------------------------------
/public/demo/completed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/completed.png


--------------------------------------------------------------------------------
/public/demo/consistent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/consistent.png


--------------------------------------------------------------------------------
/public/demo/correct.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/correct.png


--------------------------------------------------------------------------------
/public/demo/rules.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/rules.png


--------------------------------------------------------------------------------
/public/demo/understable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/demo/understable.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/logo.png


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React Library",
 3 |   "name": "Create React Library Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/person.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/person.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/public/rtg-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/public/rtg-logo-white.png


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | // const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | // const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | // const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appLibIndexJs])) { // CRL: Updated with library index file
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     // copyPublicFolder();  // CRL: No need to copy PublicFolder, it's a library after all ;)
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       // CRL: No need to print HostingInstructions, it's a library after all ;)
 97 |       // const appPackage = require(paths.appPackageJson);
 98 |       // const publicUrl = paths.publicUrl;
 99 |       // const publicPath = config.output.publicPath;
100 |       // const buildFolder = path.relative(process.cwd(), paths.appBuild);
101 |       // printHostingInstructions(
102 |       //   appPackage,
103 |       //   publicUrl,
104 |       //   publicPath,
105 |       //   buildFolder,
106 |       //   useYarn
107 |       // );
108 |     },
109 |     err => {
110 |       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
111 |       if (tscCompileOnError) {
112 |         console.log(chalk.yellow(
113 |           'Compiled with the following type errors (you may want to check these before deploying your app):\n'
114 |         ));
115 |         printBuildError(err);
116 |       } else {
117 |         console.log(chalk.red('Failed to compile.\n'));
118 |         printBuildError(err);
119 |         process.exit(1);
120 |       }
121 |     }
122 |   )
123 |   .catch(err => {
124 |     if (err && err.message) {
125 |       console.log(err.message);
126 |     }
127 |     process.exit(1);
128 |   });
129 | 
130 | // Create the production build and print the deployment instructions.
131 | function build(previousFileSizes) {
132 |   // We used to support resolving modules according to `NODE_PATH`.
133 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
134 |   // This lets you use absolute paths in imports inside large monorepos:
135 |   if (process.env.NODE_PATH) {
136 |     console.log(
137 |       chalk.yellow(
138 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
139 |       )
140 |     );
141 |     console.log();
142 |   }
143 | 
144 |   console.log('Creating an optimized production build...');
145 | 
146 |   const compiler = webpack(config);
147 |   return new Promise((resolve, reject) => {
148 |     compiler.run((err, stats) => {
149 |       let messages;
150 |       if (err) {
151 |         if (!err.message) {
152 |           return reject(err);
153 |         }
154 |         messages = formatWebpackMessages({
155 |           errors: [err.message],
156 |           warnings: [],
157 |         });
158 |       } else {
159 |         messages = formatWebpackMessages(
160 |           stats.toJson({ all: false, warnings: true, errors: true })
161 |         );
162 |       }
163 |       if (messages.errors.length) {
164 |         // Only keep the first error. Others are often indicative
165 |         // of the same problem, but confuse the reader with noise.
166 |         if (messages.errors.length > 1) {
167 |           messages.errors.length = 1;
168 |         }
169 |         return reject(new Error(messages.errors.join('\n\n')));
170 |       }
171 |       if (
172 |         process.env.CI &&
173 |         (typeof process.env.CI !== 'string' ||
174 |           process.env.CI.toLowerCase() !== 'false') &&
175 |         messages.warnings.length
176 |       ) {
177 |         console.log(
178 |           chalk.yellow(
179 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
180 |               'Most CI servers set it automatically.\n'
181 |           )
182 |         );
183 |         return reject(new Error(messages.warnings.join('\n\n')));
184 |       }
185 | 
186 |       return resolve({
187 |         stats,
188 |         previousFileSizes,
189 |         warnings: messages.warnings,
190 |       });
191 |     });
192 |   });
193 | }
194 | 
195 | // function copyPublicFolder() {
196 | //   fs.copySync(paths.appPublic, paths.appBuild, {
197 | //     dereference: true,
198 | //     filter: file => file !== paths.appHtml,
199 | //   });
200 | // }
201 | 


--------------------------------------------------------------------------------
/scripts/demo.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appDemoIndexJs])) { // CRL: Updated with demo index file
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('demo'); // CRL: Use demo environment
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appDemoBuild); // CRL: Updated with demo build path
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appDemoBuild); // CRL: Updated with demo build path
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appDemoBuild, // CRL: Updated with demo build path
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appDemoBuild); // CRL: Updated with demo build path
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
110 |       if (tscCompileOnError) {
111 |         console.log(chalk.yellow(
112 |           'Compiled with the following type errors (you may want to check these before deploying your app):\n'
113 |         ));
114 |         printBuildError(err);
115 |       } else {
116 |         console.log(chalk.red('Failed to compile.\n'));
117 |         printBuildError(err);
118 |         process.exit(1);
119 |       }
120 |     }
121 |   )
122 |   .catch(err => {
123 |     if (err && err.message) {
124 |       console.log(err.message);
125 |     }
126 |     process.exit(1);
127 |   });
128 | 
129 | // Create the production build and print the deployment instructions.
130 | function build(previousFileSizes) {
131 |   // We used to support resolving modules according to `NODE_PATH`.
132 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
133 |   // This lets you use absolute paths in imports inside large monorepos:
134 |   if (process.env.NODE_PATH) {
135 |     console.log(
136 |       chalk.yellow(
137 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
138 |       )
139 |     );
140 |     console.log();
141 |   }
142 | 
143 |   console.log('Creating a build of the demo app...'); // CRL - Updated log message
144 | 
145 |   const compiler = webpack(config);
146 |   return new Promise((resolve, reject) => {
147 |     compiler.run((err, stats) => {
148 |       let messages;
149 |       if (err) {
150 |         if (!err.message) {
151 |           return reject(err);
152 |         }
153 |         messages = formatWebpackMessages({
154 |           errors: [err.message],
155 |           warnings: [],
156 |         });
157 |       } else {
158 |         messages = formatWebpackMessages(
159 |           stats.toJson({ all: false, warnings: true, errors: true })
160 |         );
161 |       }
162 |       if (messages.errors.length) {
163 |         // Only keep the first error. Others are often indicative
164 |         // of the same problem, but confuse the reader with noise.
165 |         if (messages.errors.length > 1) {
166 |           messages.errors.length = 1;
167 |         }
168 |         return reject(new Error(messages.errors.join('\n\n')));
169 |       }
170 |       if (
171 |         process.env.CI &&
172 |         (typeof process.env.CI !== 'string' ||
173 |           process.env.CI.toLowerCase() !== 'false') &&
174 |         messages.warnings.length
175 |       ) {
176 |         console.log(
177 |           chalk.yellow(
178 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
179 |               'Most CI servers set it automatically.\n'
180 |           )
181 |         );
182 |         return reject(new Error(messages.warnings.join('\n\n')));
183 |       }
184 | 
185 |       return resolve({
186 |         stats,
187 |         previousFileSizes,
188 |         warnings: messages.warnings,
189 |       });
190 |     });
191 |   });
192 | }
193 | 
194 | function copyPublicFolder() {
195 |   fs.copySync(paths.appPublic, paths.appDemoBuild, {  // CRL: Updated with demo build path
196 |     dereference: true,
197 |     filter: file => file !== paths.appHtml,
198 |   });
199 | }
200 | 


--------------------------------------------------------------------------------
/scripts/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert8888/react-tour-guide/399944fbddab6f708bf01ef27f50cb66115d2277/scripts/logo512.png


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
 83 |     const urls = prepareUrls(protocol, HOST, port);
 84 |     const devSocket = {
 85 |       warnings: warnings =>
 86 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 87 |       errors: errors =>
 88 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 89 |     };
 90 |     // Create a webpack compiler that is configured with custom messages.
 91 |     const compiler = createCompiler({
 92 |       appName,
 93 |       config,
 94 |       devSocket,
 95 |       urls,
 96 |       useYarn,
 97 |       useTypeScript,
 98 |       tscCompileOnError,
 99 |       webpack,
100 |     });
101 |     // Load proxy config
102 |     const proxySetting = require(paths.appPackageJson).proxy;
103 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
104 |     // Serve webpack assets generated by the compiler over a web server.
105 |     const serverConfig = createDevServerConfig(
106 |       proxyConfig,
107 |       urls.lanUrlForConfig
108 |     );
109 |     const devServer = new WebpackDevServer(compiler, serverConfig);
110 |     // Launch WebpackDevServer.
111 |     devServer.listen(port, HOST, err => {
112 |       if (err) {
113 |         return console.log(err);
114 |       }
115 |       if (isInteractive) {
116 |         clearConsole();
117 |       }
118 | 
119 |       // We used to support resolving modules according to `NODE_PATH`.
120 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
121 |       // This lets you use absolute paths in imports inside large monorepos:
122 |       if (process.env.NODE_PATH) {
123 |         console.log(
124 |           chalk.yellow(
125 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
126 |           )
127 |         );
128 |         console.log();
129 |       }
130 | 
131 |       console.log(chalk.cyan('Starting the development server...\n'));
132 |       openBrowser(urls.localUrlForBrowser);
133 |     });
134 | 
135 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
136 |       process.on(sig, function() {
137 |         devServer.close();
138 |         process.exit();
139 |       });
140 |     });
141 |   })
142 |   .catch(err => {
143 |     if (err && err.message) {
144 |       console.log(err.message);
145 |     }
146 |     process.exit(1);
147 |   });
148 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1 &&
45 |   argv.indexOf('--watchAll=false') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/src/demo/App.js:
--------------------------------------------------------------------------------
 1 | import React, {useMemo} from 'react';
 2 | import GuideTourVertical from "./Tour/GuideTourVertical";
 3 | import GuideTourHorizontal from "./Tour/GuideTourHorizontal";
 4 | import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
 5 | import "./style/main.scss";
 6 | import TourContext from "../lib/components/Context/Context";
 7 | 
 8 | 
 9 | import PageVertical from "./Pages/Vertical/Vertical";
10 | import PageHorizontal from "./Pages/Horizonal/Horizontal";
11 | 
12 | const App = () => {
13 | 
14 |     const vertical = useMemo(()=>{
15 |         const bus = {}
16 |         return (
17 |             <>
18 |                 <GuideTourVertical bus={bus}/>
19 |                 <PageVertical bus={bus}/>
20 |             </>
21 |         )
22 |     }, [])
23 | 
24 |     const horizontal = useMemo(()=>{
25 |         return (
26 |             <>
27 |                 <GuideTourHorizontal />
28 |                 <PageHorizontal  />
29 |             </>
30 |         )
31 |     }, [])
32 | 
33 |     return (
34 |         <div>
35 |             <TourContext>
36 |                 <Router>
37 |                     <Switch>
38 |                         <Route path={"/horizontal"} exact component={() => horizontal}/>
39 |                         <Route path="/" component={() => vertical}/>
40 |                     </Switch>
41 |                 </Router>
42 |             </TourContext>
43 | 
44 |         </div>
45 |     );
46 | }
47 | 
48 | export default App;
49 | 


--------------------------------------------------------------------------------
/src/demo/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/demo/Pages/Horizonal/Horizontal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef, useEffect} from "react";
 2 | import {
 3 |     Intro,
 4 |     Roentgen,
 5 |     Sources
 6 | } from "./Sections";
 7 | import useFullPageSlider from "../hooks/useFullPageSlider";
 8 | import {useTour} from "../../../lib";
 9 | 
10 | 
11 | const Horizontal = () => {
12 |     const slider = useRef();
13 |     const [tour] = useTour("TourVertical")
14 | 
15 |     const [prev, next, pointerStart, update] = useFullPageSlider(slider);
16 | 
17 |     useEffect(()=>{
18 |         tour.on("afterScroll", update);
19 |     },[update, tour])
20 | 
21 |     return (
22 |         <main className={"page__horizontal"}>
23 |             <div className={"page__horizontal__slider"} >
24 |                 <div className={"c-fp-slider__controls"}>
25 |                     <button onClick={prev} className={"c-fp-slider__button c-fp-slider__button--prev"}>{"<"}</button>
26 |                     <button onClick={next} className={"c-fp-slider__button c-fp-slider__button--next"}>{">"}</button>
27 |                 </div>
28 |                 <ul className={"c-fp-slider"} ref={slider} onMouseDown={pointerStart} onTouchStart={pointerStart}>
29 |                     <li className={"c-fp-slider__slide"}><Intro/></li>
30 |                     <li className={"c-fp-slider__slide"}><Roentgen/></li>
31 |                     <li className={"c-fp-slider__slide"}><Sources/></li>
32 |                 </ul>
33 |             </div>
34 |         </main>
35 |     )
36 | }
37 | 
38 | export default Horizontal;


--------------------------------------------------------------------------------
/src/demo/Pages/Horizonal/Sections/Intro.js:
--------------------------------------------------------------------------------
 1 | import React, {useEffect} from "react";
 2 | import {useTour} from "../../../../lib";
 3 | 
 4 | 
 5 | const Intro = () => {
 6 |     let [tour] = useTour("TourVertical");
 7 | 
 8 |     useEffect(()=>{
 9 |         tour.on("close", () => console.log("onClose"));
10 |         tour.on("beforeClose", () => console.log("onBeforeClose"));
11 |         tour.on("afterClose", () => console.log("onAfterClose"));
12 | 
13 |         tour.on("beforeOpen", () => console.log("onBeforeOpen"));
14 |         tour.on("open", () => console.log("open"));
15 |         tour.on("afterOpen", () => {console.log("onAfterOpen", tour.step.index, tour.isOpen)});
16 | 
17 |         tour.on("next", (...args) => {
18 |             console.log("next", args);
19 |             console.log("tour length", tour.length)
20 |         });
21 |         tour.on("change", (...args) => console.log("change", args));
22 |         tour.on("afterScroll", () => console.log("onAfterScroll"));
23 |         tour.on("finish", () => console.log("finish"))
24 |     }, [tour])
25 | 
26 |     return (
27 |         <section className={"horizontal__section horizontal__section--intro"}>
28 |             <div className={"l-container"}>
29 |                 <div className={"l-row-g-xs-20  l-row-g-md-200"}>
30 |                     <div className={"l-col-xs-12 l-col-md-6"}>
31 |                         <img className={"horizontal__intro__logo"} src="/rtg-logo-white.png" alt={"logo rtg"}/>
32 |                     </div>
33 |                     <div className={"l-col-xs-12 l-col-md-6"}>
34 |                         <div>
35 |                             <h2 className={"section__title"}> R - react </h2>
36 |                             <h2 className={"section__title"}> T - tour </h2>
37 |                             <h2 className={"section__title"}> G - guide </h2>
38 |                         </div>
39 |                     </div>
40 |                 </div>
41 |                 <div className={"l-row-g-xs-20 l-row-g-lg-100"}>
42 |                     <div className={"l-col-xs-12"}>
43 |                         <h3 className={"section__title intro__title"}>Interactive tutorial witch will guide users through your react app</h3>
44 |                         <button onClick={() => tour.get("TourVertical").open()}>Start tour</button>
45 |                     </div>
46 |                 </div>
47 |             </div>
48 |         </section>
49 |     )
50 | }
51 | 
52 | export default Intro;


--------------------------------------------------------------------------------
/src/demo/Pages/Horizonal/Sections/Roentgen.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Roentgen = () => {
 4 | 
 5 |     return (
 6 |         <section className={"horizontal__section horizontal__section--roentgen"}>
 7 |             <div className={"l-container"}>
 8 |                 <div className={"l-row-g-xs-20  l-row-g-md-150"}>
 9 |                     <div className={"l-col-xs-12 l-col-md-6"}>
10 |                         <img src={"./person.png"} alt={"adf"}/>
11 |                         <h1 className={"section__tittle"}>Wilhelm Conrad Röntgen</h1>
12 | 
13 |                     </div>
14 |                     <div className={"l-col-xs-12 l-col-md-6"}>
15 |                         <p id={"roentgenAbout"}>
16 |                             Wilhelm Conrad Röntgen  27 March 1845 – 10 February 1923) was a German[1] mechanical engineer
17 |                             and physicist, who, on 8 November 1895, produced and detected electromagnetic radiation
18 |                             in a wavelength range known as X-rays or Röntgen rays, an achievement that earned him
19 |                             the first Nobel Prize in Physics in 1901.[3] In honour of his accomplishments, in
20 |                             2004 the International Union of Pure and Applied Chemistry (IUPAC) named element 111,
21 |                             roentgenium, a radioactive element with multiple unstable isotopes, after him.
22 |                         </p>
23 |                     </div>
24 |                 </div>
25 |                 <div className={"l-row-g-xs-20 l-row-g-lg-20"}>
26 |                     <div className={"l-col-xs-12 l-col-lg-9"}>
27 |                         <h3> His honors include:</h3>
28 |                         <ol>
29 |                             <li>Rumford Medal (1896)</li>
30 |                             <li>Matteucci Medal (1896)</li>
31 |                             <li>Elliott Cresson Medal (1897)</li>
32 |                             <li>Nobel Prize for Physics (1901)</li>
33 |                             <li>In November 2004 IUPAC named element number 111 roentgenium (Rg) in his honour. IUPAP adopted the name in November 2011.</li>
34 |                             <li>In 1907 he became a foreign member of the Royal Netherlands Academy of Arts and Sciences</li>
35 |                         </ol>
36 |                     </div>
37 |                 </div>
38 |             </div>
39 |         </section>
40 |     )
41 | }
42 | 
43 | export default Roentgen;


--------------------------------------------------------------------------------
/src/demo/Pages/Horizonal/Sections/Sources.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | 
 4 | const Sources = () => {
 5 | 
 6 | 
 7 |     return (
 8 |         <section className={"horizontal__section horizontal__section--sources"}>
 9 |             <div className={"l-container"}>
10 |                 <div className={"l-row-g-xs-100 l-row-g-md-200"}>
11 |                     <div className={"l-col-xs-12 l-col-md-6"}>
12 |                         <h2>Check documentation on github or just go to npm and install last version</h2>
13 |                     </div>
14 |                 </div>
15 |                 <div className={"l-row-g-xs-100"}>
16 |                     <div className={"l-col-xs-12 l-col-md-6"}>
17 |                         <div id={"sources"}>
18 |                             <button className={"button button--dark"}><a href={"/"}> Git hub </a></button>
19 |                             <button className={"button button--secondary"}><a href={"/"}> Npm </a></button>
20 |                         </div>
21 |                     </div>
22 |                 </div>
23 |             </div>
24 |         </section>
25 |     )
26 | }
27 | 
28 | export default Sources;


--------------------------------------------------------------------------------
/src/demo/Pages/Horizonal/Sections/index.js:
--------------------------------------------------------------------------------
1 | import Intro from "./Intro";
2 | import Roentgen from "./Roentgen";
3 | import Sources from "./Sources";
4 | 
5 | export {
6 |     Intro,
7 |     Roentgen,
8 |     Sources,
9 | }


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Documentation.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | const Documentation = () => {
  4 |     return (
  5 |         <section className={"l-container section content"}>
  6 |             <h2 className={"section__title title--underscored"} id="documentation">
  7 |                 Awesome software is well documented
  8 |             </h2>
  9 |             <p className={"section__subtitle text"}>
 10 |                 Every piece of code that is created to be reusable have to be well documented.
 11 |                 Documentation is like business card, like your suit and manners - just creates the first impression
 12 |             </p>
 13 |             <div className={"l-row"}>
 14 |                 <div className={"l-col-lg-6 l-col-xs-12"}>,
 15 |                     <div className={" content__image"}>
 16 |                         <img src={"./demo/completed.png"} alt={"documentary should be completed"}/>
 17 |                     </div>
 18 |                 </div>
 19 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 20 |                     <h4 className={"content__title title--underscored title--underscored--left"} data-rtg={"completed"}>
 21 |                         Complete
 22 |                     </h4>
 23 |                     <p>
 24 |                         In order for the documentation to be good, the work should be properly planned from the very beginning.
 25 |                         Below is a list of steps you should take to create a decent text.
 26 |                     </p>
 27 |                     <ol>
 28 |                         <li>Create a documentation plan</li>
 29 |                         <li>Research</li>
 30 |                         <li>Writing according to a set plan</li>
 31 |                         <li>Verification of the created text</li>
 32 |                         <li>Fixes and filling gaps.</li>
 33 |                     </ol>
 34 |                 </div>
 35 |             </div>
 36 |             <div className={"l-row"}>
 37 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 38 |                     <div className={" content__image"}>
 39 |                         <img src={"./demo/consistent.png"} alt={"documentary should be completed"}/>
 40 |                     </div>
 41 |                 </div>
 42 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 43 |                     <h4 className={"content__title title--underscored title--underscored--left"}>
 44 |                         Consistent
 45 |                     </h4>
 46 |                     <p>
 47 |                         Consistent documentation is written in the same style. uses the same concepts and
 48 |                         language styles, is harmonious and constitutes a coherent whole.
 49 |                     </p>
 50 |                 </div>
 51 |             </div>
 52 |             <div className={"l-row"}>
 53 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 54 |                     <div className={" content__image"}>
 55 |                         <img src={"./demo/accuracy.png"} alt={"documentary should be completed"}/>
 56 |                     </div>
 57 |                 </div>
 58 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 59 |                     <h4 className={"content__title title--underscored title--underscored--left"}>
 60 |                         Precise
 61 |                     </h4>
 62 |                     <p>
 63 |                         It should be carefully written with attention to detail and relevant use cases.
 64 |                         It is good to describe the individual components and include the code with sample code.
 65 |                     </p>
 66 |                 </div>
 67 |             </div>
 68 |             <div className={"l-row"}>
 69 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 70 |                     <div className={"content__image"}>
 71 |                         <img src={"./demo/correct.png"} alt={"documentary should be completed"}/>
 72 |                     </div>
 73 |                 </div>
 74 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 75 |                     <h4 className={"content__title title--underscored title--underscored--left"}>
 76 |                         Correct and up to date
 77 |                     </h4>
 78 |                     <p>
 79 |                         There is nothing worse than outdated documentation. You do everything as instructed and the
 80 |                         program doesn't work. So you are constantly looking for a bug in your code while
 81 |                         the problem is that someone misled you. It's a crime.
 82 |                     </p>
 83 |                 </div>
 84 |             </div>
 85 | 
 86 |             <div className={"l-row"}>
 87 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 88 |                     <div className={"content__image"}>
 89 |                         <img  src={"./demo/understable.png"} alt={"documentary should be completed"}/>
 90 |                     </div>
 91 |                 </div>
 92 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
 93 |                     <h4 className={"content__title title--underscored title--underscored--left"} id={"registration"}>
 94 |                         Understandable - <span className={"nowrap"}>adapted to the recipient</span>
 95 |                     </h4>
 96 |                     <p>
 97 |                         So that he is able to apply the described procedures.
 98 |                         According to which you should fill this form:
 99 |                     </p>
100 |                     <form onSubmit={e => e.preventDefault()} id={"form"}>
101 |                         <label htmlFor={"name"}>Name: </label>
102 |                         <input id={"name"} name={"name"} type={"text"}/>
103 |                         <label htmlFor={"email"}>Email: </label>
104 |                         <input id={"email"} name={"email"} type={"text"}/>
105 |                         <button type={"sumbit"} id={"btnSubmit"} className={"button--light"}>
106 |                             Submit
107 |                         </button>
108 |                     </form>
109 |                 </div>
110 |             </div>
111 | 
112 |             <div className={"l-row"}>
113 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
114 |                     <div className={" content__image"}>
115 |                         <img src={"./demo/rules.png"} alt={"documentary should be completed"}/>
116 |                     </div>
117 |                 </div>
118 |                 <div className={"l-col-lg-6 l-col-xs-12"}>
119 |                     <h4 className={"content__title title--underscored title--underscored--left"}>
120 |                         Consistent with internal rules
121 |                     </h4>
122 |                     <p>
123 |                         in accordance with the rules prevailing in the organization - written in accordance with
124 |                         the style manual and guidelines or regulations that are imposed, for example, by the teem or and whole company's
125 |                     </p>
126 |                 </div>
127 |             </div>
128 |         </section>
129 |     )
130 | }
131 | 
132 | export default Documentation;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | 
 4 | const Footer = () => {
 5 | 
 6 |     return (
 7 |         <footer>
 8 |             <div className={"l-container"}>
 9 |                 <div className={"l-row"}>
10 |                     <div className={"l-col-lg-6 l-col-xs-12"}>
11 |                         <h2 className={"section__title"}>About</h2>
12 |                         <p>The idea for this library was to create a trip component library that is created in react way
13 |                             rather than json config, while still keeping the style in a separate css file built in such
14 |                             way that they can be easily overwritten and customized.</p>
15 | 
16 |                     </div>
17 |                     <div className={"l-col-lg-6 l-col-xs-12"}>
18 |                         <h2 className={"section__title"}>Sources</h2>
19 | 
20 |                         <span className={"code"}>
21 |                                 <pre >npm install react-rtg</pre>
22 |                         </span>
23 |                         <span className={"code"}>
24 |                                 <pre>yard add react-rtg</pre>
25 |                         </span>
26 | 
27 |                         <button className={"button--white"} id={"buttonGithub"}><a href={"www.google.com"}>Github</a></button>
28 |                         <button className={"button--white"}>Npm</button>
29 |                     </div>
30 |                 </div>
31 |                 <div className={"l-row l-row--bottom"} data-rtg={"footer"}>
32 |                     <div className={"l-col-xs-12"}>
33 |                         @made by Robert Kamińśki <a href={"mailto:robert.kami@gmail.com"}>robert.kami88@gmail.com</a>
34 |                     </div>
35 |                 </div>
36 |             </div>
37 |         </footer>
38 |     )
39 | }
40 | 
41 | export default Footer;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Link} from "react-router-dom";
 3 | 
 4 | const AtomSvg = () => {
 5 |     return (
 6 | 
 7 |         <svg aria-hidden="true" focusable="false"
 8 |              className="svg-inline--fa fa-atom fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
 9 |              viewBox="0 0 448 512">
10 |             <path fill="currentColor"
11 |                   d="M223.99908,224a32,32,0,1,0,32.00782,32A32.06431,32.06431,0,0,0,223.99908,224Zm214.172-96c-10.877-19.5-40.50979-50.75-116.27544-41.875C300.39168,
12 |                   34.875,267.63386,0,223.99908,0s-76.39066,34.875-97.89653,86.125C50.3369,77.375,20.706,108.5,9.82907,128-6.54984,157.375-5.17484,201.125,34.958,
13 |                   256-5.17484,310.875-6.54984,354.625,9.82907,384c29.13087,52.375,101.64652,43.625,116.27348,41.875C147.60842,477.125,180.36429,512,223.99908,
14 |                   512s76.3926-34.875,97.89652-86.125c14.62891,1.75,87.14456,10.5,116.27544-41.875C454.55,354.625,453.175,310.875,413.04017,256,453.175,201.125,
15 |                   454.55,157.375,438.171,128ZM63.33886,352c-4-7.25-.125-24.75,15.00391-48.25,6.87695,6.5,14.12891,12.875,21.88087,19.125,1.625,13.75,4,27.125,6.75,
16 |                   40.125C82.34472,363.875,67.09081,358.625,63.33886,352Zm36.88478-162.875c-7.752,6.25-15.00392,12.625-21.88087,
17 |                   19.125-15.12891-23.5-19.00392-41-15.00391-48.25,3.377-6.125,16.37891-11.5,37.88478-11.5,1.75,0,3.875.375,5.75.375C104.09864,162.25,101.84864,175.625,
18 |                   100.22364,189.125ZM223.99908,64c9.50195,0,22.25586,13.5,33.88282,37.25-11.252,3.75-22.50391,8-33.88282,
19 |                   12.875-11.377-4.875-22.62892-9.125-33.88283-12.875C201.74516,77.5,214.49712,64,223.99908,64Zm0,384c-9.502,
20 |                   0-22.25392-13.5-33.88283-37.25,11.25391-3.75,22.50587-8,33.88283-12.875C235.378,402.75,246.62994,407,257.8819,
21 |                   410.75,246.25494,434.5,233.501,448,223.99908,448Zm0-112a80,80,0,1,1,80-80A80.00023,80.00023,0,0,1,223.99908,
22 |                   336ZM384.6593,352c-3.625,6.625-19.00392,11.875-43.63479,11,2.752-13,5.127-26.375,6.752-40.125,7.75195-6.25,
23 |                   15.00391-12.625,21.87891-19.125C384.7843,327.25,388.6593,344.75,384.6593,352ZM369.65538,
24 |                   208.25c-6.875-6.5-14.127-12.875-21.87891-19.125-1.625-13.5-3.875-26.875-6.752-40.25,1.875,0,
25 |                   4.002-.375,5.752-.375,21.50391,0,34.50782,5.375,37.88283,11.5C388.6593,167.25,384.7843,184.75,369.65538,208.25Z"/>
26 |         </svg>
27 |     )
28 | }
29 | 
30 | 
31 | const Header = () => {
32 | 
33 |     return (
34 |         <header>
35 |             <nav>
36 |                 <button className={"nav__button button--transparent"}><AtomSvg/></button>
37 |                 <ul>
38 |                     <li className={"nav__item-1"}><Link to={"/horizontal"}>Second example</Link></li>
39 |                     <li className={"nav__item-2"}><a href={"#registration"}>Registration</a></li>
40 |                     <li className={"nav__item-3"}><a href={"/"} onClick={e => e.preventDefault()}>Want to know more ?</a></li>
41 |                     <li className={"nav__item-4"}><a href={"#installation"}>Installation</a></li>
42 |                 </ul>
43 |             </nav>
44 |         </header>
45 |     )
46 | };
47 | 
48 | export default Header;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Intro.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Intro = ({bus}) => {
 4 | 
 5 | 
 6 |     return (
 7 |         <section className={"l-container section intro"}>
 8 |             <div className={"intro__logo"}>
 9 |                 <img src={"./logo.png"} alt={"logo"}/>
10 |             </div>
11 |             <div className={"intro__content"}>
12 |                 <h3 className={"section__title intro__title"}>Interactive tutorial witch will guide users through your react app</h3>
13 |                 <button className={"intro__button button--dark"}
14 |                         onClick={() => bus.start()}>
15 |                     Make a tour
16 |                 </button>
17 |                 <button className={"intro__button button--light"}>Check on github</button>
18 |             </div>
19 |         </section>
20 |     )
21 | }
22 | 
23 | export default Intro;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/List.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | 
 4 | const List = () => {
 5 | 
 6 | 
 7 |     return (
 8 |         <section className={"list__section section"}>
 9 |             <div className={"l-container"}>
10 |                 <div className={"l-row"}>
11 |                     <h2 className={"section__title title--underscored"}>Long list with scroll bars</h2>
12 |                     <div className={"l-col-xs-12 l-col-lg-11"}>
13 |                         <div className={"list__container"}>
14 |                             <ol>
15 |                                 <li data-rtg={"list-1"}>All documents must be accurate and written in a manner that prevents
16 |                                     errors and ensures consistency. If documents are to be used together,
17 |                                     e.g. an SOP and a form, then each should reference the other.
18 |                                     Ensure there is traceability between two or more documents/records
19 |                                     using formal document numbers or record identification.
20 |                                 </li>
21 |                                 <li data-rtg={"list-2"}>
22 |                                     All records must be filled out in indelible ink for long term legibility. Do
23 |                                     not use pencil or ink that can be erased.
24 |                                     Colour should be specified by the company GDP procedure; often this is
25 |                                     limited to blue or black because historically copy/scanning technology
26 |                                     was limited in reproduction quality. However, this is less of a factor
27 |                                     with the advent of high resolution scanners and colour copiers.
28 |                                 </li>
29 |                                 <li data-rtg={"list-3"}>
30 |                                     A document is unusable if it cannot be read, so care must be taken to
31 |                                     ensure that handwriting is legible. All entries must be made at the time
32 |                                     the tasks are performed and should be legibly signed and dated.
33 |                                     The same is true of electronic documents and records – language
34 |                                     should be clear and unambiguous
35 |                                 </li>
36 |                                 <li data-rtg={"list-4"}>
37 |                                     Documents and records should be reviewed by someone who did not
38 |                                     perform the task to ensure that the information is correct and
39 |                                     accurate. A signature and date by the reviewer/approver confirms that
40 |                                     a review has taken place.
41 |                                 </li>
42 |                                 <li data-rtg={"list-5"}>
43 |                                     Handwritten signatures must be unique to the individual and listed
44 |                                     within the site signature register to ensure that the signature is
45 |                                     traceable to a member of staff (or contractor). Staff are not permitted
46 |                                     to sign for another member of staff unless delegated. Signatures must
47 |                                     never be forged.
48 |                                     The management of the signature record should be governed by a
49 |                                     procedure and routinely reviewed so that it remains current – new staff
50 |                                     should sign the signature register during induction, the signature
51 |                                     register must indicate the date staff exit the company. Electronic
52 |                                     signatures must meet the same general documentation requirements
53 |                                 </li>
54 |                             </ol>
55 |                         </div>
56 |                         <p className={"list__source"}>
57 |                             This white paper describes the fundamental requirements of
58 |                             Good Documentation Practice (GDP) routinely used within the
59 |                             pharmaceutical industry – as best practice standards or as a
60 |                             direct requirement of the Code of Good Manufacturing
61 |                             Practice (GMP).
62 |                         </p>
63 |                     </div>
64 |                 </div>
65 |             </div>
66 | 
67 |         </section>
68 |     )
69 | }
70 | 
71 | export  default List;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Newsletter.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | 
 4 | const Newsletter = () =>{
 5 |     return (
 6 |         <section className={"l-container newsletter"}>
 7 |             <div className={"l-row"}>
 8 |                 <div className={"l-col-xs-12 l-col-sm-10 l-col-xl-9"}>
 9 |                     <h2 className={"section__title title--underscored"} id="newsletter">
10 |                         Tricky part - <span className={"light"}>your identity</span>
11 |                     </h2>
12 |                     <form className={"newsletter__form"} data-rtg={"newsletter"} onSubmit={e => e.preventDefault()}>
13 |                         <label htmlFor={"email"}>Subscribe to the newsletter. Email:</label>
14 |                         <div className={"newsletter__form__group"}>
15 |                             <input id={"inputEmail"} type={"email"} name={"email"}/>
16 |                             <button id={"btnSubmitEmail"} type={"submit"} className={"button button--dark"}>I want to be up to date</button>
17 |                         </div>
18 |                     </form>
19 |                 </div>
20 |             </div>
21 |         </section>
22 |     )
23 | }
24 | 
25 | export default Newsletter;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/Slider.js:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from "react";
  2 | import useSlider from "../../hooks/useSlider";
  3 | 
  4 | 
  5 | const Slider = () => {
  6 |     const slider = useRef();
  7 |     const [prev, next, mouseDown] = useSlider(slider);
  8 | 
  9 |     return (
 10 |         <section className={"l-section--slider"}>
 11 |             <div className={"l-container"}>
 12 |                 <div className={"l-row"}>
 13 |                     <div className={"l-col-xs-12"}>
 14 |                         <div className={"c-slider__container"}>
 15 |                             <div className={"c-slider"}>
 16 |                                 <button onClick={prev} className={"c-slider__button c-slider__button--prev"}>{"\u25EF"}</button>
 17 |                                 <ul className={"c-slider__slides"} onMouseDown={mouseDown} onTouchStart={mouseDown} ref={slider}>
 18 |                                     <li className={"c-slider__slide"} data-rtg={"slider-1"}>
 19 |                                         <div className={"card"}>
 20 |                                             <h1> 1 </h1>
 21 |                                             <h5 className={"card__title title--underscored"}>
 22 |                                                 Complete
 23 |                                             </h5>
 24 |                                             <p>
 25 |                                                 You should have a good plan
 26 |                                             </p>
 27 |                                         </div>
 28 |                                     </li>
 29 |                                     <li className={"c-slider__slide"}>
 30 |                                         <div className={"card"}>
 31 |                                             <h1> 2 </h1>
 32 |                                             <h5 className={"card__title title--underscored"}>
 33 |                                                 Consistent
 34 |                                             </h5>
 35 |                                             <p>
 36 |                                                 Don't change your style
 37 |                                             </p>
 38 |                                         </div>
 39 |                                     </li>
 40 |                                     <li className={"c-slider__slide"}>
 41 |                                         <div className={"card"}>
 42 |                                             <h1> 3 </h1>
 43 |                                             <h5 className={"card__title title--underscored"}>
 44 |                                                 Precise
 45 |                                             </h5>
 46 |                                             <p>
 47 |                                                 Keep eye on detail
 48 |                                             </p>
 49 |                                         </div>
 50 |                                     </li>
 51 |                                     <li className={"c-slider__slide"}>
 52 |                                         <div className={"card"}>
 53 |                                             <h1> 4 </h1>
 54 |                                             <h5 className={"card__title title--underscored"}>
 55 |                                                 Unexpired
 56 |                                             </h5>
 57 |                                             <p>
 58 |                                                 always keep it up to date
 59 |                                             </p>
 60 |                                         </div>
 61 |                                     </li>
 62 |                                     <li className={"c-slider__slide"}>
 63 |                                         <div className={"card"}>
 64 |                                             <h1> 5 </h1>
 65 |                                             <h5 className={"card__title title--underscored"}>
 66 |                                                 Clear
 67 |                                             </h5>
 68 |                                             <p>
 69 |                                                 your people will catch it
 70 |                                             </p>
 71 |                                         </div>
 72 |                                     </li>
 73 |                                     <li className={"c-slider__slide"}>
 74 |                                         <div className={"card"}>
 75 |                                             <h1> 6 </h1>
 76 |                                             <h5 className={"card__title title--underscored"}>
 77 |                                                 Standardized
 78 |                                             </h5>
 79 |                                             <p>
 80 |                                                 stick to the rules
 81 |                                             </p>
 82 |                                         </div>
 83 |                                     </li>
 84 |                                     <li className={"c-slider__slide"}>
 85 |                                         <div className={"card"}>
 86 |                                             <h1> 7 </h1>
 87 |                                             <h5 className={"card__title title--underscored"}>
 88 |                                                 Complete
 89 |                                             </h5>
 90 |                                             <p>
 91 |                                                 You should have a good plan
 92 |                                             </p>
 93 |                                         </div>
 94 |                                     </li>
 95 |                                     <li className={"c-slider__slide"}>
 96 |                                         <div className={"card"}>
 97 |                                             <h1> 8 </h1>
 98 |                                             <h5 className={"card__title title--underscored"}>
 99 |                                                 Consistent
100 |                                             </h5>
101 |                                             <p>
102 |                                                 Don't change your style
103 |                                             </p>
104 |                                         </div>
105 |                                     </li>
106 |                                     <li className={"c-slider__slide"}>
107 |                                         <div className={"card"}>
108 |                                             <h1> 9 </h1>
109 |                                             <h5 className={"card__title title--underscored"}>
110 |                                                 Precise
111 |                                             </h5>
112 |                                             <p>
113 |                                                 Keep eye on detail
114 |                                             </p>
115 |                                         </div>
116 |                                     </li>
117 |                                     <li className={"c-slider__slide"}>
118 |                                         <div className={"card"}>
119 |                                             <h1> 10 </h1>
120 |                                             <h5 className={"card__title title--underscored"}>
121 |                                                 Unexpired
122 |                                             </h5>
123 |                                             <p>
124 |                                                 always keep it up to date
125 |                                             </p>
126 |                                         </div>
127 |                                     </li>
128 |                                     <li className={"c-slider__slide"} data-rtg={"slider-10"}>
129 |                                         <div className={"card"}>
130 |                                             <h1> 11 </h1>
131 |                                             <h5 className={"card__title title--underscored"}>
132 |                                                 Clear
133 |                                             </h5>
134 |                                             <p>
135 |                                                 your people will catch it
136 |                                             </p>
137 |                                         </div>
138 |                                     </li>
139 |                                     <li className={"c-slider__slide"}>
140 |                                         <div className={"card"}>
141 |                                             <h1> 12 </h1>
142 |                                             <h5 className={"card__title title--underscored"}>
143 |                                                 Standardized
144 |                                             </h5>
145 |                                             <p>
146 |                                                 stick to the rules
147 |                                             </p>
148 |                                         </div>
149 |                                     </li>
150 |                                 </ul>
151 |                                 <button onClick={next} className={"c-slider__button c-slider__button--next"}>{"\u25EF"}</button>
152 |                             </div>
153 |                         </div>
154 |                     </div>
155 |                 </div>
156 |             </div>
157 |         </section>
158 |     )
159 | }
160 | 
161 | export default Slider;


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Sections/index.js:
--------------------------------------------------------------------------------
 1 | import Header from "./Header";
 2 | import Intro from "./Intro";
 3 | import Documentation from "./Documentation";
 4 | import Slider from "./Slider";
 5 | import Newsletter from "./Newsletter";
 6 | import List from "./List";
 7 | import Footer from "./Footer";
 8 | 
 9 | export {
10 |     Header,
11 |     Intro,
12 |     Documentation,
13 |     Slider,
14 |     Newsletter,
15 |     Footer,
16 |     List,
17 | }


--------------------------------------------------------------------------------
/src/demo/Pages/Vertical/Vertical.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |     Header,
 4 |     Intro,
 5 |     Documentation,
 6 |     Slider,
 7 |     Newsletter,
 8 |     List,
 9 |     Footer
10 | } from "./Sections"
11 | 
12 | const Vertical = ({bus}) => {
13 | 
14 |     return (
15 |     <>
16 |         <Header/>
17 |         <main className={"page"}>
18 |             <Intro bus={bus}/>
19 |             <Documentation/>
20 |             <Slider/>
21 |             <Newsletter/>
22 |             <List/>
23 |         </main>
24 |         <Footer/>
25 |     </>
26 |     )
27 | };
28 | 
29 | export default Vertical;


--------------------------------------------------------------------------------
/src/demo/Pages/hooks/useFullPageSlider.js:
--------------------------------------------------------------------------------
 1 | import {useEffect, useCallback, useState} from "react";
 2 | 
 3 | export default function useFullPageSlider(slider){
 4 |     const [current, setCurrent] = useState(0);
 5 |     const [slideWidth, setSlideWidth] = useState(0);
 6 | 
 7 |     const updateScrollPosition = useCallback((slide)=>{
 8 |         document.body.scrollTo({left : slideWidth  * slide, behavior: "smooth"});
 9 |     }, [slideWidth])
10 | 
11 |     useEffect(function updatePosition(){
12 |         updateScrollPosition(current)
13 |     }, [current, updateScrollPosition])
14 | 
15 |     useEffect(function updateSliderWidth(){
16 |         if(!slider.current) return;
17 |         slider.current.style.width = slider.current.childNodes.length * slideWidth + "px";
18 |         Array.from(slider.current.children).forEach(slide => {
19 |             slide.style.width =  slideWidth + "px";
20 |         })
21 |     }, [slider, slideWidth])
22 | 
23 |     const updateSize = useCallback(() => {
24 |         setSlideWidth(window.innerWidth);
25 |         updateScrollPosition(current)
26 |     }, [current , setSlideWidth, updateScrollPosition]);
27 | 
28 |     const quantizeSlide = useCallback(()=>{
29 |         const slide = Math.round(document.body.scrollLeft / slideWidth);
30 |         setCurrent(slide)
31 |         updateScrollPosition(slide)
32 |     }, [slideWidth, setCurrent, updateScrollPosition])
33 | 
34 |     const next = useCallback(() =>
35 |             setCurrent(current => Math.min(current + 1, slider.current.childNodes.length - 1)),
36 |         [setCurrent, slider]);
37 | 
38 |     const prev = useCallback(() =>
39 |             setCurrent(current => Math.max(current - 1, 0))
40 |         ,[setCurrent]);
41 | 
42 |     const pointerMove = useCallback((shiftX, {clientX, touches})=>{
43 |         const cx = (touches && touches[0].clientX) || clientX;
44 |         document.body.scrollLeft = shiftX - cx;
45 |     }, [])
46 | 
47 |     const pointerStart = useCallback(({clientX, touches})=>{
48 |         const cx = (touches && touches[0].clientX) || clientX;
49 |         const scrollLeft = document.body.scrollLeft;
50 |         const shiftX = scrollLeft + cx;
51 |         const pm = pointerMove.bind(null, shiftX);
52 |         window.addEventListener("mousemove", pm)
53 |         window.addEventListener("touchmove", pm);
54 | 
55 |         const mouseUp = () => {
56 |             window.removeEventListener("mousemove", pm)
57 |             window.removeEventListener("touchmove", pm)
58 |             window.removeEventListener("mouseup", mouseUp)
59 |             window.removeEventListener("touchend", mouseUp);
60 |             quantizeSlide();
61 |         }
62 |         window.addEventListener("mouseup", mouseUp)
63 |         window.addEventListener("touchend", mouseUp)
64 | 
65 |     }, [pointerMove, quantizeSlide])
66 | 
67 |     useEffect(()=>{
68 |         updateSize();
69 |         window.addEventListener("resize", updateSize);
70 |         return ()=> {
71 |             window.removeEventListener("resize", updateSize);
72 |         }
73 |     }, [updateSize])
74 | 
75 |     useEffect(()=>{
76 |         document.body.style.overflowX = "hidden";
77 |         return () => document.body.style.overflowX = "unset";
78 |     }, [])
79 | 
80 |     return [prev, next, pointerStart, quantizeSlide];
81 | }


--------------------------------------------------------------------------------
/src/demo/Pages/hooks/useSlider.js:
--------------------------------------------------------------------------------
 1 | import {useState, useEffect, useCallback} from "react"
 2 | 
 3 | export default function useSlider(slider, minSlideWidth = 260){
 4 |     const [slideWidth, setSlideWidth] = useState(0);
 5 |     const [current, setCurrent] = useState(0);
 6 |     const [visibleSlides, setVisibleSlides]  = useState(0);
 7 | 
 8 |     const updatePosition = useCallback((current)=>{
 9 |         if(!slider.current) return;
10 |         slider.current.parentElement.scrollTo({left: current * slideWidth, behavior: "smooth"});
11 |     }, [slider, slideWidth])
12 | 
13 |     useEffect(()=>{
14 |         if(!slideWidth) return ;
15 |         updatePosition(current)
16 |     }, [current, slideWidth, updatePosition])
17 | 
18 |     const updateSliderPosition = useCallback(()=>{
19 |         const current = Math.round(slider.current.parentElement.scrollLeft / slideWidth);
20 |         setCurrent(current);
21 |         updatePosition(current)
22 |     }, [slider, slideWidth, setCurrent, updatePosition])
23 | 
24 |     const move = useCallback((shift, startPosition, event)=>{
25 |         const clientX = event.clientX || event.touches[0].clientX;
26 |         slider.current.parentElement.scrollLeft =  startPosition - clientX + shift;
27 |     },[slider])
28 | 
29 |     const mouseDown = useCallback((event)=>{
30 |         const startPosition = slider.current.parentElement.scrollLeft;
31 |         const shift = event.clientX || event.touches[0].clientX;
32 |         const mm = move.bind(null, shift, startPosition);
33 |         window.addEventListener("mousemove", mm);
34 |         window.addEventListener("touchmove", mm);
35 |         window.addEventListener("mouseup", function mouseup(){
36 |             window.removeEventListener("mouseup", mouseup);
37 |             window.removeEventListener("mousemove", mm);
38 |             updateSliderPosition();
39 |         })
40 |         window.addEventListener("touchend", function touchEnd(){
41 |             window.removeEventListener("touchend", touchEnd)
42 |             window.removeEventListener("touchmove", mm);
43 |             updateSliderPosition();
44 |         })
45 |     }, [slider, move, updateSliderPosition])
46 | 
47 |     const updateSlideWidth = useCallback(()=>{
48 |         if(!slider.current) return;
49 |         const rect = slider.current.parentElement.getBoundingClientRect();
50 |         const visibleSlides = ~~(rect.width / minSlideWidth);
51 |         setSlideWidth(rect.width / visibleSlides);
52 |         setVisibleSlides(visibleSlides)
53 |     }, [minSlideWidth, setSlideWidth,setVisibleSlides, slider]);
54 | 
55 |     useEffect(()=>{
56 |         if(!slideWidth || !slider.current) return;
57 |         Array.from(slider.current.children).forEach(slide => slide.style.width = slideWidth + "px");
58 |         slider.current.style.width = slider.current.childNodes.length * slideWidth + "px";
59 |     }, [slider, slideWidth])
60 | 
61 |     useEffect(()=>{
62 |         updateSlideWidth();
63 |         window.addEventListener('resize', updateSlideWidth);
64 |         return () => {
65 |             window.removeEventListener('resize', updateSlideWidth);
66 |         }
67 |     },[slider, updateSlideWidth])
68 | 
69 |     const next = useCallback(()=>{
70 |         if(!slider.current) return;
71 |         setCurrent(current => Math.min((current + 1), slider.current.childNodes.length - visibleSlides));
72 |     }, [slider, visibleSlides, setCurrent])
73 | 
74 |     const prev = useCallback(()=>{
75 |         if(!slider.current) return;
76 |         setCurrent(current => Math.max((current - 1), 0));
77 |     }, [slider, setCurrent])
78 | 
79 |     return [prev, next, mouseDown]
80 | }


--------------------------------------------------------------------------------
/src/demo/Tour/GuideTourHorizontal.js:
--------------------------------------------------------------------------------
 1 | import React, {useCallback} from "react";
 2 | import {Tour, Step} from "./../../lib/index";
 3 | 
 4 | const GuideTour = ()=>{
 5 | 
 6 |     const controls = useCallback(({prev, next, close, current, length})=>{
 7 |         return (
 8 |             <div className={"horizontal__controls"}>
 9 |                 <button onClick={close.bind(null, true)} className={"btn btn--skip"}>skip</button>
10 |                 {current !== 0 &&
11 |                     <button onClick={prev} className={"btn btn--prev"}>
12 |                         Prev
13 |                     </button>
14 |                 }
15 |                 <button onClick={next} className={"btn btn--next"}>
16 |                     { ((current === length - 1) ? "Last" : "Next") + ` ${current + 1} / ${length}`}
17 |                 </button>
18 |             </div>
19 |         )
20 |     }, [])
21 | 
22 |     return (
23 |         <Tour id={"TourVertical"}
24 |               scrollTarget={document.body}
25 |               closeButton={false}
26 |               badge={false}
27 |               controls={controls}
28 |               className={"horizontal"}
29 |               pin={true}
30 |               closeOnBackdrop>
31 |             <Step placement={"center"} onBeforeNext={()=>console.log("onBeforeNext next step")} onBeforeShow={() => console.log("before step show")}>
32 |                 <p>
33 |                     This tip is on center of screen <br/>
34 |                     If you click on backdrop then modal will be closed.
35 |                     Check it to see pin !!!
36 |                 </p>
37 |             </Step>
38 |             <Step selector={"#roentgenAbout"} placement={"left"} scrollOffsetX={-17}>
39 |                 <p>
40 |                     Take a look on completely different system of navigation
41 |                 </p>
42 |             </Step>
43 |             <Step selector={"#sources"} placement={"top"}>
44 |                 <p>
45 |                     The rest depends on you.
46 |                 </p>
47 |             </Step>
48 |         </Tour>
49 |     )
50 | }
51 | 
52 | export default GuideTour


--------------------------------------------------------------------------------
/src/demo/Tour/GuideTourVertical.js:
--------------------------------------------------------------------------------
  1 | import React, {useState, useEffect, useCallback, useRef} from "react";
  2 | import {Tour, Step, useTour} from "./../../lib/index";
  3 | import {useHistory} from "react-router-dom";
  4 | 
  5 | 
  6 | const GuideTourVertical = ({bus}) => {
  7 |     const history = useHistory();
  8 |     const [isOpen, setOpen] = useState(null);
  9 |     const tourController = useRef();
 10 |     const [tour] = useTour("tourVertical")
 11 | 
 12 |     useEffect(() => {
 13 |         // tour.setWait({id: "step4", wait: 2000})
 14 |         tour.on("wait", ({index, state, id}) => {
 15 |             state
 16 |                 ? console.log(`on wait for step ${index}`)
 17 |                 : console.log(`on finish waiting for step ${index}`)
 18 |         })
 19 |         tour.on("beforeOpen", () => console.log("on before open"))
 20 |         tour.on("open", ({reopen}) => console.log("on open", reopen))
 21 |         tour.on("afterOpen", () => console.log("after open"))
 22 |         tour.on("show", ({index}) => console.log("on show step", index))
 23 |         tour.on("afterScroll", (index, id) => console.log("on after scroll ", index))
 24 |         tour.on("beforeClose", () => console.log("on before close"))
 25 |         tour.on("close", () => console.log("on close"))
 26 |         tour.on("lock", () => console.log("on lock"))
 27 |         tour.on("next", (from, to, length) => console.log(`on next from : ${from} to: ${to}`))
 28 |         tour.on("change", ({index, id}) => console.log(`on change ${index}`))
 29 |         tour.on("finish", () => console.log("on finish"))
 30 |     }, [tour])
 31 | 
 32 |     const start = useCallback(()=>{
 33 |         setOpen(true);
 34 |     }, [setOpen]);
 35 | 
 36 |     useEffect(()=>{
 37 |         bus.start = setOpen.bind(null, true)
 38 |     }, [bus, start, tourController])
 39 | 
 40 |     return (
 41 |         <div>
 42 |             <Tour isOpen={isOpen}
 43 |                   pin
 44 |                   id={'tourVertical'}
 45 |                   // onAfterClose={()=>console.log("after close")}
 46 |                   // onAfterOpen={()=>console.log("after open")}
 47 |                   onOpen={setOpen.bind(null, true)}
 48 |                   onClose={setOpen.bind(null, false)}
 49 |                   initialContent={() => <p>Waiting for background work</p>}
 50 |                   lastStepControls={({prev}) =>
 51 |                       <button className={"button--secondary"} onClick={() => history.push("/horizontal")}>Go to next example</button>
 52 |                   }
 53 |                   className={"vertical"}>
 54 |                 <Step selector={".intro__title"}
 55 |                       scrollOffset={-100}
 56 |                       placement={"top"}
 57 |                       pinPlacement={"left"}
 58 |                       pinOffset={100}
 59 |                       pinText={true}
 60 |                       onShow={()=>console.log("on step 0 show - hint from step component")}
 61 |                       // approve={{
 62 |                       //     lock: true,
 63 |                       //     promise: () => new Promise((res, rej) => {
 64 |                       //         setTimeout(()=>{
 65 |                       //             res();
 66 |                       //         }, 2000)
 67 |                       //     })
 68 |                       // }}
 69 |                       className={"first step"}
 70 |                       content={ isWaiting => {
 71 |                           return isWaiting
 72 |                               ? (
 73 |                                   <p>
 74 |                                       I'm waiting for async task <br/>
 75 |                                       This will take 3 seconds
 76 |                                   </p>
 77 |                                 )
 78 |                               : (
 79 |                                   <p>
 80 |                                       This library creates interactive <br/>
 81 |                                       tour through your application
 82 |                                   </p>
 83 |                               )
 84 |                       }}/>
 85 |                 <Step selector={".nav__item-3"}
 86 |                       onBeforeShow={() => document.querySelector(".nav__button").focus()}
 87 |                       approve={{event: "click"}}
 88 |                       wait={ async () => {
 89 |                           await new Promise(res => setTimeout(res, 3000));
 90 |                       }}
 91 |                       placement={"bottom-left"}>
 92 |                     <p>
 93 |                         You can make some action before show step like set focus on menu element.
 94 |                         Clicking on the target will take you to the next step
 95 |                     </p>
 96 |                 </Step>
 97 |                 <Step selector={"[data-rtg='completed']"}
 98 |                       placement={"top-left"}
 99 |                       className={"step--dark"}>
100 |                     <p>
101 |                         This one have custom
102 |                         sass/css style, you can easily overwrite
103 |                         style of any element.
104 |                     </p>
105 |                 </Step>
106 |                 <Step selector={"[data-rtg='newsletter']"}
107 |                       id={"step4"}
108 |                       approve={{
109 |                           event:"click",
110 |                           delay: 2000,
111 |                           target:"#btnSubmitEmail",
112 |                           callback: (event) => document.getElementById("inputEmail").value.match(/\w+@\w+\.\w+/)
113 |                       }}
114 |                       placement={"top"}
115 |                       className={"step--newsletter"}>
116 |                     This one has the custom css property set <br/>
117 |                     --primary-color: orange;
118 |                 </Step>
119 |                 <Step selector={"[data-rtg='list-5']"}
120 |                       placement={"top"}
121 |                       backdropOffset={20}>
122 |                      <p>
123 |                          You can set target (selector property) to element in scrollable
124 |                          container like this list on witch last li element is a target.
125 |                      </p>
126 |                 </Step>
127 |                 <Step selector={".c-slider"} placement={"top"}>
128 |                     List can be scroll horizontal event is overflow is hidden.
129 |                 </Step>
130 | 
131 |                 <Step selector={"[data-rtg='slider-10']"}  placement={"top"}>
132 |                     <p>
133 |                         It will be scrolled to show overflow element. But if you using
134 |                         transitions to move slides you can use hook beforeShow on Step component.
135 |                     </p>
136 |                 </Step>
137 |                 <Step selector={"#form"}
138 |                       placement={"top-left"}
139 |                       approve={{
140 |                           event:"click",
141 |                           target:"#btnSubmit",
142 |                           callback: e => {
143 |                               e.preventDefault();
144 |                               const name = document.getElementById("name");
145 |                               const email = document.getElementById("email");
146 |                               return (name.value && email.value);
147 |                           }
148 |                       }}>
149 |                     <p>In this step you have to fill up form. If you need you can
150 |                        block go to next step until task is not done. (this one is not blocked)
151 |                     </p>
152 |                 </Step>
153 |                 <Step selector={"#buttonGithub"} placement={"top-left"}>
154 |                     <p>
155 |                         Go to git hub to check Readme. There you will find
156 |                         instruction how to use this piece of ... code.
157 |                     </p>
158 |                 </Step>
159 |                 <Step selector={"[data-rtg='footer']"}
160 |                       placement={"bottom"}
161 |                       closeOnBackdrop>
162 |                     <p>
163 |                         I try do my best. Click on mask to close :) <br/>
164 |                     </p>
165 |                     <p className={"text--center"}>
166 |                         or
167 |                     </p>
168 |                 </Step>
169 | 
170 |             </Tour>
171 |         </div>
172 |     )
173 | }
174 | 
175 | export default GuideTourVertical;
176 | 
177 | 


--------------------------------------------------------------------------------
/src/demo/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 4 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/demo/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/demo/style/colors.scss:
--------------------------------------------------------------------------------
 1 | $primary: #0b708b;
 2 | $secondary: #f05935;
 3 | 
 4 | @mixin background-stripes($express: 1%,  $size: 50px, $color: $primary){
 5 |   & {
 6 |     background: repeating-linear-gradient(
 7 |         135deg,
 8 |         $color,
 9 |         $color 10px,
10 |         darken($color, $express) $size,
11 |         darken($color, $express) $size,
12 |     );
13 |   }
14 | }


--------------------------------------------------------------------------------
/src/demo/style/components/buttons.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | button{
 3 |   background: none;
 4 |   font-size: 1rem;
 5 |   letter-spacing: 1px;
 6 |   padding: 8px 16px;
 7 |   font-family: Roboto, "sans-serif";
 8 |   border: 2px solid black;
 9 |   border-radius: 3px;
10 |   margin: 16px;
11 |   cursor: pointer;
12 |   a {
13 |     @include link();
14 |   }
15 | }
16 | 
17 | @mixin button-colors($border-color, $background: whtie, $color: black){
18 |   &{
19 |     color: $color;
20 |     background: $background;
21 |     border-color: $border-color;
22 |     outline-offset: 2px;
23 |   }
24 |   &:focus, &:active,  &:focus:active, &:active:focus:hover{
25 |     border-color: $border-color;
26 |     outline: $border-color;
27 |   }
28 |   &:focus{
29 |     outline: 1px solid lighten($border-color, 5%);
30 |   }
31 |   &:hover{
32 |     text-shadow: 0px 0  1px $color;
33 |   }
34 | }
35 | 
36 | .button{
37 |   &--light{
38 |     @include button-colors($primary,white, $primary);
39 |   }
40 |   &--dark{
41 |     @include button-colors($primary, $primary, white);
42 |     @include background-stripes(2%, 35px);
43 |     &:hover{
44 |       color: $primary;
45 |       background: white;
46 |       text-shadow: 0px 0  1px $primary;
47 |     }
48 |   }
49 |   &--secondary {
50 |     @include button-colors($secondary, $secondary, white);
51 |     @include background-stripes(2%, 35px, $secondary);
52 |     &:hover{
53 |       color: $secondary;
54 |       background: white;
55 |       text-shadow: 0px 0  1px $secondary;
56 |     }
57 |   }
58 | 
59 |   &--white{
60 |     @include button-colors(white, transparent, white)
61 |   }
62 | 
63 |   &--transparent{
64 |     @include button-colors(transparent, transparent, $primary);
65 |     &:focus{
66 |       outline-color: $primary;
67 |     }
68 |     &:focus:hover{
69 |       outline: none;
70 |     }
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/demo/style/components/form.scss:
--------------------------------------------------------------------------------
 1 | form{
 2 |   box-sizing: border-box;
 3 |   label{
 4 |     display: block;
 5 |     margin: 6px auto;
 6 |   }
 7 |   input{
 8 |     display: block;
 9 |     padding: 12px;
10 |     border: 1px solid $primary;
11 |     border-radius: 2px;
12 |     &:hover{
13 |       border-color: $secondary;
14 |     }
15 |     &:active, &:focus, &:active:focus{
16 |       border-color: $secondary;
17 |       outline-color: $secondary;
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/src/demo/style/components/fp-slider.scss:
--------------------------------------------------------------------------------
 1 | html{
 2 |   overflow-x: auto;
 3 | }
 4 | 
 5 | .c-fp-slider{
 6 |   display: flex;
 7 |   padding: 0;
 8 |   margin: 0;
 9 |   list-style: none;
10 |   overflow: hidden;
11 |   height: 100%;
12 |   background: inherit;
13 | 
14 |   &__slide{
15 |     overflow-y: auto;
16 |     background: inherit;
17 |   }
18 | 
19 |   &__controls{
20 |     position: fixed;
21 |     width: 100%;
22 |     display: flex;
23 |     bottom: 0;
24 |     justify-content: space-between;
25 |     background: inherit;
26 |     pointer-events: none;
27 |     button {
28 |       pointer-events: all;
29 |     }
30 |   }
31 |   @media screen and (min-width: map-get($break-points, "xs")) {
32 |       &__controls{
33 |         top: 50%;
34 |         transform: translateY(-50%);
35 |         bottom: unset;
36 |         padding: 0 20px;
37 |       }
38 |   }
39 |   @media screen and(hover: none) and (pointer: coarse){
40 |     &__controls{
41 |       display: none;
42 |     }
43 |   }
44 | }


--------------------------------------------------------------------------------
/src/demo/style/components/headings.scss:
--------------------------------------------------------------------------------
 1 | h2{
 2 |   font-size: 1.6rem;
 3 |   font-weight: 600;
 4 | }
 5 | 
 6 | h3{
 7 |   font-size: 1.3rem;
 8 |   font-weight: 200;
 9 | }
10 | h4{
11 |   font-size: 1.2rem;
12 | }
13 | 
14 | 
15 | .section__title, .content__title{
16 |   color : $primary;
17 |   letter-spacing: 1.5px;
18 |   text-align: center;
19 |   span.light{
20 |     font-weight: 200;
21 |   }
22 | }
23 | 
24 | 
25 | 
26 | .title{
27 |   &--underscored{
28 |     display: table;
29 |     margin: 20px auto;
30 |     &::after{
31 |       content: "";
32 |       display: block;
33 |       border-bottom: 2px solid lighten($primary,0);
34 |       padding: 5px;
35 |       width: 60%;
36 |       margin: 0 auto;
37 |     }
38 |     &--left{
39 |       text-align: left;
40 |       &::after{
41 |         width: 60%;
42 |         margin: 0;
43 |       }
44 |     }
45 |   }
46 | }


--------------------------------------------------------------------------------
/src/demo/style/components/link.scss:
--------------------------------------------------------------------------------
 1 | @mixin link-color($color) {
 2 |   & , &:active, &:visited, &:hover{
 3 |     color: $color;
 4 |   }
 5 | }
 6 | @mixin link(){
 7 |   & , &:active, &:visited, &:hover{
 8 |     text-decoration: none;
 9 |   }
10 | }
11 | 
12 | 
13 | a {
14 |   @include link-color($primary);
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/src/demo/style/components/mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin component-border(){
2 |   border: 1px solid rgba(#000, .2);
3 |   border-radius: 5px;
4 | }


--------------------------------------------------------------------------------
/src/demo/style/components/scrolls.scss:
--------------------------------------------------------------------------------
 1 | @mixin scrolls(){
 2 |   &::-webkit-scrollbar {
 3 |     width: 1em;
 4 |   }
 5 | 
 6 |   &::-webkit-scrollbar-track {
 7 |     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 8 |   }
 9 | 
10 |   &::-webkit-scrollbar-thumb {
11 |     //background-color: $primary;
12 |     @include background-stripes(2%);
13 |     outline: 1px solid slategrey;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/demo/style/components/slider.scss:
--------------------------------------------------------------------------------
 1 | .c-slider{
 2 |   overflow-x: hidden;
 3 |   &__slides{
 4 |     scroll-snap-align: center;
 5 |     list-style: none;
 6 |     padding: 0;
 7 |     margin: 0;
 8 |     display: flex;
 9 |     justify-content: space-between;
10 |     width: 2000px;
11 |     position: relative;
12 | 
13 |   }
14 |   &__container{
15 |     scroll-snap-align: center;
16 |     position: relative;
17 |   }
18 |   &__slide{
19 |     display: flex;
20 |     justify-content: center;
21 |   }
22 | 
23 |   &__button{
24 |     position: absolute;
25 |     top:50%;
26 |     transform: translateY(-50%);
27 |     border:none;
28 |     color: $primary;
29 |     z-index: 5;
30 |     &:focus{
31 |       outline: 1px solid rgba($primary, 0.2);
32 |     }
33 |     &--next{
34 |       right: -50px;
35 |     }
36 |     &--prev{
37 |       left: -50px;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/demo/style/general.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | @import url(//fonts.googleapis.com/css?family=Poppins);
 4 | @import url(//fonts.googleapis.com/css?family=Rowdies);
 5 | 
 6 | body {
 7 |   font-family: Poppins, Roboto;
 8 |   margin: 0;
 9 |   padding: 0;
10 | 
11 |   min-height: 100vh;
12 |   width: 100%;
13 |  //
14 |   //position: relative;
15 | }
16 | 
17 | 
18 | 
19 | 
20 | p, li, h1, h2, h3, h4, h5, h6, label {
21 |   letter-spacing: 1px;
22 |   color: rgba(#000, 0.7);
23 | }
24 | 
25 | * {
26 |   box-sizing: border-box;
27 | }
28 | 
29 | 
30 | .nowrap{
31 |   white-space: nowrap;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/demo/style/grid.scss:
--------------------------------------------------------------------------------
 1 | .l-container{
 2 |   width: 90%;
 3 |   max-width: 1268px;
 4 |   margin : 0 auto;
 5 | }
 6 | 
 7 | .l-row{
 8 |   display: flex;
 9 |   flex-wrap: wrap;
10 |   width: 100%;
11 |   justify-content: space-around;
12 | }
13 | 
14 | $break-points :(
15 |     "xs": 576px,
16 |     "sm": 768px,
17 |     "md": 720px,
18 |     "lg": 960px,
19 |     "xl": 1140px
20 | );
21 | 
22 | @each $break-point, $width in $break-points{
23 |   @for $size from 1 through 12 {
24 |     @media screen and (min-width: $width) {
25 |       .l-col-#{$break-point}-#{$size} {
26 |         width: 100% *  ($size / 12);
27 |         padding: 0 16px;
28 |       };
29 |     }
30 |   }
31 | }
32 | // under first
33 | @for $size from 1 through 12 {
34 |   @media screen and (max-width: map-get($break-points, "xs")) {
35 |     .l-col-xs-#{$size} {
36 |       width: 100% *  ($size / 12);
37 |       padding: 0 16px;
38 |     }
39 |   }
40 | }
41 | 
42 | 
43 | // row gutters
44 | @each $break-point, $width in $break-points {
45 |   @for $counter from 1 through 50 {
46 |     @media screen and (min-width: $width) {
47 |       .l-row-g-#{$break-point}-#{$counter * 5} {
48 |         margin-top: $counter * 5px;
49 |       }
50 |     };
51 |     .l-row-g-#{$break-point}-#{$counter * 5} {
52 |       @extend .l-row;
53 |     }
54 |   }
55 | }
56 | // under first
57 | @for $counter from 1 through 50 {
58 |   @media screen and (max-width: map-get($break-points, "xs")) {
59 |     .l-row-g-xs-#{$counter * 5} {
60 |       margin-top: $counter * 5px;
61 |     }
62 |   }
63 | }


--------------------------------------------------------------------------------
/src/demo/style/horizontal/horizontal.scss:
--------------------------------------------------------------------------------
 1 | @import "./intro.scss";
 2 | @import "./roentgen.scss";
 3 | @import "./sources.scss";
 4 | @import "./rtg.scss";
 5 | 
 6 | main.page__horizontal{
 7 |   width: 100%;
 8 |   width: -moz-max-content;
 9 |   width: max-content;
10 |   min-height: 100vh;
11 |   height: 100vh;
12 | 
13 |   p, h1, h2, h3, h4, h5, h6, span, li{
14 |     color: white;
15 |   };
16 |   section {
17 |     padding: 1px 0;
18 |     padding-bottom: 50px;
19 |   }
20 |   &>div:first-child {
21 |     height: 100%;
22 |   }
23 | 
24 |   button{
25 |     &:focus{
26 |       border-color: black;
27 |       outline: 2px solid black;
28 |       outline-offset: 2px;
29 |     }
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/demo/style/horizontal/intro.scss:
--------------------------------------------------------------------------------
 1 | .horizontal{
 2 |   h3{
 3 |     font-size: .6rem;
 4 |   }
 5 | 
 6 |   &__intro__logo{
 7 |     max-width: 250px;
 8 |   }
 9 |   &__section--intro {
10 |     background: $secondary;
11 |     height: 100%;
12 | 
13 |     h2  {
14 |       margin: 10px auto;
15 |     }
16 |     @media screen and (min-width: map-get($break-points, "sm")) {
17 |       h2{
18 |         margin: 30px auto;
19 |       }
20 |     }
21 | 
22 |     [class*="l-col"]:first-of-type {
23 |       display: flex;
24 |       justify-content: center;
25 |     }
26 |     [class*="l-col"]:last-of-type {
27 |       display: grid;
28 |       place-items: center ;
29 |       h2{
30 |         text-align: left;
31 |       }
32 |     }
33 |   }
34 | }
35 | 
36 | 


--------------------------------------------------------------------------------
/src/demo/style/horizontal/roentgen.scss:
--------------------------------------------------------------------------------
 1 | .horizontal {
 2 |   h3 {
 3 |     font-size: .6rem;
 4 |   }
 5 |   &__section--roentgen{
 6 |     background: $primary;
 7 |     img{
 8 |       width: 250px;
 9 |     }
10 |     [class*="row"]:first-of-type{
11 |       [class*="col"]:first-of-type{
12 |           display: grid;
13 |           place-items: center;
14 |       }
15 |       [class*="col"]:last-of-type{
16 |           display: grid;
17 |           place-items: center;
18 |       }
19 |     }
20 | 
21 |     ol {
22 |       margin: 0;
23 |       padding: 0;
24 |       padding-left: 16px;
25 |       li{
26 |         margin: 10px 0;
27 |       }
28 |     }
29 |   }
30 | 
31 | 
32 | }


--------------------------------------------------------------------------------
/src/demo/style/horizontal/rtg.scss:
--------------------------------------------------------------------------------
 1 | .horizontal.rtg__container{
 2 |   &--step-1, &--step-2{
 3 |     --pin-color: white;
 4 |   }
 5 |   &--step-3{
 6 |     --pin-color: $primary;
 7 |   }
 8 |   .rtg__pin span {
 9 |     color: grey;
10 |   }
11 | 
12 |   p{
13 |     max-width: 300px;
14 |   }
15 |   .horizontal__controls{
16 |     display: flex;
17 |   }
18 |   button.btn{
19 |     border: none;
20 |     margin: 0;
21 |     &:focus{
22 |       outline-color: rgba(#000, 0.1);
23 |       outline-offset: 2px;
24 |     }
25 |     &--next{
26 |       background: $secondary;
27 |       justify-self: flex-end;
28 |     }
29 |     &--skip{
30 |       justify-self: flex-start;
31 |       margin-right: auto;
32 |     }
33 |   }
34 | }


--------------------------------------------------------------------------------
/src/demo/style/horizontal/sources.scss:
--------------------------------------------------------------------------------
 1 | section.horizontal__section--sources{
 2 |   &.horizontal__section{
 3 |     padding-bottom: 0;
 4 |   }
 5 |   [class*="row"]:first-of-type h2{
 6 |     color: $primary;
 7 |     text-align: center;
 8 |     height: 20vh;
 9 |   }
10 |   & , .l-container,{
11 |     min-height: 100%;
12 |   }
13 |   [class*="col"]{
14 |     display: grid;
15 |     place-items: center;
16 |   }
17 |   #sources{
18 |     display: flex;
19 |     justify-content: center;
20 |     align-items: center;
21 |     flex-wrap: wrap;
22 |   }
23 | 
24 |   button{
25 |     a {
26 |       color:inherit;
27 |     }
28 |     padding: 18px 40px;
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/demo/style/main.scss:
--------------------------------------------------------------------------------
 1 | @import "./colors.scss";
 2 | @import "./general.scss";
 3 | @import "./grid.scss";
 4 | @import "./components/mixins.scss";
 5 | @import "./components/headings.scss";
 6 | @import "./components/link.scss";
 7 | @import "./components/buttons.scss";
 8 | @import "./components/slider.scss";
 9 | @import "./components/fp-slider.scss";
10 | @import "./components/form.scss";
11 | @import "./components/scrolls.scss";
12 | 
13 | @import "./vertical/vertical.scss";
14 | @import "./horizontal/horizontal.scss";
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/src/demo/style/vertical/documentation.scss:
--------------------------------------------------------------------------------
 1 | .content{
 2 |   .l-row{
 3 |     margin-bottom: 100px;
 4 |   }
 5 | 
 6 |   .l-row:nth-child(2n){
 7 |     flex-direction: row-reverse;
 8 |   }
 9 | 
10 |   .section{
11 |     &__title{
12 |       max-width: 300px;
13 |     }
14 |     &__subtitle{
15 |       text-align: center;
16 |       max-width: 720px;
17 |       margin: 50px auto 100px auto;
18 |     }
19 |   }
20 |   &__image {
21 |     display: flex;
22 |     justify-content: center;
23 |     align-content: center;
24 |     & img{
25 |       max-width: 90%;
26 |       max-height: 250px;
27 |       margin: 0 50px 25px;
28 |     }
29 |   }
30 | 
31 |   &__title{
32 |     margin: 0;
33 |   }
34 | 
35 |   ol{
36 |     padding: 0 15px;
37 |     list-style-type: upper-roman;
38 |     li{
39 |       padding-left: 8px;
40 |       margin: 6px 0;
41 |     }
42 |   }
43 | 
44 |   form{
45 |     max-width: 90%;
46 |     &, * {
47 |       box-sizing: border-box;
48 |     }
49 |     @media screen and(min-width: map-get($break-points, "lg")) {
50 |       max-width: 75%;
51 |     }
52 |     @media screen and(min-width: map-get($break-points, "xl")) {
53 |       max-width: 60%;
54 |     }
55 |     overflow: auto;
56 |     button {
57 |       margin-right: 0;
58 |       float: right;
59 |     }
60 |     input {
61 |       width: 100%;
62 |     }
63 |   }
64 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/footer.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | footer{
 3 |   background: $primary;
 4 |   @include background-stripes();
 5 |   &, p {
 6 |     color: white;
 7 |   }
 8 |   min-height: 50vh;
 9 |   button{
10 |     margin-left: 0;
11 |     margin-right: 16px;
12 |     display: block;
13 |     @media screen and (min-width: map-get($break-points, "lg")){
14 |       display: inline-block;
15 |     }
16 |   }
17 |   a{
18 |     @include link-color(white);
19 |   }
20 | 
21 |   .l-container{
22 |     display: flex;
23 |     flex-direction: column;
24 |     justify-content: space-between;
25 |     min-height: 50vh;
26 |   }
27 |   .l-row--bottom{
28 |     border-top: 1px solid white;
29 |     padding: 12px;
30 |   }
31 |   .section__title{
32 |     color: white;
33 |     text-align: left;
34 |   }
35 | }
36 | .code{
37 |   display: block;
38 |   pre{
39 |     background: darken($primary , 10%);
40 |     padding: 16px 48px 16px 16px;
41 |     border-radius: 5px;
42 |     display: inline-block;
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/demo/style/vertical/header.scss:
--------------------------------------------------------------------------------
 1 | header{
 2 |   position: absolute;
 3 |   display: flex;
 4 |   justify-content: flex-end;
 5 |   width: 100%;
 6 | 
 7 |   a {
 8 |     @include link();
 9 |     @include link-color($primary);
10 |   }
11 |   svg {
12 |     fill: $primary;
13 |     width: 40px;
14 |     height: 40px;
15 |     transition: transform 1s;
16 |     transform: rotate(90deg);
17 |   }
18 |   button{
19 |     padding: 0;
20 |     display: flex;
21 |     justify-content: center;
22 |     align-items: center;
23 | 
24 |   }
25 |   nav {
26 |     &:hover, &:focus-within{
27 |       svg {
28 |         transform: rotate(0deg);
29 |       }
30 |       ul {
31 |         display: block;
32 |       }
33 |     }
34 | 
35 |   }
36 |   ul{
37 |     background: white;
38 |     display: none;
39 |     position: absolute;
40 |     top: 100%;
41 |     width: 98%;
42 |     left: 0;
43 |     margin: 0 1%;
44 |     list-style: none;
45 |     padding: 0;
46 |     border: 1px solid rgba($primary, 0.2);
47 |     box-shadow: 1px 1px 2px 0 rgba(#000, 0.2);
48 | 
49 |     li{
50 |       padding: 0;
51 |       z-index: 1;
52 |       position: relative;
53 |       a {
54 |         padding: 15px;
55 |         display: block;
56 |       }
57 |       &:not(:last-of-type) a {
58 |         border-bottom: 1px solid rgba($primary, 0.2);
59 |       }
60 |       &:hover{
61 |         background: rgba($primary, 0.1);
62 |       }
63 |     }
64 |     &:hover{
65 |       display: block;
66 |     }
67 |     &:before{
68 |       content: "";
69 |       display: block;
70 |       position: absolute;
71 |       top: -50px;
72 |       bottom: -50px;
73 |       left: -50px;
74 |       right: 0;
75 |       z-index: 0;
76 |     }
77 |   }
78 |   @media screen and (min-width: map-get($break-points, "sm")){
79 |       ul {
80 |         width: 300px;
81 |         right: 0;
82 |         left: unset;
83 |       }
84 |   }
85 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/intro.scss:
--------------------------------------------------------------------------------
 1 | //---------------------------
 2 | .intro{
 3 |   &__content{
 4 |     //display: flex;
 5 |     text-align: center;
 6 |   }
 7 |   &__logo {
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     padding-top: 15vh;
12 |     img{
13 |       max-width: 90%;
14 |       width : 400px;
15 |     }
16 |   }
17 |   &__title{
18 |     max-width: 500px;
19 |     margin: 0 auto;
20 |     margin-bottom: 25px;
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/list.scss:
--------------------------------------------------------------------------------
 1 | .list{
 2 |   &__section{
 3 |     min-height: 600px;
 4 |   }
 5 |   &__container{
 6 |     @include component-border();
 7 |     @include scrolls();
 8 |     height: 400px;
 9 |     overflow: auto;
10 |     padding: 8px;
11 |     margin-top: 24px;
12 |     ol{
13 |       margin: 0;
14 |       padding-left: 30px;
15 |     }
16 |     li{
17 |       margin: 24px 0;
18 |       padding-left: 10px;
19 |     }
20 |   }
21 |   &__source{
22 |     max-width: 95%;
23 |     margin: 25px auto;
24 |     text-align: center;
25 |     color: rgba(#000, 0.4);
26 |   }
27 | 
28 |   @media screen and (min-width: map-get($break-points, "sm")) {
29 |     &__container{
30 |       ol{
31 |         padding-left: 40px;
32 |       }
33 |       li{
34 |         padding-left: 18px;
35 |       }
36 |     }
37 |   }
38 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/newsletter.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | .newsletter{
 3 |   min-height: auto;
 4 |   padding: 20px 0;
 5 |   margin-bottom: 100px;
 6 |   &__form{
 7 |     @include component-border();
 8 |     margin-top: 50px;
 9 |     padding: 35px;
10 |     .newsletter__form__group{
11 |       display: flex;
12 |       flex-wrap: wrap;
13 |       justify-content: space-between;
14 |       overflow: auto;
15 |       align-items: flex-start;
16 |       align-content: space-between;
17 |     }
18 | 
19 |     label{
20 |       display: block;
21 |       margin: 10px auto;
22 |     }
23 |     input{
24 |       flex-grow: 4;
25 |       width: 100%;
26 |       display: inline-block;
27 |       margin: 5px 5px 5px 0;
28 |     }
29 | 
30 |     button{
31 |       margin: 5px 5px 0 auto;
32 |       min-width: 150px;
33 |     }
34 | 
35 |     @media screen and (min-width: map-get($break-points, "lg")){
36 |       input {
37 |         width: calc(100% - 280px);
38 |       }
39 |       button{
40 |         margin: 5px 5px 0 30px;
41 |         align-self: flex-start;
42 |       }
43 |     }
44 |     @media screen and (max-width: map-get($break-points, "md")){
45 |       button{
46 |         width: 100%;
47 |       }
48 |     }
49 |   }
50 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/rtg.scss:
--------------------------------------------------------------------------------
 1 | //div.rtg__container{
 2 | //  --primary-color: black;
 3 | //}
 4 | 
 5 | //div.rtg__modal:after{
 6 | //  content: none;
 7 | //}
 8 | 
 9 | //div.rtg__modal{
10 | //  background: black;
11 | //  color:white;
12 | //}
13 | 
14 | //use step number or custom class on step element
15 | 
16 | 
17 | .vertical.rtg__container--step-3{
18 |   .rtg__modal {
19 |     background: black;
20 |     color: white;
21 |     p {
22 |       color:white;
23 |     }
24 |     max-width: 350px;
25 |   }
26 |   .rtg__button--close{
27 |     color: darkred;
28 |     &:hover{
29 |       color: red;
30 |     }
31 |   }
32 |   .rtg__badge{
33 |     background: darkred;
34 |     width: 80px;
35 |     left: 50%;
36 |     transform: translateX(-50%);
37 |     span{
38 |       font-size: .8rem;
39 |     }
40 |   }
41 |   .rtg__button--selector{
42 |     svg {
43 |       transition: transform;
44 |     }
45 |     &:hover {
46 |       svg {
47 |         transform: rotate(45deg) scale(0.8);
48 |       }
49 |       &:before{
50 |         color: orangered;
51 |       }
52 |     }
53 |   }
54 |   .rtg__button--current{
55 |     color: red;
56 |   }
57 | }
58 | 
59 | .vertical.rtg__container--step-4{
60 |   --primary-color: #ef3602;
61 | }
62 | 
63 | .vertical .rtg__modal p {
64 |   max-width: 400px;
65 | }
66 | 
67 | .vertical.rtg__container--step-10{
68 |   div.rtg__modal p:last-of-type{
69 |     margin: 0;
70 |     text-align: center;
71 |   }
72 |   .rtg__control{
73 |     margin: 0;
74 |   }
75 | }
76 | 
77 | 


--------------------------------------------------------------------------------
/src/demo/style/vertical/slider.scss:
--------------------------------------------------------------------------------
 1 | .l-section--slider{
 2 |   min-height: unset;
 3 |   margin-bottom: 50px;
 4 |   counter-reset: slider;
 5 | 
 6 | }
 7 | 
 8 | .card{
 9 |   display: flex;
10 |   flex-direction: column;
11 | //  justify-content: center;
12 |   align-items: center;
13 |   border: 1px solid rgba(#000, .2);
14 |   border-radius: 10px;
15 |   margin: 0;
16 |   padding: 20px;
17 |   width: 250px;
18 |   height: 100%;
19 |   user-select: none;
20 |   h1 {
21 |     font-size: 4rem;
22 |     color: $primary;
23 |     height: 100px;
24 |   }
25 |   h2{
26 |     margin-top: auto;
27 |   }
28 |   p {
29 |     text-align: center;
30 |     font-size: 1rem;
31 |     width: 80%;
32 |   }
33 |   &:hover{
34 |     h1{
35 |       color: $secondary;
36 |     }
37 |     .title--underscored:after{
38 |       border-color: $secondary;
39 |     }
40 |   }
41 | }


--------------------------------------------------------------------------------
/src/demo/style/vertical/vertical.scss:
--------------------------------------------------------------------------------
 1 | @import "./header.scss";
 2 | @import "./intro.scss";
 3 | @import "./documentation.scss";
 4 | @import "./slider.scss";
 5 | @import "./newsletter.scss";
 6 | @import "./list.scss";
 7 | @import "./footer";
 8 | 
 9 | @import "./rtg.scss";
10 | 
11 | section{
12 |   min-height: 100vh;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/src/lib/components/Backdrop/Backdrop.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef, useMemo, useCallback, useState, useEffect} from "react";
 2 | import PropType from "prop-types";
 3 | import throttle from "../utils/throttle";
 4 | import "./backdrop.scss";
 5 | 
 6 | const propTypes = {
 7 |     target: PropType.instanceOf(HTMLElement), // target html node element
 8 |     visible: PropType.bool, //
 9 |     offsetX: PropType.number, // offset backdrop mask from border of bbox around target
10 |     offsetY: PropType.number, //
11 |     scrollTarget: PropType.oneOfType([ // scrolled target element - main scroll usually and by default window
12 |         PropType.instanceOf(Window),
13 |         PropType.instanceOf(HTMLElement)
14 |     ])
15 | }
16 | 
17 | const Backdrop = ({target, visible, offsetX, offsetY, scrollTarget}) =>{
18 |     const layer = useRef();
19 |     const [layerStyle, setLayerStyle] = useState(null);
20 | 
21 |     /**
22 |      * update backdrop layer position in relation to target bbox coordinates
23 |      * @type {function(target: HTMLElement): void}
24 |      */
25 |     const updatePosition = useCallback((target)=>{
26 |         if(!target) {
27 |             //hidden out of screen but shadow will cover it
28 |             setLayerStyle({top: -50, left: -50, width: 10, height: 10,})
29 |             return ;
30 |         }
31 |         let tRect = target.getBoundingClientRect();
32 |         const scrollY = scrollTarget.scrollY || scrollTarget.scrollTop || 0;
33 |         const scrollX = scrollTarget.scrollX || scrollTarget.scrollLeft || 0 ;
34 | 
35 |         setLayerStyle({
36 |             top: tRect.top + scrollY - offsetY + "px",
37 |             left: tRect.left + scrollX - offsetX +"px",
38 |             width: tRect.width + (2 * offsetX)  + "px",
39 |             height: tRect.height + ( 2 * offsetY) +"px",
40 |         })
41 |     }, [setLayerStyle, offsetX, offsetY, scrollTarget])
42 | 
43 |     /**
44 |      * call update layer position in response on change target html node element
45 |      */
46 |     useEffect(()=>{
47 |         updatePosition(target);
48 |     }, [updatePosition, target])
49 | 
50 |     /**
51 |      * call update layer position in response on change window size
52 |      */
53 |     useEffect(()=>{
54 |         let update = throttle(updatePosition.bind(null, target), 100);
55 |         window.addEventListener("resize", update);
56 |         return () => {
57 |             window.removeEventListener("resize", update);
58 |         }
59 |     }, [target, updatePosition])
60 | 
61 |     /**
62 |      * update backdrop layer class name depends on visibility state
63 |      * @type {string}
64 |      */
65 |     const layerClasses = useMemo(()=>{
66 |         return `rtg__backdrop ` + [`rtg__backdrop--hidden`, `rtg__backdrop--visible`][+!!visible];
67 |     }, [visible])
68 | 
69 |     return (
70 |         <div ref={layer} style={layerStyle} className={layerClasses}/>
71 |     )
72 | }
73 | 
74 | Backdrop.propTypes = propTypes;
75 | 
76 | export default Backdrop;


--------------------------------------------------------------------------------
/src/lib/components/Backdrop/backdrop.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |   position: relative;
 3 | }
 4 | .rtg__backdrop{
 5 |   position: absolute;
 6 |   box-shadow: 0 0 0 1000vh rgba(0,0,0, .5);
 7 |   border-radius: 5px;
 8 |   pointer-events: none;
 9 |   &--visible {
10 |     display: block;
11 |   }
12 |   &--hidden {
13 |     display: none;
14 |   }
15 | }


--------------------------------------------------------------------------------
/src/lib/components/Badge/Badge.js:
--------------------------------------------------------------------------------
 1 | import React, {useMemo} from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./badge.scss";
 4 | 
 5 | const propTypes = {
 6 |     current: PropTypes.number, // current step index
 7 |     length: PropTypes.number, // length of tour, step amount
 8 |     transform: PropTypes.func, // function which can transform displayed value, translate it or whatever
 9 |     className: PropTypes.string, // class names added to badge component
10 |     isWaiting: PropTypes.bool, // if is waiting for next step ready
11 | }
12 | 
13 | const Badge = ({current ,length, transform, className, isWaiting}) =>{
14 | 
15 |     const text = useMemo(()=>{
16 |         if(current === undefined || length === undefined) {
17 |             return null;
18 |         }
19 |         if(typeof transform === "function"){
20 |             return transform(current, length);
21 |         }
22 |         return `${current + 1} of ${length}`;
23 |     }, [transform, length, current])
24 | 
25 | 
26 |     return(
27 |         <div className={"rtg__badge " + (className || "") + [' rtg__badge--waiting', ''][+!isWaiting]}>
28 |             <span> {text} </span>
29 |         </div>
30 |     )
31 | }
32 | 
33 | Badge.protoType = propTypes;
34 | 
35 | export default Badge;


--------------------------------------------------------------------------------
/src/lib/components/Badge/badge.scss:
--------------------------------------------------------------------------------
 1 | .rtg__badge{
 2 |   position: absolute;
 3 |   left: -6px;
 4 |   top:-6px;
 5 |   border-radius: 4px;
 6 |   padding: 2px 6px;
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   background: var(--primary-color);
10 |   color: white;
11 |   min-width: 60px;
12 |   span{
13 |     font-size: 0.9rem;
14 |   }
15 |   &--waiting{
16 |     animation: blinking;
17 |     animation-duration: 1.5s;
18 |     animation-timing-function: ease-in-out;
19 |     animation-direction: reverse;
20 |     animation-iteration-count: infinite;
21 |   }
22 | 
23 |   @keyframes blinking {
24 |     from{
25 |       background: var(--primary-color)
26 |     }
27 |     to{
28 |       background: var(--wating-color);
29 |     }
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/lib/components/CloseButton/CloseButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./close-button.scss";
 4 | 
 5 | const CloseSvg = () => {
 6 |     return (
 7 |         <svg aria-hidden="true" focusable="false"
 8 |          className="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg"
 9 |          viewBox="0 0 512 512">
10 |         <path fill="currentColor"
11 |               d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0
12 |               394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5
13 |               194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8
14 |                0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8
15 |                0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"/>
16 |         </svg>
17 |     )
18 | }
19 | 
20 | const propTypes = {
21 |     onClick: PropTypes.func, // handle  for click event
22 |     className: PropTypes.string, // class name string
23 |     content : PropTypes.oneOfType([
24 |         PropTypes.string,
25 |         PropTypes.element,
26 |     ])
27 | }
28 | 
29 | const CloseButton = ({onClick, className, content}) => {
30 | 
31 |     return (
32 |         <button className={"rtg__button rtg__button--close " + (className || "")} onClick={onClick}>
33 |             {content ? content : <CloseSvg/>}
34 |         </button>
35 |     )
36 | }
37 | 
38 | CloseButton.protoTypes = propTypes;
39 | 
40 | export default CloseButton;
41 | 


--------------------------------------------------------------------------------
/src/lib/components/CloseButton/close-button.scss:
--------------------------------------------------------------------------------
 1 | .rtg__button{
 2 |   &--close{
 3 |     position: absolute;
 4 |     right: 10px;
 5 |     top: 10px;
 6 |     color: var(--primary-color);
 7 |     svg{
 8 |       width: 25px;
 9 |       height: 25px;
10 |     }
11 |   }
12 | }


--------------------------------------------------------------------------------
/src/lib/components/Context/Context.js:
--------------------------------------------------------------------------------
 1 | import React, {useMemo, useRef} from "react"
 2 | 
 3 | export const Context = React.createContext(null);
 4 | 
 5 | const TourRoot = ({children}) => {
 6 |     const _controls = useRef({});
 7 |     const _hooks = useRef({});
 8 | 
 9 |     const value = useMemo(() => ({
10 |         registerControl : (id, controls) => {
11 |             _controls.current[id] = controls
12 |         },
13 |         fire: (id, event, ...args) => {
14 |             const callbacks = (_hooks.current && _hooks.current[id] && _hooks.current[id].get(event)) || [];
15 |             const response = []
16 |             for(let callback of callbacks){
17 |                 response.push(callback(...args));
18 |             }
19 |             return response;
20 |         },
21 |         tour: function tour(...args){
22 |             const id = args[args.length - 1];
23 |             return new Proxy({
24 |                 on : (event, callback) => {
25 |                     if(!_hooks.current[id]) _hooks.current[id] = new Map();
26 |                     if(_hooks.current[id].has(event)){
27 |                         _hooks.current[id].set(event, [..._hooks.current[id].get(event), callback])
28 |                     } else{
29 |                         _hooks.current[id].set(event, [callback])
30 |                     }
31 |                 },
32 |                 un: (event, callback) => {
33 |                     if(!_hooks.current[id] || !_hooks.current[id].has(event)) return;
34 |                     _hooks.current[id].set(event, [..._hooks.current[id].get(event).filter( clb => clb !== callback)])
35 |                 },
36 |             }, {
37 |                 get(target, prop, receiver) {
38 |                     if(prop === 'get'){
39 |                         return tour;
40 |                     }
41 |                     if(Reflect.has(_controls.current[id] || {}, prop)){
42 |                         return Reflect.get(_controls.current[id], prop, receiver)
43 |                     } else if(Reflect.has(target, prop)){
44 |                         return Reflect.get(target, prop, receiver); // (1)
45 |                     } else {
46 |                         return () => {
47 |                             throw new ReferenceError(`Given prop: '${prop}' or tourId : '${id}' doesn't exist`)
48 |                         }
49 |                     }
50 | 
51 |                 },
52 | 
53 |             })
54 |         }
55 |     }), [_controls, _hooks])
56 | 
57 |     return (
58 |         <Context.Provider value={value}>
59 |             {children}
60 |         </Context.Provider>
61 |     )
62 | }
63 | 
64 | export default TourRoot;


--------------------------------------------------------------------------------
/src/lib/components/Control/Button.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types"
 3 | import "./control.scss";
 4 | 
 5 | const ArrowSvg = () => {
 6 |     return (
 7 |         <svg aria-hidden="true" focusable="false"
 8 |          className="svg-inline--fa fa-angle-double-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
 9 |          viewBox="0 0 448 512">
10 |         <path fill="currentColor"
11 |               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3
12 |               103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0
13 |               33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"/>
14 |         </svg>
15 |     )
16 | }
17 | 
18 | const propTypes = {
19 |     type: PropTypes.oneOf(["next", "prev"]),
20 |     onClick: PropTypes.func,
21 |     disabled: PropTypes.bool,
22 |     content: PropTypes.oneOfType([
23 |         PropTypes.string,
24 |         PropTypes.element,
25 |     ])
26 | }
27 | 
28 | const Button = ({onClick, type, content, disabled}) =>{
29 |     return(
30 |         <button className={"rtg__button rtg__button--" + type}
31 |                 onClick={onClick}
32 |                 disabled={disabled}>
33 |             { content? content : <ArrowSvg/>}
34 |         </button>
35 |     )
36 | }
37 | 
38 | Button.propTypes = propTypes;
39 | 
40 | export default Button;


--------------------------------------------------------------------------------
/src/lib/components/Control/Control.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import Button from "./Button";
 4 | import Selector from "./Selector/Selector";
 5 | 
 6 | const propTypes = {
 7 |     current : PropTypes.number, // index of current step
 8 |     length : PropTypes.number, // steps amount
 9 |     lock: PropTypes.number, // next lock step - from this step to end steps are locked
10 |     set: PropTypes.func, // handle for set step index
11 |     prev: PropTypes.func, // previous step
12 |     next: PropTypes.func, // next step
13 |     withNumber: PropTypes.bool, // with number over select buttons
14 |     controlButtons: PropTypes.shape({ // content of control buttons
15 |         prev : PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
16 |         next : PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
17 |         selector: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
18 |         selectorCurrent :PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
19 |     }),
20 |     finishControls: PropTypes.element, // react component which will be rendered as last step control element
21 | }
22 | 
23 | const Control = ({current, length, set, next, prev, lock, withNumber, controlButtons, finishControls}) => {
24 | 
25 |     return (
26 |         <div className={"rtg__control"}>
27 |             {(!finishControls || current !== length - 1) &&
28 |                 <>
29 |                     <Button type={"prev"}
30 |                          onClick={prev}
31 |                          disabled={current === 0}
32 |                          content={controlButtons && controlButtons.prev}/>
33 |                     <Selector set={set} length={length}
34 |                         current={current}
35 |                         lock={lock}
36 |                         withNumber={withNumber}
37 |                         content={controlButtons && controlButtons.selector}
38 |                         contentCurrent={controlButtons && controlButtons.current}/>
39 |                     <Button type={"next"}
40 |                         onClick={next}
41 |                         disabled={current === length - 1 || current === lock}
42 |                         content={controlButtons && controlButtons.next}/>
43 |                 </>
44 |             }
45 |             {(finishControls && current === length - 1) && finishControls}
46 |         </div>
47 |     )
48 | }
49 | 
50 | Control.propTypes = propTypes;
51 | 
52 | export default Control;


--------------------------------------------------------------------------------
/src/lib/components/Control/Selector/Button.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | const SquareSvg = () => {
 5 |     return (
 6 |         <svg aria-hidden="true" focusable="false"
 7 |          className="svg-inline--fa fas-square fa-w-14"
 8 |          role="img" xmlns="http://www.w3.org/2000/svg"
 9 |          viewBox="0 0 448 512">
10 |             <path fill="currentColor"
11 |                   d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6
12 |                    400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"/>
13 |         </svg>
14 |     )
15 | }
16 | 
17 | const SquareSolidSvg = ()=>{
18 |     return (
19 |         <svg aria-hidden="true" focusable="false"
20 |              className="svg-inline--fa fa-square fa-w-14"
21 |              role="img" xmlns="http://www.w3.org/2000/svg"
22 |              viewBox="0 0 448 512">
23 |             <path fill="currentColor"
24 |                   d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"/>
25 |         </svg>
26 |     )
27 | }
28 | 
29 | const propTypes = {
30 |     isCurrentStep: PropTypes.bool, // is button indicates current step
31 |     onClick: PropTypes.func, // handle for click event
32 |     disable: PropTypes.bool, // is button disabled state
33 |     content: PropTypes.oneOfType([ // content of button
34 |         PropTypes.string,
35 |         PropTypes.element,
36 |     ]),
37 |     className: PropTypes.string, // class name string
38 | }
39 | 
40 | const Button = ({isCurrentStep, onClick, disabled, content, className}) => {
41 |     return (
42 |         <button onClick={onClick} disabled={disabled}
43 |                 className={"rtg__button rtg__button--selector " + ["", "rtg__button--current "][+!!isCurrentStep] + className}>
44 |             {content ? content : (isCurrentStep ? <SquareSolidSvg/> : <SquareSvg/>)}
45 |         </button>
46 |     )
47 | }
48 | 
49 | Button.propTypes = propTypes;
50 | 
51 | export default Button;


--------------------------------------------------------------------------------
/src/lib/components/Control/Selector/Selector.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import Button from "./Button";
 4 | 
 5 | const propTypes = {
 6 |     current: PropTypes.number, // index of current step
 7 |     length : PropTypes.number, // steps amount
 8 |     lock: PropTypes.number, // from witch step steps are locked
 9 |     content: PropTypes.oneOfType(
10 |         [PropTypes.string, PropTypes.element]// content of selector button
11 |     ),
12 |     contentCurrent: PropTypes.oneOfType(
13 |         [PropTypes.string, PropTypes.element]// content of selector button representing current step
14 |     ),
15 |     withNumber: PropTypes.bool, // with step number over selector buttons or not
16 | }
17 | 
18 | const Selector = ({length, current, lock, set,  content, withNumber, contentCurrent}) => {
19 |     return (
20 |         <>
21 |             {Array(length).fill(1).map(( _, index)=> (
22 |                 <Button key={"select-button-" + index}
23 |                         isCurrentStep={index === current}
24 |                         onClick={set.bind(null, index)}
25 |                         disabled={(lock !== undefined) && (index > lock)}
26 |                         className={((withNumber === false) && "rtg__button--hide-before") || ""}
27 |                         content={(index === current) ? contentCurrent : content}/>
28 |             ))}
29 |         </>
30 |     )
31 | }
32 | 
33 | Selector.propType = propTypes;
34 | 
35 | export default Selector;


--------------------------------------------------------------------------------
/src/lib/components/Control/control.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |   counter-reset: rtg_selector;
 3 | }
 4 | 
 5 | .rtg {
 6 |   &__control{
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-self: flex-end;
10 |     margin-top: 24px;
11 |   }
12 | 
13 |   &__button{
14 |     border: none;
15 |     padding: 0;
16 |     margin: 0 2px;
17 |     display: inline-flex;
18 |     justify-content: center;
19 |     align-items: center;
20 | 
21 |     color: var(--primary-color);
22 |     outline: none;
23 |     &:focus{
24 |       outline: solid 1px rgba(0,0,0,0.1);
25 |     }
26 |     &:disabled{
27 |       cursor: not-allowed;
28 |     }
29 |     svg{
30 |       width: 30px;
31 |       height: 30px;
32 |     }
33 |     &--prev{
34 |       svg{
35 |         transform: rotate(180deg);
36 |       }
37 |     }
38 |     &--selector{
39 |       position: relative;
40 | 
41 |       svg{
42 |         width: 20px;
43 |         height: 20px;
44 |       }
45 |       &:before{
46 |         counter-increment: rtg_selector;
47 |         content: counter(rtg_selector);
48 |         opacity: 0;
49 |         display: flex;
50 |         justify-content: center;
51 |         align-items: center;
52 |         position: absolute;
53 |         bottom: 28px;
54 |         width: 20px;
55 |       }
56 |       &:hover:before{
57 |         opacity: .5;
58 |       }
59 |     }
60 |     &--hide-before:before{
61 |       display: none;
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/lib/components/Modal/Modal.js:
--------------------------------------------------------------------------------
  1 | import React, {useMemo, useRef, useState, useEffect, useCallback} from "react";
  2 | import PropTypes from "prop-types"
  3 | import "./modal.scss"
  4 | import toRange from "../utils/toRange";
  5 | import placementToObj from "../utils/placementToObj";
  6 | import throttle from "../utils/throttle";
  7 | 
  8 | const propTypes = {
  9 |     children: PropTypes.element,
 10 |     target : PropTypes.instanceOf(HTMLElement), // target element to position modal dialog
 11 |     placement: PropTypes.string, // placement in relative to target element
 12 |     offsetY: PropTypes.number, // offset from initial destination placement
 13 |     offsetX: PropTypes.number,
 14 |     visible: PropTypes.bool, // is visible state
 15 |     isWaiting: PropTypes.bool, // if is waiting for next step ready
 16 |     refreshTimeout: PropTypes.number, // time after transition end to refresh position - in some case browser can change size
 17 |     // dialog and then recalculation can update position - usually on mobile device when is not enough space
 18 |     scrollTarget: PropTypes.oneOfType([
 19 |         PropTypes.instanceOf(Window),
 20 |         PropTypes.instanceOf(HTMLElement)
 21 |     ]),
 22 | }
 23 | 
 24 | const Modal = (
 25 | {
 26 |     children,
 27 |     target,
 28 |     placement,
 29 |     offsetX,
 30 |     offsetY,
 31 |     visible,
 32 |     isWaiting,
 33 |     refreshTimeout = 801, scrollTarget= window
 34 | }) => {
 35 |     const container = useRef();
 36 |     const [modalStyles , setModalStyles] = useState({});
 37 |     const [finalPlacement, setFinalPlacement] = useState();
 38 | 
 39 |     /**
 40 |      * return top position coordinates relative to target Bbox
 41 |      * @type {function(HtmlBoundingBox,  HtmlBoundingBox, string:'top'|'bottom'|'center'): number}
 42 |      */
 43 |     const getTopToElement = useCallback((tRect, cRect, placement) => {
 44 |         let top = scrollTarget.scrollY || scrollTarget.scrollTop || 0;
 45 |         switch (placement){
 46 |             case "top":{
 47 |                 top += tRect.top  - (cRect.height / 2) - offsetY
 48 |                 break ;
 49 |             }
 50 |             case "center":{
 51 |                 top += tRect.top + tRect.height / 2;
 52 |                 break;
 53 |             }
 54 |             case "bottom":
 55 |             default : {
 56 |                 top += tRect.bottom + (cRect.height / 2) + offsetY;
 57 |             }
 58 |         }
 59 |         return top;
 60 |     }, [offsetY, scrollTarget])
 61 |     /**
 62 |      * return left position coordinates relative to BBox
 63 |      * @type {function(HtmlBoundingBox, HtmlBoundingBox, string:'left'|'right'|'center'): number}
 64 |      */
 65 |     const getLeftToElement = useCallback((tRect, cRect, placement) => {
 66 |         let left = scrollTarget.scrollX || scrollTarget.scrollLeft || 0;
 67 |         switch(placement){
 68 |             case "left": {
 69 |                 left += tRect.left - (cRect.width / 2) - offsetX;
 70 |                 break;
 71 |             }
 72 |             case "right":{
 73 |                 left += tRect.right + (cRect.width / 2)   + offsetX;
 74 |                 break;
 75 |             }
 76 |             case "center":
 77 |             default: {
 78 |                 left += tRect.left + (tRect.width / 2)
 79 |             }
 80 |         }
 81 |         return left;
 82 |     }, [offsetX, scrollTarget])
 83 | 
 84 |     /**
 85 |      * return position relative to target BBox
 86 |      * @type {function(HtmlBoundingBox, HtmlBoundingBox, {x:'left' | 'right' | 'center', y: 'top' | 'left' | 'center'})
 87 |      * : {top: number, left: number}}
 88 |      */
 89 |     const getPositionToElement = useCallback((tRect, cRect, placement) => {
 90 |         return {
 91 |             top : getTopToElement(tRect, cRect, placement.y),
 92 |             left : getLeftToElement(tRect, cRect, placement.x),
 93 |         }
 94 |     }, [getLeftToElement, getTopToElement])
 95 | 
 96 |     /**
 97 |      * return top position coordinates relative to window
 98 |      * @type {function(HtmlBoundingBox, string:'top'|'bottom'|'center'): number}
 99 |      */
100 |     const getTopToWindow = useCallback((cRect, placement) => {
101 |         switch(placement){
102 |             case "top":{
103 |                 return cRect.height / 2 + offsetY;
104 |             }
105 |             case "bottom": {
106 |                 return window.innerHeight - cRect.height / 2 - offsetY;
107 |             }
108 |             case "center":
109 |             default: {
110 |                return window.innerHeight / 2;
111 |             }
112 |         }
113 |     },[offsetY])
114 | 
115 |     /**
116 |      * return left position coordinates relative to window
117 |      * @type {function(HtmlBoundingBox, string:'left'|'right'|'center'): number}
118 |      */
119 |     const getLeftToWindow = useCallback((cRect, placement)=>{
120 |         switch (placement){
121 |             case "left":{
122 |                 return cRect.width / 2 + offsetX;
123 |             }
124 |             case "right":{
125 |                 return window.innerWidth - cRect.width / 2 - offsetX;
126 |             }
127 |             case "center":
128 |             default:{
129 |                 return window.innerWidth / 2;
130 |             }
131 |         }
132 |     }, [offsetX])
133 | 
134 |     /**
135 |      * return position coordinates relative to window
136 |      * @type {function(HtmlBoundingBox, {x:'left' | 'right' | 'center', y: 'top' | 'left' | 'center'}): {top: number, left: number}}
137 |      */
138 |     const getPositionToWindow = useCallback((cRect, placement) =>{
139 |         return {
140 |             top: getTopToWindow(cRect, placement.y),
141 |             left: getLeftToWindow(cRect, placement.x)
142 |         }
143 |     }, [getTopToWindow, getLeftToWindow])
144 | 
145 |     /**
146 |      * update modal dialog position based on target bbox coordinates
147 |      * @type {function(): void}
148 |      */
149 |     const updatePosition = useCallback(()=>{
150 |         if(!container.current) return ;
151 | 
152 |         const _placement = placementToObj(placement);
153 |         const cRect = container.current.getBoundingClientRect();
154 |         // if there is no target - window is target
155 |         if(!target)  {
156 |             let position = getPositionToWindow(cRect, _placement);
157 |             setModalStyles({top: position.top + "px", left: position.left + "px"});
158 |             setFinalPlacement(`window-${_placement.y}-${_placement.x}`);
159 |             return ;
160 |         }
161 |         // in relation to target bbox
162 |         const tRect = target.getBoundingClientRect();
163 |         const get = getPositionToElement.bind(null, tRect, cRect);
164 | 
165 |         let calls = 0;
166 |         function tryGetPosition(placement) {
167 |             let position = get(placement);
168 |             calls++;
169 |             if(calls > 7){ // limit to stop calling if there is no optimal position - it is not happening but just in case
170 |                 setFinalPlacement(`${placement.y}-${placement.x}`);
171 |                 return position;
172 |             }
173 | 
174 |             // out of bottom of screen
175 |             if((position.top > document.body.scrollHeight)) {
176 |                 return tryGetPosition({...placement, y : "top"})
177 |             }
178 |             // out of top screen
179 |             if((position.top < cRect.height / 2)){
180 |                 return tryGetPosition({...placement, y: "bottom"})
181 |             }
182 |             //if is not enough space on left side
183 |             if(placement.x === "left" &&
184 |                (position.left - cRect.width / 2  < 10
185 |              || position.left - cRect.width / 2  < scrollTarget.scrollLeft)){
186 |                 return tryGetPosition({x: "center", y: "top"});
187 |             }
188 |             // if is not enough space on right side
189 |             if(placement.x === "right" &&
190 |               (position.left + (cRect.width / 2) > document.body.scrollWidth - 10
191 |             || position.left + cRect.width /2 > scrollTarget.scrollLeft + window.innerWidth)) {
192 |                 return tryGetPosition({x: "center", y: "top"})
193 |             }
194 | 
195 |             //
196 |             if((placement.x === "center" && placement.y === "bottom")
197 |             && position.top + cRect.height / 2  + offsetY > window.scrollY + window.innerHeight){
198 |                 return tryGetPosition({x: "center", y: "top"})
199 |             }
200 | 
201 |             position.left = toRange(position.left,
202 |                 cRect.width / 2 + 5,
203 |                 document.body.scrollWidth - (cRect.width / 2) - 5)
204 | 
205 |             setFinalPlacement(`${placement.y}-${placement.x}`);
206 |             return position;
207 |         }
208 | 
209 |         let position = tryGetPosition(_placement);
210 | 
211 |         setModalStyles({top: position.top + "px", left: position.left + "px"})
212 |     }, [target, placement, setModalStyles, getPositionToElement,
213 |         getPositionToWindow, setFinalPlacement, offsetY, scrollTarget])
214 | 
215 |     /**
216 |      * invoke update modal dialog position in response on change target and visibility
217 |      * after refresh threshold time position is once again updated to eventually
218 |      * change it if is not enough space after updating modal dialog size in the initial target destination
219 |      */
220 |     useEffect(()=>{
221 |        if(!visible) return ;
222 |        setTimeout(() => window.requestAnimationFrame(()=> {
223 |            updatePosition()
224 |        }),0);
225 |        setTimeout(() => updatePosition(), refreshTimeout)
226 |     }, [target, updatePosition, visible, refreshTimeout])
227 | 
228 |     /**
229 |      * update modal dialog position in response on change window size - thresholded
230 |      */
231 |     useEffect(()=>{
232 |         const update = throttle(updatePosition, 100);
233 |         window.addEventListener("resize", update);
234 |         return () =>{
235 |            window.removeEventListener("resize", update);
236 |         }
237 |     }, [updatePosition])
238 | 
239 |     /**
240 |      * modal div container class names depended on visible and placement
241 |      * @type {string}
242 |      */
243 |     const modalClasses = useMemo(()=>{
244 |         return `rtg__modal `
245 |              +['rtg__modal--hidden ', 'rtg__modal--visible '][+!!visible]
246 |              +['rtg__modal--waiting ', ' '][+!isWaiting]
247 |              + (finalPlacement ? `rtg__modal--` + finalPlacement : "");
248 |     }, [visible, finalPlacement, isWaiting])
249 | 
250 |     return (
251 |         <div ref={container} className={modalClasses} style={modalStyles}>
252 |             {children}
253 |         </div>
254 |     )
255 | }
256 | 
257 | Modal.propTypes = propTypes;
258 | 
259 | export default Modal;


--------------------------------------------------------------------------------
/src/lib/components/Modal/modal.scss:
--------------------------------------------------------------------------------
  1 | .rtg__modal{
  2 |   position: absolute;
  3 |   padding: 40px 20px 20px;
  4 |   top: 50vh;
  5 |   left: 50%;
  6 |   transition-property: top, left, scale;
  7 |   transition-duration: .8s;
  8 |   background: white;
  9 |   border-radius: 5px;
 10 |   min-width: 300px;
 11 |   filter: drop-shadow(0 0 5px rgba(#000 , .5));
 12 |   max-width: 90vw;
 13 |   &--hidden{
 14 |     display: none;
 15 |     transform: translate(-50%, -50%) scale(0);
 16 |   }
 17 |   &--visible{
 18 |     opacity: 1;
 19 |     display: block;
 20 |     transform: translate(-50%, -50%) scale(1);
 21 |   }
 22 | 
 23 |   &:after{
 24 |     content: "";
 25 |     position: absolute;
 26 |     background: inherit;
 27 |     z-index: -1;
 28 |   }
 29 |   &--top-center{
 30 |     &:after{
 31 |       display: block;
 32 |       left: 50%;
 33 |       transform: translateX(-50%);
 34 |       bottom: calc((-1 * var(--arrow-size)) + 1px);
 35 |       width: calc(2 * var(--arrow-size));
 36 |       height: var(--arrow-size);
 37 |       clip-path: polygon(0 0, 50% 100%, 100% 0);
 38 |     }
 39 |   }
 40 |   &--top-right{
 41 |     &:after{
 42 |       display: block;
 43 |       bottom: calc(-1 * var(--arrow-size));
 44 |       left: calc(-1 * var(--arrow-size));
 45 |       width: calc(2 * var(--arrow-size));
 46 |       height: calc(2 * var(--arrow-size));
 47 |       clip-path: polygon(0 100%, 50% 0, 100% 50%);
 48 |     }
 49 |   }
 50 |   &--top-left{
 51 |     &:after{
 52 |       display: block;
 53 |       bottom: calc(-1 * var(--arrow-size));
 54 |       right: calc(-1 * var(--arrow-size));
 55 |       width: calc(2 * var(--arrow-size));
 56 |       height: calc(2 * var(--arrow-size));
 57 |       clip-path: polygon(50% 0, 100% 100%, 0 50%);
 58 |     }
 59 |   }
 60 |   &--bottom-center{
 61 |     &:after{
 62 |       display: block;
 63 |       left: 50%;
 64 |       transform: translateX(-50%);
 65 |       top: calc((-1 * var(--arrow-size)) + 1px);
 66 |       width: calc(2 * var(--arrow-size));
 67 |       height: var(--arrow-size);
 68 |       clip-path: polygon(0 100%, 50% 0, 100% 100%);
 69 |     }
 70 |   }
 71 |   &--center-right{
 72 |     &:after{
 73 |       display: block;
 74 |       top: 50%;
 75 |       left: calc((-1 * var(--arrow-size)) + 1px);
 76 |       transform: translateY(-50%);
 77 |       width: var(--arrow-size);
 78 |       height: calc(2 * var(--arrow-size));
 79 |       clip-path: polygon(100% 0, 0 50%, 100% 100%);
 80 |     }
 81 |   }
 82 |   &--center-left{
 83 |     &:after{
 84 |       display: block;
 85 |       top: 50%;
 86 |       transform: translateY(-50%);
 87 |       right: calc((-1 * var(--arrow-size)) + 1px);
 88 |       width: var(--arrow-size);
 89 |       height: calc(2 * var(--arrow-size));
 90 |       clip-path: polygon(0 0, 100% 50%, 0 100%);
 91 |     }
 92 |   }
 93 |   &--bottom-left{
 94 |     &:after{
 95 |       display: block;
 96 |       top: calc(-1 * var(--arrow-size));
 97 |       right: calc(-1 * var(--arrow-size));
 98 |       width: calc(2 * var(--arrow-size));
 99 |       height: calc(2 * var(--arrow-size));
100 |       clip-path: polygon(0 50%, 100% 0, 50% 100%);
101 |     }
102 |   }
103 |   &--bottom-right{
104 |     &:after{
105 |       display: block;
106 |       top: calc(-1 * var(--arrow-size));
107 |       left: calc(-1 * var(--arrow-size));
108 |       width: calc(2 * var(--arrow-size));
109 |       height: calc(2 * var(--arrow-size));
110 |       clip-path: polygon(0 0, 50% 100%, 100% 50%);
111 |     }
112 |   }
113 | }


--------------------------------------------------------------------------------
/src/lib/components/Pin/Pin.js:
--------------------------------------------------------------------------------
  1 | import React, {useMemo, useState, useEffect, useCallback} from "react";
  2 | import placementToObj from "../utils/placementToObj";
  3 | import throttle from "../utils/throttle";
  4 | import "./pin.scss";
  5 | 
  6 | const Pin = ({onClick, pinText, target, visible, scrollTarget, placement, offset  = 0})=>{
  7 |     const [pinStyle, setPinStyle] = useState({})
  8 |     /**
  9 |      * transform string placement to object
 10 |      * @type {{x: string, y: string}}
 11 |      * @private
 12 |      */
 13 |     const _placement = useMemo(()=>{
 14 |         return placementToObj(placement);
 15 |     }, [placement])
 16 | 
 17 |     /**
 18 |      * return class names for pin button
 19 |      * @type {string}
 20 |      */
 21 |     const classes = useMemo(()=>{
 22 |         return "rtg__pin "
 23 |         + ["rtg__pin--hidden", "rtg__pin--visible"][+!!visible]
 24 |         + ` rtg__pin--${_placement.y}-${_placement.x}`
 25 |     }, [_placement, visible])
 26 | 
 27 |     /**
 28 |      * return top position coordinates relative to BoundingBox
 29 |      * @type {function(string:'top'|'bottom'|'center', HtmlBoundingBox): number}
 30 |      */
 31 |     const getTopToElement = useCallback((placement, tRect) => {
 32 |         let top = scrollTarget.scrollY || scrollTarget.scrollTop || 0;
 33 |         top += tRect.top;
 34 |         switch (placement){
 35 |             case "top": {
 36 |                 top -= offset;
 37 |                 break;
 38 |             }
 39 |             case "bottom":{
 40 |                 top += tRect.height + offset;
 41 |                 break;
 42 |             }
 43 |             case "center":
 44 |             default :{
 45 |                 top += tRect.height / 2;
 46 |                 break;
 47 |             }
 48 |         }
 49 |         return top;
 50 |     },[scrollTarget, offset])
 51 | 
 52 |     /**
 53 |      * return left position coordinates relative to BoundingBox
 54 |      * @type {function(string:'left'|'right'|'center', HtmlBoundingBox): number}
 55 |      */
 56 |     const getLeftToElement = useCallback((placement, tRect) => {
 57 |         let left = scrollTarget.scrollX || scrollTarget.scrollLeft || 0;
 58 |         left += tRect.left;
 59 |         switch (placement){
 60 |             case "left": {
 61 |                 left -= offset;
 62 |                 break;
 63 |             }
 64 |             case "right":{
 65 |                 left += tRect.width + offset;
 66 |                 break;
 67 |             }
 68 |             case "center":
 69 |             default :{
 70 |                 left += tRect.width / 2;
 71 |                 break;
 72 |             }
 73 |         }
 74 |         return left;
 75 |     },[scrollTarget, offset])
 76 | 
 77 |     /**
 78 |      * return position relative to HtmlBoundingBox
 79 |      * @type {function({x:'left' | 'right' | 'center', y: 'top' | 'left' | 'center'}, HtmlBoundingBox)
 80 |      * : {top: number, left: number}}
 81 |      */
 82 |     const getPositionToElement = useCallback((placement, tRect)=>{
 83 |         return {
 84 |             top: getTopToElement(placement.y, tRect),
 85 |             left: getLeftToElement(placement.x, tRect)
 86 |         }
 87 |     }, [getTopToElement, getLeftToElement])
 88 | 
 89 |     /**
 90 |      * return top position coordinates relative to window
 91 |      * @type {function(string:'top'|'bottom'|'center'): number}
 92 |      */
 93 |     const getTopToWindow = useCallback((placement)=>{
 94 |         let top = 0;
 95 |         switch (placement){
 96 |             case "top": {
 97 |                 top += 50 + offset;
 98 |                 break;
 99 |             }
100 |             case "bottom":{
101 |                 top += window.innerHeight - 50 - offset;
102 |                 break;
103 |             }
104 |             case "center":
105 |             default :{
106 |                 top += window.innerHeight / 2;
107 |                 break;
108 |             }
109 |         }
110 |         return top;
111 |     }, [offset])
112 | 
113 |     /**
114 |      * return top position coordinates relative to window
115 |      * @type {function(string:'left'|'right'|'center'): number}
116 |      */
117 |     const getLeftToWindow = useCallback((placement)=>{
118 |         let left = 0;
119 |         switch (placement){
120 |             case "left": {
121 |                 left += 50 + offset;
122 |                 break;
123 |             }
124 |             case "right":{
125 |                 left += window.innerWidth - 50 - offset;
126 |                 break;
127 |             }
128 |             case "center":
129 |             default :{
130 |                 left += window.innerWidth / 2;
131 |                 break;
132 |             }
133 |         }
134 |         return left;
135 |     },[offset])
136 | 
137 |     /**
138 |      * return position coordinates relative to window
139 |      * @type {function({x:'left' | 'right' | 'center', y: 'top' | 'left' | 'center'}): {top: number, left: number}}
140 |      */
141 |     const getPositionToWindow = useCallback((placement) => {
142 |         return {
143 |             top: getTopToWindow(placement.y),
144 |             left: getLeftToWindow(placement.x)
145 |         }
146 |     }, [getTopToWindow, getLeftToWindow])
147 |     /**
148 |      * update style positioning of pin button
149 |      * @type {function() : void}
150 |      */
151 |     const updateStyle = useCallback(()=>{
152 |         let position;
153 |         if(!target) {
154 |             position = getPositionToWindow(_placement);
155 |         } else {
156 |             let tRect = target.getBoundingClientRect();
157 |             position = getPositionToElement(_placement, tRect);
158 |         }
159 |         setPinStyle({left: position.left + "px", top : position.top + "px"})
160 |     }, [target, _placement, setPinStyle, getPositionToWindow, getPositionToElement])
161 | 
162 |     /**
163 |      * update position in response on change target
164 |      */
165 |     useEffect(function update(){
166 |         updateStyle();
167 |     }, [target, updateStyle])
168 | 
169 |     /**
170 |      * update position in response on window resize
171 |      */
172 |     useEffect(()=>{
173 |         const update = throttle(updateStyle, 100);
174 |         window.addEventListener("resize", update)
175 |         return () => window.removeEventListener("resize", update)
176 |     })
177 | 
178 |     return (
179 |         <button style={pinStyle} onClick={onClick} className={classes}>
180 |             {pinText !== false &&
181 |                 <span>
182 |                     {(pinText && typeof pinText === "string" ? pinText : "Open tutorial")}
183 |                 </span>
184 |             }
185 |         </button>
186 |     )
187 | }
188 | 
189 | export default Pin


--------------------------------------------------------------------------------
/src/lib/components/Pin/pin.scss:
--------------------------------------------------------------------------------
 1 | .rtg__pin{
 2 |   position: absolute;
 3 |   top: -100px;
 4 |   left: -100px;
 5 |   width: 20px;
 6 |   height: 20px;
 7 |   padding: 0;
 8 |   margin:0;
 9 |   border: none;
10 |   border-radius: 50%;
11 |   transform: translate(-50%, -50%);
12 |   &, &:focus{
13 |     outline: none;
14 |   }
15 | 
16 |   &:hover span{
17 |     display: block;
18 |   }
19 | 
20 |   span{
21 |     display: none;
22 |     position: absolute;
23 |     white-space: nowrap;
24 |     top: -40px;
25 |     left: 10px;
26 |     border : 1px solid rgba(#000, .3);
27 |     border-radius: 2px;
28 |     padding: 4px 6px;
29 |     color: var(--primary-color);
30 |     background: white;
31 |   }
32 | 
33 |   &:before {
34 |       content: '';
35 |       position: relative;
36 |       display: block;
37 |       width: 300%;
38 |       height: 300%;
39 |       box-sizing: border-box;
40 |       margin-left: -100%;
41 |       margin-top: -100%;
42 |       border-radius: 45px;
43 |       background-color: var(--pin-color);
44 |       animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
45 |   }
46 | 
47 |   &:after {
48 |       content: '';
49 |       position: absolute;
50 |       left: 0;
51 |       top: 0;
52 |       display: block;
53 |       width: 100%;
54 |       height: 100%;
55 |       background-color: white;
56 |       border-radius: 15px;
57 |       box-shadow: 0 0 8px rgba(0,0,0,.3);
58 |       animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
59 |   }
60 | 
61 |   @keyframes pulse-ring {
62 |     0% {
63 |       transform: scale(.33);
64 |     }
65 |     80%, 100% {
66 |       opacity: 0;
67 |     }
68 |   }
69 | 
70 |   @keyframes pulse-dot {
71 |     0% {
72 |       transform: scale(.8);
73 |     }
74 |     50% {
75 |       transform: scale(1);
76 |     }
77 |     100% {
78 |       transform: scale(.8);
79 |     }
80 |   }
81 | }
82 | 
83 | 


--------------------------------------------------------------------------------
/src/lib/components/Step/Step.js:
--------------------------------------------------------------------------------
 1 | import React, {useMemo} from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | const propTypes = {
 5 |     id: PropTypes.string, // step identification
 6 |     selector: PropTypes.string, // css selector if is not provided then it will be located in relation to window
 7 |     placement: PropTypes.oneOf([
 8 |         "center", // only in relation to window - in relation to selector it will cover object !!!
 9 |         "top", "bottom", "right", "left",
10 |         "top-right", "top-left",
11 |         "bottom-right", "bottom-left"
12 |     ]),
13 |     content: PropTypes.func,// content render function called with isWaiting bool arg
14 |     // it takes precedence over regular children step content
15 |     onBeforeShow: PropTypes.func, // called before show, you can prepare some action here
16 |     onShow: PropTypes.func, // called after showing step but before scroll
17 |     onAfterScroll: PropTypes.func, /// called after scrolling window to step position
18 |     onBeforeNext: PropTypes.func, // if return false block go to next step
19 |     onWait: PropTypes.func, // called when step is waiting to show - with true when waits and false when is finish
20 |     approve: PropTypes.oneOfType([
21 |         PropTypes.bool, // if you pass just 'approve=true' by default it will take click event
22 |         PropTypes.shape({
23 |             event: PropTypes.string, // if is set to 'none' then only promise option works
24 |             target: PropTypes.string, // by default step selector.
25 |             callback: PropTypes.func,
26 |             // if event will be fired on target then callback will be called if return true then is approved
27 |             delay: PropTypes.number, // delay from callback or pure event approve to go next slide
28 |             promise: PropTypes.func, // a function which have to return promise, if promise is resolved then is approved
29 |             lock: PropTypes.bool, // lock go next step until task is not done
30 |         })
31 |     ]),
32 |     closeOnBackdrop: PropTypes.bool, // close on backdrop click - eg. you can set it on last step
33 |     backdropOffset: PropTypes.number, // if is not set will take default value 5
34 |     backdropOffsetX: PropTypes.number, // similar lik in general case
35 |     backdropOffsetY: PropTypes.number, // ..like in x
36 |     scroll: PropTypes.bool, //if false then on this step page is not scrolled
37 |     scrollOffset: PropTypes.number, // by default scroll to display element on center of screen
38 |     scrollOffsetX: PropTypes.number, // from horizontal screen center
39 |     scrollOffsetY: PropTypes.number, // from vertical screen center
40 |     offset: PropTypes.number, // if is not set will take general default value 30
41 |     offsetX: PropTypes.number, // by default not set so it hase general default 30
42 |     offsetY: PropTypes.number, // ... similar like in x
43 |     pinPlacement: PropTypes.oneOf([
44 |         "center", // if is pin option on, and this is not set then it will take modal placement
45 |         "top", "bottom", "right", "left",
46 |         "top-right", "top-left",
47 |         "bottom-right", "bottom-left"
48 |     ]),
49 |     pinOffset: PropTypes.number, // offset from pin placement by default 0;
50 |     pinText: PropTypes.oneOfType([
51 |         PropTypes.bool, // if false then tool tip text is hidden, if true or unset then default text will be shown
52 |         PropTypes.string, // text over hover pin if you pass empty string then tool tip will disappear
53 |     ]),
54 |     className: PropTypes.string, // class name for step wrapper
55 | 
56 |     wait: PropTypes.oneOfType([
57 |         PropTypes.func, // a function returning promise
58 |         PropTypes.number // a number of milliseconds to wait
59 |     ])
60 | }
61 | 
62 | const Step = ({children, className}) => {
63 |     const classes = useMemo(() =>{
64 |         return "rtg__step " + (className ? className : "");
65 |     }, [className])
66 | 
67 |     return (
68 |         <div className={classes}>
69 |             {children}
70 |         </div>
71 |     )
72 | }
73 | 
74 | Step.propTypes = propTypes;
75 | 
76 | export default Step;


--------------------------------------------------------------------------------
/src/lib/components/Tour/tour.scss:
--------------------------------------------------------------------------------
 1 | .rtg__container {
 2 |   --primary-color: #0b708b;
 3 |   --wating-color: #c00021;
 4 |   --pin-color: #0fa9d0;
 5 |   --arrow-size: 15px;
 6 | 
 7 |   & * {
 8 |     box-sizing: border-box;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/src/lib/components/hooks/useTour.js:
--------------------------------------------------------------------------------
 1 | import {useContext, useMemo} from "react";
 2 | import {Context} from "./../Context/Context";
 3 | 
 4 | export default function useTour(id){
 5 |     const tourContext = useContext(Context);
 6 | 
 7 |     const tour = useMemo(()=> {
 8 |        return [tourContext.tour(id)]
 9 |     }, [id, tourContext])
10 | 
11 |     if(!tourContext) return [];
12 | 
13 |     return tour;
14 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/firstOf.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * return first not undefined or null element of array
 3 |  * @param values
 4 |  * @returns {any}
 5 |  */
 6 | export default function firstOf(values){
 7 |     for(let value of values){
 8 |         if(value!== undefined && value !== null){
 9 |             return value;
10 |         }
11 |     }
12 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/getOverflowedParent.js:
--------------------------------------------------------------------------------
 1 | /***
 2 |  * return first overflowed parent element
 3 |  * which pass the test
 4 |  * @param node : HTMLElement
 5 |  * @param hidden : bool  - include overflow hidden
 6 |  * @param test - css selector
 7 |  * @returns {null| HTMLElement}
 8 |  */
 9 | 
10 | export default function getScrollParent(node, hidden, test){
11 |     const get = () => {
12 |         const regex = hidden  ? /(auto|scroll|hidden)/ : /(auto|scroll)/ ;
13 |         const parents = (_node, ps) => {
14 |             if (_node.parentNode === null) { return ps; }
15 |             return parents(_node.parentNode, ps.concat([_node]));
16 |         };
17 | 
18 |         const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
19 |         const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
20 |         const scroll = _node => regex.test(overflow(_node));
21 | 
22 |         /* eslint-disable consistent-return */
23 |         const scrollParent = (_node) => {
24 |             if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
25 |                 return;
26 |             }
27 | 
28 |             const ps = parents(_node.parentNode, []);
29 | 
30 |             for (let i = 0; i < ps.length; i += 1) {
31 |                 if (scroll(ps[i])) {
32 |                     return ps[i];
33 |                 }
34 |             }
35 | 
36 |             return document.scrollingElement || document.documentElement;
37 |         };
38 | 
39 |         return scrollParent(node);
40 |     }
41 | 
42 |     const parentNode = get(node);
43 |     if(parentNode.matches(test)){
44 |         return parentNode;
45 |     }
46 |     return null;
47 |     /* eslint-enable consistent-return */
48 | };


--------------------------------------------------------------------------------
/src/lib/components/utils/isMounted.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * check that given element is mounted i html tree
 3 |  * @param element : HTMLElement
 4 |  * @returns {boolean}
 5 |  */
 6 | 
 7 | export default function isMounted(element){
 8 |     while (element){
 9 |         if(element.matches("html")) return true;
10 |         element = element.parentElement;
11 |     }
12 |     return !!element;
13 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/offsetTop.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * @param element : HTMLElement
 4 |  * @param scrollTarget : window | HTMLElement
 5 |  * @returns {number}
 6 |  */
 7 | export function offsetTop(element, scrollTarget = window){
 8 |     if(!element) return 0;
 9 |     const offset = scrollTarget.pageYOffset || scrollTarget.scrollTop || 0;
10 |     return offset + element.getBoundingClientRect().top;
11 | }
12 | 
13 | /**
14 |  *
15 |  * @param element : HTMLElement
16 |  * @param scrollTarget : window | HTMLElement
17 |  * @returns {number}
18 |  */
19 | export function offsetLef(element, scrollTarget = window){
20 |     if(!element) return 0;
21 |     const offset = scrollTarget.pageXOffset || scrollTarget.scrollLeft || 0;
22 |     return offset + element.getBoundingClientRect().left;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/lib/components/utils/placementToObj.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * transform position from string from to object form
 3 |  * @param placement : string
 4 |  * @returns {{x: string, y: string }}
 5 |  */
 6 | 
 7 | export default function placementToObj(placement){
 8 |     const place = placement.split("-");
 9 |     const _placement = {}
10 |     if(place.length  === 1){
11 |         _placement.y = ["left", "right"].includes(place[0]) ? "center" : place[0]
12 |         _placement.x = ["bottom", "top"].includes(place[0]) ? "center" : place[0];
13 |     } else if(place.length === 2){
14 |         _placement.y = place[0];
15 |         _placement.x = place[1];
16 |     }
17 |     return _placement
18 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/scrollTo.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Native scrollTo with callback
 3 |  * @param top
 4 |  * @param left
 5 |  * @param callback - callback function
 6 |  */
 7 | export default function scrollTo(target = window, {top , left }, callback) {
 8 |     const targetTop = ~~top || 0
 9 |     const targetLeft = ~~left || 0;
10 |     const initTop = ~~(target.pageYOffset || target.scrollTop || 0);
11 |     const initLeft = ~~(target.pageXOffset || target.scrollLeft || 0);
12 |     const onScroll = () => {
13 |         let currentLeft = ~~(target.pageXOffset || target.scrollLeft || 0);
14 |         let currentTop = ~~(target.pageYOffset || target.scrollTop || 0);
15 | 
16 |         if ((currentTop === targetTop && currentTop !== initTop)
17 |             || (currentLeft === targetLeft && currentLeft !== initLeft)) {
18 |             target.removeEventListener('scroll', onScroll)
19 |             callback && callback()
20 |         }
21 |     }
22 | 
23 |     target.addEventListener('scroll', onScroll)
24 |     setTimeout(() =>
25 |         target.removeEventListener('scroll', onScroll),
26 |     3000) // safety remove event listener
27 | 
28 |     onScroll()
29 |     target.scrollTo({
30 |         top,
31 |         left,
32 |         behavior: 'smooth'
33 |     })
34 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/throttle.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Returns a function, that, when invoked, will only be triggered at most once
 4 |  * during a given window of time. Normally, the throttled function will run
 5 |  * as much as it can, without ever going more than once per `wait` duration;
 6 |  * but if you'd like to disable the execution on the leading edge, pass
 7 |  * `{leading: false}`. To disable execution on the trailing edge, ditto.
 8 |  * @param func : function
 9 |  * @param wait : number
10 |  * @param options
11 |  * @returns {function(): function}
12 |  */
13 | export default function throttle(func, wait, options) {
14 |     let context, args, result;
15 |     let timeout = null;
16 |     let previous = 0;
17 |     if (!options) options = {};
18 |     let later = function() {
19 |         previous = options.leading === false ? 0 : Date.now();
20 |         timeout = null;
21 |         result = func.apply(context, args);
22 |         if (!timeout) context = args = null;
23 |     };
24 |     return function() {
25 |         let now = Date.now();
26 |         if (!previous && options.leading === false) previous = now;
27 |         let remaining = wait - (now - previous);
28 |         context = this;
29 |         args = arguments;
30 |         if (remaining <= 0 || remaining > wait) {
31 |             if (timeout) {
32 |                 clearTimeout(timeout);
33 |                 timeout = null;
34 |             }
35 |             previous = now;
36 |             result = func.apply(context, args);
37 |             if (!timeout) context = args = null;
38 |         } else if (!timeout && options.trailing !== false) {
39 |             timeout = setTimeout(later, remaining);
40 |         }
41 |         return result;
42 |     };
43 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/toRange.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * reduce value to range from min to max value
 3 |  * @param value : number
 4 |  * @param min : number
 5 |  * @param max : number
 6 |  * @returns {number}
 7 |  */
 8 | 
 9 | export default function toRange(value, min, max){
10 |     return Math.max(Math.min(value, max), min)
11 | }


--------------------------------------------------------------------------------
/src/lib/components/utils/useStates.js:
--------------------------------------------------------------------------------
 1 | import {useState, useRef, useEffect, useCallback} from "react";
 2 | 
 3 | export function useStateRef(initValue){
 4 |     const [state, setState] = useState(initValue);
 5 |     const currentValue = useRef(initValue);
 6 |     const _setState = useCallback(data => {
 7 |         if(typeof data === "function"){
 8 |             setState( current => {
 9 |                 let s = data(current)
10 |                 currentValue.current = s;
11 |                 setState(s);
12 |             })
13 |         } else{
14 |             currentValue.current = data;
15 |             setState(data)
16 |         }
17 |     }, [setState, currentValue])
18 |     return [state, _setState, currentValue];
19 | }
20 | 
21 | export function useStateCallback(initValue){
22 |     const [state, setState] = useState();
23 |     const callback = useRef();
24 |     const lastValue = useRef(initValue);
25 | 
26 |     const setCallback = useCallback( clb =>{
27 |         callback.current = clb;
28 |     }, [callback])
29 | 
30 |     useEffect(()=>{
31 |         if(lastValue.current === state) {
32 |             return ;
33 |         }
34 |         if(lastValue.current ===  undefined){
35 |             lastValue.current = state;
36 |             return;
37 |         }
38 | 
39 |         lastValue.current = state;
40 | 
41 |         if(typeof callback.current !== "function") return;
42 | 
43 |         callback.current(state);
44 |     }, [state]);
45 | 
46 |     return [state, setState, setCallback]
47 | }
48 | 
49 | export function useStateRefCallback(initValue){
50 |     const [state, setState, _currentValue] = useStateRef(initValue);
51 |     const callback = useRef();
52 |     const lastValue =  useRef(initValue);
53 | 
54 |     useEffect(()=>{
55 |         if(lastValue.current === state) {
56 |             return ;
57 |         }
58 |         if(lastValue.current ===  undefined){
59 |             lastValue.current = state;
60 |             return;
61 |         }
62 | 
63 |         lastValue.current = state;
64 | 
65 |         if(typeof callback.current !== "function") return;
66 | 
67 |         callback.current(state);
68 |     }, [state, lastValue, callback])
69 | 
70 |     const setCallback = useCallback(clb =>{
71 |         callback.current = clb
72 |     }, [callback])
73 | 
74 | 
75 |     return [state, setState, _currentValue, setCallback]
76 | }


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | export {default as Tour} from "./components/Tour/Tour";
2 | export {default as Step} from "./components/Step/Step";
3 | export {default as TourRoot} from "./components/Context/Context";
4 | export {default as useTour} from "./components/hooks/useTour"


--------------------------------------------------------------------------------