Skip to content

refactor(web_core): centralize layout mapping logic #1030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ppazosp wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactor(web_core): centralize layout mapping logic #1030

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
531b5f8
refactor[web_core]: centralize layout mapping logic (fixes #840)
ppazosp Mar 29, 2026
470fe86
refactor[web_core]: use object maps for layout + add tests per review
ppazosp Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions renderers/angular/src/v0_9/catalog/basic/column.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';
import { ComponentHostComponent } from '../../core/component-host.component';
import { BoundProperty } from '../../core/types';

import { mapJustify, mapAlign } from '@a2ui/web_core/v0_9';
import { getNormalizedPath } from '../../core/utils';

/**
Expand Down Expand Up @@ -76,8 +76,8 @@ export class ColumnComponent {
componentId = input<string>();
dataContextPath = input<string>('/');

protected justify = computed(() => this.props()['justify']?.value());
protected align = computed(() => this.props()['align']?.value());
protected justify = computed(() => mapJustify(this.props()['justify']?.value()));
protected align = computed(() => mapAlign(this.props()['align']?.value()));

protected children = computed(() => {
const raw = this.props()['children']?.value() || [];
Expand Down
5 changes: 3 additions & 2 deletions renderers/angular/src/v0_9/catalog/basic/row.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';
import { ComponentHostComponent } from '../../core/component-host.component';
import { BoundProperty } from '../../core/types';
import { mapJustify, mapAlign } from '@a2ui/web_core/v0_9';
import { getNormalizedPath } from '../../core/utils';

/**
Expand Down Expand Up @@ -75,8 +76,8 @@ export class RowComponent {
componentId = input<string>();
dataContextPath = input<string>('/');

protected justify = computed(() => this.props()['justify']?.value());
protected align = computed(() => this.props()['align']?.value());
protected justify = computed(() => mapJustify(this.props()['justify']?.value()));
protected align = computed(() => mapAlign(this.props()['align']?.value()));

protected children = computed(() => {
const raw = this.props()['children']?.value() || [];
Expand Down
37 changes: 1 addition & 36 deletions renderers/lit/src/v0_9/catalogs/minimal/components/Column.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,44 +19,9 @@ import { customElement } from "lit/decorators.js";
import { map } from "lit/directives/map.js";
import { styleMap } from "lit/directives/style-map.js";
import { ColumnApi } from "@a2ui/web_core/v0_9/basic_catalog";
import { mapJustify, mapAlign } from "@a2ui/web_core/v0_9";
import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";

function mapJustify(justify: string | undefined): string {
switch (justify) {
case "start":
return "flex-start";
case "center":
return "center";
case "end":
return "flex-end";
case "spaceBetween":
return "space-between";
case "spaceAround":
return "space-around";
case "spaceEvenly":
return "space-evenly";
case "stretch":
return "stretch";
default:
return "flex-start";
}
}

function mapAlign(align: string | undefined): string {
switch (align) {
case "start":
return "flex-start";
case "center":
return "center";
case "end":
return "flex-end";
case "stretch":
return "stretch";
default:
return "stretch";
}
}

@customElement("a2ui-column")
export class A2uiColumnElement extends A2uiLitElement<typeof ColumnApi> {
protected createController() {
Expand Down
37 changes: 1 addition & 36 deletions renderers/lit/src/v0_9/catalogs/minimal/components/Row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,44 +19,9 @@ import { customElement } from "lit/decorators.js";
import { map } from "lit/directives/map.js";
import { styleMap } from "lit/directives/style-map.js";
import { RowApi } from "@a2ui/web_core/v0_9/basic_catalog";
import { mapJustify, mapAlign } from "@a2ui/web_core/v0_9";
import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";

function mapJustify(justify: string | undefined): string {
switch (justify) {
case "start":
return "flex-start";
case "center":
return "center";
case "end":
return "flex-end";
case "spaceBetween":
return "space-between";
case "spaceAround":
return "space-around";
case "spaceEvenly":
return "space-evenly";
case "stretch":
return "stretch";
default:
return "flex-start";
}
}

function mapAlign(align: string | undefined): string {
switch (align) {
case "start":
return "flex-start";
case "center":
return "center";
case "end":
return "flex-end";
case "stretch":
return "stretch";
default:
return "stretch";
}
}

@customElement("a2ui-row")
export class A2uiRowElement extends A2uiLitElement<typeof RowApi> {
protected createController() {
Expand Down
36 changes: 1 addition & 35 deletions renderers/react/src/v0_9/catalog/basic/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,41 +28,7 @@ export const STANDARD_BORDER = '1px solid #ccc';
/** Standard border radius. */
export const STANDARD_RADIUS = '8px';

export const mapJustify = (j?: string) => {
switch (j) {
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'spaceAround':
return 'space-around';
case 'spaceBetween':
return 'space-between';
case 'spaceEvenly':
return 'space-evenly';
case 'start':
return 'flex-start';
case 'stretch':
return 'stretch';
default:
return 'flex-start';
}
};

export const mapAlign = (a?: string) => {
switch (a) {
case 'start':
return 'flex-start';
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'stretch':
return 'stretch';
default:
return 'stretch';
}
};
export {mapJustify, mapAlign} from '@a2ui/web_core/v0_9';

export const getBaseLeafStyle = (): React.CSSProperties => ({
margin: LEAF_MARGIN,
Expand Down
38 changes: 1 addition & 37 deletions renderers/react/src/v0_9/catalog/minimal/components/Column.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import {createReactComponent} from '../../../adapter';
import {z} from 'zod';
import {CommonSchemas} from '@a2ui/web_core/v0_9';
import {CommonSchemas, mapJustify, mapAlign} from '@a2ui/web_core/v0_9';
import {ChildList} from './ChildList';

export const ColumnSchema = z.object({
Expand All @@ -27,42 +27,6 @@ export const ColumnSchema = z.object({
align: z.enum(['center', 'end', 'start', 'stretch']).optional(),
});

const mapJustify = (j?: string) => {
switch (j) {
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'spaceAround':
return 'space-around';
case 'spaceBetween':
return 'space-between';
case 'spaceEvenly':
return 'space-evenly';
case 'start':
return 'flex-start';
case 'stretch':
return 'stretch';
default:
return 'flex-start';
}
};

const mapAlign = (a?: string) => {
switch (a) {
case 'start':
return 'flex-start';
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'stretch':
return 'stretch';
default:
return 'stretch';
}
};

export const ColumnApiDef = {
name: 'Column',
schema: ColumnSchema,
Expand Down
38 changes: 1 addition & 37 deletions renderers/react/src/v0_9/catalog/minimal/components/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import {createReactComponent} from '../../../adapter';
import {z} from 'zod';
import {CommonSchemas} from '@a2ui/web_core/v0_9';
import {CommonSchemas, mapJustify, mapAlign} from '@a2ui/web_core/v0_9';
import {ChildList} from './ChildList';

export const RowSchema = z.object({
Expand All @@ -27,42 +27,6 @@ export const RowSchema = z.object({
align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
});

const mapJustify = (j?: string) => {
switch (j) {
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'spaceAround':
return 'space-around';
case 'spaceBetween':
return 'space-between';
case 'spaceEvenly':
return 'space-evenly';
case 'start':
return 'flex-start';
case 'stretch':
return 'stretch';
default:
return 'flex-start';
}
};

const mapAlign = (a?: string) => {
switch (a) {
case 'start':
return 'flex-start';
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'stretch':
return 'stretch';
default:
return 'stretch';
}
};

export const RowApiDef = {
name: 'Row',
schema: RowSchema,
Expand Down
75 changes: 75 additions & 0 deletions renderers/web_core/src/v0_9/common/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/*
* Copyright 2025 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Comment on lines +1 to +15
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

According to the repository style guide (line 17), new code changes should be accompanied by tests. These new utility functions are a core part of the layout logic and should have unit tests to verify their mapping behavior, including handling of default and undefined values.

References
  1. If there are code changes, code should have tests. (link)

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, added 15 unit tests for both functions in layout.test.ts (470fe86).


/**
* Centralized layout mapping utilities for Web/CSS-based renderers.
*
* Maps A2UI layout enum values (e.g., `spaceBetween`) to their corresponding
* CSS values (e.g., `space-between`). These functions are shared across all
* web renderers (React, Lit, Angular) to ensure consistent behavior.
*/

/**
* Maps an A2UI justify enum value to its CSS `justify-content` equivalent.
*
* @param value - An A2UI justify value such as `'start'`, `'center'`,
* `'spaceBetween'`, etc.
* @returns The corresponding CSS `justify-content` value. Defaults to
* `'flex-start'` for unrecognized or undefined input.
*/
export function mapJustify(value?: string): string {
switch (value) {
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'spaceAround':
return 'space-around';
case 'spaceBetween':
return 'space-between';
case 'spaceEvenly':
return 'space-evenly';
case 'start':
return 'flex-start';
case 'stretch':
return 'stretch';
default:
return 'flex-start';
}
}
Comment on lines +43 to +45
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved conciseness and maintainability, you could consider using an object map for this mapping instead of a switch statement. This approach is often more declarative for simple key-value transformations. A similar refactoring can be applied to mapAlign as well.

For example, you could define the maps at the module level and then reference them in the functions:

const justifyMap: Record<string, string> = {
  center: 'center',
  end: 'flex-end',
  spaceAround: 'space-around',
  spaceBetween: 'space-between',
  spaceEvenly: 'space-evenly',
  start: 'flex-start',
  stretch: 'stretch',
};

export function mapJustify(value?: string): string {
  return (value && justifyMap[value]) || 'flex-start';
}

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, refactored both functions to use Record<string, string> object maps (470fe86).


/**
* Maps an A2UI align enum value to its CSS `align-items` equivalent.
*
* @param value - An A2UI align value such as `'start'`, `'center'`, `'end'`,
* or `'stretch'`.
* @returns The corresponding CSS `align-items` value. Defaults to `'stretch'`
* for unrecognized or undefined input.
*/
export function mapAlign(value?: string): string {
switch (value) {
case 'start':
return 'flex-start';
case 'center':
return 'center';
case 'end':
return 'flex-end';
case 'stretch':
return 'stretch';
default:
return 'stretch';
}
}
1 change: 1 addition & 0 deletions renderers/web_core/src/v0_9/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
export * from './catalog/function_invoker.js';
export * from './catalog/types.js';
export * from './common/events.js';
export * from './common/layout.js';
export * from './processing/message-processor.js';
export * from './rendering/component-context.js';
export * from './rendering/data-context.js';
Expand Down