make the html components more feature complete

code/renderers/html/src/render.ts

@@ -31,6 +31,9 @@ export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
 
     return output;
   }
+  if (typeof Component === 'function') {
+    return Component(args, context);
+  }
 
   console.warn(dedent`
     Storybook's HTML renderer only supports rendering DOM elements and strings.

code/renderers/html/src/types.ts

@@ -1,4 +1,4 @@
-import type { StoryContext as DefaultStoryContext } from '@storybook/csf';
+import type { ArgsStoryFn, StoryContext as DefaultStoryContext } from '@storybook/csf';
 import { parameters } from './config';
 
 export type { RenderContext } from '@storybook/core-client';
@@ -21,7 +21,7 @@ export interface ShowErrorArgs {
 }
 
 export type HtmlFramework = {
-  component: string | HTMLElement;
+  component: string | HTMLElement | ArgsStoryFn<HtmlFramework>;
   storyResult: StoryFnHtmlReturnType;
 };
 

code/renderers/html/template/components/Button.js

@@ -1 +1,9 @@
-export const Button = `<button>Click me</button>`;
+/* eslint-disable no-undef */
+export const Button = (args) => {
+  const button = document.createElement('button');
+
+  button.innerHTML = args.children;
+  button.addEventListener('click', args.onClick);
+
+  return button;
+};

code/renderers/html/template/components/Form.js

@@ -1 +1,24 @@
-export const Form = `<form></form>`;
+/* eslint-disable no-undef */
+export const Form = ({ complete, value, setValue, onSubmit }) => {
+  const container = document.createElement('div');
+
+  container.innerHTML = `
+    <form id="interaction-test-form" @submit.prevent="onSubmit">
+      <label>
+        Enter Value
+        <input type="text" data-testid="value" required />
+      </label>
+      <button type="submit">Submit</button>
+      ${complete ? '<p>Completed!!</p>' : ''}
+    </form>
+  `;
+
+  const form = container.querySelector('form');
+  form.onSubmit = (e) => onSubmit();
+
+  const input = container.querySelector('[data-testid="value"]');
+  input.value = value;
+  input.onInput = (e) => setValue(e.target.value);
+
+  return container;
+};

code/renderers/html/template/components/Pre.js

@@ -1 +1 @@
-export const Pre = `<pre></pre>`;
+export const Pre = (args) => `<pre>${JSON.stringify(args, null, 2)}</pre>`;