Added some basic interactions stories

code/addons/interactions/template/stories/basics.stories.ts

@@ -0,0 +1,75 @@
+/* eslint-disable jest/no-standalone-expect */
+import globalThis from 'global';
+import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export default {
+  component: globalThis.Components.Form,
+  argTypes: {
+    onSuccess: { type: 'function' },
+  },
+};
+
+export const Type = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'test');
+  },
+};
+
+export const Step = {
+  play: async (context) => {
+    await context.step('Enter value', async () => Type.play(context));
+  },
+};
+
+export const Click = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await fireEvent.click(canvas.getByTestId('succeed'));
+  },
+};
+
+export const Callback = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const canvas = within(canvasElement);
+    await step('Enter value', async () => Type.play(context));
+
+    await step('Click checkbox', async () => Click.play(context));
+
+    await step('Submit', async () => {
+      await fireEvent.click(canvas.getByRole('button'));
+    });
+
+    await expect(args.onSuccess).toHaveBeenCalled();
+  },
+};
+
+export const WaitFor = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const canvas = within(canvasElement);
+    await step('Enter value', async () => Type.play(context));
+
+    await step('Submit', async () => {
+      await fireEvent.click(canvas.getByRole('button'));
+    });
+
+    await expect(args.onSuccess).not.toHaveBeenCalled();
+
+    await waitFor(
+      async function () {
+        await canvas.getByTestId("Submitted 'test' when not allowed!");
+      },
+      { timeout: 2000 }
+    );
+  },
+};
+
+export const Hover = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.hover(canvas.getByRole('button'));
+  },
+};

code/renderers/react/template/components/Form.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const Form = ({ onSuccess }) => {
+  const [value, setValue] = useState('');
+  const [succeed, setSucceed] = useState(false);
+  const [error, setError] = useState(null);
+
+  function onSubmit(event) {
+    event.preventDefault();
+    if (succeed) {
+      setError(null);
+      onSuccess(value);
+    } else {
+      setTimeout(() => {
+        setError(`Submitted '${value}' when not allowed!`);
+      }, 1000);
+    }
+  }
+
+  return (
+    <form id="interaction-test-form" onSubmit={onSubmit}>
+      <style>{`
+        #interaction-test-form button:hover {
+          background: red;
+        }
+      `}</style>
+      <label>
+        Enter Value
+        <input
+          type="text"
+          data-testid="value"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </label>
+      <label>
+        Should succeed?
+        <input
+          type="checkbox"
+          data-testid="succeed"
+          value={succeed}
+          onChange={(event) => setSucceed(event.target.checked)}
+        />
+      </label>
+      <button type="submit">Submit</button>
+      {error && <p data-testid="error">{error}</p>}
+    </form>
+  );
+};
+
+Form.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+};

code/renderers/react/template/components/index.js

@@ -2,5 +2,6 @@ import globalThis from 'global';
 
 import { Button } from './Button.jsx';
 import { Pre } from './Pre.jsx';
+import { Form } from './Form.jsx';
 
-globalThis.Components = { Button, Pre };
+globalThis.Components = { Button, Pre, Form };