Franknoirot/add walkthrough (#189)

* Barebones onboarding triggering and resetting

* Make onboarding route-based

* Add Camera step, highlighting camera feed

* Implement redirect behavior

* Unify navigation hooks

* Formatting

* add useResizeObserver, convert to custom hook

package.json

@@ -8,6 +8,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
+    "@react-hook/resize-observer": "^1.2.6",
     "@tauri-apps/api": "^1.3.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -23,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-hotkeys-hook": "^4.4.1",
     "react-json-view": "^1.21.3",
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.14.2",

src/App.tsx

@@ -12,7 +12,6 @@ import {
   addLineHighlight,
 } from './editor/highlightextension'
 import { Selections, useStore } from './useStore'
-import { Toolbar } from './Toolbar'
 import { Logs } from './components/Logs'
 import { PanelHeader } from './components/PanelHeader'
 import { MemoryPanel } from './components/MemoryPanel'
@@ -262,7 +261,6 @@ export function App() {
       <AppHeader />
       <ModalContainer />
       <Allotment snap={true}>
-
         <Allotment vertical defaultSizes={[5, 400, 1, 1]} minSize={20}>
           <SetToken />
           <div className="h-full flex flex-col items-start">

src/Auth.tsx

@@ -6,27 +6,46 @@ import { SetToken } from './components/TokenInput'
 import { useStore } from './useStore'
 import {
   createBrowserRouter,
+  redirect,
   RouterProvider,
 } from "react-router-dom"
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
+import Onboarding, { onboardingRoutes } from './routes/Onboarding'
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
     errorElement: <ErrorPage />,
+    loader: () => {
+      const store = localStorage.getItem('store')
+      if (store === null) {
+        return redirect('/onboarding')
+      } else {
+        const status = (JSON.parse(store)).state.onboardingStatus
+        if (status !== 'done' && status !== 'dismissed') {
+          return redirect('/onboarding/' + status)
+        }
+      } 
+      return null
+    }
   },
   {
     path: "/settings",
     element: <Settings />,
+  },
+  {
+    path: "/onboarding",
+    element: <Onboarding/>,
+    children: onboardingRoutes,
   }
 ])
 
 export const Auth = () => {
   const { data: user } = useSWR(withBaseUrl('/user'), fetcher) as any
   const  {token} = useStore((s) => ({
-    token: s.token
+    token: s.token,
   }))
 
   const isLocalHost =

src/components/Stream.tsx

@@ -121,7 +121,7 @@ export const Stream = () => {
   }
 
   return (
-    <div>
+    <div id="stream">
       <PanelHeader title="Stream" />
       <video
         ref={videoRef}

src/hooks/useBackdropHighlight.ts

@@ -0,0 +1,55 @@
+import useResizeObserver from '@react-hook/resize-observer'
+import { useEffect, useState } from 'react'
+
+interface Rect {
+  top: number
+  left: number
+  height: number
+  width: number
+}
+
+/**
+ * Takes an element id and uses React refs to create a CSS clip-path rule to apply to a backdrop element
+ * which excludes the element with the given id, creating a "highlight" effect.
+ * @param highlightId
+ */
+export function useBackdropHighlight(target: string): string {
+  const [clipPath, setClipPath] = useState('')
+  const [elem, setElem] = useState(document.getElementById(target))
+
+  // Build the actual clip path string, cutting out the target element
+  function buildClipPath({ top, left, height, width }: Rect) {
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+
+    return `
+        path(evenodd, "M0 0 l${windowWidth} 0 l0 ${windowHeight} l-${windowWidth} 0 Z \
+            M${left} ${top} l${width} 0 l0 ${height} l-${width} 0 Z")
+        `
+  }
+
+  // initial setup of clip path
+  useEffect(() => {
+    if (!elem) {
+        const newElem = document.getElementById(target)
+        if (newElem === null) {
+            throw new Error(`Could not find element with id "${target}" to highlight`)
+        }
+      setElem(document.getElementById(target))
+      return
+    }
+
+    const { top, left, height, width } = elem.getBoundingClientRect()
+    setClipPath(buildClipPath({ top, left, height, width }))
+  }, [elem, target])
+
+  // update clip path on resize
+  useResizeObserver(elem, (entry) => {
+    const { height, width } = entry.contentRect
+    // the top and left are relative to the viewport, so we need to get the target's position
+    const { top, left } = entry.target.getBoundingClientRect()
+    setClipPath(buildClipPath({ top, left, height, width }))
+  })
+
+  return clipPath
+}

src/routes/Onboarding/Camera.tsx

@@ -0,0 +1,45 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { ActionButton } from '../../components/ActionButton'
+import { useDismiss, useNextClick } from '.'
+import { useBackdropHighlight } from '../../hooks/useBackdropHighlight'
+
+const Units = () => {
+  const dismiss = useDismiss()
+  const next = useNextClick('sketching')
+  const clipPath = useBackdropHighlight('stream')
+
+  return (
+    <div
+      className="fixed grid justify-center items-end inset-0 bg-chalkboard-110/50 z-50"
+      style={{ clipPath }}
+    >
+      <div className="max-w-2xl flex flex-col justify-center bg-white p-8 rounded">
+        <h1 className="text-2xl font-bold">Camera</h1>
+        <p className="mt-6">
+          Moving the camera is easy. Just click and drag anywhere in the scene
+          to rotate the camera, or hold down the <kbd>Ctrl</kbd> key and drag to
+          pan the camera.
+        </p>
+        <div className="flex justify-between mt-6">
+          <ActionButton
+            onClick={dismiss}
+            icon={{
+              icon: faXmark,
+              bgClassName: 'bg-destroy-80',
+              iconClassName:
+                'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+            }}
+            className="hover:border-destroy-40"
+          >
+            Dismiss
+          </ActionButton>
+          <ActionButton onClick={next} icon={{ icon: faArrowRight }}>
+            Next: Sketching
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Units

src/routes/Onboarding/Introduction.tsx

@@ -0,0 +1,45 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { ActionButton } from '../../components/ActionButton'
+import { useDismiss, useNextClick } from '.'
+
+const Introduction = () => {
+  const dismiss = useDismiss()
+  const next = useNextClick('units')
+
+  return (
+    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
+      <div className="max-w-3xl bg-white p-8 rounded">
+        <h1 className="text-2xl font-bold">
+          Welcome to the KittyCAD Modeling App
+        </h1>
+        <p className="my-2">
+          A browser-first, GPU-streaming hardware design tool that lets you edit
+          visually, with code, or both.
+        </p>
+        <p className="my-2">
+          Powered by the first API created for anyone to build hardware design
+          tools.
+        </p>
+        <div className="flex justify-between mt-6">
+          <ActionButton
+            onClick={dismiss}
+            icon={{
+              icon: faXmark,
+              bgClassName: 'bg-destroy-80',
+              iconClassName:
+                'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+            }}
+            className="hover:border-destroy-40"
+          >
+            Dismiss
+          </ActionButton>
+          <ActionButton onClick={next} icon={{ icon: faArrowRight }}>
+            Get Started
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Introduction

src/routes/Onboarding/Sketching.tsx

@@ -0,0 +1,37 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { ActionButton } from '../../components/ActionButton'
+import { useDismiss } from '.'
+
+const Sketching = () => {
+  const dismiss = useDismiss()
+
+  return (
+    <div className="fixed grid justify-center items-end inset-0 bg-chalkboard-110/50 z-50">
+      <div className="max-w-2xl flex flex-col justify-center bg-white p-8 rounded">
+        <h1 className="text-2xl font-bold">Sketching</h1>
+        <p className="mt-6">
+          We still have to implement this step, and the rest of the tutorial!
+        </p>
+        <div className="flex justify-between mt-6">
+          <ActionButton
+            onClick={dismiss}
+            icon={{
+              icon: faXmark,
+              bgClassName: 'bg-destroy-80',
+              iconClassName:
+                'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+            }}
+            className="hover:border-destroy-40"
+          >
+            Dismiss
+          </ActionButton>
+          <ActionButton onClick={dismiss} icon={{ icon: faArrowRight }}>
+            Finish
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sketching

src/routes/Onboarding/Units.tsx

@@ -0,0 +1,90 @@
+import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { baseUnits, useStore } from '../../useStore'
+import { ActionButton } from '../../components/ActionButton'
+import { SettingsSection } from '../Settings'
+import { Toggle } from '../../components/Toggle/Toggle'
+import { useState } from 'react'
+import { useDismiss, useNextClick } from '.'
+
+const Units = () => {
+  const dismiss = useDismiss()
+  const next = useNextClick('camera')
+  const {
+    defaultUnitSystem: ogDefaultUnitSystem,
+    setDefaultUnitSystem: saveDefaultUnitSystem,
+    defaultBaseUnit: ogDefaultBaseUnit,
+    setDefaultBaseUnit: saveDefaultBaseUnit,
+  } = useStore((s) => ({
+    defaultUnitSystem: s.defaultUnitSystem,
+    setDefaultUnitSystem: s.setDefaultUnitSystem,
+    defaultBaseUnit: s.defaultBaseUnit,
+    setDefaultBaseUnit: s.setDefaultBaseUnit,
+  }))
+  const [defaultUnitSystem, setDefaultUnitSystem] =
+    useState(ogDefaultUnitSystem)
+  const [defaultBaseUnit, setDefaultBaseUnit] = useState(ogDefaultBaseUnit)
+
+  function handleNextClick() {
+    saveDefaultUnitSystem(defaultUnitSystem)
+    saveDefaultBaseUnit(defaultBaseUnit)
+    next()
+  }
+
+  return (
+    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
+      <div className="max-w-3xl bg-white p-8 rounded">
+        <h1 className="text-2xl font-bold">Set your units</h1>
+        <SettingsSection
+          title="Unit System"
+          description="Which unit system to use by default"
+        >
+          <Toggle
+            offLabel="Imperial"
+            onLabel="Metric"
+            name="settings-units"
+            checked={defaultUnitSystem === 'metric'}
+            onChange={(e) =>
+              setDefaultUnitSystem(e.target.checked ? 'metric' : 'imperial')
+            }
+          />
+        </SettingsSection>
+        <SettingsSection
+          title="Base Unit"
+          description="Which base unit to use in dimensions by default"
+        >
+          <select
+            id="base-unit"
+            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
+            value={defaultBaseUnit}
+            onChange={(e) => setDefaultBaseUnit(e.target.value)}
+          >
+            {baseUnits[defaultUnitSystem].map((unit) => (
+              <option key={unit} value={unit}>
+                {unit}
+              </option>
+            ))}
+          </select>
+        </SettingsSection>
+        <div className="flex justify-between mt-6">
+          <ActionButton
+            onClick={dismiss}
+            icon={{
+              icon: faXmark,
+              bgClassName: 'bg-destroy-80',
+              iconClassName:
+                'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+            }}
+            className="hover:border-destroy-40"
+          >
+            Dismiss
+          </ActionButton>
+          <ActionButton onClick={handleNextClick} icon={{ icon: faArrowRight }}>
+            Next: Camera
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Units

src/routes/Onboarding/index.tsx

@@ -0,0 +1,66 @@
+import { useHotkeys } from 'react-hotkeys-hook'
+import { Outlet, useNavigate } from 'react-router-dom'
+import { useStore } from '../../useStore'
+import { App } from '../../App'
+
+import Introduction from './Introduction'
+import Units from './Units'
+import Camera from './Camera'
+import Sketching from './Sketching'
+import { useCallback } from 'react'
+
+export const onboardingRoutes = [
+  {
+    path: '',
+    element: <Introduction />,
+  },
+  {
+    path: 'units',
+    element: <Units />,
+  },
+  {
+    path: 'camera',
+    element: <Camera />,
+  },
+  {
+    path: 'sketching',
+    element: <Sketching />,
+  },
+]
+
+export function useNextClick(newStatus: string) {
+  const { setOnboardingStatus } = useStore((s) => ({
+    setOnboardingStatus: s.setOnboardingStatus,
+  }))
+  const navigate = useNavigate()
+
+  return useCallback(() => {
+    setOnboardingStatus(newStatus)
+    navigate('/onboarding/' + newStatus)
+  }, [newStatus, setOnboardingStatus, navigate])
+}
+
+export function useDismiss() {
+  const { setOnboardingStatus } = useStore((s) => ({
+    setOnboardingStatus: s.setOnboardingStatus,
+  }))
+  const navigate = useNavigate()
+
+  return useCallback(() => {
+    setOnboardingStatus('dismissed')
+    navigate('/')
+  }, [setOnboardingStatus, navigate])
+}
+
+const Onboarding = () => {
+  useHotkeys('esc', useDismiss)
+
+  return (
+    <>
+      <Outlet />
+      <App />
+    </>
+  )
+}
+
+export default Onboarding

src/routes/Settings.tsx

@@ -1,4 +1,9 @@
-import { faCheck, faFolder, faXmark } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowRotateBack,
+  faCheck,
+  faFolder,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../components/ActionButton'
 import { AppHeader } from '../components/AppHeader'
 import { open } from '@tauri-apps/api/dialog'
@@ -6,8 +11,10 @@ import { baseUnits, useStore } from '../useStore'
 import { useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { Toggle } from '../components/Toggle/Toggle'
+import { useNavigate } from 'react-router-dom'
 
 export const Settings = () => {
+  const navigate = useNavigate()
   const {
     defaultDir: ogDefaultDir,
     setDefaultDir: saveDefaultDir,
@@ -19,6 +26,8 @@ export const Settings = () => {
     setDefaultBaseUnit: saveDefaultBaseUnit,
     saveDebugPanel,
     originalDebugPanel,
+    onboardingStatus: ogOnboardingStatus,
+    setOnboardingStatus: saveOnboardingStatus,
   } = useStore((s) => ({
     defaultDir: s.defaultDir,
     setDefaultDir: s.setDefaultDir,
@@ -30,6 +39,8 @@ export const Settings = () => {
     setDefaultBaseUnit: s.setDefaultBaseUnit,
     saveDebugPanel: s.setDebugPanel,
     originalDebugPanel: s.debugPanel,
+    onboardingStatus: s.onboardingStatus,
+    setOnboardingStatus: s.setOnboardingStatus,
   }))
   const [defaultDir, setDefaultDir] = useState(ogDefaultDir)
   const [defaultProjectName, setDefaultProjectName] =
@@ -38,6 +49,7 @@ export const Settings = () => {
     useState(ogDefaultUnitSystem)
   const [defaultBaseUnit, setDefaultBaseUnit] = useState(ogDefaultBaseUnit)
   const [debugPanel, setDebugPanel] = useState(originalDebugPanel)
+  const [onboardingStatus, setOnboardingStatus] = useState(ogOnboardingStatus)
 
   async function handleDirectorySelection() {
     const newDirectory = await open({
@@ -57,6 +69,7 @@ export const Settings = () => {
     saveDefaultUnitSystem(defaultUnitSystem)
     saveDefaultBaseUnit(defaultBaseUnit)
     saveDebugPanel(debugPanel)
+    saveOnboardingStatus(onboardingStatus)
     toast.success('Settings saved!')
   }
 
@@ -163,6 +176,20 @@ export const Settings = () => {
             onChange={(e) => setDebugPanel(e.target.checked)}
           />
         </SettingsSection>
+        <SettingsSection
+          title="Onboarding"
+          description="Replay the onboarding process"
+        >
+          <ActionButton
+            onClick={() => {
+              saveOnboardingStatus('')
+              navigate('/')
+            }}
+            icon={{ icon: faArrowRotateBack }}
+          >
+            Replay Onboarding
+          </ActionButton>
+        </SettingsSection>
         <ActionButton
           className="hover:border-succeed-50"
           onClick={handleSaveClick}
@@ -186,7 +213,7 @@ interface SettingsSectionProps extends React.PropsWithChildren {
   description?: string
 }
 
-function SettingsSection({
+export function SettingsSection({
   title,
   description,
   children,

src/useStore.ts

@@ -165,6 +165,8 @@ export interface StoreState {
   setDefaultBaseUnit: (defaultBaseUnit: string) => void
   showHomeMenu: boolean
   setHomeShowMenu: (showMenu: boolean) => void
+  onboardingStatus: string
+  setOnboardingStatus: (status: string) => void
   homeMenuItems: {
     name: string
     path: string
@@ -329,6 +331,8 @@ export const useStore = create<StoreState>()(
       setDefaultUnitSystem: (defaultUnitSystem) => set({ defaultUnitSystem }),
       defaultBaseUnit: 'in',
       setDefaultBaseUnit: (defaultBaseUnit) => set({ defaultBaseUnit }),
+      onboardingStatus: 'new',
+      setOnboardingStatus: (onboardingStatus) => set({ onboardingStatus }),
       showHomeMenu: true,
       setHomeShowMenu: (showHomeMenu) => set({ showHomeMenu }),
       homeMenuItems: [],
@@ -349,7 +353,8 @@ export const useStore = create<StoreState>()(
             'defaultUnitSystem',
             'defaultBaseUnit',
             'token',
-            'debugPanel'
+            'debugPanel',
+            'onboardingStatus',
           ].includes(key))
         ),
     }

yarn.lock

@@ -1822,6 +1822,25 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-hook/latest@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
+  integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
+
+"@react-hook/passive-layout-effect@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
+  integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
+
+"@react-hook/resize-observer@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
+  integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+    "@react-hook/latest" "^1.0.2"
+    "@react-hook/passive-layout-effect" "^1.2.0"
+
 "@remix-run/router@1.7.2":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.2.tgz#cba1cf0a04bc04cb66027c51fa600e9cbc388bc8"
@@ -5855,6 +5874,11 @@ react-hot-toast@^2.4.1:
   dependencies:
     goober "^2.1.10"
 
+react-hotkeys-hook@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz#1f7a7a1c9c21d4fa3280bf340fcca8fd77d81994"
+  integrity sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"