Merge pull request #1008 from pybricks/dlech

Pybricks tour

Author: dlech

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added better error message when no files to backup ([support#681]).
 - Added multi-step firmware flashing dialog.
 - Added support for flashing firmware via USB DFU.
+- Added an interactive introductory tour of the app.
 
 ### Fixed
 - Fixed deleting files that are not open in the editor.

blueprints-icons/16px/chevron-right.svg

@@ -91,6 +91,7 @@
         "react-dev-utils": "^12.0.1",
         "react-dom": "^16.13.1",
         "react-dropzone": "^14.2.2",
+        "react-joyride": "^2.5.0",
         "react-monaco-editor": "^0.49.0",
         "react-popper": "^2.3.0",
         "react-redux": "^8.0.2",

blueprints-icons/16px/more.svg

@@ -4,7 +4,8 @@
 import { cleanup } from '@testing-library/react';
 import React from 'react';
 import { testRender } from '../../test';
-import Activities, { Activity } from './Activities';
+import Activities from './Activities';
+import { Activity } from './hooks';
 
 afterEach(() => {
     cleanup();

blueprints-icons/16px/small-minus.svg

@@ -4,32 +4,18 @@
 import './activities.scss';
 import { Icon, Tab, Tabs } from '@blueprintjs/core';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useLocalStorage } from 'usehooks-ts';
 import Explorer from '../explorer/Explorer';
 import Settings from '../settings/Settings';
+import { Activity, useActivitiesSelectedActivity } from './hooks';
 import { useI18n } from './i18n';
 
-/** Indicates the selected activity. */
-export enum Activity {
-    /** No activity is selected. */
-    None = 'activity.none',
-    /** The explorer activity is selected. */
-    Explorer = 'activity.explorer',
-    /** The settings activity is selected. */
-    Settings = 'activity.settings',
-}
-
 /**
  * React component that acts as a tab control to select activities.
  */
 const Activities: React.VoidFunctionComponent = () => {
+    const [selectedActivity, setSelectedActivity] = useActivitiesSelectedActivity();
     const i18n = useI18n();
 
-    const [selectedActivity, setSelectedActivity] = useLocalStorage(
-        'activities.selectedActivity',
-        Activity.Explorer,
-    );
-
     const handleAction = useCallback(
         (newActivity: Activity) => {
             // if activity is already selected, select none
@@ -110,6 +96,7 @@ const Activities: React.VoidFunctionComponent = () => {
             ref={tabsRef}
         >
             <Tab
+                itemID="pb-activities-explorer-tab"
                 aria-label={i18n.translate('explorer')}
                 className="pb-activities-tablist-tab"
                 id={Activity.Explorer}
@@ -125,6 +112,7 @@ const Activities: React.VoidFunctionComponent = () => {
                 onMouseDown={(e) => e.stopPropagation()}
             />
             <Tab
+                itemID="pb-activities-settings-tab"
                 aria-label={i18n.translate('settings')}
                 className="pb-activities-tablist-tab"
                 id={Activity.Settings}

blueprints-icons/16px/small-tick.svg

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useLocalStorage } from 'usehooks-ts';
+
+/** Indicates the selected activity. */
+export enum Activity {
+    /** No activity is selected. */
+    None = 'activity.none',
+    /** The explorer activity is selected. */
+    Explorer = 'activity.explorer',
+    /** The settings activity is selected. */
+    Settings = 'activity.settings',
+}
+
+/**
+ * React hook for getting and setting the selected activity in the activity panel.
+ * @returns a tuple of the current state and the setter function (like useState()).
+ */
+export function useActivitiesSelectedActivity() {
+    return useLocalStorage('activities.selectedActivity', Activity.Explorer);
+}