Fix: Give all widgets the name parameter h2oai#2350

Added name parameters to all applicable widgets
TODO: update doc description  to the affected types/members

ui/src/article.tsx

@@ -83,6 +83,8 @@ interface State {
   content?: S
   /** Collection of small buttons rendered under the title. */
   items?: Component[]
+  /** An identifying name for this component */
+  name?: S
 }
 
 export const View = bond(({ name, state, changed }: Model<State>) => {

ui/src/audio_annotator.tsx

@@ -26,6 +26,8 @@ export interface AudioAnnotatorItem {
   end: F
   /** The `name` of the audio annotator tag to refer to for the `label` and `color` of this item. */
   tag: S
+  /** An identifying name for this component */
+  name?: S
 }
 
 /**

ui/src/breadcrumbs.tsx

@@ -38,6 +38,8 @@ interface Breadcrumb {
 interface State {
   /** A list of `h2o_wave.types.Breadcrumb` instances to display. See `h2o_wave.ui.breadcrumb()` */
   items: Breadcrumb[]
+  /** An optional name for this card. */
+  name?: Id
 }
 
 const

ui/src/button.tsx

@@ -90,6 +90,8 @@ export interface MiniButtons {
   items: Component[]
   /** True if the component should be visible. Defaults to True. */
   visible?: B
+  /** An identifying name for this component. */
+  name?: S
 }
 
 /** Create a mini button - same as regular button, but smaller in size. */

ui/src/canvas.tsx

@@ -585,4 +585,3 @@ export const
   })
 
 cards.register('canvas', View)
-

ui/src/chat.tsx

@@ -48,37 +48,36 @@ const
       paddingLeft: 10,
       borderLeft: border(1, cssVar('$text3')),
     }
-  })
-
-/**
+  })/**
  * WARNING: Experimental and subject to change.
  * Do not use in production sites!
  *
  * Create a card that displays a chat room.
  * :icon "OfficeChat"
  */
 interface State {
-  /**
-   * The title for this card.
-   * :t "textbox"
-   * :value "Untitled Chat"
-   */
-  title: S
-  /**
-   * The data for this card.
-   * :t "record"
-   * :value {}
-   */
-  data: Rec
-  /**
-   * The maximum number of messages contained in this card. Defaults to 50.
-   * :t "spinbox"
-   * :value 50
-   * :min 10
-   * :max 10000
-   * :step 10
-   **/
-  capacity?: U
+    /**
+     * The title for this card.
+     * :t "textbox"
+     * :value "Untitled Chat"
+     */
+    title: S;
+    /**
+     * The data for this card.
+     * :t "record"
+     * :value {}
+     */
+    data: Rec;
+    /**
+     * The maximum number of messages contained in this card. Defaults to 50.
+     * :t "spinbox"
+     * :value 50
+     * :min 10
+     * :max 10000
+     * :step 10
+     **/
+    capacity?: U;
+
 }
 
 type ChatMessage = {

ui/src/chatbot.tsx

@@ -119,6 +119,8 @@ interface ChatbotMessage {
   content: S
   /* True if the message is from the user. */
   from_user: B
+  /** an optional identifying name for this component.*/
+  name?: S
 }
 
 /** Create a chat prompt suggestion displayed as button below the last response in the chatbot component. */

ui/src/defs.ts

@@ -60,116 +60,5 @@ export const cardDefs: CardDef[] = [
         "value": {}
       }
     ]
-  },
-  {
-    "view": "chat",
-    "icon": "OfficeChat",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Chat"
-      },
-      {
-        "name": "data",
-        "optional": false,
-        "t": "record",
-        "value": {}
-      },
-      {
-        "name": "capacity",
-        "optional": true,
-        "t": "spinbox",
-        "value": 50,
-        "min": 10,
-        "max": 10000,
-        "step": 10
-      }
-    ]
-  },
-  {
-    "view": "frame",
-    "icon": "PageAdd",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Frame"
-      },
-      {
-        "name": "path",
-        "optional": true,
-        "t": "textbox",
-        "value": ""
-      },
-      {
-        "name": "content",
-        "optional": true,
-        "t": "textarea",
-        "value": ""
-      }
-    ]
-  },
-  {
-    "view": "markdown",
-    "icon": "InsertTextBox",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Content"
-      },
-      {
-        "name": "content",
-        "optional": false,
-        "t": "textarea",
-        "value": "Hello, World!"
-      }
-    ]
-  },
-  {
-    "view": "markup",
-    "icon": "FileHTML",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Content"
-      },
-      {
-        "name": "content",
-        "optional": false,
-        "t": "textarea",
-        "value": "<div/>"
-      }
-    ]
   }
 ]

ui/src/editor.tsx

@@ -22,18 +22,17 @@ import { defaultLayoutDef, editorActionB, EditorActionT, LayoutDef, layoutDefs,
 import { cards } from './layout'
 import { FlexBox, Layout, layoutsB, Zone } from './meta'
 import { border, cssVar } from './theme'
-import { bond, contentB, wave } from './ui'
-
-/**
+import { bond, contentB, wave } from './ui'/**
  * WARNING: Experimental and subject to change.
  * Do not use in production sites!
  *
  * Create a card that enables WYSIWYG editing on a page.
  * Adding this card to a page makes the page editable by end-users.
  */
 interface State {
-  /** The editing mode. Defaults to `public`.*/
-  mode: 'public' | 'private'
+    /** The editing mode. Defaults to `public`.*/
+    mode: 'public' | 'private';
+
 }
 
 const

ui/src/flex.tsx

@@ -16,27 +16,27 @@ import { Data, Model, Rec, S } from './core'
 import React from 'react'
 import { cards, Repeat } from './layout'
 import { alignments, directions, justifications, wrappings } from './theme'
-import { bond } from './ui'
-
-/**
+import { bond } from './ui'/**
  * EXPERIMENTAL. DO NOT USE.
  * Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.
  **/
 interface State {
-  /** The child card type. */
-  item_view: S
-  /** The child card properties. */
-  item_props: Rec
-  /** Data for this card. */
-  data: Data
-  /** Layout direction. */
-  direction?: 'horizontal' | 'vertical'
-  /** Layout strategy for main axis. */
-  justify?: 'start' | 'end' | 'center' | 'between' | 'around'
-  /** Layout strategy for cross axis. */
-  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-  /** Wrapping strategy. */
-  wrap?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'
+    /** The child card type. */
+    item_view: S;
+    /** The child card properties. */
+    item_props: Rec;
+    /** Data for this card. */
+    data: Data;
+    /** Layout direction. */
+    direction?: 'horizontal' | 'vertical';
+    /** Layout strategy for main axis. */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around';
+    /** Layout strategy for cross axis. */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /** Wrapping strategy. */
+    wrap?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
+    /** An optional name for this card. */
+    name?: S;
 }
 
 const

ui/src/footer.tsx

@@ -43,17 +43,17 @@ const
         },
       }
     }
-  })
-
-/**
+  })/**
  * Render a page footer displaying a caption.
  * Footer cards are typically displayed at the bottom of a page.
  */
 interface State {
-  /** The caption. Supports markdown. **/
-  caption: S
-  /** The components displayed to the right of the caption. */
-  items?: Component[]
+    /** The caption. Supports markdown. **/
+    caption: S;
+    /** The components displayed to the right of the caption. */
+    items?: Component[];
+    /** The components displayed to the right of the caption. */
+    name?: S;
 }
 
 export const

ui/src/form.tsx

@@ -182,14 +182,16 @@ interface Inline {
   height?: S
   /** Container direction. Defaults to 'row'. */
   direction?: 'row' | 'column'
-}
-
-/** Create a form. */
+}/** Create a form. */
 interface State {
-  /** The components in this form. */
-  items: Packed<Component[]>
-  /** The title for this card. */
-  title?: S
+    /** The components in this form. */
+    items: Packed<Component[]>;
+    /** The title for this card. */
+    title?: S;
+    /**
+     * An optional name for this card.
+     */
+    name?: S;
 }
 
 const