From 037dc78a73d367cdda389b4130e1b500d53dc2bc Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 12 Feb 2024 22:13:32 +0100
Subject: [PATCH] Add option to randomize input arguments in component debugger

---
 package-lock.json                     |  8 ++++----
 package.json                          |  2 +-
 src/back/routes/components.css        |  2 +-
 src/back/routes/components.sreact.tsx | 10 +++++++++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2fef5d2..025904e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
 				"@hotwired/turbo": "^8.0.2",
 				"@koa/router": "^12.0.1",
 				"@playwright/test": "^1.36.1",
-				"@sealcode/jdd": "^0.2.13",
+				"@sealcode/jdd": "^0.2.14",
 				"@sealcode/sealgen": "^0.12.8",
 				"@sealcode/ts-predicates": "^0.4.3",
 				"@types/kill-port": "^2.0.0",
@@ -1276,9 +1276,9 @@
 			}
 		},
 		"node_modules/@sealcode/jdd": {
-			"version": "0.2.13",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.2.13.tgz",
-			"integrity": "sha512-Jm5Vku5hfpImZMrq03WRsf2vh9DRJDThz9EnGgVGSrQVa9NhnibUfR4KcH26+qzxyya1JbtGCJXrhdueSmRpag==",
+			"version": "0.2.14",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.2.14.tgz",
+			"integrity": "sha512-jpPY17WnYqmQLg2K4V1qX9vCi6ti9nLwS7YOOXEZH+6HOxTuC43qeoHun0Z8vKez33dha7Z5n5z9XwXylwKxdg==",
 			"dependencies": {
 				"@sealcode/ts-predicates": "^0.5.3",
 				"marked": "^12.0.0",
diff --git a/package.json b/package.json
index 22d3279..d06c710 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
 		"@hotwired/turbo": "^8.0.2",
 		"@koa/router": "^12.0.1",
 		"@playwright/test": "^1.36.1",
-		"@sealcode/jdd": "^0.2.13",
+		"@sealcode/jdd": "^0.2.14",
 		"@sealcode/sealgen": "^0.12.8",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"@types/kill-port": "^2.0.0",
diff --git a/src/back/routes/components.css b/src/back/routes/components.css
index 26d4d13..7661363 100644
--- a/src/back/routes/components.css
+++ b/src/back/routes/components.css
@@ -34,6 +34,6 @@
 
 .component-preview {
 	* {
-		transition: all 200ms;
+		transition: all 150ms;
 	}
 }
diff --git a/src/back/routes/components.sreact.tsx b/src/back/routes/components.sreact.tsx
index 3936913..ccc01a8 100644
--- a/src/back/routes/components.sreact.tsx
+++ b/src/back/routes/components.sreact.tsx
@@ -56,6 +56,14 @@ const actions = {
 			args: component?.getExampleValues() || {},
 		};
 	},
+	randomize_args: (state: State, inputs: Record<string, string>) => {
+		const component_name = inputs.component;
+		const component = registry.get(component_name);
+		return {
+			...state,
+			args: component?.getExampleValues() || {},
+		};
+	},
 } as const;
 
 type State = {
@@ -242,7 +250,7 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
 							</option>
 						))}
 					</select>
-
+					{this.makeActionButton(state, "randomize_args")}
 					<fieldset class="component-preview-parameters">
 						<legend>Parameters</legend>
 						{Object.entries(component.getArguments()).map(([arg_name, arg]) =>