first commit

services/web/frontend/stories/hooks/use-fetch-mock.tsx

@@ -0,0 +1,19 @@
+import { useLayoutEffect } from 'react'
+import fetchMock from 'fetch-mock'
+
+/**
+ * Run callback to mock fetch routes, call removeRoutes() and unmockGlobal() when unmounted
+ */
+export default function useFetchMock(
+  callback: (value: typeof fetchMock) => void
+) {
+  fetchMock.mockGlobal()
+
+  useLayoutEffect(() => {
+    callback(fetchMock)
+    return () => {
+      fetchMock.removeRoutes()
+      fetchMock.unmockGlobal()
+    }
+  }, [callback])
+}

services/web/frontend/stories/hooks/use-meta.tsx

@@ -0,0 +1,10 @@
+import { PartialMeta } from '@/utils/meta'
+
+/**
+ * Set values on window.metaAttributesCache, for use in Storybook stories
+ */
+export const useMeta = (meta: PartialMeta) => {
+  for (const [key, value] of Object.entries(meta)) {
+    window.metaAttributesCache.set(key as keyof PartialMeta, value)
+  }
+}

services/web/frontend/stories/hooks/use-scope.tsx

@@ -0,0 +1,30 @@
+import { merge } from 'lodash'
+import { useLayoutEffect, useRef } from 'react'
+
+/**
+ * Merge properties with the scope object, for use in Storybook stories
+ */
+export const useScope = (scope: Record<string, unknown>) => {
+  const scopeRef = useRef<typeof scope | null>(null)
+  if (scopeRef.current === null) {
+    scopeRef.current = scope
+  }
+
+  useLayoutEffect(() => {
+    if (scopeRef.current) {
+      for (const [path, value] of Object.entries(scopeRef.current)) {
+        let existingValue: typeof value | undefined
+        try {
+          existingValue = window.overleaf.unstable.store.get(path)
+        } catch {
+          // allowed not to exist
+        }
+        if (typeof existingValue === 'object' && typeof value === 'object') {
+          window.overleaf.unstable.store.set(path, merge(existingValue, value))
+        } else {
+          window.overleaf.unstable.store.set(path, value)
+        }
+      }
+    }
+  }, [])
+}