creevey 0.10.0-beta.8 → 0.10.0-rc.0

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

@@ -1,6 +1,6 @@
-import React, { JSX } from 'react';
-import { styled, withTheme } from '@storybook/theming';
-import { Button } from '@storybook/components';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
+import { styled, withTheme } from 'storybook/theming';
+import { Button } from 'storybook/internal/components';
 import { ChevronRightIcon } from '@storybook/icons';
 import { useCreeveyContext } from '../../CreeveyContext.js';
 
@@ -21,19 +21,52 @@ 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>
-        <Button variant="outline" size="medium" onClick={onApproveAll}>
-          Approve all
-        </Button>
-      </Container>
-    </Sticky>
+    <>
+      <Sticky>
+        <Container>
+          {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>
+        </Container>
+      </Sticky>
+    </>
   );
 }

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

@@ -1,7 +1,7 @@
 import React, { JSX, useContext, useState } from 'react';
-import { Button as NativeButton } from '@storybook/components';
+import { Button as NativeButton } from 'storybook/internal/components';
 import { StopIcon, PlayIcon } from '@storybook/icons';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { CreeveyContext } from '../../CreeveyContext.js';
 import { TestsStatus, TestsStatusProps } from './TestsStatus.js';
 import { TestStatus } from '../../../../types.js';
@@ -36,6 +36,7 @@ const Container = styled.div({
 const Header = styled.h2({
   fontWeight: 'normal',
   margin: 0,
+  padding: '2px 6px',
 });
 
 const Button = withTheme(
@@ -58,12 +59,23 @@ const Button = withTheme(
   })),
 );
 
+const UpdateModeDescription = withTheme(
+  styled.div(({ theme }) => ({
+    fontSize: '0.8em',
+    marginTop: '4px',
+    padding: '2px 6px',
+    color: theme.color.positive,
+    backgroundColor: `${theme.color.positive}20`,
+  })),
+);
+
 const MarginContainer = styled.div<{ left?: string; right?: string; top?: string; bottom?: string }>(
   ({ left, right, top, bottom }) => ({
     marginLeft: left ?? 0,
     marginRight: right ?? 0,
     marginTop: top ?? 0,
     marginBottom: bottom ?? 0,
+    padding: '2px 6px',
   }),
 );
 
@@ -92,7 +104,7 @@ export function SideBarHeader({
   onFilterChange,
   canStart,
 }: SideBarHeaderProps): JSX.Element {
-  const { isReport, isRunning } = useContext(CreeveyContext);
+  const { isReport, isRunning, isUpdateMode } = useContext(CreeveyContext);
   const [filterInput, setFilterInput] = useState('');
 
   const handleClickByStatus = (status: TestStatus): void => {
@@ -115,9 +127,12 @@ export function SideBarHeader({
       <Container>
         <div>
           <Header>colin.creevey</Header>
+          {isUpdateMode && (
+            <UpdateModeDescription>Review and approve screenshots from previous test runs</UpdateModeDescription>
+          )}
           <TestsStatus {...testsStatus} onClickByStatus={handleClickByStatus} />
         </div>
-        {isReport ? null : (
+        {isReport || isUpdateMode ? null : (
           <MarginContainer top="10px">
             {isRunning ? (
               <Button variant="outline" onClick={onStop}>
@@ -131,7 +146,7 @@ export function SideBarHeader({
           </MarginContainer>
         )}
       </Container>
-      <MarginContainer top="24px" bottom="24px">
+      <MarginContainer top="12px" bottom="12px">
         <Search onChange={handleInputFilterChange} value={filterInput} />
       </MarginContainer>
     </Sticky>

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 { 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, isUpdateMode } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -119,12 +117,14 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
   return (
     <Container focused={isSuiteFocused}>
       <CheckboxContainer>
-        <Checkbox
-          ref={checkboxRef}
-          checked={suite.skip ? false : suite.checked}
-          disabled={Boolean(suite.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            ref={checkboxRef}
+            checked={suite.skip ? false : suite.checked}
+            disabled={Boolean(suite.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
         <SuiteContainer padding={(suite.path.length - 1) * 8}>

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

@@ -1,13 +1,12 @@
 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';
-import { styled } from '@storybook/theming';
+import { styled } from 'storybook/theming';
 
 export interface TestLinkProps {
   title: string;
@@ -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, isUpdateMode } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const emptyResults = (test.results?.length ?? 0) == 0;
@@ -57,11 +55,13 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
       {/* NOTE Little hack to allow click on checkbox and don't trigger Button click */}
       {/* We can use other approach, but checkbox has vertical-align: top */}
       <CheckboxContainer>
-        <Checkbox
-          checked={test.skip ? false : test.checked}
-          disabled={Boolean(test.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            checked={test.skip ? false : test.checked}
+            disabled={Boolean(test.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
         <TestContainer padding={(testPath.length + 1) * 8}>

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

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
-import { Loader } from '@storybook/components';
+import { styled, withTheme, Theme } from 'storybook/theming';
+import { Loader } from 'storybook/internal/components';
 import { CrossIcon, CheckIcon, CircleHollowIcon, ThumbsUpIcon, AlertIcon, TimeIcon } from '@storybook/icons';
 import { TestStatus } from '../../../../types.js';
 

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

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
-import { IconButton } from '@storybook/components';
+import { IconButton } from 'storybook/internal/components';
 import { TimeIcon, CheckIcon, CrossIcon, ThumbsUpIcon } from '@storybook/icons';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 import { TestStatus } from '../../../../types.js';
 import { CreeveyTestsStatus } from '../../../shared/helpers.js';
 
@@ -15,6 +15,7 @@ const Container = styled.div({
   alignItems: 'center',
   fontSize: '14px',
   lineHeight: '22px',
+  padding: '2px 6px',
 });
 
 const IconContainer = styled.div<{ color?: string }>(({ color }) => ({

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

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { opacify } from 'polished';
 
 const Container = withTheme(

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/client/web/index.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
 import { CreeveyApp } from './CreeveyApp.js';
 
@@ -24,7 +24,7 @@ function loadCreeveyData(): Promise<CreeveyStatus['tests']> {
   });
 }
 
-const CreeveyAppAsync = React.lazy(async () => {
+const CreeveyAppAsync = lazy(async () => {
   let isReport = false;
   let creeveyStatus: CreeveyStatus;
   let creeveyApi: CreeveyClientApi | undefined;
@@ -36,11 +36,11 @@ const CreeveyAppAsync = React.lazy(async () => {
       // NOTE: Failed to get status from API
       // NOTE: It might happen on circle ci from artifact
       isReport = true;
-      creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [] };
+      creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [], isUpdateMode: false };
     }
   } else {
     isReport = true;
-    creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [] };
+    creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [], isUpdateMode: false };
   }
 
   return {
@@ -48,7 +48,12 @@ const CreeveyAppAsync = React.lazy(async () => {
       return (
         <CreeveyApp
           api={creeveyApi}
-          initialState={{ isReport, isRunning: creeveyStatus.isRunning, tests: treeifyTests(creeveyStatus.tests) }}
+          initialState={{
+            isReport,
+            isRunning: creeveyStatus.isRunning,
+            tests: treeifyTests(creeveyStatus.tests),
+            isUpdateMode: creeveyStatus.isUpdateMode,
+          }}
         />
       );
     },

package/src/client/web/themes.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { themes, ThemeVars } from 'storybook/theming';
+import { isDefined } from '../../types.js';
+
+const CREEVEY_THEME = 'Creevey_theme';
+
+function isTheme(theme?: string | null): theme is ThemeVars['base'] {
+  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
+}
+
+function initialTheme(): ThemeVars['base'] {
+  const theme = localStorage.getItem(CREEVEY_THEME);
+  return isTheme(theme) ? theme : 'light';
+}
+
+export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
+  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
+
+  useEffect(() => {
+    localStorage.setItem(CREEVEY_THEME, theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+}