From dea2d7baaea9a2284212402da0f6d70a474bafba Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 10 Jan 2025 15:51:53 +0300
Subject: [PATCH] Add args parsing

---
 .../VImageResult/meta/VImageResult.stories.ts | 14 +++++++++++++-
 .../src/components/meta/VButton.stories.js    | 19 ++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/VImageResult/meta/VImageResult.stories.ts b/frontend/src/components/VImageResult/meta/VImageResult.stories.ts
index 3cce2e82907..6c78ec2b85e 100644
--- 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
index e850a47d89c..3c36b63801c 100644
--- 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"
             ),