fix tsunamiconfig, expose data in tabletest

Author: sawka

tsunami/demo/tabletest/app.go

@@ -19,8 +19,8 @@ type Person struct {
 // Create the table component for Person data
 var PersonTable = ui.MakeTableComponent[Person]("PersonTable")
 
-// Sample data
-var sampleData = []Person{
+// Sample data exposed as DataAtom for external system access
+var sampleData = app.DataAtom("sampleData", []Person{
 	{Name: "Alice Johnson", Age: 28, Email: "alice@example.com", City: "New York"},
 	{Name: "Bob Smith", Age: 34, Email: "bob@example.com", City: "Los Angeles"},
 	{Name: "Carol Davis", Age: 22, Email: "carol@example.com", City: "Chicago"},
@@ -31,7 +31,7 @@ var sampleData = []Person{
 	{Name: "Henry Taylor", Age: 33, Email: "henry@example.com", City: "San Diego"},
 	{Name: "Ivy Chen", Age: 26, Email: "ivy@example.com", City: "Dallas"},
 	{Name: "Jack Anderson", Age: 31, Email: "jack@example.com", City: "San Jose"},
-}
+})
 
 // The App component is the required entry point for every Tsunami application
 var App = app.DefineComponent("App", func(_ struct{}) any {
@@ -93,7 +93,7 @@ var App = app.DefineComponent("App", func(_ struct{}) any {
 			"className": "bg-gray-800 p-4 rounded-lg",
 		},
 			PersonTable(ui.TableProps[Person]{
-				Data:        sampleData,
+				Data:        sampleData.Get(),
 				Columns:     columns,
 				OnRowClick:  handleRowClick,
 				OnSort:      handleSort,

tsunami/demo/tabletest/static/tw.css

@@ -10,6 +10,7 @@
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
@@ -404,9 +405,6 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .cursor-not-allowed {
-    cursor: not-allowed;
-  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -735,6 +733,9 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
   .text-gray-300 {
     color: var(--color-gray-300);
   }

tsunami/demo/tsunamiconfig/app.go

@@ -1,7 +1,6 @@
 package main
 
 import (
-	"context"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -137,7 +136,7 @@ func postConfig(baseURL, jsonContent string) error {
 }
 
 var URLInput = app.DefineComponent("URLInput",
-	func(ctx context.Context, props URLInputProps) any {
+	func(props URLInputProps) any {
 		keyHandler := &vdom.VDomFunc{
 			Type: "func",
 			Fn: func(event vdom.VDomEvent) {
@@ -179,7 +178,7 @@ var URLInput = app.DefineComponent("URLInput",
 )
 
 var JSONEditor = app.DefineComponent("JSONEditor",
-	func(ctx context.Context, props JSONEditorProps) any {
+	func(props JSONEditorProps) any {
 		if props.Value == "" && props.Placeholder == "" {
 			return vdom.H("div", map[string]any{
 				"className": "text-slate-400 text-center py-8",
@@ -216,7 +215,7 @@ var JSONEditor = app.DefineComponent("JSONEditor",
 )
 
 var ErrorDisplay = app.DefineComponent("ErrorDisplay",
-	func(ctx context.Context, props ErrorDisplayProps) any {
+	func(props ErrorDisplayProps) any {
 		if props.Message == "" {
 			return nil
 		}
@@ -235,7 +234,7 @@ var ErrorDisplay = app.DefineComponent("ErrorDisplay",
 )
 
 var SuccessDisplay = app.DefineComponent("SuccessDisplay",
-	func(ctx context.Context, props SuccessDisplayProps) any {
+	func(props SuccessDisplayProps) any {
 		if props.Message == "" {
 			return nil
 		}
@@ -254,75 +253,75 @@ var SuccessDisplay = app.DefineComponent("SuccessDisplay",
 )
 
 var App = app.DefineComponent("App",
-	func(ctx context.Context, _ any) any {
+	func(_ struct{}) any {
 		app.UseSetAppTitle("Tsunami Config Manager")
 
 		// Get atom value once at the top
 		urlInput := serverURLAtom.Get()
-		jsonContent, setJSONContent, _ := app.UseState("")
-		errorMessage, setErrorMessage, _ := app.UseState("")
-		successMessage, setSuccessMessage, _ := app.UseState("")
-		isLoading, setIsLoading, _ := app.UseState(false)
-		lastFetch, setLastFetch, _ := app.UseState("")
-		currentBaseURL, setCurrentBaseURL, _ := app.UseState("")
+		jsonContent := app.UseLocal("")
+		errorMessage := app.UseLocal("")
+		successMessage := app.UseLocal("")
+		isLoading := app.UseLocal(false)
+		lastFetch := app.UseLocal("")
+		currentBaseURL := app.UseLocal("")
 
 		clearMessages := func() {
-			setErrorMessage("")
-			setSuccessMessage("")
+			errorMessage.Set("")
+			successMessage.Set("")
 		}
 
 		fetchConfigData := func() {
 			clearMessages()
 
-			baseURL, err := parseURL(urlInput)
+			baseURL, err := parseURL(serverURLAtom.Get())
 			if err != nil {
-				setErrorMessage(err.Error())
+				errorMessage.Set(err.Error())
 				return
 			}
 
-			setIsLoading(true)
-			setCurrentBaseURL(baseURL)
+			isLoading.Set(true)
+			currentBaseURL.Set(baseURL)
 
 			go func() {
 				defer func() {
-					setIsLoading(false)
+					isLoading.Set(false)
 					app.SendAsyncInitiation()
 				}()
 
 				content, err := fetchConfig(baseURL)
 				if err != nil {
-					setErrorMessage(err.Error())
+					errorMessage.Set(err.Error())
 					return
 				}
 
-				setJSONContent(content)
-				setLastFetch(time.Now().Format("2006-01-02 15:04:05"))
-				setSuccessMessage(fmt.Sprintf("Successfully fetched config from %s", baseURL))
+				jsonContent.Set(content)
+				lastFetch.Set(time.Now().Format("2006-01-02 15:04:05"))
+				successMessage.Set(fmt.Sprintf("Successfully fetched config from %s", baseURL))
 			}()
 		}
 
 		submitConfigData := func() {
-			if currentBaseURL == "" {
-				setErrorMessage("No base URL available. Please fetch config first.")
+			if currentBaseURL.Get() == "" {
+				errorMessage.Set("No base URL available. Please fetch config first.")
 				return
 			}
 
 			clearMessages()
-			setIsLoading(true)
+			isLoading.Set(true)
 
 			go func() {
 				defer func() {
-					setIsLoading(false)
+					isLoading.Set(false)
 					app.SendAsyncInitiation()
 				}()
 
-				err := postConfig(currentBaseURL, jsonContent)
+				err := postConfig(currentBaseURL.Get(), jsonContent.Get())
 				if err != nil {
-					setErrorMessage(fmt.Sprintf("Failed to submit config: %v", err))
+					errorMessage.Set(fmt.Sprintf("Failed to submit config: %v", err))
 					return
 				}
 
-				setSuccessMessage(fmt.Sprintf("Successfully submitted config to %s", currentBaseURL))
+				successMessage.Set(fmt.Sprintf("Successfully submitted config to %s", currentBaseURL.Get()))
 			}()
 		}
 
@@ -344,28 +343,28 @@ var App = app.DefineComponent("App",
 				Value:     urlInput,
 				OnChange:  serverURLAtom.Set,
 				OnSubmit:  fetchConfigData,
-				IsLoading: isLoading,
+				IsLoading: isLoading.Get(),
 			}),
 
 			ErrorDisplay(ErrorDisplayProps{
-				Message: errorMessage,
+				Message: errorMessage.Get(),
 			}),
 
 			SuccessDisplay(SuccessDisplayProps{
-				Message: successMessage,
+				Message: successMessage.Get(),
 			}),
 
-			vdom.If(lastFetch != "",
+			vdom.If(lastFetch.Get() != "",
 				vdom.H("div", map[string]any{
 					"className": "text-sm text-slate-400 mb-4",
-				}, fmt.Sprintf("Last fetched: %s from %s", lastFetch, currentBaseURL)),
+				}, fmt.Sprintf("Last fetched: %s from %s", lastFetch.Get(), currentBaseURL.Get())),
 			),
 
 			JSONEditor(JSONEditorProps{
-				Value:       jsonContent,
-				OnChange:    setJSONContent,
+				Value:       jsonContent.Get(),
+				OnChange:    jsonContent.Set,
 				OnSubmit:    submitConfigData,
-				IsLoading:   isLoading,
+				IsLoading:   isLoading.Get(),
 				Placeholder: "JSON configuration will appear here after fetching...",
 			}),
 		)