creevey 0.10.0-beta.0 → 0.10.0-beta.10

package/src/client/addon/withCreevey.ts

@@ -1,10 +1,18 @@
-import * as Events from '@storybook/core-events';
 import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
-import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
+import {
+  CaptureOptions,
+  CreeveyStoryParams,
+  isObject,
+  noop,
+  StoriesRaw,
+  StorybookEvents,
+  StorybookGlobals,
+} from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
+import isEqual from 'lodash/isEqual.js';
 
 declare global {
   interface Window {
@@ -62,12 +70,12 @@ function catchRenderError(channel: Channel): Promise<void> & { cancel: () => voi
     rejectCallback(exception);
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_ERRORED, errorHandler);
-    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+    channel.off(StorybookEvents.STORY_ERRORED, errorHandler);
+    channel.off(StorybookEvents.STORY_THREW_EXCEPTION, errorHandler);
   }
 
-  channel.once(Events.STORY_ERRORED, errorHandler);
-  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+  channel.once(StorybookEvents.STORY_ERRORED, errorHandler);
+  channel.once(StorybookEvents.STORY_THREW_EXCEPTION, exceptionHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -79,10 +87,10 @@ function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () =>
     resolveCallback();
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_RENDERED, renderHandler);
+    channel.off(StorybookEvents.STORY_RENDERED, renderHandler);
   }
 
-  channel.once(Events.STORY_RENDERED, renderHandler);
+  channel.once(StorybookEvents.STORY_RENDERED, renderHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -132,6 +140,7 @@ let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
 let setStoriesCounter = 0;
+let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
   const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
@@ -166,7 +175,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     return stories;
   }
 
-  // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+  // TODO Use StorybookEvents.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
   // TODO Check other statuses and statuses with play function
   async function selectStory(
     storyId: string,
@@ -188,8 +197,8 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
 
     setTimeout(() => {
-      if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
-      else channel.emit(Events.SET_CURRENT_STORY, { storyId });
+      if (storyId == currentStory) channel.emit(StorybookEvents.FORCE_REMOUNT, { storyId });
+      else channel.emit(StorybookEvents.SET_CURRENT_STORY, { storyId });
     }, 0);
 
     try {
@@ -218,8 +227,11 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
-    addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
+    addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
   function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/ResultsPage.tsx

@@ -1,11 +1,11 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
 
 interface ResultsPageProps {
@@ -77,10 +77,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +113,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/web/CreeveyApp.tsx

@@ -17,7 +17,7 @@ import {
   CreeveyViewFilter,
   getFailedTests,
 } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
+import { CreeveyContext, FocusableItem } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
 import { SideBar } from './CreeveyView/SideBar/index.js';
 import { ResultsPage } from '../shared/components/ResultsPage.js';
@@ -59,8 +59,9 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const failedTests = useMemo(() => getFailedTests(tests), [tests]);
 
   const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
-  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const result = useMemo(() => openedTest?.results?.[retry - 1], [openedTest, retry]);
+  const [imageName, setImageName] = useState(Object.keys(result?.images ?? {})[0] ?? '');
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
   const canApprove = useMemo(
     () =>
       Boolean(
@@ -94,6 +95,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     (test: CreeveyTest): void => {
       const testPath = getTestPath(test);
       setSearchParams(testPath);
+      setSidebarFocusedItem(testPath);
       updateTests((draft) => {
         openSuite(draft, testPath, true);
         openTest(testPath);
@@ -103,11 +105,24 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   );
 
   const handleGoToNextFailedTest = useCallback(() => {
-    if (failedTests.length <= 1) return;
+    if (failedTests.length == 0) return;
     const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
-    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
-    handleOpenTest(nextFailedTest);
-  }, [failedTests, handleOpenTest, openedTest?.id]);
+    const failedImages = Object.entries(result?.images ?? {})
+      .filter(([name, image]) =>
+        // TODO Move to helpers, it duplicates in a few places
+        Boolean(image?.error != null && openedTest?.approved?.[name] != retry - 1 && result?.status != 'success'),
+      )
+      .map(([name]) => name);
+    if (
+      failedImages.length > 1 &&
+      (failedTests.length == 1 || failedImages.indexOf(imageName) < failedImages.length - 1)
+    ) {
+      setImageName((name) => failedImages[failedImages.indexOf(name) + 1] ?? failedImages[0]);
+    } else {
+      const nextFailedTest = failedTests[currentTest + 1] ?? failedTests[0];
+      handleOpenTest(nextFailedTest);
+    }
+  }, [failedTests, handleOpenTest, openedTest, retry, result, imageName]);
 
   const handleImageApproveNew = useCallback((): void => {
     const id = openedTest?.id;
@@ -189,12 +204,15 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageNext: canApprove ? handleGoToNextFailedTest : undefined,
         onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
         onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
         onSuiteToggle: handleSuiteToggle,
+        sidebarFocusedItem,
+        setSidebarFocusedItem,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -1,26 +1,35 @@
 import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
   onStop: () => void;
+  onImageNext?: () => void;
   onImageApprove?: () => void;
   onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
 }
 
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
 });
 
 export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyView/SideBar/Search.tsx

@@ -1,7 +1,7 @@
-import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {
   onChange: (arg: string) => void;
@@ -100,7 +100,7 @@ const FilterForm = withTheme(
 );
 
 export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
-  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { setSidebarFocusedItem } = useCreeveyContext();
   const [focussed, onSetFocussed] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 

package/src/client/web/CreeveyView/SideBar/SideBar.tsx

@@ -62,6 +62,7 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
+  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });

package/src/client/web/CreeveyView/SideBar/SideBarFooter.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { Button } from '@storybook/components';
 import { ChevronRightIcon } from '@storybook/icons';
@@ -21,15 +21,46 @@ const Container = styled.div({
 });
 
 export function SideBarFooter(): JSX.Element {
-  const { onApproveAll, onImageApprove } = useCreeveyContext();
+  const { onApproveAll, onImageApprove, onImageNext } = useCreeveyContext();
+  const [isAlt, setIsAlt] = useState(false);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(true);
+    }
+  }, []);
+  const handleKeyUp = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+    document.addEventListener('keyup', handleKeyUp, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+      document.removeEventListener('keyup', handleKeyUp, false);
+    };
+  }, [handleKeyDown, handleKeyUp]);
 
   return (
     <Sticky>
       <Container>
-        <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
-          Approve
-          <ChevronRightIcon />
-        </Button>
+        {isAlt ? (
+          <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
+            Next
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
+            Approve
+            <ChevronRightIcon />
+          </Button>
+        )}
         <Button variant="outline" size="medium" onClick={onApproveAll}>
           Approve all
         </Button>

package/src/client/web/CreeveyView/SideBar/SuiteLink.tsx

@@ -1,11 +1,10 @@
-import React, { JSX, useRef, useContext, useEffect, useMemo } from 'react';
+import React, { JSX, useRef, useEffect, useMemo } from 'react';
 import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveySuite, isTest } from '../../../../types.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 export interface SuiteLinkProps {
   title: string;
@@ -79,8 +78,7 @@ export const SuiteTitle = styled.span({
 });
 
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
-  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 

package/src/client/web/CreeveyView/SideBar/TestLink.tsx

@@ -1,9 +1,8 @@
 import React, { JSX, useEffect, useCallback, useContext, useMemo, useRef } from 'react';
 import { CreeveyTest } from '../../../../types.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 import { SideBarContext } from './SideBar.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
 import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
@@ -20,9 +19,8 @@ const TestContainer = styled(SuiteContainer)({
 });
 
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
-  const { onSuiteToggle } = useContext(CreeveyContext);
+  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const emptyResults = (test.results?.length ?? 0) == 0;

package/src/client/web/KeyboardEventsContext.tsx

@@ -1,20 +1,7 @@
-import React, { JSX, useState, useEffect, useCallback, useContext, PropsWithChildren } from 'react';
-import { CreeveySuite, isTest, noop } from '../../types.js';
+import React, { JSX, useEffect, useCallback, PropsWithChildren } from 'react';
+import { CreeveySuite, isTest } from '../../types.js';
 import { CreeveyViewFilter, filterTests, flattenSuite, getSuiteByPath, getTestPath } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
-
-export type SuitePath = string[];
-export type FocusableItem = null | SuitePath;
-
-export interface KeyboardEventsContextType {
-  sidebarFocusedItem: FocusableItem;
-  setSidebarFocusedItem: (item: FocusableItem) => void;
-}
-
-export const KeyboardEventsContext = React.createContext<KeyboardEventsContextType>({
-  sidebarFocusedItem: [],
-  setSidebarFocusedItem: noop,
-});
+import { useCreeveyContext } from './CreeveyContext.js';
 
 export const KeyboardEvents = ({
   children,
@@ -24,9 +11,7 @@ export const KeyboardEvents = ({
   rootSuite: CreeveySuite;
   filter: CreeveyViewFilter;
 }>): JSX.Element => {
-  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
-
-  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
 
   const suiteList = flattenSuite(filterTests(rootSuite, filter));
 
@@ -45,63 +30,70 @@ export const KeyboardEvents = ({
     (e: KeyboardEvent) => {
       if (sidebarFocusedItem === null) return;
 
-      if (e.code === 'Enter') {
-        if (sidebarFocusedItem.length === 0) return;
-
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        if (!isTest(focusedSuite)) {
-          e.preventDefault();
-          onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+      switch (e.code) {
+        case 'Enter': {
+          if (sidebarFocusedItem.length === 0) return;
+
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          if (!isTest(focusedSuite)) {
+            e.preventDefault();
+            onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+          }
+          if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+            e.preventDefault();
+          }
+          return;
         }
-        if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+        case 'Space': {
           e.preventDefault();
+          // TODO handle keys in one place
+          if (e.altKey) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+          onSuiteToggle(path, !focusedSuite.checked);
+          return;
         }
-        return;
-      }
-      if (e.code === 'Space') {
-        e.preventDefault();
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
-        onSuiteToggle(path, !focusedSuite.checked);
-      }
-      if (e.code === 'ArrowDown') {
-        const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
-        if (currentIndex === suiteList.length - 1) return;
-        const nextSuite = suiteList[currentIndex + 1];
-        const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
-        setSidebarFocusedItem(nextPath);
-      }
-      if (e.code === 'ArrowUp') {
-        const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
-        const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
-        const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
-        setSidebarFocusedItem(nextPath);
-      }
-
-      if (e.code === 'ArrowRight') {
-        if (sidebarFocusedItem.length === 0) return;
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-
-        if (!focusedSuite || isTest(focusedSuite)) return;
-        onSuiteOpen(focusedSuite.path, true);
-      }
-
-      if (e.code === 'ArrowLeft') {
-        if (sidebarFocusedItem.length === 0) return;
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        if (!isTest(focusedSuite) && focusedSuite.opened) {
-          onSuiteOpen(focusedSuite.path, false);
+        case 'ArrowDown': {
+          const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
+          if (currentIndex === suiteList.length - 1) return;
+          const nextSuite = suiteList[currentIndex + 1];
+          const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
+          setSidebarFocusedItem(nextPath);
+          return;
+        }
+        case 'ArrowUp': {
+          const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
+          const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
+          const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
+          setSidebarFocusedItem(nextPath);
           return;
         }
+        case 'ArrowRight': {
+          if (sidebarFocusedItem.length === 0) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
 
-        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
-        setSidebarFocusedItem(path.slice(0, -1));
+          if (!focusedSuite || isTest(focusedSuite)) return;
+          onSuiteOpen(focusedSuite.path, true);
+          return;
+        }
+        case 'ArrowLeft': {
+          if (sidebarFocusedItem.length === 0) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          if (!isTest(focusedSuite) && focusedSuite.opened) {
+            onSuiteOpen(focusedSuite.path, false);
+            return;
+          }
+
+          const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+          setSidebarFocusedItem(path.slice(0, -1));
+          return;
+        }
       }
     },
-    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem],
+    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem, setSidebarFocusedItem],
   );
 
   useEffect(() => {
@@ -112,9 +104,5 @@ export const KeyboardEvents = ({
     };
   }, [handleKeyDown]);
 
-  return (
-    <KeyboardEventsContext.Provider value={{ sidebarFocusedItem, setSidebarFocusedItem }}>
-      {children}
-    </KeyboardEventsContext.Provider>
-  );
+  return <>{children}</>;
 };

package/src/creevey.ts

@@ -5,14 +5,14 @@ import { Options } from './types.js';
 import { emitWorkerMessage } from './server/messages.js';
 import { isShuttingDown, shutdownWorkers } from './server/utils.js';
 import Logger from 'loglevel';
-import { logger } from './server/logger.js';
+import { logger, setRootName } from './server/logger.js';
 
 function shutdownOnException(reason: unknown): void {
   if (isShuttingDown.current) return;
 
   const error = reason instanceof Error ? (reason.stack ?? reason.message) : (reason as string);
 
-  logger.error(error);
+  logger().error(error);
 
   process.exitCode = -1;
   if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { subtype: 'unknown', error } });
@@ -21,7 +21,11 @@ function shutdownOnException(reason: unknown): void {
 
 process.on('uncaughtException', shutdownOnException);
 process.on('unhandledRejection', shutdownOnException);
+// TODO SIGINT Stuck with selenium
 process.on('SIGINT', () => {
+  if (isShuttingDown.current) {
+    process.exit(-1);
+  }
   isShuttingDown.current = true;
 });
 
@@ -32,9 +36,12 @@ const argv = minimist<Options>(process.argv.slice(2), {
   alias: { port: 'p', config: 'c', debug: 'd', update: 'u' },
 });
 
+if ('port' in argv && !isNaN(argv.port)) argv.port = Number(argv.port);
+if ('browser' in argv && argv.browser) setRootName(argv.browser);
+
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 if (cluster.isPrimary && argv.reporter) {
-  logger.warn(`--reporter option has been removed please describe reporter in config file:
+  logger().warn(`--reporter option has been removed please describe reporter in config file:
     import { reporters } from 'mocha';
 
     const config = {
@@ -51,13 +58,13 @@ if (cluster.isPrimary && argv.reporter) {
 // @ts-expect-error: define log level for storybook
 global.LOGLEVEL = argv.trace ? 'trace' : argv.debug ? 'debug' : 'warn';
 if (argv.trace) {
-  logger.setDefaultLevel(Logger.levels.TRACE);
+  logger().setDefaultLevel(Logger.levels.TRACE);
   Logger.setDefaultLevel(Logger.levels.TRACE);
 } else if (argv.debug) {
-  logger.setDefaultLevel(Logger.levels.DEBUG);
+  logger().setDefaultLevel(Logger.levels.DEBUG);
   Logger.setDefaultLevel(Logger.levels.DEBUG);
 } else {
-  logger.setDefaultLevel(Logger.levels.INFO);
+  logger().setDefaultLevel(Logger.levels.INFO);
   Logger.setDefaultLevel(Logger.levels.INFO);
 }
 

package/src/index.ts

@@ -1,6 +1,4 @@
 export * from './types.js';
 export { loadStories as browserStoriesProvider } from './server/providers/browser.js';
 export { loadStories as hybridStoriesProvider } from './server/providers/hybrid.js';
-export { PlaywrightWebdriver } from './server/playwright/webdriver.js';
-export { SeleniumWebdriver } from './server/selenium/webdriver.js';
 export * from './server/testsFiles/parser.js';

package/src/playwright.ts

@@ -0,0 +1 @@
+export { PlaywrightWebdriver } from './server/playwright/webdriver.js';