fix: styles in storybook

package.json

@@ -12,6 +12,8 @@
 		"test": "npm run --if-present -ws test",
 		"lint": "npm run --if-present -ws lint",
 		"dev": "npm run -w streamsync-ui dev",
+		"storybook": "npm run -w streamsync-ui storybook",
+		"storybook.build": "npm run -w streamsync-ui storybook.build",
 		"custom.dev": "npm run -w streamsync-ui dev",
 
 		"cli:test": "pytest tests -o log_cli=true ",

src/ui/.gitignore

@@ -3,5 +3,6 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+storybook-static/
 
-*storybook.log
+*storybook.log

src/ui/tools/generator_storybook.mjs

@@ -60,6 +60,24 @@ function generateDescription(field) {
 	return "";
 }
 
+function generateStyles(component) {
+	return Object.entries(component.fields)
+		.map(([key, field]) => {
+			if (field.category === "Style") {
+				return `						"--${key}": args.${key},`;
+			}
+			return null;
+		})
+		.filter((x) => x !== null)
+		.join("\n");
+}
+
+function generateStylesInfill(component) {
+	const styles = generateStyles(component);
+	return `					...(Object.fromEntries(Object.entries({
+${styles}
+					}).filter(([, value]) => value !== undefined))),`;
+}
 function mappedControl(field) {
 	switch (field.type) {
 		case "Number":
@@ -146,7 +164,7 @@ export const Sample: Story = {
 		components: { ${component.nameTrim} },
 		setup() {
 			const ss = generateCore();
-			args.rootStyle = computed(() => {
+			const rootStyle = computed(() => {
 				return {
 					"--accentColor": "#29cf00",
 					"--buttonColor": "#ffffff",
@@ -156,6 +174,16 @@ export const Sample: Story = {
 					"--buttonTextColor": "#202829",
 					"--secondaryTextColor": "#5d7275",
 					"--containerBackgroundColor": "#ffffff",
+${generateStylesInfill(component)}
+					"width": "100%",
+					"outline": "none",
+					"--notificationsDisplacement": "0",
+					"font-family": "Inter, sans-serif",
+					"font-size": "0.8rem",
+					"color": "var(--primaryTextColor)",
+					"background": "white",
+					"min-height": "100%",
+					"isolation": "isolate",
 				};
 			});
 			provide(injectionKeys.evaluatedFields, {
@@ -168,10 +196,10 @@ ${generateArgWrap(component)}
 			provide(injectionKeys.instancePath, [{componentId: "test", instanceNumber: 0}]);
 			provide(injectionKeys.flattenedInstancePath, "test:0");
 			provide(injectionKeys.core, ss as any);
-			return { args };
+			return { args, rootStyle };
 		},
 		template:
-			'<${component.nameTrim} :style="args.rootStyle" :prop-name="args.propName" />',
+			'<div :style="rootStyle"><${component.nameTrim} /></div>',
 	}),
 };
 	`;