creevey 0.9.1 → 0.10.0-beta.0

package/src/client/shared/components/PageFooter/Paging.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { TabButton } from '@storybook/components';
 
 export interface PagingProps {
-  activePage: number;
+  activePage: string;
   onPageChange: (pageNumber: number) => void;
   pagesCount: number;
 }
 
-export type ItemType = number | '.';
-
 export function Paging(props: PagingProps): JSX.Element {
-  const renderItem = (item: ItemType, index: number): JSX.Element => {
+  const renderItem = (item: string, index: number): JSX.Element => {
     switch (item) {
       case '.': {
         return (
@@ -49,17 +47,19 @@ export function Paging(props: PagingProps): JSX.Element {
     }
   };
 
-  const goToPage = (pageNumber: number): void => {
-    if (1 <= pageNumber && pageNumber !== props.activePage && pageNumber <= props.pagesCount) {
-      props.onPageChange(pageNumber);
+  const goToPage = (pageNumber: string): void => {
+    const newPage = Number(pageNumber);
+    if (1 <= newPage && pageNumber !== props.activePage && newPage <= props.pagesCount) {
+      props.onPageChange(newPage);
     }
   };
 
   return <div>{getItems(props.activePage, props.pagesCount).map(renderItem)}</div>;
 }
 
-function getItems(active: number, total: number): ItemType[] {
-  const result: ItemType[] = [];
+function getItems(activePage: string, total: number): string[] {
+  const active = Number(activePage);
+  const result: string[] = [];
 
   const left = Math.max(Math.min(active - 2, total - 4), 1);
   const right = Math.min(Math.max(5, active + 2), total);
@@ -71,11 +71,11 @@ function getItems(active: number, total: number): ItemType[] {
   const to = hasRightDots ? right : total;
 
   if (hasLeftDots) {
-    result.push(1, '.');
+    result.push('1', '.');
   }
 
   for (let i = from; i <= to; ++i) {
-    result.push(i);
+    result.push(`${i}`);
   }
 
   if (hasRightDots) {
@@ -83,7 +83,7 @@ function getItems(active: number, total: number): ItemType[] {
   }
 
   if (hasRightDots && isFinite(total)) {
-    result.push(total);
+    result.push(`${total}`);
   }
 
   return result;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { styled, withTheme, Theme } from '@storybook/theming';
 
 const IMG_SIZE = 64;

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

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
-import { Icons, Tabs } from '@storybook/components';
+import React, { JSX, useEffect } from 'react';
+import { Tabs } from '@storybook/components';
+import { CloseAltIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesViewMode, Images } from '../../../../types.js';
 import { getImageUrl } from '../../helpers.js';
@@ -99,7 +100,7 @@ export function PageHeader({
       <H1>{title.flatMap((token) => [token, <HeaderDivider key={token}>/</HeaderDivider>]).slice(0, -1)}</H1>
       {error && (
         <ErrorContainer>
-          <Icons icon="closeAlt" />
+          <CloseAltIcon />
           <pre>{error}</pre>
         </ErrorContainer>
       )}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { JSX, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';

package/src/client/web/CreeveyApp.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import { ensure, styled, ThemeProvider, themes, withTheme } from '@storybook/theming';
 import { CreeveyUpdate, CreeveySuite, isDefined, CreeveyTest } from '../../types.js';

package/src/client/web/CreeveyLoader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
 import { useTheme } from '../shared/helpers.js';
 

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

@@ -1,7 +1,6 @@
-import React from 'react';
-
+import React, { JSX } from 'react';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import { Icons } from '@storybook/components';
+import { CircleIcon, CheckIcon } from '@storybook/icons';
 import { transparentize } from 'polished';
 
 const Label = withTheme(
@@ -51,12 +50,12 @@ const Box = withTheme(
   })),
 );
 
-const CircleIcon = styled(Icons)({
+const CircleIconStyled = styled(CircleIcon)({
   margin: '4px',
   verticalAlign: 'baseline',
 });
 
-const CheckIcon = styled(Icons)({
+const CheckIconStyled = styled(CheckIcon)({
   margin: '2px',
   verticalAlign: 'baseline',
 });
@@ -105,9 +104,9 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         />
         <Box>
           {indeterminate ? (
-            <CircleIcon icon="circle" width="8" height="8" />
+            <CircleIconStyled width="8" height="8" />
           ) : checked ? (
-            <CheckIcon icon="check" width="12" height="12" />
+            <CheckIconStyled width="12" height="12" />
           ) : (
             ' '
           )}

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

@@ -1,6 +1,6 @@
-import { Icons } from '@storybook/components';
+import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import { SearchIcon, CloseAltIcon } from '@storybook/icons';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import React, { ChangeEvent, useContext, useRef, useState } from 'react';
 import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
 
 interface SearchProps {
@@ -131,9 +131,9 @@ export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
         placeholder="search by status or substring"
         value={value}
       />
-      <Icons icon="search" />
+      <SearchIcon />
       <CancelButton tabIndex={-1} type="reset" value="reset" title="Clear search">
-        <Icons icon="closeAlt" />
+        <CloseAltIcon />
       </CancelButton>
     </FilterForm>
   );

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

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import React, { JSX, createContext } from 'react';
 import { transparentize } from 'polished';
 import { ScrollArea } from '@storybook/components';
 import { styled, Theme, withTheme } from '@storybook/theming';
@@ -47,12 +47,6 @@ const ScrollContainer = styled.div({
   left: '0',
 });
 
-const StyledScrollArea = styled(ScrollArea)({
-  '& > div > div': {
-    height: 'calc(100% - 8px)',
-  },
-});
-
 const Shadow = withTheme(
   styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
     [position]: '0px',
@@ -69,7 +63,6 @@ const SelectAllContainer = styled.div({
 
 const TestsContainer = styled.div({
   position: 'relative',
-  paddingBottom: '8px',
   height: '100%',
 });
 
@@ -108,7 +101,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
           canStart={countCheckedTests !== 0}
         />
         <ScrollContainer>
-          <StyledScrollArea vertical>
+          <ScrollArea vertical>
             <Shadow position="top" />
             <TestsContainer>
               <Divider position="top" />
@@ -126,7 +119,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
               )}
             </TestsContainer>
             <Divider position="bottom" />
-          </StyledScrollArea>
+          </ScrollArea>
           <Shadow position="bottom" />
         </ScrollContainer>
         <SideBarFooter />

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { styled, withTheme } from '@storybook/theming';
-import { Button, Icons } from '@storybook/components';
+import { Button } from '@storybook/components';
+import { ChevronRightIcon } from '@storybook/icons';
 import { useCreeveyContext } from '../../CreeveyContext.js';
 
 const Sticky = withTheme(
   styled.div(({ theme }) => ({
-    padding: '24px 16px 8px 16px',
+    padding: '24px 32px 8px',
     background: theme.background.content,
     height: '50px',
     zIndex: 5,
@@ -25,11 +26,11 @@ export function SideBarFooter(): JSX.Element {
   return (
     <Sticky>
       <Container>
-        <Button secondary onClick={onImageApprove} disabled={!onImageApprove} style={{ paddingRight: 8 }}>
+        <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
           Approve
-          <Icons icon="arrowright" style={{ paddingLeft: 4 }} />
+          <ChevronRightIcon />
         </Button>
-        <Button secondary outline onClick={onApproveAll}>
+        <Button variant="outline" size="medium" onClick={onApproveAll}>
           Approve all
         </Button>
       </Container>

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

@@ -1,5 +1,6 @@
-import React, { useContext, useState } from 'react';
-import { Button as NativeButton, Icons } from '@storybook/components';
+import React, { JSX, useContext, useState } from 'react';
+import { Button as NativeButton } from '@storybook/components';
+import { StopIcon, PlayIcon } from '@storybook/icons';
 import { styled, withTheme } from '@storybook/theming';
 import { CreeveyContext } from '../../CreeveyContext.js';
 import { TestsStatus, TestsStatusProps } from './TestsStatus.js';
@@ -119,12 +120,12 @@ export function SideBarHeader({
         {isReport ? null : (
           <MarginContainer top="10px">
             {isRunning ? (
-              <Button outline secondary onClick={onStop}>
-                <Icons icon="stop" />
+              <Button variant="outline" onClick={onStop}>
+                <StopIcon />
               </Button>
             ) : (
-              <Button outline secondary onClick={onStart} disabled={!canStart}>
-                <Icons icon="play" />
+              <Button variant="outline" onClick={onStart} disabled={!canStart}>
+                <PlayIcon />
               </Button>
             )}
           </MarginContainer>

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

@@ -1,5 +1,5 @@
-import React, { useRef, useContext, useEffect, useMemo } from 'react';
-import { Icons } from '@storybook/components';
+import React, { JSX, useRef, useContext, 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';
@@ -53,13 +53,16 @@ export const Button = withTheme(
   })),
 );
 
-const ArrowIcon = styled(Icons)({
+const iconStyles = {
   paddingRight: '4px',
   display: 'inline-block',
   width: '12px',
   height: '18px',
   verticalAlign: 'unset',
-});
+};
+
+const ChevronDownIconStyled = styled(ChevronDownIcon)(iconStyles);
+const ChevronRightIconStyled = styled(ChevronRightIcon)(iconStyles);
 
 export const SuiteContainer = styled.span<{ padding: number }>(({ padding }) => ({
   paddingLeft: padding,
@@ -126,8 +129,7 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
       <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
         <SuiteContainer padding={(suite.path.length - 1) * 8}>
           {isTest(suite) ||
-            (Boolean(suite.path.length) &&
-              (suite.opened ? <ArrowIcon icon="arrowdown" /> : <ArrowIcon icon="arrowright" />))}
+            (Boolean(suite.path.length) && (suite.opened ? <ChevronDownIconStyled /> : <ChevronRightIconStyled />))}
           <TestStatusIcon status={suite.status} skip={suite.skip} />
           <SuiteTitle>{title}</SuiteTitle>
         </SuiteContainer>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useContext, useMemo, useRef } from 'react';
+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';
@@ -7,6 +7,7 @@ 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';
 
 export interface TestLinkProps {
   title: string;
@@ -14,6 +15,10 @@ export interface TestLinkProps {
   test: CreeveyTest;
 }
 
+const TestContainer = styled(SuiteContainer)({
+  gridTemplateColumns: 'min-content auto',
+});
+
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
   const { onSuiteToggle } = useContext(CreeveyContext);
   const { onOpenTest } = useContext(SideBarContext);
@@ -59,10 +64,10 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
         />
       </CheckboxContainer>
       <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
-        <SuiteContainer padding={(testPath.length + 1) * 8}>
+        <TestContainer padding={(testPath.length + 1) * 8}>
           <TestStatusIcon inverted={opened} status={test.status} skip={test.skip} />
           <SuiteTitle>{title}</SuiteTitle>
-        </SuiteContainer>
+        </TestContainer>
       </Button>
     </Container>
   );

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { styled, withTheme, Theme } from '@storybook/theming';
-import { Icons, Loader } from '@storybook/components';
+import { Loader } from '@storybook/components';
+import { CrossIcon, CheckIcon, CircleHollowIcon, ThumbsUpIcon, AlertIcon, TimeIcon } from '@storybook/icons';
 import { TestStatus } from '../../../../types.js';
 
 export interface TestStatusIconProps {
@@ -17,11 +18,18 @@ const Container = styled.span({
   display: 'inline-block',
 });
 
-const Icon = styled(Icons)({
+const iconStyles = {
   position: 'relative',
   top: '1px',
   verticalAlign: 'baseline',
-});
+} as const;
+
+const CrossIconStyled = styled(CrossIcon)(iconStyles);
+const CheckIconStyled = styled(CheckIcon)(iconStyles);
+const ThumbsUpIconStyled = styled(ThumbsUpIcon)(iconStyles);
+const AlertIconStyled = styled(AlertIcon)(iconStyles);
+const TimeIconStyled = styled(TimeIcon)(iconStyles);
+const CircleHollowIconStyled = styled(CircleHollowIcon)(iconStyles);
 
 const Spinner = styled(Loader)({
   top: '12px',
@@ -34,15 +42,15 @@ export const TestStatusIcon = withTheme(
     let icon = null;
     switch (status) {
       case 'failed': {
-        icon = <Icon color={inverted ? theme.color.lightest : theme.color.negative} icon="cross" />;
+        icon = <CrossIconStyled color={inverted ? theme.color.lightest : theme.color.negative} />;
         break;
       }
       case 'success': {
-        icon = <Icon color={inverted ? theme.color.lightest : theme.color.green} icon="check" />;
+        icon = <CheckIconStyled color={inverted ? theme.color.lightest : theme.color.green} />;
         break;
       }
       case 'approved': {
-        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="thumbsup" />;
+        icon = <ThumbsUpIconStyled color={inverted ? theme.color.lightest : theme.color.mediumdark} />;
         break;
       }
       case 'running': {
@@ -50,12 +58,12 @@ export const TestStatusIcon = withTheme(
         break;
       }
       case 'pending': {
-        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="time" />;
+        icon = <TimeIconStyled color={inverted ? theme.color.lightest : theme.color.mediumdark} />;
         break;
       }
       default: {
-        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="alert" />;
-        else icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="circlehollow" />;
+        if (skip) icon = <AlertIconStyled color={inverted ? theme.color.lightest : undefined} />;
+        else icon = <CircleHollowIconStyled color={inverted ? theme.color.lightest : undefined} />;
         break;
       }
     }

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

@@ -1,5 +1,6 @@
-import React from 'react';
-import { IconButton, Icons } from '@storybook/components';
+import React, { JSX } from 'react';
+import { IconButton } from '@storybook/components';
+import { TimeIcon, CheckIcon, CrossIcon, ThumbsUpIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { TestStatus } from '../../../../types.js';
 import { CreeveyTestsStatus } from '../../../shared/helpers.js';
@@ -59,48 +60,44 @@ export const TestsStatus = withTheme(
   }: TestsStatusProps): JSX.Element => {
     return (
       <Container>
-        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
         <Button
           onClick={() => {
             onClickByStatus('pending');
           }}
         >
           <IconContainer color={theme?.color.mediumdark}>
-            <Icons icon="time" />
+            <TimeIcon />
             {pendingCount}
           </IconContainer>
         </Button>
         <Divider />
-        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
         <Button
           onClick={() => {
             onClickByStatus('success');
           }}
         >
           <IconContainer color={theme?.color.green}>
-            <Icons icon="check" /> {successCount}
+            <CheckIcon /> {successCount}
           </IconContainer>
         </Button>
         <Divider />
-        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
         <Button
           onClick={() => {
             onClickByStatus('failed');
           }}
         >
           <IconContainer color={theme?.color.negative}>
-            <Icons icon="cross" /> {failedCount}
+            <CrossIcon /> {failedCount}
           </IconContainer>
         </Button>
         <Divider />
-        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
         <Button
           onClick={() => {
             onClickByStatus('approved');
           }}
         >
           <IconContainer color={theme?.color.defaultText}>
-            <Icons icon="thumbsup" /> {approvedCount}
+            <ThumbsUpIcon /> {approvedCount}
           </IconContainer>
         </Button>
       </Container>

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

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

package/src/client/web/KeyboardEventsContext.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useContext } from 'react';
+import React, { JSX, useState, useEffect, useCallback, useContext, PropsWithChildren } from 'react';
 import { CreeveySuite, isTest, noop } from '../../types.js';
 import { CreeveyViewFilter, filterTests, flattenSuite, getSuiteByPath, getTestPath } from '../shared/helpers.js';
 import { CreeveyContext } from './CreeveyContext.js';
@@ -20,11 +20,10 @@ export const KeyboardEvents = ({
   children,
   rootSuite,
   filter,
-}: {
+}: PropsWithChildren<{
   rootSuite: CreeveySuite;
   filter: CreeveyViewFilter;
-  children: React.ReactChild;
-}): JSX.Element => {
+}>): JSX.Element => {
   const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
 
   const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);

package/src/client/web/index.html

@@ -23,6 +23,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="main.js"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

package/src/client/web/index.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { CreeveyApp } from './CreeveyApp.js';
 
 import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
@@ -55,9 +55,10 @@ const CreeveyAppAsync = React.lazy(async () => {
   };
 });
 
-ReactDOM.render(
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <Suspense fallback={<CreeveyLoader />}>
     <CreeveyAppAsync />
   </Suspense>,
-  document.getElementById('root'),
 );

package/src/creevey.ts

@@ -1,9 +1,9 @@
 import cluster from 'cluster';
 import minimist from 'minimist';
 import creevey from './server/index.js';
-import { noop, Options } from './types.js';
+import { Options } from './types.js';
 import { emitWorkerMessage } from './server/messages.js';
-import { isShuttingDown, shutdown, shutdownWorkers } from './server/utils.js';
+import { isShuttingDown, shutdownWorkers } from './server/utils.js';
 import Logger from 'loglevel';
 import { logger } from './server/logger.js';
 
@@ -15,22 +15,39 @@ function shutdownOnException(reason: unknown): void {
   logger.error(error);
 
   process.exitCode = -1;
-  if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { error } });
+  if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { subtype: 'unknown', error } });
   if (cluster.isPrimary) void shutdownWorkers();
 }
 
 process.on('uncaughtException', shutdownOnException);
 process.on('unhandledRejection', shutdownOnException);
-if (cluster.isWorker) process.on('SIGINT', noop);
-if (cluster.isPrimary) process.on('SIGINT', shutdown);
+process.on('SIGINT', () => {
+  isShuttingDown.current = true;
+});
 
 const argv = minimist<Options>(process.argv.slice(2), {
-  string: ['browser', 'config', 'reporter', 'reportDir', 'screenDir', 'storybookUrl'],
-  boolean: ['debug', 'trace', 'ui', 'saveReport', 'tests'],
-  default: { port: 3000, saveReport: true },
+  string: ['browser', 'config', 'reporter', 'reportDir', 'screenDir', 'gridUrl', 'storybookUrl'],
+  boolean: ['debug', 'trace', 'ui', 'odiff'],
+  default: { port: 3000 },
   alias: { port: 'p', config: 'c', debug: 'd', update: 'u' },
 });
 
+// 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:
+    import { reporters } from 'mocha';
+
+    const config = {
+      reporter: reporters.${
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        argv.reporter
+      },
+    };
+
+    export default config;
+  `);
+}
+
 // @ts-expect-error: define log level for storybook
 global.LOGLEVEL = argv.trace ? 'trace' : argv.debug ? 'debug' : 'warn';
 if (argv.trace) {

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './types.js';
-export { loadStories as browserStoriesProvider } from './server/storybook/providers/browser.js';
-export { loadStories as hybridStoriesProvider } from './server/storybook/providers/hybrid.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';