From 95067f71e0ca1d2e259f44dba708f46365406204 Mon Sep 17 00:00:00 2001 From: Joanna Cheng Date: Thu, 4 Apr 2024 19:16:51 -0400 Subject: [PATCH 1/6] base components for custom tour --- src/components/Tour/index.tsx | 157 ++++++++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 src/components/Tour/index.tsx diff --git a/src/components/Tour/index.tsx b/src/components/Tour/index.tsx new file mode 100644 index 00000000..32495df0 --- /dev/null +++ b/src/components/Tour/index.tsx @@ -0,0 +1,157 @@ +import { + StepType, + ProviderProps, + PopoverContentProps, + useTour, +} from '@reactour/tour'; +import React from 'react'; + +import './stylesheet.scss'; +import '@reactour/popover/dist/index.css'; + +export const steps: StepType[] = [ + { + selector: '#Recurring\\ Events', + content: () => ( +
+

Add recurring events

+

+ Use{' '} + + Recurring Events + {' '} + to block out meetings, work shifts, and any other weekly events you + may need to schedule your classes around. +
+
+ Drag and drop events on the schedule view to adjust times. +

+
+ ), + }, + { + selector: '#Finals', + content: () => ( +
+

View Finals Matrix

+

+ Use the{' '} + + Finals Tab + {' '} + to view the final exam matrix. +
+
+ The final exam matrix for Fall 2023{' '} + + may not be fully finalized yet. + +

+
+ ), + }, + { + selector: '.invite-button', + highlightedSelectors: ['.invite-button', '.comparison-header'], + content: () => ( +
+

Share + Compare Schedule

+

+ Use{' '} + + Share Schedule + {' '} + to share your schedule with other students and they can share theirs + back.
+
+ Then, toggle{' '} + + Compare Schedule + {' '} + and click on the other students`'` schedules to compare. +

+
+ ), + }, + { + selector: '.tour-button', + content: () => ( +
+

User Guide

+

+ Use the{' '} + + User Guide + {' '} + at any time to review the different features of GT Scheduler. +

+
+ ), + }, +]; + +type CloseProps = { onClick?: (() => void) | undefined }; + +export function Close({ onClick }: CloseProps): React.ReactElement { + return ( + + ); +} + +export function nextButton(props: { + setCurrentStep: ProviderProps['setCurrentStep']; + currentStep: ProviderProps['currentStep']; + steps?: ProviderProps['steps']; + setIsOpen: PopoverContentProps['setIsOpen']; +}): React.ReactElement { + return ( + + ); +} + +export default function Tour(): React.ReactElement { + const { setIsOpen, setCurrentStep } = useTour(); + return ( +
+ +
+ ); +} From 117629fb08b1870275a77080990d36d1f1170059 Mon Sep 17 00:00:00 2001 From: Joanna Cheng Date: Thu, 4 Apr 2024 19:18:02 -0400 Subject: [PATCH 2/6] style and display tour --- src/components/App/index.tsx | 94 ++++++++++++++++--------- src/components/Feedback/stylesheet.scss | 3 +- 2 files changed, 61 insertions(+), 36 deletions(-) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 415a9a76..48099e00 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { TooltipProvider } from 'react-tooltip'; +import { TourProvider } from '@reactour/tour'; import { classes } from '../../utils/misc'; import Feedback from '../Feedback'; @@ -16,6 +17,7 @@ import useThemeFromStorage from '../../data/hooks/useThemeFromStorage'; import { DESKTOP_BREAKPOINT } from '../../constants'; import useScreenWidth from '../../hooks/useScreenWidth'; import InformationModal from '../InformationModal'; +import Tour, { nextButton, steps, Close } from '../Tour'; import 'react-virtualized/styles.css'; import './stylesheet.scss'; @@ -32,48 +34,70 @@ export default function App(): React.ReactElement { - {/* To bring the website down for maintenance purposes, +

} + styles={{ + popover: (base) => ({ + ...base, + borderRadius: '10px', + backgroundColor: '#333333', + padding: '30px', + }), + }} + > + {/* To bring the website down for maintenance purposes, insert here and disable everything below. See https://github.com/gt-scheduler/website/pull/194 for reference. */} - ( - - - - - } - > -

- There was en error somewhere in the core application logic - and it can't continue. -
-
- Try refreshing the page to see if it fixes the issue. -
- - - - )} - > - - {/* AppDataLoader is in charge of ensuring that there are valid values + ( + + + + + } + > +
+ There was en error somewhere in the core application + logic and it can't continue. +
+
+ Try refreshing the page to see if it fixes the issue. +
+ + + + )} + > + + {/* AppDataLoader is in charge of ensuring that there are valid values for the Terms and Term contexts before rendering its children. If any data is still loading, then it displays an "app skeleton" with a spinner. If there was an error while loading then it displays an error screen. */} - - - - - - - {/* Display a popup when first visiting the site */} - {/* Include or here */} - - + + + + + + + {/* Display a popup when first visiting the site */} + {/* Include or here */} + + + diff --git a/src/components/Feedback/stylesheet.scss b/src/components/Feedback/stylesheet.scss index 18c1a17c..4a0acb89 100644 --- a/src/components/Feedback/stylesheet.scss +++ b/src/components/Feedback/stylesheet.scss @@ -6,7 +6,7 @@ border-radius: 5px; position: absolute; bottom: 24px; - right: 24px; + right: 100px; width: 60px; height: 60px; @@ -46,6 +46,7 @@ min-height: 350px; display: flex; flex-direction: column; + z-index: 1; @include popup; @extend %common; From 6a7017136f824c5f9c4ef87ba40a015c81eacb87 Mon Sep 17 00:00:00 2001 From: Joanna Cheng Date: Fri, 5 Apr 2024 16:28:28 -0400 Subject: [PATCH 3/6] styling --- src/components/Tour/index.tsx | 1 - src/components/Tour/stylesheet.scss | 59 +++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 src/components/Tour/stylesheet.scss diff --git a/src/components/Tour/index.tsx b/src/components/Tour/index.tsx index 32495df0..513a774b 100644 --- a/src/components/Tour/index.tsx +++ b/src/components/Tour/index.tsx @@ -7,7 +7,6 @@ import { import React from 'react'; import './stylesheet.scss'; -import '@reactour/popover/dist/index.css'; export const steps: StepType[] = [ { diff --git a/src/components/Tour/stylesheet.scss b/src/components/Tour/stylesheet.scss new file mode 100644 index 00000000..9f43f7a7 --- /dev/null +++ b/src/components/Tour/stylesheet.scss @@ -0,0 +1,59 @@ +@import '../../variables'; + +.tour-button-wrapper { + @include popup; +} + +.tour-button { + width: 60px; + height: 60px; + border-radius: 1000px; + position: absolute; + bottom: 24px; + right: 24px; + width: 50px; + height: 50px; + border: none; + color: var(--theme-fg); + background-color: $color-neutral; + font-size: 30px; + font-weight: 600; + + &:hover { + cursor: pointer; + } +} + +.tour-header { + color: var(--theme-fg); + font-size: 20px; + margin: 0px; +} + +.tour-content { + color: var(--theme-fg); + font-size: 14px; +} + +.skip-tour-button { + border: none; + background-color: transparent; + color: $color-neutral; + text-decoration: underline; + + &:hover { + cursor: pointer; + } +} + +.tour-next-button { + color: white; + background-color: #c56e5b; + border-radius: 6px; + border: none; + padding: 5px 20px; + + &:hover { + cursor: pointer; + } +} From e7c4805d619a823bd6d24a0b30f379f4771e907d Mon Sep 17 00:00:00 2001 From: Yatharth Bhargava Date: Mon, 8 Apr 2024 14:28:54 -0400 Subject: [PATCH 4/6] nit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 92c73493..6248abe7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@fortawesome/free-brands-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@reactour/tour": "^3.6.1", "@sentry/react": "^6.12.0", "@sentry/tracing": "^6.12.0", "@types/lodash": "^4.14.192", From 8ca3f29d6731f6f2a717b177c5ec697304a81cfa Mon Sep 17 00:00:00 2001 From: Yatharth Bhargava Date: Mon, 8 Apr 2024 14:33:24 -0400 Subject: [PATCH 5/6] nit --- yarn.lock | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/yarn.lock b/yarn.lock index e6df0392..1c56c952 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2071,6 +2071,37 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@reactour/mask@*": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@reactour/mask/-/mask-1.1.0.tgz#e327306585ee3510e80169a7fa811e9d0b9448bb" + integrity sha512-GkJMLuTs3vTsm4Ryq2uXcE4sMzRP1p4xSd6juSOMqbHa7IVD/UiLCLqJWHR9xGSQPbYhpZAZAORUG5cS0U5tBA== + dependencies: + "@reactour/utils" "*" + +"@reactour/popover@*": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@reactour/popover/-/popover-1.1.1.tgz#c9b05ee31b8677d874f1479d724204b936e1128f" + integrity sha512-BouulO0sXfmuHSPX8FwCYI0fMeT+VsWqk7UTao3NQcUC5H903ZeKOV2GYpwSJtRUQhsyNEu1Q8cEruGRf1SOXQ== + dependencies: + "@reactour/utils" "*" + +"@reactour/tour@^3.6.1": + version "3.6.1" + resolved "https://registry.yarnpkg.com/@reactour/tour/-/tour-3.6.1.tgz#7537c8faa48546fe4e312f125113459b7a19fa13" + integrity sha512-vzmgbm4T7n5gh0cjc4Zi4G3K29dXQyEdi/o7ZYLpNcisJ0hwP5jNKH7BgckrHWEGldBxYSWl34tsRmHcyxporQ== + dependencies: + "@reactour/mask" "*" + "@reactour/popover" "*" + "@reactour/utils" "*" + +"@reactour/utils@*": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@reactour/utils/-/utils-0.5.0.tgz#8886872d78839187fd53399834a1b9688e98d754" + integrity sha512-yQs5Nm/Dg1xRM7d/S/UILBV5OInrTgrjGzgc81/RP5khqdO5KnpOaC46yF83kDtCalte8X3RCwp+F2YA509k1w== + dependencies: + "@rooks/use-mutation-observer" "^4.11.2" + resize-observer-polyfill "^1.5.1" + "@remix-run/router@1.10.0": version "1.10.0" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.10.0.tgz#e2170dc2049b06e65bbe883adad0e8ddf8291278" @@ -2120,6 +2151,11 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rooks/use-mutation-observer@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@rooks/use-mutation-observer/-/use-mutation-observer-4.11.2.tgz#a0466c4338e0a4487ea19253c86bcd427c29f4af" + integrity sha512-vpsdrZdr6TkB1zZJcHx+fR1YC/pHs2BaqcuYiEGjBVbwY5xcC49+h0hAUtQKHth3oJqXfIX/Ng8S7s5HFHdM/A== + "@rushstack/eslint-patch@^1.1.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728" @@ -10065,6 +10101,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" From 638a62d57b09b587cb2b9d351e8a0d07240a92e2 Mon Sep 17 00:00:00 2001 From: Joanna Cheng Date: Mon, 8 Apr 2024 16:59:02 -0400 Subject: [PATCH 6/6] all tour code in single component --- src/components/App/index.tsx | 29 +++++-------------------- src/components/Tour/index.tsx | 41 +++++++++++++++++++++++++++++++---- 2 files changed, 42 insertions(+), 28 deletions(-) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 48099e00..43d0a6eb 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { TooltipProvider } from 'react-tooltip'; -import { TourProvider } from '@reactour/tour'; import { classes } from '../../utils/misc'; import Feedback from '../Feedback'; @@ -17,7 +16,7 @@ import useThemeFromStorage from '../../data/hooks/useThemeFromStorage'; import { DESKTOP_BREAKPOINT } from '../../constants'; import useScreenWidth from '../../hooks/useScreenWidth'; import InformationModal from '../InformationModal'; -import Tour, { nextButton, steps, Close } from '../Tour'; +import TourProvider from '../Tour'; import 'react-virtualized/styles.css'; import './stylesheet.scss'; @@ -33,25 +32,8 @@ export default function App(): React.ReactElement { return ( - -

} - styles={{ - popover: (base) => ({ - ...base, - borderRadius: '10px', - backgroundColor: '#333333', - padding: '30px', - }), - }} - > + + {/* To bring the website down for maintenance purposes, insert here and disable everything below. See https://github.com/gt-scheduler/website/pull/194 for reference. */} @@ -92,13 +74,12 @@ export default function App(): React.ReactElement { - {/* Display a popup when first visiting the site */} {/* Include or here */} - - + + ); diff --git a/src/components/Tour/index.tsx b/src/components/Tour/index.tsx index 513a774b..f965bbc8 100644 --- a/src/components/Tour/index.tsx +++ b/src/components/Tour/index.tsx @@ -3,12 +3,13 @@ import { ProviderProps, PopoverContentProps, useTour, + TourProvider as TourProv, } from '@reactour/tour'; import React from 'react'; import './stylesheet.scss'; -export const steps: StepType[] = [ +const steps: StepType[] = [ { selector: '#Recurring\\ Events', content: () => ( @@ -91,7 +92,7 @@ export const steps: StepType[] = [ type CloseProps = { onClick?: (() => void) | undefined }; -export function Close({ onClick }: CloseProps): React.ReactElement { +function Close({ onClick }: CloseProps): React.ReactElement { return (