first commit

services/web/frontend/stories/editor-left-menu/actions-menu.stories.tsx

@@ -0,0 +1,57 @@
+import ActionsMenu from '../../js/features/editor-left-menu/components/actions-menu'
+import { ScopeDecorator } from '../decorators/scope'
+import { mockCompile, mockCompileError } from '../fixtures/compile'
+import { document, mockDocument } from '../fixtures/document'
+import useFetchMock from '../hooks/use-fetch-mock'
+import { useScope } from '../hooks/use-scope'
+
+export default {
+  title: 'Editor / Left Menu / Actions Menu',
+  component: ActionsMenu,
+  decorators: [
+    (Story: any) => ScopeDecorator(Story, { mockCompileOnLoad: false }),
+  ],
+}
+
+export const NotCompiled = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+
+  useFetchMock(fetchMock => {
+    mockCompileError(fetchMock, 'failure')
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <ActionsMenu />
+    </div>
+  )
+}
+
+export const CompileSuccess = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+
+  useScope({
+    editor: {
+      sharejs_doc: mockDocument(document.tex),
+    },
+  })
+
+  useFetchMock(fetchMock => {
+    mockCompile(fetchMock)
+    fetchMock.get('express:/project/:projectId/wordcount', {
+      texcount: {
+        encode: 'ascii',
+        textWords: 10,
+        headers: 11,
+        mathInline: 12,
+        mathDisplay: 13,
+      },
+    })
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <ActionsMenu />
+    </div>
+  )
+}

services/web/frontend/stories/editor-left-menu/download-menu.stories.tsx

@@ -0,0 +1,44 @@
+import DownloadMenu from '../../js/features/editor-left-menu/components/download-menu'
+import { ScopeDecorator } from '../decorators/scope'
+import { mockCompile, mockCompileError } from '../fixtures/compile'
+import { document, mockDocument } from '../fixtures/document'
+import useFetchMock from '../hooks/use-fetch-mock'
+import { useScope } from '../hooks/use-scope'
+
+export default {
+  title: 'Editor / Left Menu / Download Menu',
+  component: DownloadMenu,
+  decorators: [
+    (Story: any) => ScopeDecorator(Story, { mockCompileOnLoad: false }),
+  ],
+}
+
+export const NotCompiled = () => {
+  useFetchMock(fetchMock => {
+    mockCompileError(fetchMock, 'failure')
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <DownloadMenu />
+    </div>
+  )
+}
+
+export const CompileSuccess = () => {
+  useScope({
+    editor: {
+      sharejs_doc: mockDocument(document.tex),
+    },
+  })
+
+  useFetchMock(fetchMock => {
+    mockCompile(fetchMock)
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <DownloadMenu />
+    </div>
+  )
+}

services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx

@@ -0,0 +1,33 @@
+import HelpMenu from '../../js/features/editor-left-menu/components/help-menu'
+import { ScopeDecorator } from '../decorators/scope'
+
+export default {
+  title: 'Editor / Left Menu / Help Menu',
+  component: HelpMenu,
+  decorators: [ScopeDecorator],
+}
+
+export const ShowSupport = () => {
+  window.metaAttributesCache.set('ol-showSupport', true)
+  window.metaAttributesCache.set('ol-user', {
+    email: 'sherlock@holmes.co.uk',
+    first_name: 'Sherlock',
+    last_name: 'Holmes',
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <HelpMenu />
+    </div>
+  )
+}
+
+export const HideSupport = () => {
+  window.metaAttributesCache.set('ol-showSupport', false)
+
+  return (
+    <div id="left-menu" className="shown">
+      <HelpMenu />
+    </div>
+  )
+}

services/web/frontend/stories/editor-left-menu/sync-menu.stories.tsx

@@ -0,0 +1,37 @@
+import SyncMenu from '../../js/features/editor-left-menu/components/sync-menu'
+import { ScopeDecorator } from '../decorators/scope'
+import { useScope } from '../hooks/use-scope'
+
+export default {
+  title: 'Editor / Left Menu / Sync Menu',
+  component: SyncMenu,
+  decorators: [ScopeDecorator],
+}
+
+export const WriteAccess = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+  window.metaAttributesCache.set('ol-gitBridgeEnabled', true)
+  useScope({
+    permissionsLevel: 'owner',
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <SyncMenu />
+    </div>
+  )
+}
+
+export const ReadOnlyAccess = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+  window.metaAttributesCache.set('ol-gitBridgeEnabled', true)
+  useScope({
+    permissionsLevel: 'readOnly',
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <SyncMenu />
+    </div>
+  )
+}