Add args parsing

WordPress · Jan 10, 2025 · 4b4fa7d · 4b4fa7d
1 parent 3597d68
commit 4b4fa7d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts
@@ -33,7 +33,22 @@ const Template: StoryTemplate = {
   render: (args) => ({
     components: { VNotificationBanner },
     setup() {
-      return () => h(VNotificationBanner, { ...args }, { default: () => text })
+      const urlParams = new URLSearchParams(window.location.search)
+      const urlArgs =
+        urlParams
+          .get("args")
+          ?.split(";")
+          .map((arg) => arg.split(":")) ?? []
+      const storyArgs = { ...args } as Record<string, unknown>
+      for (const [key, value] of urlArgs) {
+        storyArgs[key] = value
+      }
+      return () =>
+        h(
+          VNotificationBanner,
+          { ...(storyArgs as typeof args) },
+          { default: () => text }
+        )
     },
   }),
 }

diff --git a/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js b/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js
@@ -32,14 +32,24 @@ export const Default = {
   render: (args) => ({
     components: { VSearchTypes },
     setup() {
+      const urlParams = new URLSearchParams(window.location.search)
+      const urlArgs =
+        urlParams
+          .get("args")
+          ?.split(";")
+          .map((arg) => arg.split(":")) ?? []
+      const storyArgs = { ...args }
+      for (const [key, value] of urlArgs) {
+        storyArgs[key] = value
+      }
       return () =>
         h(
           "div",
           {
-            style: args.size === "small" ? "width: max-content;" : "",
+            style: storyArgs.size === "small" ? "width: max-content;" : "",
             class: "wrapper p-2",
           },
-          [h(VSearchTypes, args)]
+          [h(VSearchTypes, storyArgs)]
         )
     },
   }),

diff --git a/frontend/src/components/VImageResult/meta/VImageResult.stories.ts b/frontend/src/components/VImageResult/meta/VImageResult.stories.ts
@@ -18,9 +18,21 @@ export const Default: Story = {
   render: (args) => ({
     components: { VImageResult },
     setup() {
+      const urlParams = new URLSearchParams(window.location.search)
+      const urlArgs =
+        urlParams
+          .get("args")
+          ?.split(";")
+          .map((arg) => arg.split(":")) ?? []
+      const storyArgs = { ...args } as Record<string, unknown>
+      for (const [key, value] of urlArgs) {
+        storyArgs[key] = value
+      }
       return () =>
         h("div", { class: "p-4 image-wrapper max-w-80" }, [
-          h("ol", { class: "flex flex-wrap gap-4" }, [h(VImageResult, args)]),
+          h("ol", { class: "flex flex-wrap gap-4" }, [
+            h(VImageResult, storyArgs as typeof args),
+          ]),
         ])
     },
   }),

diff --git a/frontend/src/components/meta/VButton.stories.js b/frontend/src/components/meta/VButton.stories.js
@@ -51,7 +51,16 @@ export default {
 const Template = (args) => ({
   components: { VButton },
   setup() {
-    const { size, variant, ...rest } = args
+    const urlParams = new URLSearchParams(window.location.search)
+    const urlArgs =
+      urlParams
+        .get("args")
+        ?.split(";")
+        .map((arg) => arg.split(":")) ?? []
+    const storyArgs = { ...args }
+    for (const [key, value] of urlArgs) {
+      storyArgs[key] = value
+    }
     return () =>
       h("div", { class: "flex" }, [
         h(
@@ -60,18 +69,18 @@ const Template = (args) => ({
             id: "wrapper",
             class: [
               "px-4 h-16 flex items-center justify-center",
-              variant.startsWith("transparent") ? "bg-surface" : "bg-default",
+              args.variant.startsWith("transparent")
+                ? "bg-surface"
+                : "bg-default",
             ],
           },
           [
             h(
               VButton,
               {
-                size,
-                variant,
                 class: "description-bold",
                 href: "/",
-                ...rest,
+                ...storyArgs,
               },
               () => "Code is Poetry"
             ),