docs: useargs

.storybook/preview-head.html

@@ -12,7 +12,7 @@
 
   #key { width: 100%; }
 
-  [label="Publishable Key"] {
+  [data-arg] {
     width: 100%;
   }
 
@@ -24,4 +24,16 @@
     grid-gap: 12px;
     grid-template-areas: 'stripe button';
   }
+
+  .cardholder-inputs {
+    align-items: center;
+    display: grid;
+    grid-gap: 12px;
+  }
+
+  @media (min-width: 800px) {
+    .cardholder-inputs {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
 </style>

.storybook/preview.js

@@ -1,7 +1,8 @@
-import { setCustomElements } from '@web/storybook-prebuilt/web-components.js';
+import { setCustomElementsManifest } from '@web/storybook-prebuilt/web-components.js';
+import { useArgs, useEffect } from '@web/storybook-prebuilt/client-api.js';
 import cem from '../custom-elements.json';
 
-setCustomElements(cem);
+setCustomElementsManifest(cem);
 
 export const parameters = {
   controls: { expanded: true },
@@ -13,3 +14,27 @@ export const parameters = {
     },
   },
 };
+
+const listeners = new WeakSet();
+
+export const decorators = [
+  story => {
+    const [, updateArgs] = useArgs();
+    useEffect(() => {
+      for (const input of document.querySelectorAll('[data-arg]')) {
+        if (listeners.has(input))
+          return;
+        // prevent storybook ui from responding to keyevents in this input
+        input.addEventListener('keyup', e => e.stopPropagation());
+        input.addEventListener('keydown', e => e.stopPropagation());
+        // update the args
+        input.addEventListener('change', e => {
+          updateArgs({ [e.target.dataset.arg]: e.target.value });
+          localStorage.setItem(`stripe-elements-demo-${e.target.dataset.arg}`, e.target.value);
+        });
+        listeners.add(input);
+      }
+    });
+    return story();
+  }
+];