@storybook/addon-interactions 6.4.0-beta.32 → 6.4.0-rc.10

package/dist/modern/components/Interaction/Interaction.stories.js

@@ -3,13 +3,14 @@ import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
 import { getCall } from '../../mocks';
 import { Interaction } from './Interaction';
+import SubnavStories from '../Subnav/Subnav.stories';
 export default {
   title: 'Addons/Interactions/Interaction',
   component: Interaction,
   args: {
     callsById: new Map(),
-    isDisabled: false,
-    isDebuggingEnabled: true
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates
   }
 };
 export const Active = {
@@ -34,7 +35,9 @@ export const Done = {
 };
 export const Disabled = {
   args: Object.assign({}, Done.args, {
-    isDisabled: true
+    controlStates: Object.assign({}, SubnavStories.args.controlStates, {
+      goto: false
+    })
   })
 };
 export const Hovered = Object.assign({}, Done, {

package/dist/modern/components/Subnav/Subnav.js

@@ -79,15 +79,10 @@ const withTooltipModifiers = [{
   }
 }];
 export const Subnav = ({
-  isDisabled,
-  hasNext,
-  hasPrevious,
-  storyFileName,
+  controls,
+  controlStates,
   status,
-  onStart,
-  onPrevious,
-  onNext,
-  onEnd,
+  storyFileName,
   onScrollToEnd
 }) => {
   const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
@@ -99,49 +94,49 @@ export const Subnav = ({
   }, buttonText), /*#__PURE__*/React.createElement(StyledSeparator, null), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.start ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go to start"
     })
   }, /*#__PURE__*/React.createElement(RewindButton, {
-    onClick: onStart,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.start,
+    disabled: !controlStates.start
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "rewind"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.back ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go back"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onPrevious,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.back,
+    disabled: !controlStates.back
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "playback"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.next ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go forward"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onNext,
-    disabled: isDisabled || !hasNext
+    onClick: controls.next,
+    disabled: !controlStates.next
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "playnext"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.end ? 'hover' : 'none',
     hasChrome: false,
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go to end"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onEnd,
-    disabled: isDisabled || !hasNext
+    onClick: controls.end,
+    disabled: !controlStates.end
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "fastforward"
   })))), storyFileName && /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(StyledLocation, null, storyFileName))));

package/dist/modern/components/Subnav/Subnav.stories.js

@@ -1,14 +1,25 @@
+import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { Subnav } from './Subnav';
 export default {
   title: 'Addons/Interactions/Subnav',
   component: Subnav,
   args: {
-    onPrevious: () => {},
-    onNext: () => {},
-    onReplay: () => {},
-    goToStart: () => {},
-    goToEnd: () => {},
+    controls: {
+      start: action('start'),
+      back: action('back'),
+      goto: action('goto'),
+      next: action('next'),
+      end: action('end')
+    },
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: false,
+      end: false
+    },
     storyFileName: 'Subnav.stories.tsx',
     hasNext: true,
     hasPrevious: true
@@ -29,17 +40,42 @@ export const Runs = {
     status: CallStates.WAITING
   }
 };
-export const AtTheBeginning = {
-  name: 'at the beginning',
+export const AtStart = {
   args: {
-    status: CallStates.DONE,
-    hasPrevious: false
+    status: CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
-export const AtTheEnd = {
-  name: 'at the end',
+export const Midway = {
   args: {
-    status: CallStates.DONE,
-    hasNext: false
+    status: CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: true,
+      end: true
+    }
+  }
+};
+export const Locked = {
+  args: {
+    status: CallStates.ACTIVE,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false
+    }
   }
 };

package/dist/modern/mocks/index.js

@@ -1,7 +1,8 @@
 import { CallStates } from '@storybook/instrumenter';
-export const getCall = state => {
+export const getCall = status => {
   const defaultData = {
     id: 'addons-interactions-accountform--standard-email-filled [3] change',
+    cursor: 0,
     path: ['fireEvent'],
     method: 'change',
     storyId: 'addons-interactions-accountform--standard-email-filled',
@@ -15,11 +16,11 @@ export const getCall = state => {
     }],
     interceptable: true,
     retain: false,
-    state
+    status
   };
   const overrides = CallStates.ERROR ? {
     exception: {
-      callId: '',
+      name: 'Error',
       stack: '',
       message: "Things didn't work!"
     }

package/dist/ts3.4/Panel.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+export interface Controls {
+    start: (args: any) => void;
+    back: (args: any) => void;
+    goto: (args: any) => void;
+    next: (args: any) => void;
+    end: (args: any) => void;
+}
+interface AddonPanelProps {
+    active: boolean;
+}
+interface InteractionsPanelProps {
+    active: boolean;
+    controls: Controls;
+    controlStates: ControlStates;
+    interactions: (Call & {
+        status?: CallStates;
+    })[];
+    fileName?: string;
+    hasException?: boolean;
+    isPlaying?: boolean;
+    calls: Map<string, any>;
+    endRef?: React.Ref<HTMLDivElement>;
+    onScrollToEnd?: () => void;
+}
+export declare const AddonPanelPure: React.FC<InteractionsPanelProps>;
+export declare const Panel: React.FC<AddonPanelProps>;
+export {};

package/dist/ts3.4/Tool.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Tool: () => JSX.Element;

package/dist/ts3.4/components/AccountForm/AccountForm.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export interface AccountFormResponse {
+    success: boolean;
+}
+export interface AccountFormValues {
+    email: string;
+    password: string;
+}
+export declare type AccountFormProps = {
+    passwordVerification?: boolean;
+    onSubmit?: (values: AccountFormValues) => void;
+    onTransactionStart?: (values: AccountFormValues) => void;
+    onTransactionEnd?: (values: AccountFormResponse) => void;
+};
+export declare const AccountForm: FC<AccountFormProps>;

package/dist/ts3.4/components/Interaction/Interaction.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Call, ControlStates } from '@storybook/instrumenter';
+import { Controls } from '../../Panel';
+export declare const Interaction: ({ call, callsById, controls, controlStates, }: {
+    call: Call;
+    callsById: Map<Call['id'], Call>;
+    controls: Controls;
+    controlStates: ControlStates;
+}) => JSX.Element;

package/dist/ts3.4/components/List.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type Item = {
+    title: string;
+    description: string;
+};
+interface ListItemProps {
+    item: Item;
+}
+export declare const ListItem: React.FC<ListItemProps>;
+interface ListProps {
+    items: Item[];
+}
+export declare const List: React.FC<ListProps>;
+export {};

package/dist/ts3.4/components/MatcherResult.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Received: ({ value, parsed }: {
+    value: any;
+    parsed?: boolean;
+}) => JSX.Element;
+export declare const Expected: ({ value, parsed }: {
+    value: any;
+    parsed?: boolean;
+}) => JSX.Element;
+export declare const MatcherResult: ({ message }: {
+    message: string;
+}) => JSX.Element;

package/dist/ts3.4/components/MethodCall.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { Call, ElementRef } from '@storybook/instrumenter';
+export declare const Node: ({ value, nested, callsById, ...props }: {
+    [props: string]: any;
+    value: any;
+    nested?: boolean;
+    callsById?: Map<Call['id'], Call>;
+}) => JSX.Element;
+export declare const NullNode: (props: object) => JSX.Element;
+export declare const UndefinedNode: (props: object) => JSX.Element;
+export declare const StringNode: ({ value, ...props }: {
+    value: string;
+}) => JSX.Element;
+export declare const NumberNode: ({ value, ...props }: {
+    value: number;
+}) => JSX.Element;
+export declare const BooleanNode: ({ value, ...props }: {
+    value: boolean;
+}) => JSX.Element;
+export declare const ArrayNode: ({ value, nested }: {
+    value: any[];
+    nested?: boolean;
+}) => JSX.Element;
+export declare const ObjectNode: ({ value, nested }: {
+    value: object;
+    nested?: boolean;
+}) => JSX.Element;
+export declare const ClassNode: ({ value }: {
+    value: Record<string, any>;
+}) => JSX.Element;
+export declare const FunctionNode: ({ value }: {
+    value: Function;
+}) => JSX.Element;
+export declare const ElementNode: ({ value }: {
+    value: ElementRef['__element__'];
+}) => JSX.Element;
+export declare const DateNode: ({ value }: {
+    value: Date;
+}) => JSX.Element;
+export declare const ErrorNode: ({ value }: {
+    value: Error;
+}) => JSX.Element;
+export declare const RegExpNode: ({ value }: {
+    value: RegExp;
+}) => JSX.Element;
+export declare const SymbolNode: ({ value }: {
+    value: symbol;
+}) => JSX.Element;
+export declare const OtherNode: ({ value }: {
+    value: any;
+}) => JSX.Element;
+export declare const MethodCall: ({ call, callsById, }: {
+    call: Call;
+    callsById: Map<Call['id'], Call>;
+}) => JSX.Element;

package/dist/ts3.4/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Call } from '@storybook/instrumenter';
+export interface StatusBadgeProps {
+    status: Call['status'];
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/ts3.4/components/StatusIcon/StatusIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IconsProps } from '@storybook/components';
+import { Call } from '@storybook/instrumenter';
+export interface StatusIconProps extends IconsProps {
+    status: Call['status'];
+}
+export declare const StatusIcon: React.FC<StatusIconProps>;

package/dist/ts3.4/components/Subnav/Subnav.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Call, ControlStates } from '@storybook/instrumenter';
+import { Controls } from '../../Panel';
+export interface SubnavProps {
+    controls: Controls;
+    controlStates: ControlStates;
+    status: Call['status'];
+    storyFileName?: string;
+    onScrollToEnd?: () => void;
+}
+export declare const StyledIconButton: import("@emotion/styled-base").StyledComponent<any, Pick<any, string | number | symbol>, import("@storybook/theming").Theme>;
+export declare const Subnav: React.FC<SubnavProps>;

package/dist/ts3.4/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ADDON_ID = "storybook/interactions";
+export declare const TOOL_ID: string;
+export declare const PANEL_ID: string;

package/dist/ts3.4/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/ts3.4/mocks/index.d.ts

@@ -0,0 +1,2 @@
+import { CallStates, Call } from '@storybook/instrumenter';
+export declare const getCall: (status: CallStates) => Call;

package/dist/ts3.4/preset/argsEnhancers.d.ts

@@ -0,0 +1,3 @@
+import { Args } from '@storybook/addons';
+import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
+export declare const argsEnhancers: ArgsEnhancer<AnyFramework, Args>[];

package/dist/ts3.4/preset/checkActionsLoaded.d.ts

@@ -0,0 +1 @@
+export declare const checkActionsLoaded: (configDir: string) => void;

package/dist/ts3.4/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ts3.4/theme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Interaction Testing Theme
+ * PLACEHOLDER until SB is updated <3
+ */
+interface Colors {
+    pure?: {
+        gray?: any;
+    };
+}
+export declare const colors: Colors;
+export declare const theme: {
+    colors: Colors;
+};
+export default theme;

package/dist/ts3.9/Panel.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+export interface Controls {
+    start: (args: any) => void;
+    back: (args: any) => void;
+    goto: (args: any) => void;
+    next: (args: any) => void;
+    end: (args: any) => void;
+}
+interface AddonPanelProps {
+    active: boolean;
+}
+interface InteractionsPanelProps {
+    active: boolean;
+    controls: Controls;
+    controlStates: ControlStates;
+    interactions: (Call & {
+        status?: CallStates;
+    })[];
+    fileName?: string;
+    hasException?: boolean;
+    isPlaying?: boolean;
+    calls: Map<string, any>;
+    endRef?: React.Ref<HTMLDivElement>;
+    onScrollToEnd?: () => void;
+}
+export declare const AddonPanelPure: React.FC<InteractionsPanelProps>;
+export declare const Panel: React.FC<AddonPanelProps>;
+export {};

package/dist/ts3.9/Tool.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Tool: () => JSX.Element;

package/dist/ts3.9/components/AccountForm/AccountForm.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export interface AccountFormResponse {
+    success: boolean;
+}
+export interface AccountFormValues {
+    email: string;
+    password: string;
+}
+export declare type AccountFormProps = {
+    passwordVerification?: boolean;
+    onSubmit?: (values: AccountFormValues) => void;
+    onTransactionStart?: (values: AccountFormValues) => void;
+    onTransactionEnd?: (values: AccountFormResponse) => void;
+};
+export declare const AccountForm: FC<AccountFormProps>;

package/dist/ts3.9/components/Interaction/Interaction.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Call, ControlStates } from '@storybook/instrumenter';
+import { Controls } from '../../Panel';
+export declare const Interaction: ({ call, callsById, controls, controlStates, }: {
+    call: Call;
+    callsById: Map<Call['id'], Call>;
+    controls: Controls;
+    controlStates: ControlStates;
+}) => JSX.Element;

package/dist/ts3.9/components/List.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type Item = {
+    title: string;
+    description: string;
+};
+interface ListItemProps {
+    item: Item;
+}
+export declare const ListItem: React.FC<ListItemProps>;
+interface ListProps {
+    items: Item[];
+}
+export declare const List: React.FC<ListProps>;
+export {};

package/dist/ts3.9/components/MatcherResult.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Received: ({ value, parsed }: {
+    value: any;
+    parsed?: boolean;
+}) => JSX.Element;
+export declare const Expected: ({ value, parsed }: {
+    value: any;
+    parsed?: boolean;
+}) => JSX.Element;
+export declare const MatcherResult: ({ message }: {
+    message: string;
+}) => JSX.Element;

package/dist/ts3.9/components/MethodCall.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { Call, ElementRef } from '@storybook/instrumenter';
+export declare const Node: ({ value, nested, callsById, ...props }: {
+    [props: string]: any;
+    value: any;
+    nested?: boolean;
+    callsById?: Map<Call['id'], Call>;
+}) => JSX.Element;
+export declare const NullNode: (props: object) => JSX.Element;
+export declare const UndefinedNode: (props: object) => JSX.Element;
+export declare const StringNode: ({ value, ...props }: {
+    value: string;
+}) => JSX.Element;
+export declare const NumberNode: ({ value, ...props }: {
+    value: number;
+}) => JSX.Element;
+export declare const BooleanNode: ({ value, ...props }: {
+    value: boolean;
+}) => JSX.Element;
+export declare const ArrayNode: ({ value, nested }: {
+    value: any[];
+    nested?: boolean;
+}) => JSX.Element;
+export declare const ObjectNode: ({ value, nested }: {
+    value: object;
+    nested?: boolean;
+}) => JSX.Element;
+export declare const ClassNode: ({ value }: {
+    value: Record<string, any>;
+}) => JSX.Element;
+export declare const FunctionNode: ({ value }: {
+    value: Function;
+}) => JSX.Element;
+export declare const ElementNode: ({ value }: {
+    value: ElementRef['__element__'];
+}) => JSX.Element;
+export declare const DateNode: ({ value }: {
+    value: Date;
+}) => JSX.Element;
+export declare const ErrorNode: ({ value }: {
+    value: Error;
+}) => JSX.Element;
+export declare const RegExpNode: ({ value }: {
+    value: RegExp;
+}) => JSX.Element;
+export declare const SymbolNode: ({ value }: {
+    value: symbol;
+}) => JSX.Element;
+export declare const OtherNode: ({ value }: {
+    value: any;
+}) => JSX.Element;
+export declare const MethodCall: ({ call, callsById, }: {
+    call: Call;
+    callsById: Map<Call['id'], Call>;
+}) => JSX.Element;

package/dist/ts3.9/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Call } from '@storybook/instrumenter';
+export interface StatusBadgeProps {
+    status: Call['status'];
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/ts3.9/components/StatusIcon/StatusIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IconsProps } from '@storybook/components';
+import { Call } from '@storybook/instrumenter';
+export interface StatusIconProps extends IconsProps {
+    status: Call['status'];
+}
+export declare const StatusIcon: React.FC<StatusIconProps>;

package/dist/ts3.9/components/Subnav/Subnav.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Call, ControlStates } from '@storybook/instrumenter';
+import { Controls } from '../../Panel';
+export interface SubnavProps {
+    controls: Controls;
+    controlStates: ControlStates;
+    status: Call['status'];
+    storyFileName?: string;
+    onScrollToEnd?: () => void;
+}
+export declare const StyledIconButton: import("@emotion/styled-base").StyledComponent<any, Pick<any, string | number | symbol>, import("@storybook/theming").Theme>;
+export declare const Subnav: React.FC<SubnavProps>;

package/dist/ts3.9/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ADDON_ID = "storybook/interactions";
+export declare const TOOL_ID: string;
+export declare const PANEL_ID: string;

package/dist/ts3.9/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/ts3.9/mocks/index.d.ts

@@ -0,0 +1,2 @@
+import { CallStates, Call } from '@storybook/instrumenter';
+export declare const getCall: (status: CallStates) => Call;

package/dist/ts3.9/preset/argsEnhancers.d.ts

@@ -0,0 +1,3 @@
+import { Args } from '@storybook/addons';
+import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
+export declare const argsEnhancers: ArgsEnhancer<AnyFramework, Args>[];

package/dist/ts3.9/preset/checkActionsLoaded.d.ts

@@ -0,0 +1 @@
+export declare const checkActionsLoaded: (configDir: string) => void;

package/dist/ts3.9/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ts3.9/theme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Interaction Testing Theme
+ * PLACEHOLDER until SB is updated <3
+ */
+interface Colors {
+    pure?: {
+        gray?: any;
+    };
+}
+export declare const colors: Colors;
+export declare const theme: {
+    colors: Colors;
+};
+export default theme;