docs(webview/screens): add next Scanner component stories

.storybook/argsStore/constants.ts

@@ -1,4 +1,5 @@
 export enum ArgStoreKey {
   DashboardScreenComponent = 'DashboardScreenComponent',
   LoaderScreenComponent = 'LoaderScreenComponent',
+  ScannerScreenComponent = 'ScannerScreenComponent',
 }

src/stories/screens/DashboardPage.stories.tsx

@@ -8,8 +8,8 @@ import { Layout } from '../../Layout'
 import { Screen } from '../../constants'
 import { Core } from '../../core/types'
 import { DashboardScreenComponent, type DashboardScreenComponentProps } from '../../screens/Dashboard/Component'
-import { noop } from '../../utils/noop'
 import { waitFor } from '../../utils/waitFor'
+import { goToScreen } from './utils'
 
 const FAKE_DAEMON_LOGS: Core.Log[] = Array.from({ length: 100 }, () => ({
   date: faker.date.recent().toISOString(),
@@ -55,7 +55,7 @@ export const Default: Story = {
     })
 
     return (
-      <Layout onScreenChange={noop} activeScreen={Screen.Dashboard}>
+      <Layout onScreenChange={goToScreen} activeScreen={Screen.Dashboard}>
         <DashboardScreenComponent {...args} />
       </Layout>
     )

src/stories/screens/ScannerPage.stories.tsx

@@ -0,0 +1,100 @@
+import { Core } from '@core/types'
+import { faker } from '@faker-js/faker'
+import type { Meta, StoryObj } from '@storybook/react'
+import { noop } from '@utils/noop'
+import { argsStore } from '../../../.storybook/argsStore'
+import { ArgStoreKey } from '../../../.storybook/argsStore/constants'
+import { useArgsStoreArgs } from '../../../.storybook/argsStore/useArgsStoreArgs'
+import { Layout } from '../../Layout'
+import { Screen } from '../../constants'
+import { ScannerScreenComponent, type ScannerScreenComponentProps } from '../../screens/Scanner/Component'
+import { waitFor } from '../../utils/waitFor'
+import { FAKE_ROOT_CORE_PATHS, listPathsAtFakePath } from './fakers'
+import { goToScreen } from './utils'
+
+const fakePaths = (): Promise<Core.Path[]> => {
+  return Promise.resolve([])
+}
+
+const meta = {
+  title: 'Screens/Scanner',
+  component: ScannerScreenComponent,
+  parameters: {
+    actions: { disable: true },
+    controls: { disable: true },
+    layout: 'fullscreen',
+    type: 'screen',
+  },
+  tags: ['dev'],
+} satisfies Meta<ScannerScreenComponentProps>
+
+export default meta
+type Story = StoryObj<void>
+
+export const Default: Story = {
+  args: undefined,
+  play: async () => {
+    await waitFor(1000)
+
+    argsStore.updateArgs<ScannerScreenComponentProps>(ArgStoreKey.ScannerScreenComponent, {
+      fileExplorerRootPaths: FAKE_ROOT_CORE_PATHS,
+    })
+  },
+  render: () => {
+    const [args] = useArgsStoreArgs<ScannerScreenComponentProps>(ArgStoreKey.ScannerScreenComponent, {
+      canScan: false,
+      fileExplorerRootPaths: undefined,
+      onFileExporerChange: noop,
+      onFileExporerExpand: listPathsAtFakePath,
+      onScanStart: () => goToScreen(Screen.Scanner, 'scanning'),
+      onScanStop: noop,
+      scannerState: undefined,
+    })
+
+    return (
+      <Layout onScreenChange={goToScreen} activeScreen={Screen.Scanner}>
+        <ScannerScreenComponent {...args} />
+      </Layout>
+    )
+  },
+}
+
+export const Scanning: Story = {
+  args: undefined,
+  play: async () => {
+    while (true) {
+      argsStore.updateArgs<ScannerScreenComponentProps>(ArgStoreKey.ScannerScreenComponent, {
+        scannerState: {
+          currently_scanned_file_path: faker.system.filePath(),
+          module_status: Core.ModuleStatus.Running,
+        },
+      })
+
+      await waitFor(
+        faker.number.int({ min: 1, max: 100 }) <= 80
+          ? faker.number.int({ min: 0, max: 49 })
+          : faker.number.int({ min: 50, max: 150 }),
+      )
+    }
+  },
+  render: () => {
+    const [args] = useArgsStoreArgs<ScannerScreenComponentProps>(ArgStoreKey.ScannerScreenComponent, {
+      canScan: false,
+      fileExplorerRootPaths: undefined,
+      onFileExporerChange: noop,
+      onFileExporerExpand: fakePaths,
+      onScanStart: noop,
+      onScanStop: () => goToScreen(Screen.Scanner),
+      scannerState: {
+        currently_scanned_file_path: '/a/super/long/.../path/to/a/file.txt',
+        module_status: Core.ModuleStatus.Running,
+      },
+    })
+
+    return (
+      <Layout onScreenChange={goToScreen} activeScreen={Screen.Scanner}>
+        <ScannerScreenComponent {...args} />
+      </Layout>
+    )
+  },
+}

src/stories/screens/fakers.ts

@@ -0,0 +1,61 @@
+import { Core } from '@core/types'
+import { waitFor } from '@utils/waitFor'
+
+interface FakeCorePath extends Core.Path {
+  children?: FakeCorePath[]
+}
+
+export const FAKE_ROOT_CORE_PATHS: FakeCorePath[] = [
+  { kind: Core.FileKind.Directory, name: 'boot', path: '/boot', children: [] },
+  { kind: Core.FileKind.Directory, name: 'cdrom', path: '/cdrom', children: [] },
+  { kind: Core.FileKind.Directory, name: 'dev', path: '/dev', children: [] },
+  { kind: Core.FileKind.Directory, name: 'etc', path: '/etc', children: [] },
+  {
+    kind: Core.FileKind.Directory,
+    name: 'home',
+    path: '/home',
+    children: [
+      {
+        kind: Core.FileKind.Directory,
+        name: 'camille',
+        path: '/home/camille',
+        children: [
+          { kind: Core.FileKind.Directory, name: 'Desktop', path: '/home/camille/Desktop' },
+          { kind: Core.FileKind.Directory, name: 'Documents', path: '/home/camille/Documents' },
+        ],
+      },
+    ],
+  },
+  { kind: Core.FileKind.Directory, name: 'media', path: '/media', children: [] },
+  { kind: Core.FileKind.Directory, name: 'opt', path: '/opt', children: [] },
+  { kind: Core.FileKind.Directory, name: 'proc', path: '/proc', children: [] },
+  { kind: Core.FileKind.Directory, name: 'root', path: '/root', children: [] },
+  { kind: Core.FileKind.Directory, name: 'run', path: '/run', children: [] },
+  { kind: Core.FileKind.File, name: 'swap.img', path: '/swap.img' },
+  { kind: Core.FileKind.Directory, name: 'tmp', path: '/tmp', children: [] },
+  { kind: Core.FileKind.Directory, name: 'usr', path: '/usr', children: [] },
+  { kind: Core.FileKind.Directory, name: 'var', path: '/var', children: [] },
+]
+
+function getChildrenOfPath(path: string, paths: FakeCorePath[] = FAKE_ROOT_CORE_PATHS): Core.Path[] | undefined {
+  for (const node of paths) {
+    if (node.path === path) {
+      return node.children
+    }
+
+    if (node.children) {
+      const result = getChildrenOfPath(path, node.children)
+      if (result) {
+        return result
+      }
+    }
+  }
+
+  return undefined
+}
+
+export async function listPathsAtFakePath(path: string): Promise<Core.Path[]> {
+  await waitFor(100)
+
+  return getChildrenOfPath(path) ?? []
+}

src/stories/screens/utils.ts

@@ -0,0 +1,5 @@
+import type { Screen } from '../../constants'
+
+export function goToScreen(nextScreen: Screen, variant = 'default') {
+  window.parent.location.href = `${location.origin}/?path=/story/screens-${nextScreen.toLowerCase()}--${variant}`
+}