From 0b35c62f922ba9c1650bafaa96612b1b09054652 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 17 Dec 2024 10:52:51 +1300 Subject: [PATCH] set up welcome pages --- packages/datatrak-web/package.json | 1 + .../WelcomeScreens/WelcomeScreens.tsx | 109 ++++++++++++++++++ .../src/features/WelcomeScreens/index.ts | 6 + packages/datatrak-web/src/routes/Routes.tsx | 6 +- yarn.lock | 96 ++++++++++++++- 5 files changed, 215 insertions(+), 3 deletions(-) create mode 100644 packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx create mode 100644 packages/datatrak-web/src/features/WelcomeScreens/index.ts diff --git a/packages/datatrak-web/package.json b/packages/datatrak-web/package.json index 9c4b1aa8f1..601fb158a6 100644 --- a/packages/datatrak-web/package.json +++ b/packages/datatrak-web/package.json @@ -39,6 +39,7 @@ "react-leaflet": "^3.2.1", "react-router": "6.3.0", "react-router-dom": "6.3.0", + "react-swipeable-views": "^0.14.0", "react-table": "^7.8.0", "styled-components": "^5.1.0", "workbox-precaching": "^7.1.0", diff --git a/packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx b/packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx new file mode 100644 index 0000000000..3cc1efc5f0 --- /dev/null +++ b/packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx @@ -0,0 +1,109 @@ +/* + * Tupaia + * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd + */ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { MobileStepper, Typography, Button as MuiButton } from '@material-ui/core'; +import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons'; +import SwipeableViews from 'react-swipeable-views'; + +const tutorialSteps = [ + { + label: 'San Francisco – Oakland Bay Bridge, United States', + imgPath: + 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Bird', + imgPath: + 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Bali, Indonesia', + imgPath: + 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80', + }, + { + label: 'NeONBRAND Digital Marketing, Las Vegas, United States', + imgPath: + 'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Goč, Serbia', + imgPath: + 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60', + }, +]; + +const Container = styled.div` + padding: 2rem; +`; + +const Title = styled(Typography).attrs({ + variant: 'h1', +})` + font-size: 1rem; + margin-bottom: 1rem; +`; + +const Text = styled(Typography)` + font-size: 0.875rem; +`; + +const Image = styled.img` + max-width: 100%; +`; + +const Button = styled(MuiButton)` + width: 100%; +`; + +export const WelcomeScreens = () => { + const [activeStep, setActiveStep] = useState(0); + const maxSteps = tutorialSteps.length; + + const handleNext = () => { + setActiveStep(prevActiveStep => prevActiveStep + 1); + }; + + const handleBack = () => { + setActiveStep(prevActiveStep => prevActiveStep - 1); + }; + + const handleStepChange = step => { + setActiveStep(step); + }; + return ( + + {tutorialSteps[activeStep].label} + + {tutorialSteps.map((step, index) => ( +
+ {Math.abs(activeStep - index) <= 2 ? ( + {step.label} + ) : null} +
+ ))} + + + Next + + + } + backButton={ + + } + /> + + ); +}; diff --git a/packages/datatrak-web/src/features/WelcomeScreens/index.ts b/packages/datatrak-web/src/features/WelcomeScreens/index.ts new file mode 100644 index 0000000000..d119a5ebce --- /dev/null +++ b/packages/datatrak-web/src/features/WelcomeScreens/index.ts @@ -0,0 +1,6 @@ +/* + * Tupaia + * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd + */ + +export { WelcomeScreens } from './WelcomeScreens'; diff --git a/packages/datatrak-web/src/routes/Routes.tsx b/packages/datatrak-web/src/routes/Routes.tsx index d6a6a412b1..2a40d3adb9 100644 --- a/packages/datatrak-web/src/routes/Routes.tsx +++ b/packages/datatrak-web/src/routes/Routes.tsx @@ -23,6 +23,7 @@ import { TaskDetailsPage, NotAuthorisedPage, } from '../views'; +import { WelcomeScreens } from '../features/WelcomeScreens'; import { useCurrentUserContext } from '../api'; import { ROUTES } from '../constants'; import { useFromLocation } from '../utils'; @@ -55,13 +56,16 @@ const AuthViewLoggedInRedirect = ({ children }) => { * This Router is using [version 6.3]{@link https://reactrouter.com/en/v6.3.0}, as later versions are not supported by our TS setup. See [this issue here]{@link https://github.com/remix-run/react-router/discussions/8364} * This means the newer 'createBrowserRouter' and 'RouterProvider' can't be used here. **/ + export const Routes = () => { + const welcomeScreensCompleted = false; + const LandingPageView = welcomeScreensCompleted ? LandingPage : WelcomeScreens; return ( }> {/* PRIVATE ROUTES */} }> - } /> + } /> } /> }> } /> diff --git a/yarn.lock b/yarn.lock index 7d70bc550e..16620bf56b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7367,6 +7367,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:7.0.0": + version: 7.0.0 + resolution: "@babel/runtime@npm:7.0.0" + dependencies: + regenerator-runtime: ^0.12.0 + checksum: 7dbeb4bfa5762b80b4137f21009d2b754dd1adba0390d909d53397c510c1e708677302774d69386f936a26fb898f055c32a0c668e2d908d78d36f76d0c3d04dd + languageName: node + linkType: hard + "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.15.4 resolution: "@babel/runtime@npm:7.15.4" @@ -7412,6 +7421,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.2.0": + version: 7.26.0 + resolution: "@babel/runtime@npm:7.26.0" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a + languageName: node + linkType: hard + "@babel/runtime@npm:^7.21.0": version: 7.23.1 resolution: "@babel/runtime@npm:7.23.1" @@ -11451,6 +11469,7 @@ __metadata: react-leaflet: ^3.2.1 react-router: 6.3.0 react-router-dom: 6.3.0 + react-swipeable-views: ^0.14.0 react-table: ^7.8.0 styled-components: ^5.1.0 vite: ^4.5.3 @@ -26091,6 +26110,13 @@ __metadata: languageName: node linkType: hard +"keycode@npm:^2.1.7": + version: 2.2.1 + resolution: "keycode@npm:2.2.1" + checksum: 7a5c775b2410a3b6d9c07a415ecb70639187a965be239d2c11c71079cb1ca2f9dede94b86426f3ece475dc8ae3debf2367531bbcafc0af8c82f157d9a4f7e6cb + languageName: node + linkType: hard + "keygrip@npm:~1.0.3": version: 1.0.3 resolution: "keygrip@npm:1.0.3" @@ -31246,7 +31272,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.8.0, prop-types@npm:^15.8.1": +"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.5.4, prop-types@npm:^15.8.0, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -31867,6 +31893,19 @@ __metadata: languageName: node linkType: hard +"react-event-listener@npm:^0.6.0": + version: 0.6.6 + resolution: "react-event-listener@npm:0.6.6" + dependencies: + "@babel/runtime": ^7.2.0 + prop-types: ^15.6.0 + warning: ^4.0.1 + peerDependencies: + react: ^16.3.0 + checksum: 0287e0ae8cbf0a4c03889ffc2b745f5494b3edea0f4667357d709f5646dd78c7289ce305b6f473ec6ac5789f8a937c86b7e543d0249f0bf787bccdb1eab7ecd0 + languageName: node + linkType: hard + "react-hook-form@npm:^6.0.0": version: 6.0.6 resolution: "react-hook-form@npm:6.0.6" @@ -32666,6 +32705,45 @@ __metadata: languageName: node linkType: hard +"react-swipeable-views-core@npm:^0.14.0": + version: 0.14.0 + resolution: "react-swipeable-views-core@npm:0.14.0" + dependencies: + "@babel/runtime": 7.0.0 + warning: ^4.0.1 + checksum: 7683bcb809b57d502603396d8560677105b5af1f4db3ecad6cef03a548ae45462af78156516f8fe2f32d36b1bbd295ed2aab49f0d967ac077b3bd902697bfb07 + languageName: node + linkType: hard + +"react-swipeable-views-utils@npm:^0.14.0": + version: 0.14.0 + resolution: "react-swipeable-views-utils@npm:0.14.0" + dependencies: + "@babel/runtime": 7.0.0 + keycode: ^2.1.7 + prop-types: ^15.6.0 + react-event-listener: ^0.6.0 + react-swipeable-views-core: ^0.14.0 + shallow-equal: ^1.2.1 + checksum: 560f3f1000254adfe7ba2c82c133dbd26404a3cfa05794e15eb090056c13f3494aa61f34e133d5e2c970a2eb797a0f55fd8a9bb3bbd85c78770c11912a26b9bb + languageName: node + linkType: hard + +"react-swipeable-views@npm:^0.14.0": + version: 0.14.0 + resolution: "react-swipeable-views@npm:0.14.0" + dependencies: + "@babel/runtime": 7.0.0 + prop-types: ^15.5.4 + react-swipeable-views-core: ^0.14.0 + react-swipeable-views-utils: ^0.14.0 + warning: ^4.0.1 + peerDependencies: + react: ^15.3.0 || ^16.0.0 || ^17.0.0 + checksum: 477bcf2d6b88312cd74c069c23aff48983209ce74b8d10c0d6adabf00795735f55a9c12dc3f23e5d7168308959f18c178d486821abec02e8a562295eada3568b + languageName: node + linkType: hard + "react-table@npm:^7.7.0": version: 7.7.0 resolution: "react-table@npm:7.7.0" @@ -33229,6 +33307,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.12.0": + version: 0.12.1 + resolution: "regenerator-runtime@npm:0.12.1" + checksum: 348c401336bcebe2be17fd4f24c5b0a1ed75bff3024dc817a69cdc776b48b98c7f6f3b98e1baa4220569440bb9215e1fff3dcb01c8aad3ff2ed3732e30d017bf + languageName: node + linkType: hard + "regenerator-runtime@npm:^0.13.11": version: 0.13.11 resolution: "regenerator-runtime@npm:0.13.11" @@ -34535,6 +34620,13 @@ __metadata: languageName: node linkType: hard +"shallow-equal@npm:^1.2.1": + version: 1.2.1 + resolution: "shallow-equal@npm:1.2.1" + checksum: 4f1645cc516e7754c4438db687e1da439a5f29a7dba2ba90c5f88e5708aeb17bc4355ba45cad805b0e95dc898e37d8bf6d77d854919c7512f89939986cff8cd1 + languageName: node + linkType: hard + "shallowequal@npm:^1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" @@ -38084,7 +38176,7 @@ __metadata: languageName: node linkType: hard -"warning@npm:^4.0.2, warning@npm:^4.0.3": +"warning@npm:^4.0.1, warning@npm:^4.0.2, warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" dependencies: