From c5c83c0dbd079c25f4cf29e964fe99e3a13ead14 Mon Sep 17 00:00:00 2001 From: Eduardo Moura Date: Sun, 1 Apr 2018 13:37:09 +0100 Subject: [PATCH 1/5] Initial Shepherd implementation --- package.json | 9 ++- src/components/App.js | 45 ++++++----- src/components/LeftPanel/Filters.js | 3 + src/components/LeftPanel/LeftPanel.js | 2 + src/components/Tutorial/index.js | 106 ++++++++++++++++++++++++++ yarn.lock | 37 +++++++-- 6 files changed, 170 insertions(+), 32 deletions(-) create mode 100644 src/components/Tutorial/index.js diff --git a/package.json b/package.json index 7bc9020..104aac6 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,7 +43,8 @@ "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": { "enzyme": "3.3.0", diff --git a/src/components/App.js b/src/components/App.js index 2453807..78c1432 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,32 +7,35 @@ import LeftPanel from "./LeftPanel"; import PropTypes from "prop-types"; import React from "react"; import RightPanel from "../containers/RightPanel"; +import Tutorial from "./Tutorial"; const App = ({ expanded, toggleExpand, config }) => ( - - - - - + - - - + + + + + + + + ); App.propTypes = { diff --git a/src/components/LeftPanel/Filters.js b/src/components/LeftPanel/Filters.js index 13af8e2..72cc494 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"; @@ -84,6 +85,8 @@ class Filters extends React.Component { render() { return ( + +

Filters

( + {" "} ); diff --git a/src/components/Tutorial/index.js b/src/components/Tutorial/index.js new file mode 100644 index 0000000..66a00bd --- /dev/null +++ b/src/components/Tutorial/index.js @@ -0,0 +1,106 @@ +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"; + +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%; + 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 }) => ( + + { + setTimeout(() => context().start(), 10); + setVisible(true); + if (!visible) { + e.preventDefault(); + e.stopPropagation(); + } + // e.nativeEvent.stopImmediatePropagation(); + }} + /> + +); + +const Wrapped = compose( + withState("visible", "setVisible", false), + lifecycle({ + componentWillUnmount() { + this.step.destroy(); + }, + componentDidMount() { + const id = revisedRandId(); + this.setState({ uniqueId: id }); + this.step = this.props.context().addStep({ + id: 1, + text: this.props.text || "NO text was passed", + attachTo: "." + id + " bottom", + classes: "shepherd-theme-dark example-step-extra-class", + beforeShowPromise: () => Promise.resolve(this.props.setVisible(true)), + buttons: [ + { + text: "Next", + action: () => { + this.props.context().next(); + this.props.setVisible(false); + } + } + ] + }); + } + }) +)(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(); + } + + render() { + return ( + + this.tour}>{this.props.children} + + ); + } +} + +export default App; diff --git a/yarn.lock b/yarn.lock index 26307cf..065a378 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7931,9 +7931,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 +7963,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 +8044,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 +8052,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 +8082,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" @@ -9473,6 +9486,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" From 1a3446312f6eacd914032e1a6039588d0417437d Mon Sep 17 00:00:00 2001 From: Eduardo Moura Date: Sun, 1 Apr 2018 16:37:17 +0100 Subject: [PATCH 2/5] fixes #90 Changed eslint parser to allow fat arrow in class Added walkthrough Steps --- .eslintrc | 1 + package.json | 1 + src/components/App.js | 28 ++++- src/components/ExportCard.js | 14 ++- src/components/LeftPanel/Filters.js | 12 +- src/components/LeftPanel/LeftPanel.js | 22 +++- src/components/RightPanel/GeneratorConfig.js | 15 +++ src/components/Tutorial/Overlay.js | 99 +++++++++++++++ src/components/Tutorial/index.js | 123 +++++++++++++++---- yarn.lock | 97 ++++++++++++++- 10 files changed, 375 insertions(+), 37 deletions(-) create mode 100644 src/components/Tutorial/Overlay.js 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.json b/package.json index 104aac6..c971818 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "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/components/App.js b/src/components/App.js index 78c1432..7069503 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,10 +7,29 @@ import LeftPanel from "./LeftPanel"; import PropTypes from "prop-types"; import React from "react"; import RightPanel from "../containers/RightPanel"; -import Tutorial from "./Tutorial"; +import Tutorial, { Step } from "./Tutorial"; const App = ({ expanded, toggleExpand, config }) => ( + ( }} lg={expanded ? 2 : 9} > + 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 72cc494..75d7623 100755 --- a/src/components/LeftPanel/Filters.js +++ b/src/components/LeftPanel/Filters.js @@ -85,8 +85,6 @@ class Filters extends React.Component { render() { return ( - -

Filters

+ + - + { this.search = s; diff --git a/src/components/LeftPanel/LeftPanel.js b/src/components/LeftPanel/LeftPanel.js index 98cdb29..c4fd54e 100755 --- a/src/components/LeftPanel/LeftPanel.js +++ b/src/components/LeftPanel/LeftPanel.js @@ -29,7 +29,13 @@ const ExpandStyle = styled.div` const ExpandButton = ({ onClick, expanded }) => ( - + {" "} {" "} ); @@ -45,6 +51,19 @@ ExpandButton.defaultProps = { const LeftPanel = ({ toggleExpand, expanded }) => ( + + {" "} ( }} > +
diff --git a/src/components/RightPanel/GeneratorConfig.js b/src/components/RightPanel/GeneratorConfig.js index 9fc78f1..915d473 100644 --- a/src/components/RightPanel/GeneratorConfig.js +++ b/src/components/RightPanel/GeneratorConfig.js @@ -19,6 +19,7 @@ import { ToggleSimulation, addEntries as addEntryAction } from "../../actions"; +import { Step } from "../Tutorial"; import { compose, lifecycle, withHandlers, withState } from "recompose"; import { connect } from "react-redux"; import Generator from "../../Generator"; @@ -50,6 +51,13 @@ const GeneratorConfig = ({ lg={collapse ? 12 : 6} style={{ backgroundColor: "#333", borderColor: "#333" }} > +
@@ -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 index 66a00bd..09b6913 100644 --- a/src/components/Tutorial/index.js +++ b/src/components/Tutorial/index.js @@ -4,7 +4,7 @@ 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` @@ -18,8 +18,12 @@ const Overlay = styled.div` z-index: 1; border-radius: 10px; padding: 5%; - box-shadow: ${props => - props.visible ? "0 0 0 99999px rgba(0, 0, 0, 0.8)" : "transparent"}; + 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() { @@ -29,21 +33,16 @@ function revisedRandId() { .substr(2, 10); } -const JoyStepInter = ({ context, uniqueId, setVisible, visible }) => ( +const JoyStepInter = ({ + context, + uniqueId, + setVisible, + visible, + order, + prevent +}) => ( - { - setTimeout(() => context().start(), 10); - setVisible(true); - if (!visible) { - e.preventDefault(); - e.stopPropagation(); - } - // e.nativeEvent.stopImmediatePropagation(); - }} - /> + ); @@ -51,27 +50,67 @@ const Wrapped = compose( withState("visible", "setVisible", false), lifecycle({ componentWillUnmount() { - this.step.destroy(); + // 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().addStep({ - id: 1, + 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: "." + id + " bottom", + attachTo: "." + id + " " + (this.props.position || "middle"), classes: "shepherd-theme-dark example-step-extra-class", - beforeShowPromise: () => Promise.resolve(this.props.setVisible(true)), + beforeShowPromise: () => { + this.props.setVisible(true); + this.props.context.setOverlay("." + id); + return Promise.resolve(); + }, buttons: [ { text: "Next", action: () => { - this.props.context().next(); + 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); @@ -92,12 +131,48 @@ class App extends React.Component { super(props); this.tour = new Shepherd.Tour({ classes: "shepherd-theme-dark" }); this.tour.start(); + this.state = { + targets: [] + }; } render() { return ( - this.tour}>{this.props.children} + { + 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} + ); } diff --git a/yarn.lock b/yarn.lock index 065a378..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" @@ -9025,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" @@ -9555,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" From 09e2a026325aef30a8558dc10eb4bcbe587d72ac Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Tue, 3 Apr 2018 12:34:05 +0100 Subject: [PATCH 3/5] introduce some formatting for the text content --- src/components/App.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 7069503..9cd9eca 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -16,15 +16,18 @@ const App = ({ expanded, toggleExpand, config }) => ( title="Welcome" text=" Welcome to the Next-Narrative Demonstrator. This is a browser-based technical demonstrator aimed to validate the following: -Browser performance with high volumes of narrative data -Offline-first application (without backend server) -Browser-based export to PDF +
    +
  • Browser performance with high volumes of narrative data
    • +
  • Offline-first application (without backend server)
    • +
  • Browser-based export to PDF
    • +
Adoption of a browser-based application brings the following benefits: -Adherence to web standards make the application future-proof -Versatile, capable UI tools, including re-configurable event library -Secure: nothing is “installed” on client PC, and the app has no direct access to local storage -Should there be a wish to connect to a central server, http is regularly one of the first interfaces to be opened up -" +
    +
  • Adherence to web standards make the application future-proof
    • +
  • Versatile, capable UI tools, including re-configurable event library
    • +
  • Secure: nothing is “installed” on client PC, and the app has no direct access to local storage
    • +
  • Should there be a wish to connect to a central server, http is regularly one of the first interfaces to be opened up
    • +
" position="center" show overlay From 48b38ab0b51711e0511f6ec43b86229489125a2c Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Tue, 3 Apr 2018 12:34:22 +0100 Subject: [PATCH 4/5] incorporate new libs --- package-lock.json | 288 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 269 insertions(+), 19 deletions(-) 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", From 3820f31d64be02263d157c4557f75aaf737f81cd Mon Sep 17 00:00:00 2001 From: Eduardo Moura Date: Thu, 5 Apr 2018 17:45:35 +0100 Subject: [PATCH 5/5] fixes #124 Added missing steps. Added width fix to the first screen. --- src/UiConfig.js | 14 +++++++++++ src/components/App.js | 26 ++++++++++++++++++++- src/components/LeftPanel/Filters.js | 2 +- src/components/LeftPanel/LeftPanel.js | 11 +++++++-- src/components/RightPanel/CategoryRender.js | 9 +++++++ src/components/RightPanel/EntryRender.js | 8 +++++++ src/components/Tutorial/index.js | 7 ++++-- 7 files changed, 71 insertions(+), 6 deletions(-) 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 9cd9eca..e2dddd4 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,10 +8,15 @@ 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 }) => ( - + ( text="The earlier steps showed how the timestamp for a series of events can be captured quickly, then filled in during a more quiet period. Click on this button to expand the narrative, so we can start tidying it. The event buttons are still on the right-hand side, in case the narrative-keeper wants to insert an entry while still focussing on the content." position="bottom" overlay - />{" "} - {" "} + /> + + ); 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 && ( + + )} { this.props.setVisible(true); this.props.context.setOverlay("." + id);