Update context menu tutorial

exoRift · Sep 7, 2023 · 82f21f5 · 82f21f5
1 parent 45fa84c
commit 82f21f5
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/src/stories/ContextMixin.stories.tsx b/src/stories/ContextMixin.stories.tsx
@@ -53,7 +53,7 @@ export const Playground: StoryFn<PlaygroundArgs> = (args) => {
   }, [args.STORYBOOK_BACKGROUND])
 
   return (
-    <div>
+    <div data-debug={args.debug}>
       <FluentContextMixin {...args} />
 
       <div className='story anchors'>

diff --git a/src/stories/styles/ContextMixin.css b/src/stories/styles/ContextMixin.css
@@ -16,13 +16,13 @@
 }
 
 @supports selector(:has(div)) {
-  *[debug='true'] .fluent.menu .menuoption:has(~ .menuoption.hovering) .icon { /* Above */
+  *[data-debug='true'] .fluent.menu .menuoption:has(~ .menuoption.hovering) .icon { /* Above */
     background: red;
   }
-  *[debug='true'] .fluent.menu .menuoption.hovering .icon {
+  *[data-debug='true'] .fluent.menu .menuoption.hovering .icon {
     background: blue;
   }
-  *[debug='true'] .fluent.menu .menuoption.hovering ~ .menuoption .icon { /* Below */
+  *[data-debug='true'] .fluent.menu .menuoption.hovering ~ .menuoption .icon { /* Below */
     background: green;
   }
 }
diff --git a/src/stories/styles/Tutorials.css b/src/stories/styles/Tutorials.css
@@ -29,7 +29,7 @@
   animation: hide 1s ease-out 1 normal forwards;
   z-index: 2;
 }
-.demonstration #instructions .instruction[data-active='true'] {
+.demonstration #instructions .instruction[data-active=true] {
   display: block;
   animation: reveal 1s ease-out 1 normal forwards;
 }

diff --git a/src/stories/tutorials/Context.tsx b/src/stories/tutorials/Context.tsx
@@ -1,9 +1,9 @@
-import {
-  React,
+import React, {
   useEffect,
-  useState,
-  useRef
+  useRef,
+  useReducer
 } from 'react'
+import { type StoryFn } from '@storybook/react'
 import {
   linkTo
 } from '@storybook/addon-links'
@@ -14,48 +14,56 @@ import {
 
 import deviceToolbar from '../assets/device_toolbar.webp'
 
-function advanceStep (step, setStep) {
+enum ContextStep {
+  LAUNCH,
+  HOVER,
+  TRIGGER
+}
+
+function stepReducer (state: ContextStep): ContextStep {
   if (document.getElementById('fluentmenu')) {
     const list = document.getElementById('instructions')
 
-    list.children.item(step).setAttribute('active', 'false')
-    list.children.item(step + 1).setAttribute('active', 'true')
-
-    setStep(step + 1)
+    list?.children?.item(state)?.setAttribute('data-active', 'false')
+    list?.children?.item(state + 1)?.setAttribute('data-active', 'true')
   }
+
+  return state + 1
 }
 
-function displayCopied () {
-  const display = document.getElementById('copied')
+function displayCopied (): void {
+  const display = document.getElementById('copied') as HTMLDivElement
 
-  display.textContent = window.getSelection().toString()
+  display.textContent = window.getSelection()?.toString() ?? null
 }
 
-export const Context = () => {
-  const menuRef = useRef(null)
-  const [step, setStep] = useState(0)
+export const Context: StoryFn = () => {
+  const menuRef = useRef<FluentContextMixin>(null)
+  const [step, advanceStep] = useReducer(stepReducer, 0)
 
   useEffect(() => {
-    function launchStep (e) {
-      if (menuRef.current.state.holdingTag) {
+    const menu = menuRef.current!
+
+    function launchStep (): void {
+      if (menu.state.holdingTag) {
         document.removeEventListener('contextmenu', launchStep)
 
-        advanceStep(step, setStep)
+        advanceStep()
       }
     }
 
-    function hoverStep () {
-      if (menuRef.current.hoveringIndex) {
+    function hoverStep (): void {
+      if (menu.hoveringIndex) {
         document.removeEventListener('touchmove', hoverStep)
 
-        advanceStep(step, setStep)
+        advanceStep()
       }
     }
 
-    function triggerStep (e) {
+    function triggerStep (): void {
       document.removeEventListener('touchend', triggerStep)
 
-      advanceStep(step, setStep)
+      advanceStep()
     }
 
     document.addEventListener('copy', displayCopied)
@@ -91,7 +99,7 @@ export const Context = () => {
         <img src={deviceToolbar} alt='device toolbar' />
 
         <h5>
-          If you're on PC, try pressing <strong>Ctrl+Shift+I</strong> and clicking the <i>Device Toolbar</i> button.
+          If you&apos;re on PC, try pressing <strong>Ctrl+Shift+I</strong> and clicking the <i>Device Toolbar</i> button.
         </h5>
       </div>
 
@@ -103,13 +111,13 @@ export const Context = () => {
 
           <img
             className='demobanner'
-            src={`https://picsum.photos/${parseInt(window.innerWidth / 2)}/${parseInt(window.innerHeight / 3)}`}
+            src={`https://picsum.photos/${Math.floor(window.innerWidth / 2)}/${Math.floor(window.innerHeight / 3)}`}
             alt='random portrait'
           />
         </div>
 
         <div id='instructions'>
-          <div className='instruction' active={String(!step)}>
+          <div className='instruction' data-active={String(!step)}>
             <h3>Try opening a context menu!</h3>
               <p>
                 Hold down on an image or link
@@ -149,7 +157,7 @@ export const Context = () => {
           </div>
 
           <div className='progress-bar'>
-            <div className='progress' style={{ height: (step * 100 / 3) + '%' }} />
+            <div className='progress' style={{ height: (step * 100 / 3).toString() + '%' }} />
           </div>
         </div>
       </div>

diff --git a/src/stories/tutorials/Selection.tsx b/src/stories/tutorials/Selection.tsx
@@ -22,7 +22,7 @@ enum SelectionStep {
   DISMISS
 }
 
-function stepReducer (state: SelectionStep): number {
+function stepReducer (state: SelectionStep): SelectionStep {
   if (document.getElementById('fluentselectionmanipulator')) {
     const list = document.getElementById('instructions')