diff --git a/.eslintrc b/.eslintrc index 08b6864..cbdb2ba 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,6 +1,7 @@ { "extends": ["airbnb", "prettier"], "plugins": ["sort-imports-es6-autofix"], + "parser": "babel-eslint", "rules": { "react/jsx-filename-extension": 0, "linebreak-style": 0, diff --git a/package-lock.json b/package-lock.json index eb372cf..99a96a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,62 @@ "@babel/highlight": "7.0.0-beta.42" } }, + "@babel/generator": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz", + "integrity": "sha512-5xVb7hlhjGcdkKpMXgicAVgx8syK5VJz193k0i/0sLP6DzE6lRrU1K3B/rFefgdo9LPGMAOOOAWW4jycj07ShQ==", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.44", + "jsesc": "2.5.1", + "lodash": "4.17.5", + "source-map": "0.5.7", + "trim-right": "1.0.1" + }, + "dependencies": { + "jsesc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz", + "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=", + "dev": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } + } + }, + "@babel/helper-function-name": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz", + "integrity": "sha512-MHRG2qZMKMFaBavX0LWpfZ2e+hLloT++N7rfM3DYOMUOGCD8cVjqZpwiL8a0bOX3IYcQev1ruciT0gdFFRTxzg==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "7.0.0-beta.44", + "@babel/template": "7.0.0-beta.44", + "@babel/types": "7.0.0-beta.44" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz", + "integrity": "sha512-w0YjWVwrM2HwP6/H3sEgrSQdkCaxppqFeJtAnB23pRiJB5E/O9Yp7JAAeWBl+gGEgmBFinnTyOv2RN7rcSmMiw==", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.44" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz", + "integrity": "sha512-aQ7QowtkgKKzPGf0j6u77kBMdUFVBKNHw2p/3HX/POt5/oz8ec5cs0GwlgM8Hz7ui5EwJnzyfRmkNF1Nx1N7aA==", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.44" + } + }, "@babel/highlight": { "version": "7.0.0-beta.42", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.42.tgz", @@ -37,6 +93,148 @@ } } }, + "@babel/template": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz", + "integrity": "sha512-w750Sloq0UNifLx1rUqwfbnC6uSUk0mfwwgGRfdLiaUzfAOiH0tHJE6ILQIUi3KYkjiCDTskoIsnfqZvWLBDng==", + "dev": true, + "requires": { + "@babel/code-frame": "7.0.0-beta.44", + "@babel/types": "7.0.0-beta.44", + "babylon": "7.0.0-beta.44", + "lodash": "4.17.5" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz", + "integrity": "sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==", + "dev": true, + "requires": { + "@babel/highlight": "7.0.0-beta.44" + } + }, + "@babel/highlight": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz", + "integrity": "sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==", + "dev": true, + "requires": { + "chalk": "2.3.2", + "esutils": "2.0.2", + "js-tokens": "3.0.2" + } + }, + "babylon": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz", + "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==", + "dev": true + }, + "chalk": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", + "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "dev": true, + "requires": { + "ansi-styles": "3.2.1", + "escape-string-regexp": "1.0.5", + "supports-color": "5.3.0" + } + } + } + }, + "@babel/traverse": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.44.tgz", + "integrity": "sha512-UHuDz8ukQkJCDASKHf+oDt3FVUzFd+QYfuBIsiNu/4+/ix6pP/C+uQZJ6K1oEfbCMv/IKWbgDEh7fcsnIE5AtA==", + "dev": true, + "requires": { + "@babel/code-frame": "7.0.0-beta.44", + "@babel/generator": "7.0.0-beta.44", + "@babel/helper-function-name": "7.0.0-beta.44", + "@babel/helper-split-export-declaration": "7.0.0-beta.44", + "@babel/types": "7.0.0-beta.44", + "babylon": "7.0.0-beta.44", + "debug": "3.1.0", + "globals": "11.4.0", + "invariant": "2.2.4", + "lodash": "4.17.5" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz", + "integrity": "sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==", + "dev": true, + "requires": { + "@babel/highlight": "7.0.0-beta.44" + } + }, + "@babel/highlight": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz", + "integrity": "sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==", + "dev": true, + "requires": { + "chalk": "2.3.2", + "esutils": "2.0.2", + "js-tokens": "3.0.2" + } + }, + "babylon": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz", + "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==", + "dev": true + }, + "chalk": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", + "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "dev": true, + "requires": { + "ansi-styles": "3.2.1", + "escape-string-regexp": "1.0.5", + "supports-color": "5.3.0" + } + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "globals": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.4.0.tgz", + "integrity": "sha512-Dyzmifil8n/TmSqYDEXbm+C8yitzJQqQIlJQLNRMwa+BOUJpRC19pyVeN12JAjt61xonvXjtff+hJruTRXn5HA==", + "dev": true + } + } + }, + "@babel/types": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.44.tgz", + "integrity": "sha512-5eTV4WRmqbaFM3v9gHAIljEQJU4Ssc6fxL61JN+Oe2ga/BwyjzjamwkCVVAQjHGuAX8i0BWo42dshL8eO5KfLQ==", + "dev": true, + "requires": { + "esutils": "2.0.2", + "lodash": "4.17.5", + "to-fast-properties": "2.0.0" + }, + "dependencies": { + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + } + } + }, "@types/node": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.0.tgz", @@ -641,14 +839,25 @@ } }, "babel-eslint": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz", - "integrity": "sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=", + "version": "8.2.2", + "resolved": "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz", + "integrity": "sha512-Qt2lz2egBxNYWqN9JIO2z4NOOf8i4b5JS6CFoYrOZZTDssueiV1jH/jsefyg+86SeNY3rB361/mi3kE1WK2WYQ==", + "dev": true, "requires": { - "babel-code-frame": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0" + "@babel/code-frame": "7.0.0-beta.42", + "@babel/traverse": "7.0.0-beta.44", + "@babel/types": "7.0.0-beta.44", + "babylon": "7.0.0-beta.44", + "eslint-scope": "3.7.1", + "eslint-visitor-keys": "1.0.0" + }, + "dependencies": { + "babylon": { + "version": "7.0.0-beta.44", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz", + "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==", + "dev": true + } } }, "babel-generator": { @@ -3433,7 +3642,7 @@ "object.values": "1.0.4", "prop-types": "15.6.1", "react-reconciler": "0.7.0", - "react-test-renderer": "16.2.0" + "react-test-renderer": "16.3.0" } }, "enzyme-adapter-utils": { @@ -8991,6 +9200,29 @@ "js-tokens": "3.0.2" } }, + "lorem-ipsum": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lorem-ipsum/-/lorem-ipsum-1.0.4.tgz", + "integrity": "sha1-MLcqOx4ZH1UGKvjH36spGuT72RI=", + "requires": { + "optimist": "0.3.7" + }, + "dependencies": { + "optimist": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz", + "integrity": "sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=", + "requires": { + "wordwrap": "0.0.3" + } + }, + "wordwrap": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", + "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=" + } + } + }, "loud-rejection": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", @@ -15654,9 +15886,9 @@ } }, "react": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz", - "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==", + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.3.0.tgz", + "integrity": "sha512-Qh35tNbwY8SLFELkN3PCLO16EARV+lgcmNkQnoZXfzAF1ASRpeucZYUwBlBzsRAzTb7KyfBaLQ4/K/DLC6MYeA==", "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -15690,9 +15922,9 @@ } }, "react-dom": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", - "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==", + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.0.tgz", + "integrity": "sha512-xT/FxawAurL6AV8YtAP7LkdDJFFX2vvv17AqFLQRF81ZtWLXkV/0dcAaiFIy0lmoQEFT931TU9aaH+5dBUxTcw==", "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -15737,6 +15969,11 @@ } } }, + "react-is": { + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.0.tgz", + "integrity": "sha512-YOo+BNK2z8LiDxh2viaOklPqhwrMMsNPWnXTseOqJa8/ob8mv9aD9Z5FqqQnKNbIerBm+DoIwjAAAKcpdDo1/w==" + }, "react-popper": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz", @@ -15778,7 +16015,6 @@ "requires": { "autoprefixer": "7.1.6", "babel-core": "6.26.0", - "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", "babel-preset-react-app": "3.1.1", @@ -16066,13 +16302,14 @@ } }, "react-test-renderer": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz", - "integrity": "sha512-Kd4gJFtpNziR9ElOE/C23LeflKLZPRpNQYWP3nQBY43SJ5a+xyEGSeMrm2zxNKXcnCbBS/q1UpD9gqd5Dv+rew==", + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.0.tgz", + "integrity": "sha512-7FAfgIT8Kvew36b2VFXnhMxjKkwAnicD1dyopq7Ot19WAhfJkyhYNwPzM1AnCfYccvEhO0x4FbqJETyMGQwgIg==", "requires": { "fbjs": "0.8.16", "object-assign": "4.1.1", - "prop-types": "15.6.1" + "prop-types": "15.6.1", + "react-is": "16.3.0" } }, "react-transition-group": { @@ -17706,6 +17943,19 @@ "require-main-filename": "1.0.1" } }, + "tether": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.3.tgz", + "integrity": "sha512-YCfE/Ym9MpZpzUmzbek7MiLEyTofxx2YS0rJfSOUXX0aZtfQgxcgw7/Re2oGJUsREWZtEF0DzBKCjqH+DzgL6A==" + }, + "tether-shepherd": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/tether-shepherd/-/tether-shepherd-1.8.1.tgz", + "integrity": "sha1-T9my/dkFnwS2xCSUVtWuFFo+kiM=", + "requires": { + "tether": "1.4.3" + } + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 7bc9020..c971818 100644 --- a/package.json +++ b/package.json @@ -25,14 +25,14 @@ "prop-types": "15.6.1", "rc-queue-anim": "^1.4.1", "rc-tween-one": "1.7.3", - "react": "^16.2.0", - "react-dom": "^16.2.0", + "react": "^16.3.0", + "react-dom": "^16.3.0", "react-file-reader": "^1.1.4", "react-fontawesome": "1.6.1", "react-hot-keys": "1.0.11", "react-redux": "^5.0.7", "react-scripts": "1.1.1", - "react-test-renderer": "^16.2.0", + "react-test-renderer": "^16.3.0", "react-virtualized": "^9.18.5", "reactstrap": "^5.0.0-beta.3", "recompose": "0.26.0", @@ -43,9 +43,11 @@ "reselect": "3.0.1", "simple-react-validator": "0.0.6", "styled-components": "3.2.3", - "lorem-ipsum": "1.0.4" + "lorem-ipsum": "1.0.4", + "tether-shepherd": "1.8.1" }, "devDependencies": { + "babel-eslint": "8.2.2", "enzyme": "3.3.0", "enzyme-adapter-react-16": "1.1.1", "eslint": "4.19.1", diff --git a/src/UiConfig.js b/src/UiConfig.js index aa609c1..eb8ea4c 100644 --- a/src/UiConfig.js +++ b/src/UiConfig.js @@ -15,6 +15,13 @@ export default { id: "co-comment", name: "CO Comment", priority: "High", + step: { + title: "Generate Entry", + order: 5, + text: + "Ok, let’s create a narrative entry, direct from the CO. So, click on the CO Comment button.", + position: "left" + }, fields: [ { name: "Comment", @@ -195,6 +202,13 @@ export default { priority: "High", widgets: [ { + step: { + title: "Interactive controls", + order: 8, + text: + "Instead of plain buttons, some concepts can be represented by dedicated widgets. These indicators are used both to indicate the current state of each mast and to record mast activity. Click on some mast icons, and observe new entries being inserted", + position: "right" + }, id: "masts", masts: ["Search", "Radar", "ESM"] } diff --git a/src/components/App.js b/src/components/App.js index 2453807..e2dddd4 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,32 +7,88 @@ import LeftPanel from "./LeftPanel"; import PropTypes from "prop-types"; import React from "react"; import RightPanel from "../containers/RightPanel"; +import Tutorial, { Step } from "./Tutorial"; +import styled from "styled-components"; +const WideStep = styled(Step)` + width: 50%; + max-width: 80% !important; +`; const App = ({ expanded, toggleExpand, config }) => ( - - - - - + + + + - - - + + + + + + + + + ); App.propTypes = { diff --git a/src/components/ExportCard.js b/src/components/ExportCard.js index 83596d3..6aef64c 100644 --- a/src/components/ExportCard.js +++ b/src/components/ExportCard.js @@ -1,4 +1,5 @@ import { Badge, Button } from "reactstrap"; +import { Step } from "./Tutorial"; import { StyleSheet, css } from "aphrodite"; import { colors } from "./Entry"; import PropTypes from "prop-types"; @@ -166,8 +167,17 @@ const Export = ({ entries }) => { onClick={onPdfTextExport} disabled={!entries.length} > - - PDF +
+ + PDF + +
); }; diff --git a/src/components/LeftPanel/Filters.js b/src/components/LeftPanel/Filters.js index 13af8e2..684cd88 100755 --- a/src/components/LeftPanel/Filters.js +++ b/src/components/LeftPanel/Filters.js @@ -13,6 +13,7 @@ import { search, unFilter } from "../../actions"; +import { Step } from "../Tutorial"; import { connect } from "react-redux"; import { entryTypes } from "../../reducers/Selectors"; import Export from "../../containers/Export"; @@ -92,7 +93,15 @@ class Filters extends React.Component { this.search.focus(); }} /> + + - + { this.search = s; diff --git a/src/components/LeftPanel/LeftPanel.js b/src/components/LeftPanel/LeftPanel.js index a9c89c9..f7e4624 100755 --- a/src/components/LeftPanel/LeftPanel.js +++ b/src/components/LeftPanel/LeftPanel.js @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; +import { Step } from "../Tutorial"; import Filters from "./Filters"; import ScrollingView from "./ScrollingView"; @@ -28,7 +29,21 @@ const ExpandStyle = styled.div` const ExpandButton = ({ onClick, expanded }) => ( - {" "} + + + ); @@ -43,6 +58,19 @@ ExpandButton.defaultProps = { const LeftPanel = ({ toggleExpand, expanded }) => ( + + {" "} ( }} > +
diff --git a/src/components/RightPanel/CategoryRender.js b/src/components/RightPanel/CategoryRender.js index 4660647..6d39d10 100755 --- a/src/components/RightPanel/CategoryRender.js +++ b/src/components/RightPanel/CategoryRender.js @@ -1,5 +1,6 @@ import { Card, CardColumns } from "reactstrap"; import { CategoryType } from "../Schemas"; +import { Step } from "../Tutorial"; import EntryRender from "./EntryRender"; import Panel from "./Panel"; import PropTypes from "prop-types"; @@ -18,6 +19,14 @@ const CategoryRender = ({ category, collapse, addEntry }) => ( {category.widgets && category.widgets.filter(x => !x.hidden).map(entry => ( + {entry.step && ( + + )} ))} diff --git a/src/components/RightPanel/EntryRender.js b/src/components/RightPanel/EntryRender.js index f40a578..3087102 100755 --- a/src/components/RightPanel/EntryRender.js +++ b/src/components/RightPanel/EntryRender.js @@ -1,5 +1,6 @@ import { Button } from "reactstrap"; import { EntryType } from "../Schemas"; +import { Step } from "../Tutorial"; import { compose, mapProps, withState } from "recompose"; import { connect } from "react-redux"; import { set } from "lodash"; @@ -24,6 +25,13 @@ const EntryRender = ({ style={{ width: "100%", height: "100%" }} > {entry.name} + {entry.step != null && ( + + )} +
@@ -134,6 +142,13 @@ const GeneratorConfig = ({ + diff --git a/src/components/Tutorial/Overlay.js b/src/components/Tutorial/Overlay.js new file mode 100644 index 0000000..c005ba9 --- /dev/null +++ b/src/components/Tutorial/Overlay.js @@ -0,0 +1,99 @@ +import PropTypes from "prop-types"; +import React from "react"; + +class HighlightOverlay extends React.Component { + constructor(props) { + super(props); + this.state = { + width: 0, + height: 0 + }; + } + + componentDidMount() { + this.updateWindowSize(); + window.onresize = () => this.updateWindowSize(); + } + + componentDidUpdate = () => { + this.updateCanvas(); + }; + + getBodySize = () => document.body.getBoundingClientRect(); + + updateCanvas = () => { + /* eslint-disable-next-line */ + const context = this.refs.canvas.getContext("2d"); + context.save(); + this.drawBackground(context); + context.globalCompositeOperation = "destination-out"; + /* eslint-disable-next-line */ + for (let index = 0; index < this.props.targets.length; index++) { + this.drawHighlight(context, this.props.targets[index]); + } + context.restore(); + }; + + updateWindowSize = () => { + const { width, height } = this.getBodySize(); + + this.setState({ + width, + height + }); + }; + drawBackground = context => { + const { width, height } = this.getBodySize(); + context.clearRect(0, 0, width, height); + context.beginPath(); + context.rect(0, 0, width, height); + /* eslint-disable-next-line */ + context.fillStyle = this.props.backgroundColor; + context.fill(); + }; + + drawHighlight = (context, target) => { + const targetObject = document.querySelector(target); + if (!targetObject) { + setTimeout(() => { + this.drawHighlight(context, target); + }, 200); + return; + } + const { top, left, width, height } = targetObject.getBoundingClientRect(); + context.beginPath(); + context.rect(left, top, width, height); + /* eslint-disable-next-line */ + context.fillStyle = "white"; + context.fill(); + }; + + render = () => ( + + ); +} + +HighlightOverlay.propTypes = { + targets: PropTypes.array, + zIndex: PropTypes.number, + backgroundColor: PropTypes.string +}; + +HighlightOverlay.defaultProps = { + targets: [], + zIndex: 1400, + backgroundColor: "rgba(0, 0, 0, 0.6)" +}; +export default HighlightOverlay; diff --git a/src/components/Tutorial/index.js b/src/components/Tutorial/index.js new file mode 100644 index 0000000..908bb1d --- /dev/null +++ b/src/components/Tutorial/index.js @@ -0,0 +1,184 @@ +import "tether-shepherd/dist/css/shepherd-theme-dark.css"; +/* eslint-disable */ +import React from "react"; +import Shepherd from "tether-shepherd"; +import { lifecycle, compose, withState } from "recompose"; +import styled from "styled-components"; +import HighlightOverlay from "./Overlay"; +export const { Provider, Consumer } = React.createContext({}); + +const Overlay = styled.div` + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 1; + border-radius: 10px; + padding: 5%; + transition: all 0.4s ease-in; + pointer-events : ${props => (props.prevent ? "all" : "none")} + background-color: ${props => + props.overlay && props.visible ? "rgba(0, 0, 0, 0.8)" : "transparent"}; + /* box-shadow: ${props => + props.visible ? "0 0 0 99999px rgba(0, 0, 0, 0.8)" : "transparent"}; */ +`; + +function revisedRandId() { + return Math.random() + .toString(36) + .replace(/[^a-z]+/g, "") + .substr(2, 10); +} + +const JoyStepInter = ({ + context, + uniqueId, + setVisible, + visible, + order, + prevent +}) => ( + + + +); + +const Wrapped = compose( + withState("visible", "setVisible", false), + lifecycle({ + componentWillUnmount() { + // this.step.destroy(); + // window.removeEventListener("mousemove", this.listener); + }, + componentDidMount() { + const id = revisedRandId(); + // this.listener = window.addEventListener("mousemove", e => { + // if ( + // !this.props.context.tour.currentStep || + // this.props.context.tour.currentStep.id.toString() != + // this.props.order.toString() + // ) { + // return; + // } + // const targetObject = document.querySelector("." + id); + // const { + // top, + // left, + // width, + // height + // } = targetObject.getBoundingClientRect(); + // console.warn(e.clientX, e.clientY); + // if ( + // e.clientX >= left && + // e.clientX <= left + width && + // e.clientY >= top && + // e.clientY <= top + height + // ) { + // console.warn("inisde", top, left, width, height); + // this.setState({ prevent: false }); + // } else { + // this.setState({ prevent: true }); + // } + // }); + this.setState({ uniqueId: id }); + this.step = this.props.context.tour.addStep({ + id: this.props.order.toString(), + title: this.props.title || "", + text: this.props.text || "NO text was passed", + attachTo: { + element: `.${id}`, + on: this.props.position + }, + classes: "shepherd-theme-dark " + this.props.className, + beforeShowPromise: () => { + this.props.setVisible(true); + this.props.context.setOverlay("." + id); + return Promise.resolve(); + }, + buttons: [ + { + text: "Next", + action: () => { + this.props.context.hideOverlay("." + id); + + this.props.context.next(); + this.props.setVisible(false); + } + } + ] + }); + if (this.props.show) { + this.props.setVisible(true); + this.step.show(); + } + } + }) +)(JoyStepInter); + +export const Step = props => ( + + {joyContext => ( + + + {props.children} + + )} + +); + +class App extends React.Component { + constructor(props) { + super(props); + this.tour = new Shepherd.Tour({ classes: "shepherd-theme-dark" }); + this.tour.start(); + this.state = { + targets: [] + }; + } + + render() { + return ( + + { + let nextStep = null; + this.tour.steps.forEach(step => { + if ( + parseInt(step.id, 10) > parseInt(this.tour.currentStep.id, 10) + ) { + if (!nextStep || parseInt(nextStep.id) > parseInt(step.id)) + nextStep = step; + } + }); + + if (nextStep) this.tour.show(nextStep.id.toString()); + else { + this.setState({ targets: [] }); + this.tour.hide(); + } + }, + setOverlay: ta => this.setState({ targets: [ta] }), + hideOverlay: ta => { + this.setState({ + targets: this.state.targets.filter(x => x == ta) + }); + } + }} + > + {this.state.targets.length > 0 && ( + + )} + + {this.props.children} + + + ); + } +} + +export default App; diff --git a/yarn.lock b/yarn.lock index 26307cf..9c7402f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,12 +2,42 @@ # yarn lockfile v1 -"@babel/code-frame@^7.0.0-beta.35": +"@babel/code-frame@7.0.0-beta.42", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.0.0-beta.40": version "7.0.0-beta.42" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962" dependencies: "@babel/highlight" "7.0.0-beta.42" +"@babel/generator@7.0.0-beta.42": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.42.tgz#777bb50f39c94a7e57f73202d833141f8159af33" + dependencies: + "@babel/types" "7.0.0-beta.42" + jsesc "^2.5.1" + lodash "^4.2.0" + source-map "^0.5.0" + trim-right "^1.0.1" + +"@babel/helper-function-name@7.0.0-beta.42": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658" + dependencies: + "@babel/helper-get-function-arity" "7.0.0-beta.42" + "@babel/template" "7.0.0-beta.42" + "@babel/types" "7.0.0-beta.42" + +"@babel/helper-get-function-arity@7.0.0-beta.42": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.42.tgz#ad072e32f912c033053fc80478169aeadc22191e" + dependencies: + "@babel/types" "7.0.0-beta.42" + +"@babel/helper-split-export-declaration@7.0.0-beta.42": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz#0d0d5254220a9cc4e7e226240306b939dc210ee7" + dependencies: + "@babel/types" "7.0.0-beta.42" + "@babel/highlight@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.42.tgz#a502a1c0d6f99b2b0e81d468a1b0c0e81e3f3623" @@ -16,6 +46,38 @@ esutils "^2.0.2" js-tokens "^3.0.0" +"@babel/template@7.0.0-beta.42": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052" + dependencies: + "@babel/code-frame" "7.0.0-beta.42" + "@babel/types" "7.0.0-beta.42" + babylon "7.0.0-beta.42" + lodash "^4.2.0" + +"@babel/traverse@^7.0.0-beta.40": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.42.tgz#f4bf4d1e33d41baf45205e2d0463591d57326285" + dependencies: + "@babel/code-frame" "7.0.0-beta.42" + "@babel/generator" "7.0.0-beta.42" + "@babel/helper-function-name" "7.0.0-beta.42" + "@babel/helper-split-export-declaration" "7.0.0-beta.42" + "@babel/types" "7.0.0-beta.42" + babylon "7.0.0-beta.42" + debug "^3.1.0" + globals "^11.1.0" + invariant "^2.2.0" + lodash "^4.2.0" + +"@babel/types@7.0.0-beta.42", "@babel/types@^7.0.0-beta.40": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc" + dependencies: + esutils "^2.0.2" + lodash "^4.2.0" + to-fast-properties "^2.0.0" + "@types/node@*": version "9.6.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.0.tgz#d3480ee666df9784b1001a1872a2f6ccefb6c2d7" @@ -516,6 +578,17 @@ babel-eslint@7.2.3: babel-types "^6.23.0" babylon "^6.17.0" +babel-eslint@8.2.2: + version "8.2.2" + resolved "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b" + dependencies: + "@babel/code-frame" "^7.0.0-beta.40" + "@babel/traverse" "^7.0.0-beta.40" + "@babel/types" "^7.0.0-beta.40" + babylon "^7.0.0-beta.40" + eslint-scope "~3.7.1" + eslint-visitor-keys "^1.0.0" + babel-generator@^6.18.0, babel-generator@^6.26.0: version "6.26.1" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90" @@ -1170,6 +1243,10 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24 lodash "^4.17.4" to-fast-properties "^1.0.3" +babylon@7.0.0-beta.42, babylon@^7.0.0-beta.40: + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.42.tgz#67cfabcd4f3ec82999d29031ccdea89d0ba99657" + babylon@^6.17.0, babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -3026,7 +3103,7 @@ eslint-restricted-globals@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz#35f0d5cbc64c2e3ed62e93b4b1a7af05ba7ed4d7" -eslint-scope@^3.7.1: +eslint-scope@^3.7.1, eslint-scope@~3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" dependencies: @@ -3860,7 +3937,7 @@ global-prefix@^1.0.1: is-windows "^1.0.1" which "^1.2.14" -globals@^11.0.1: +globals@^11.0.1, globals@^11.1.0: version "11.4.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.4.0.tgz#b85c793349561c16076a3c13549238a27945f1bc" @@ -4448,7 +4525,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.2: +invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -5364,6 +5441,10 @@ jsesc@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b" +jsesc@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe" + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -5870,7 +5951,7 @@ lodash.without@~4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac" -lodash@4.17.5, "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0: +lodash@4.17.5, "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" @@ -7931,9 +8012,9 @@ react-dev-utils@^5.0.0: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" +react-dom@^16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0.tgz#b318e52184188ecb5c3e81117420cca40618643e" dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" @@ -7963,6 +8044,10 @@ react-hot-keys@1.0.11: dependencies: hotkeys-js "^2.0.9" +react-is@^16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.0.tgz#f0e8bfd8c09b480dd610b8639d9ed65c13601224" + react-popper@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.8.3.tgz#0f73333137c9fb0af6ec4074d2d0585a0a0461e1" @@ -8040,7 +8125,7 @@ react-scripts@1.1.1: optionalDependencies: fsevents "^1.1.3" -react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0: +react-test-renderer@^16.0.0-0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" dependencies: @@ -8048,6 +8133,15 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-test-renderer@^16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.0.tgz#7e88d8cb4c2b95c161b6c6c998991166f74d473e" + dependencies: + fbjs "^0.8.16" + object-assign "^4.1.1" + prop-types "^15.6.0" + react-is "^16.3.0" + react-transition-group@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10" @@ -8069,9 +8163,9 @@ react-virtualized@^9.18.5: loose-envify "^1.3.0" prop-types "^15.6.0" -react@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" +react@^16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.3.0.tgz#fc5a01c68f91e9b38e92cf83f7b795ebdca8ddff" dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" @@ -9012,7 +9106,7 @@ source-map-url@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" -source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: +source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -9473,6 +9567,16 @@ test-exclude@^4.2.1: read-pkg-up "^1.0.1" require-main-filename "^1.0.1" +tether-shepherd@1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/tether-shepherd/-/tether-shepherd-1.8.1.tgz#4fd9b2fdd9059f04b6c4249456d5ae145a3e9223" + dependencies: + tether "^1.0.1" + +tether@^1.0.1: + version "1.4.3" + resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.3.tgz#fd547024c47b6e5c9b87e1880f997991a9a6ad54" + text-table@0.2.0, text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" @@ -9532,6 +9636,10 @@ to-fast-properties@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + to-integer-x@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/to-integer-x/-/to-integer-x-3.0.0.tgz#9f3b80e668c7f0ae45e6926b40d95f52c1addc74"