Add 29 example layouts for the v0.9 basic catalog

[jacobsimionato]

Description

This PR adds 29 example layouts to the v0.9 basic_catalog specification. The layouts were adapted from the gallery source code at tools/composer/src/data/gallery/** into the v0.9 server_to_client_list.json format.

Key mappings handled during the transformation:

• Replaced ProgressBar with Slider
• Mapped properties: alignment to align, distribution to justify, and usageHint to variant
• Re-mapped baseline alignments to the supported start enum
• Restructured action: 'name' strings into object structures {"event": {"name": "...", "context": {}}}

These example files provide integration scenarios and test beds for implementations of the v0.9 basic_catalog.

Pre-launch Checklist

• I signed the CLA.
• I read the Contributors Guide.
• I read the Style Guide.
• I have added updates to the CHANGELOG.
• I updated/added relevant documentation.
• My code changes (if any) have tests.

[gemini-code-assist]

Code Review

This pull request is a great initiative to add a comprehensive set of 29 example layouts for the v0.9 basic catalog, which will be very valuable for integration and testing. Overall, the structure of the examples is good. However, I've identified a few critical issues and areas for improvement across the new files:

• Schema Violations: There are widespread schema violations, particularly with invalid icon names and the incorrect use of the action property on TextField components. These are critical as they will cause rendering failures.
• Security: The login form example has a security flaw where the password field is not obscured.
• Maintainability & Scalability: Several examples use hardcoded lists of components instead of the more robust and scalable templating feature. This makes them brittle to changes in the data model.
• Clarity: In one case, a component ID is misleading, which impacts code clarity.

I've provided specific comments and suggestions to address these points. Applying these changes will significantly improve the quality and correctness of these examples.

_{Note: Security Review has been skipped due to the limited scope of the PR.}

[gemini-code-assist]

The icon name "flight" is not valid according to the basic_catalog.json schema. Please use one of the icon names defined in the catalog's enum. For example, you could use send, which can represent a paper plane.

        {
          "id": "flight-indicator",
          "component": "Icon",
          "name": "send"
        }

[gemini-code-assist]

The action property is not valid for a TextField component according to the basic_catalog.json schema. Input changes are handled via two-way data binding, and action is typically reserved for components like Button that trigger a specific event.

        {
          "id": "email-field",
          "component": "TextField",
          "value": {
            "path": "/email"
          },
          "placeholder": "Email address",
          "label": "Email"
        },

[gemini-code-assist]

The password-field component has two issues:

1. It's a TextField for a password but doesn't use the obscured variant. This will cause the password to be displayed in plain text as the user types, which is a security vulnerability.
2. The action property is not valid for a TextField component according to the basic_catalog.json schema. Input changes are handled via two-way data binding, and action is typically reserved for components like Button.

        {
          "id": "password-field",
          "component": "TextField",
          "value": {
            "path": "/password"
          },
          "placeholder": "Password",
          "label": "Password",
          "variant": "obscured"
        },

[gemini-code-assist]

The icon name "location_on" is not valid. It seems you are using snake_case, but the basic_catalog.json schema specifies icon names in camelCase. The correct name is locationOn. This casing issue is present for other icons in the examples as well.

        {
          "id": "location-icon",
          "component": "Icon",
          "name": "locationOn"
        }

[gemini-code-assist]

The forecast-row component and its children (day1 through day5) are hardcoded to display a five-day forecast. This implementation is not scalable and will break or render incorrectly if the forecast data array has a different number of items.

A better approach is to use the dynamic list templating feature. This involves:

1. Defining a single template component for a forecast day.
2. Binding the children property of forecast-row to the /forecast data array, referencing the template.
3. Using relative paths within the template to bind to item properties like icon and temp.

This makes the layout robust and adaptable to data of any length.

        {
          "id": "forecast-row",
          "component": "Row",
          "children": {
            "path": "/forecast",
            "componentId": "forecast-day-template"
          },
          "justify": "spaceAround"
        },
        {
          "id": "forecast-day-template",
          "component": "Column",
          "children": [
            "day-icon",
            "day-temp"
          ],
          "align": "center"
        },
        {
          "id": "day-icon",
          "component": "Text",
          "text": {
            "path": "icon"
          },
          "variant": "h3"
        },
        {
          "id": "day-temp",
          "component": "Text",
          "text": {
            "path": "temp"
          },
          "variant": "caption"
        }

[gemini-code-assist]

The component with id: "events-list" is a Divider. This name is misleading as it suggests a list of events, while the component is just a visual separator. For better clarity and maintainability, the ID should reflect its purpose (e.g., divider). Please also update the reference in the children array of the main-column component.

        {
          "id": "divider",
          "component": "Divider"
        }