https://github.com/kafkaesc/test-drive

React-Joyride practice 🚗
https://github.com/kafkaesc/test-drive

Last synced: about 2 months ago
JSON representation

React-Joyride practice 🚗

• Host: GitHub
• URL: https://github.com/kafkaesc/test-drive
• Owner: kafkaesc
• Created: 2024-02-14T20:30:00.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-23T15:58:55.000Z (9 months ago)
• Last Synced: 2024-03-23T16:48:18.595Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 682 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Test Drive

Built by Jared Hettinger

This is a testing project for experimenting with [React-Joyride](https://github.com/gilbarbara/react-joyride) for possible implementation on [¡Lenguau!](https://lenguau.com)

React Joyride docs: https://docs.react-joyride.com

## Tour Samples and Notes

One overall issue is that any elements with a transparent background will have their background appear grayed out when they become a focused step on a tour. This appears to be an [open issue](https://github.com/gilbarbara/react-joyride/issues/467) related to the behavior of [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).

The 'solution' for this is including a bg-color for UI components, but declaring specific background colors for elements like headings and spans seems inadvisable.

### Button Start Continuous

This tour starts when the user clicks the `Start Tour` button. This tour is continuous which means that when the user clicks `Next` the tooltip will automatically highlight the next step. The user still has the option to interrupt the tour by clicking the X or clicking the dimmed area around the tooltip. Once the user reaches the last step of the tour they can restart the tour by clicking the `Start Tour` button again.

Two issues with the current implementation:

- To effectively reset the tour both the `continuous` and `run` props must be set to `false` before setting them back to `true`. This is done via Joyride's callback function and checking the status of the tour.

- The modal displays as expected the first time the tour starts. If a user restarts the tour after the first time, the initial modal does not appear over a dimmed background. The next step does not begin until the user clicks on a blinking dot. At this point the tour continues as expected.

- The `Start Tour` button does nothing if the user is mid-tour. (This is an improvement I should look into.)

## Run

1. In one terminal run `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch`

1. In a second terminal run `npm start`