creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.0

package/src/client/web/CreeveyApp.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, 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';
+import { CreeveyClientApi } from '../shared/creeveyClientApi.js';
+import {
+  getCheckedTests,
+  updateTestStatus,
+  checkSuite,
+  openSuite,
+  getTestByPath,
+  removeTests,
+  getTestPath,
+  useTheme,
+  setSearchParams,
+  getTestPathFromSearch,
+  CreeveyViewFilter,
+} from '../shared/helpers.js';
+import { CreeveyContext } from './CreeveyContext.js';
+import { KeyboardEvents } from './KeyboardEventsContext.js';
+import { SideBar } from './CreeveyView/SideBar/index.js';
+import { ResultsPage } from '../shared/components/ResultsPage.js';
+import { Toggle } from './CreeveyView/SideBar/Toggle.js';
+
+export interface CreeveyAppProps {
+  api?: CreeveyClientApi;
+  initialState: {
+    tests: CreeveySuite;
+    isRunning: boolean;
+    isReport: boolean;
+  };
+}
+
+const FlexContainer = withTheme(
+  styled.div(({ theme }) => ({
+    height: '100vh',
+    display: 'flex',
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  })),
+);
+
+const ToggleContainer = styled.div({
+  zIndex: 1,
+  position: 'absolute',
+  right: 10,
+  top: 10,
+});
+
+export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element {
+  const [tests, updateTests] = useImmer(initialState.tests);
+  const [isRunning, setIsRunning] = useState(initialState.isRunning);
+  const [openedTestPath, openTest] = useState<string[]>([]);
+  const [filter, setFilter] = useState<CreeveyViewFilter>({ status: null, subStrings: [] });
+  const [theme, setTheme] = useTheme();
+
+  const openedTest = getTestByPath(tests, openedTestPath);
+  if (openedTestPath.length > 0 && !isDefined(openedTest)) openTest([]);
+
+  const handleSuiteOpen = useCallback(
+    (path: string[], opened: boolean): void => {
+      updateTests((draft) => {
+        openSuite(draft, path, opened);
+      });
+    },
+    [updateTests],
+  );
+  const handleSuiteToggle = useCallback(
+    (path: string[], checked: boolean): void => {
+      updateTests((draft) => {
+        checkSuite(draft, path, checked);
+      });
+    },
+    [updateTests],
+  );
+  const handleImageApprove = useCallback(
+    (id: string, retry: number, image: string): void => api?.approve(id, retry, image),
+    [api],
+  );
+  const handleStart = useCallback(
+    (tests: CreeveySuite): void => api?.start(getCheckedTests(tests).map((test) => test.id)),
+    [api],
+  );
+  const handleStop = useCallback((): void => api?.stop(), [api]);
+  const handleThemeChange = useCallback(
+    (isDark: boolean): void => {
+      setTheme(isDark ? 'dark' : 'light');
+    },
+    [setTheme],
+  );
+  const handleOpenTest = useCallback((test: CreeveyTest): void => {
+    const testPath = getTestPath(test);
+    setSearchParams(testPath);
+    openTest(testPath);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('popstate', (event) => {
+      updateTests((draft) => {
+        const state = event.state as unknown;
+        if (state && typeof state == 'object' && 'testPath' in state) {
+          const { testPath } = state as { testPath?: string[] };
+          if (Array.isArray(testPath)) {
+            // TODO Add validations
+            openSuite(draft, testPath, true);
+            openTest(testPath);
+          }
+        }
+      });
+    });
+    updateTests((draft) => {
+      const testPath = getTestPathFromSearch();
+
+      openSuite(draft, testPath, true);
+      openTest(testPath);
+    });
+  }, [updateTests]);
+
+  // TODO unsubscribe
+  useEffect(
+    () =>
+      api?.onUpdate(({ isRunning, tests, removedTests = [] }: CreeveyUpdate) => {
+        if (isDefined(isRunning)) setIsRunning(isRunning);
+        if (isDefined(tests))
+          updateTests((draft) => {
+            Object.values(tests).forEach((test) => {
+              if (test) updateTestStatus(draft, getTestPath(test), test);
+            });
+            removedTests.forEach((test) => {
+              removeTests(draft, getTestPath(test));
+            });
+          });
+      }),
+    [api, updateTests],
+  );
+
+  return (
+    <CreeveyContext.Provider
+      value={{
+        isReport: initialState.isReport,
+        isRunning,
+        onStart: handleStart,
+        onStop: handleStop,
+        onSuiteOpen: handleSuiteOpen,
+        onSuiteToggle: handleSuiteToggle,
+      }}
+    >
+      <ThemeProvider theme={ensure(themes[theme])}>
+        <KeyboardEvents rootSuite={tests} filter={filter}>
+          <FlexContainer>
+            <SideBar
+              rootSuite={tests}
+              openedTest={openedTest}
+              onOpenTest={handleOpenTest}
+              filter={filter}
+              setFilter={setFilter}
+            />
+            {openedTest && (
+              <ResultsPage
+                key={`${openedTest.id}_${openedTest.results?.length ?? 0}`}
+                id={openedTest.id}
+                path={openedTestPath}
+                results={openedTest.results}
+                approved={openedTest.approved}
+                showTitle
+                onImageApprove={handleImageApprove}
+              />
+            )}
+            <ToggleContainer>
+              <Toggle value={theme == 'dark'} onChange={handleThemeChange} />
+            </ToggleContainer>
+          </FlexContainer>
+        </KeyboardEvents>
+      </ThemeProvider>
+    </CreeveyContext.Provider>
+  );
+}

package/src/client/web/CreeveyContext.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CreeveySuite, noop } from '../../types.js';
+
+export interface CreeveyContextType {
+  isReport: boolean;
+  isRunning: boolean;
+  onStop: () => void;
+  onStart: (rootSuite: CreeveySuite) => void;
+  onSuiteOpen: (path: string[], opened: boolean) => void;
+  onSuiteToggle: (path: string[], checked: boolean) => void;
+}
+
+export const CreeveyContext = React.createContext<CreeveyContextType>({
+  isReport: true,
+  isRunning: false,
+  onStop: noop,
+  onStart: noop,
+  onSuiteOpen: noop,
+  onSuiteToggle: noop,
+});

package/src/client/web/CreeveyLoader.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
+import { useTheme } from '../shared/helpers.js';
+
+const Container = withTheme(
+  styled.div(({ theme }) => ({
+    height: '100vh',
+    width: '100vw',
+    background: theme.background.app,
+  })),
+);
+
+const Loader = withTheme(
+  styled.div<{ size?: number; theme: Theme }>(({ size = 32, theme }) => ({
+    borderRadius: '50%',
+    cursor: 'progress',
+    display: 'inline-block',
+    overflow: 'hidden',
+    position: 'absolute',
+    transition: 'all 200ms ease-out',
+    verticalAlign: 'top',
+    top: '50%',
+    left: '50%',
+    marginTop: -(size / 2),
+    marginLeft: -(size / 2),
+    height: size,
+    width: size,
+    zIndex: 4,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: theme.base === 'light' ? 'rgba(97, 97, 97, 0.29)' : 'rgba(255, 255, 255, 0.2)',
+    borderTopColor: theme.base === 'light' ? 'rgb(100,100,100)' : 'rgba(255, 255, 255, 0.4)',
+    animation: `${rotate360} 0.7s linear infinite`,
+    mixBlendMode: 'difference',
+  })),
+);
+
+export const rotate360: Keyframes = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export function CreeveyLoader(): JSX.Element {
+  const [theme] = useTheme();
+  return (
+    <ThemeProvider theme={ensure(themes[theme])}>
+      <Container>
+        <Loader size={64} />
+      </Container>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { styled, Theme, withTheme } from '@storybook/theming';
+import { Icons } from '@storybook/components';
+import { transparentize } from 'polished';
+
+const Label = withTheme(
+  styled.label<{ theme: Theme; disabled?: boolean }>(({ theme, disabled }) => ({
+    display: 'inline-flex',
+    alignItems: 'baseline',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    fontSize: theme.typography.size.s1,
+    padding: '0px',
+    pointerEvents: disabled ? 'none' : 'auto',
+
+    input: {
+      display: 'inline-block',
+      opacity: '0',
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      zIndex: -1,
+
+      '&:focus + span': {
+        outline: 'none',
+        boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
+      },
+    },
+  })),
+);
+
+const Box = withTheme(
+  styled.span(({ theme }) => ({
+    display: 'inline-block',
+    width: '16px',
+    height: '16px',
+    border: theme.appBorderColor,
+    borderRadius: theme.input.borderRadius,
+    margin: '2px',
+
+    boxShadow: `${transparentize(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
+    color: transparentize(0.3, theme.color.defaultText),
+    background: theme.background.content,
+
+    '&:hover, &:focus': {
+      outline: 'none',
+      boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
+    },
+  })),
+);
+
+const CircleIcon = styled(Icons)({
+  margin: '4px',
+  verticalAlign: 'baseline',
+});
+
+const CheckIcon = styled(Icons)({
+  margin: '2px',
+  verticalAlign: 'baseline',
+});
+
+interface CheckboxProps {
+  checked?: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+interface CheckboxState {
+  indeterminate: boolean;
+}
+
+export const CheckboxContainer = styled.div({
+  position: 'absolute',
+  left: '64px',
+  top: '6px',
+  zIndex: 2,
+});
+
+export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+  state: CheckboxState = { indeterminate: false };
+
+  handleIndeterminateChange = (value: boolean): void => {
+    this.setState({
+      indeterminate: value,
+    });
+  };
+  public setIndeterminate = (): void => {
+    this.handleIndeterminateChange(true);
+  };
+  public resetIndeterminate = (): void => {
+    this.handleIndeterminateChange(false);
+  };
+  render(): JSX.Element {
+    const { checked, disabled, onValueChange } = this.props;
+    const { indeterminate } = this.state;
+    return (
+      <Label disabled={disabled}>
+        <input
+          type="checkbox"
+          onChange={(e) => {
+            onValueChange(e.target.checked);
+          }}
+          checked={checked ?? false}
+        />
+        <Box>
+          {indeterminate ? (
+            <CircleIcon icon="circle" width="8" height="8" />
+          ) : checked ? (
+            <CheckIcon icon="check" width="12" height="12" />
+          ) : (
+            ' '
+          )}
+        </Box>
+      </Label>
+    );
+  }
+}

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

@@ -0,0 +1,140 @@
+import { Icons } from '@storybook/components';
+import { styled, Theme, withTheme } from '@storybook/theming';
+import React, { ChangeEvent, useContext, useRef, useState } from 'react';
+import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+
+interface SearchProps {
+  onChange: (arg: string) => void;
+  value: string;
+}
+
+const FilterField = withTheme(
+  styled.input(({ theme }) => ({
+    appearance: 'none',
+    border: 'none',
+    boxSizing: 'border-box',
+    display: 'block',
+    outline: 'none',
+    width: '100%',
+    background: 'transparent',
+    padding: 0,
+    fontSize: 'inherit',
+
+    '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
+
+    '::placeholder': {
+      color: theme.color.mediumdark,
+    },
+
+    '&:placeholder-shown ~ button': {
+      opacity: 0,
+    },
+  })),
+);
+
+const CancelButton = withTheme(
+  styled.button(({ theme }) => ({
+    border: 0,
+    margin: 0,
+    padding: 4,
+    textDecoration: 'none',
+
+    background: theme.appBorderColor,
+    borderRadius: '1em',
+    cursor: 'pointer',
+    opacity: 1,
+    transition: 'all 150ms ease-out',
+
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: 2,
+
+    '> svg': {
+      display: 'block',
+      height: 8,
+      width: 8,
+      color: theme.input.color,
+      transition: 'all 150ms ease-out',
+    },
+  })),
+);
+
+const FilterForm = withTheme(
+  styled.form<{ theme: Theme; focussed: boolean }>(({ theme, focussed }) => ({
+    transition: 'all 150ms ease-out',
+    borderBottom: '1px solid transparent',
+    borderBottomColor: theme.appBorderColor,
+    outline: 0,
+    position: 'relative',
+    color: theme.input.color,
+
+    input: {
+      color: theme.input.color,
+      fontSize: theme.typography.size.s2 - 1,
+      lineHeight: '20px',
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 20,
+      paddingRight: 20,
+    },
+
+    '> svg': {
+      transition: 'all 150ms ease-out',
+      position: 'absolute',
+      top: '50%',
+      height: 12,
+      width: 12,
+      transform: 'translateY(-50%)',
+      zIndex: 1,
+
+      background: 'transparent',
+
+      path: {
+        transition: 'all 150ms ease-out',
+        fill: 'currentColor',
+        opacity: focussed ? 1 : 0.3,
+      },
+    },
+  })),
+);
+
+export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
+  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const [focussed, onSetFocussed] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FilterForm
+      autoComplete="off"
+      focussed={focussed}
+      onReset={() => {
+        onChange('');
+      }}
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <FilterField
+        type="text"
+        ref={searchRef}
+        onFocus={() => {
+          onSetFocussed(true);
+          setSidebarFocusedItem(null);
+        }}
+        onBlur={() => {
+          onSetFocussed(false);
+        }}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+        }}
+        placeholder="search by status or substring"
+        value={value}
+      />
+      <Icons icon="search" />
+      <CancelButton tabIndex={-1} type="reset" value="reset" title="Clear search">
+        <Icons icon="closeAlt" />
+      </CancelButton>
+    </FilterForm>
+  );
+};

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

@@ -0,0 +1,125 @@
+import React, { createContext, useContext } from 'react';
+import { transparentize } from 'polished';
+import { ScrollArea } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { SideBarHeader } from './SideBarHeader.js';
+import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
+import {
+  filterTests,
+  CreeveyViewFilter,
+  flattenSuite,
+  countTestsStatus,
+  getCheckedTests,
+} from '../../../shared/helpers.js';
+import { CreeveyContext } from '../../CreeveyContext.js';
+import { SuiteLink } from './SuiteLink.js';
+import { TestLink } from './TestLink.js';
+
+export const SideBarContext = createContext<{ onOpenTest: (test: CreeveyTest) => void }>({
+  onOpenTest: noop,
+});
+
+export interface SideBarProps {
+  rootSuite: CreeveySuite;
+  openedTest: CreeveyTest | null;
+  onOpenTest: (test: CreeveyTest) => void;
+  filter: CreeveyViewFilter;
+  setFilter: (filter: CreeveyViewFilter) => void;
+}
+
+const Container = withTheme(
+  styled.div(({ theme }) => ({
+    width: '300px',
+    boxShadow: `0 0 5px  ${transparentize(0.8, theme.color.defaultText)}`,
+    zIndex: 1000,
+    background: theme.background.content,
+  })),
+);
+
+const ScrollContainer = styled.div({
+  height: 'calc(100vh - 165px)',
+  width: 300,
+  flex: 'none',
+  overflowY: 'auto',
+  position: 'sticky',
+  top: '0',
+  left: '0',
+});
+
+const Shadow = withTheme(
+  styled.div(({ theme }) => ({
+    position: 'sticky',
+    top: '0px',
+    boxShadow: `0 0 5px 2.5px ${transparentize(0.8, theme.color.defaultText)}`,
+    zIndex: 3,
+  })),
+);
+
+const SelectAllContainer = styled.div({
+  marginBottom: '30px',
+  paddingTop: '9px',
+});
+
+const TestsContainer = styled.div({
+  position: 'relative',
+  paddingBottom: '40px',
+});
+
+const Divider = withTheme(
+  styled.div(({ theme }) => ({
+    position: 'absolute',
+    height: '8px',
+    width: '100%',
+    zIndex: 3,
+    background: theme.background.content,
+  })),
+);
+
+export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
+  const { onStart, onStop } = useContext(CreeveyContext);
+
+  // TODO Maybe need to do flatten first?
+  const suite = filterTests(rootSuite, filter);
+  const testsStatus = countTestsStatus(rootSuite);
+  const suiteList = flattenSuite(suite);
+  const countCheckedTests = getCheckedTests(rootSuite).length;
+
+  const handleStart = (): void => {
+    onStart(suite);
+  };
+
+  return (
+    <SideBarContext.Provider value={{ onOpenTest }}>
+      <Container>
+        <SideBarHeader
+          testsStatus={testsStatus}
+          filter={filter}
+          onFilterChange={setFilter}
+          onStart={handleStart}
+          onStop={onStop}
+          canStart={countCheckedTests !== 0}
+        />
+        <ScrollContainer>
+          <ScrollArea vertical>
+            <Shadow />
+            <TestsContainer>
+              <Divider />
+              {/* TODO Output message when nothing found */}
+              <SelectAllContainer>
+                <SuiteLink title="Select all" suite={rootSuite} data-testid="selectAll" />
+              </SelectAllContainer>
+              {suiteList.map(({ title, suite }) =>
+                // TODO Update components without re-mount
+                isTest(suite) ? (
+                  <TestLink key={suite.id} title={title} opened={suite.id == openedTest?.id} test={suite} />
+                ) : (
+                  <SuiteLink key={suite.path.join('/')} title={title} suite={suite} data-testid={title} />
+                ),
+              )}
+            </TestsContainer>
+          </ScrollArea>
+        </ScrollContainer>
+      </Container>
+    </SideBarContext.Provider>
+  );
+}