brix-runtime-sdk-api-web 1.0.0

package/src/types/ui/badge.ts

@@ -0,0 +1,112 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file Badge Component Type Definitions
+ * @description Defines types for the Badge component in the UI adapter system
+ * @module @brix/runtime-sdk-api-web/types/ui/badge
+ * @version 3.2.0
+ */
+
+import type { ReactNode, CSSProperties } from 'react';
+
+/**
+ * Badge Color Variants
+ */
+export type BadgeColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+
+/**
+ * Badge Component Props
+ *
+ * Small status indicator that can be attached to other elements.
+ *
+ * @example
+ * ```tsx
+ * <Badge count={5} color="error" showZero={false}>
+ *   <Icon name="notification" />
+ * </Badge>
+ * ```
+ */
+export interface BadgeProps {
+  /**
+   * Badge Count
+   *
+   * Numeric value to display. If 0 and showZero is false, badge is hidden.
+   */
+  count?: number;
+
+  /**
+   * Maximum Count
+   *
+   * Maximum count to display. Exceeding values show as "max+".
+   * @default 99
+   */
+  max?: number;
+
+  /**
+   * Show Zero
+   *
+   * When true, displays the badge even when count is 0.
+   * @default false
+   */
+  showZero?: boolean;
+
+  /**
+   * Dot Mode
+   *
+   * When true, displays a simple dot instead of count.
+   * @default false
+   */
+  dot?: boolean;
+
+  /**
+   * Badge Color
+   *
+   * @default 'primary'
+   */
+  color?: BadgeColor;
+
+  /**
+   * Badge Position Offset
+   *
+   * Offset from the default position [horizontal, vertical].
+   */
+  offset?: [number, number];
+
+  /**
+   * Invisible Mode
+   *
+   * When true, the badge is not rendered.
+   * @default false
+   */
+  invisible?: boolean;
+
+  /**
+   * Custom Inline Styles
+   */
+  style?: CSSProperties;
+
+  /**
+   * Custom CSS Class Name
+   */
+  className?: string;
+
+  /**
+   * Badge Target Element
+   *
+   * The element that the badge is attached to.
+   */
+  children?: ReactNode;
+}

package/src/types/ui/button.ts

@@ -0,0 +1,148 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file Button Component Type Definitions
+ * @description Defines types for the Button component in the UI adapter system
+ * @module @brix/runtime-sdk-api-web/types/ui/button
+ * @version 3.2.0
+ */
+
+import type { ReactNode, MouseEvent, CSSProperties } from 'react';
+import type { ComponentSize } from './common';
+
+/**
+ * Button Style Variants
+ *
+ * Defines the visual style of the button:
+ * - primary: Solid background, high emphasis
+ * - secondary: Outlined style, medium emphasis
+ * - text: Text only, low emphasis
+ * - danger: Destructive action indicator
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'danger';
+
+/**
+ * Button Component Props
+ *
+ * UI library agnostic button properties. All UI adapter implementations
+ * must support these properties to ensure consistent behavior across
+ * different UI framework implementations.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   variant="primary"
+ *   size="medium"
+ *   startIcon="save"
+ *   onClick={handleSave}
+ * >
+ *   Save Changes
+ * </Button>
+ * ```
+ */
+export interface ButtonProps {
+  /**
+   * Button Visual Variant
+   *
+   * Determines the visual style of the button.
+   * @default 'primary'
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Button Size
+   *
+   * Controls the button dimensions and font size.
+   * @default 'medium'
+   */
+  size?: ComponentSize;
+
+  /**
+   * Loading State
+   *
+   * When true, displays a loading spinner and disables interaction.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Disabled State
+   *
+   * When true, the button is non-interactive and visually dimmed.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Full Width Mode
+   *
+   * When true, the button expands to fill its container width.
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Start Icon Name
+   *
+   * Icon name to display before the button text.
+   * The actual icon is resolved by the Icon component from UIAdapter.
+   */
+  startIcon?: string;
+
+  /**
+   * End Icon Name
+   *
+   * Icon name to display after the button text.
+   * The actual icon is resolved by the Icon component from UIAdapter.
+   */
+  endIcon?: string;
+
+  /**
+   * Click Event Handler
+   *
+   * Callback fired when the button is clicked.
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * HTML Button Type
+   *
+   * Native HTML button type attribute for form integration.
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+
+  /**
+   * Custom Inline Styles
+   *
+   * CSS properties applied directly to the button element.
+   */
+  style?: CSSProperties;
+
+  /**
+   * Custom CSS Class Name
+   *
+   * Additional CSS class names for styling customization.
+   */
+  className?: string;
+
+  /**
+   * Button Content
+   *
+   * The text or elements displayed inside the button.
+   */
+  children: ReactNode;
+}

package/src/types/ui/card.ts

@@ -0,0 +1,116 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file Card Component Type Definitions
+ * @description Defines types for the Card component in the UI adapter system
+ * @module @brix/runtime-sdk-api-web/types/ui/card
+ * @version 3.2.0
+ */
+
+import type { ReactNode, MouseEvent, CSSProperties } from 'react';
+
+/**
+ * Card Component Props
+ *
+ * Container component for grouping related content with optional
+ * elevation and interactive states.
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   title="User Profile"
+ *   hoverable
+ *   onClick={handleCardClick}
+ * >
+ *   <p>Card content here</p>
+ * </Card>
+ * ```
+ */
+export interface CardProps {
+  /**
+   * Card Title
+   *
+   * Optional title displayed at the top of the card.
+   */
+  title?: ReactNode;
+
+  /**
+   * Card Subtitle
+   *
+   * Optional subtitle displayed below the title.
+   */
+  subtitle?: ReactNode;
+
+  /**
+   * Elevation Level
+   *
+   * Shadow depth level. 0 means no shadow.
+   * @default 1
+   */
+  elevation?: number;
+
+  /**
+   * Hoverable State
+   *
+   * When true, the card shows hover effects on mouse over.
+   * @default false
+   */
+  hoverable?: boolean;
+
+  /**
+   * Bordered Style
+   *
+   * When true, displays a border instead of/in addition to shadow.
+   * @default false
+   */
+  bordered?: boolean;
+
+  /**
+   * Click Event Handler
+   *
+   * Callback fired when the card is clicked.
+   */
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Header Actions
+   *
+   * Action elements displayed in the card header area.
+   */
+  headerActions?: ReactNode;
+
+  /**
+   * Footer Content
+   *
+   * Content displayed in the card footer area.
+   */
+  footer?: ReactNode;
+
+  /**
+   * Custom Inline Styles
+   */
+  style?: CSSProperties;
+
+  /**
+   * Custom CSS Class Name
+   */
+  className?: string;
+
+  /**
+   * Card Content
+   */
+  children?: ReactNode;
+}

package/src/types/ui/common.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file Common UI Type Definitions
+ * @description Shared type definitions used across UI components
+ * @module @brix/runtime-sdk-api-web/types/ui/common
+ * @version 3.2.0
+ */
+
+/**
+ * Component Size Variants
+ *
+ * Standard size variants used across all UI components for visual consistency.
+ * These sizes map to specific pixel values defined by each UI adapter implementation.
+ */
+export type ComponentSize = 'small' | 'medium' | 'large';

package/src/types/ui/icon.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file Icon Component Type Definitions
+ * @description Defines types for the Icon component in the UI adapter system
+ * @module @brix/runtime-sdk-api-web/types/ui/icon
+ * @version 3.2.0
+ */
+
+import type { MouseEvent, CSSProperties } from 'react';
+import type { ComponentSize } from './common';
+
+/**
+ * Icon Component Props
+ *
+ * Name-based icon lookup component. The actual icon rendering
+ * is handled by the UI adapter implementation (MUI icons, SVG icons, etc.).
+ *
+ * @example
+ * ```tsx
+ * <Icon name="dashboard" size="medium" color="#1976d2" />
+ * <Icon name="settings" size={24} />
+ * ```
+ */
+export interface IconProps {
+  /**
+   * Icon Name
+   *
+   * Name/identifier of the icon to display.
+   * The name is resolved by the UI adapter's icon mapping.
+   */
+  name: string;
+
+  /**
+   * Icon Size
+   *
+   * Predefined size or custom pixel value.
+   * @default 'medium'
+   */
+  size?: ComponentSize | number;
+
+  /**
+   * Icon Color
+   *
+   * Custom color override (CSS color value).
+   */
+  color?: string;
+
+  /**
+   * Custom Inline Styles
+   */
+  style?: CSSProperties;
+
+  /**
+   * Custom CSS Class Name
+   */
+  className?: string;
+
+  /**
+   * Accessible Label
+   *
+   * ARIA label for screen readers.
+   */
+  'aria-label'?: string;
+
+  /**
+   * Click Handler
+   *
+   * Optional click handler for interactive icons.
+   */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+}

package/src/types/ui/index.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright 2026 Brix Platform Authors
+ *
+ * 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
+ *
+ *     http://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.
+ */
+/**
+ * @file UI Adapter Type Definitions Barrel Export
+ * @description Unified export for all UI adapter type definitions
+ * @module @brix/runtime-sdk-api-web/types/ui
+ * @version 3.2.0
+ *
+ * [v3.2.0 Refactoring]
+ * Split the original 2100+ line ui.ts into component-specific modules:
+ * - common.ts: Shared types (ComponentSize)
+ * - button.ts: Button component types
+ * - input.ts: Input component types
+ * - select.ts: Select component types
+ * - card.ts: Card component types
+ * - avatar.ts: Avatar component types
+ * - badge.ts: Badge component types
+ * - tooltip.ts: Tooltip component types
+ * - menu.ts: Menu and MenuItem component types
+ * - modal.ts: Modal component types
+ * - message.ts: Message API types
+ * - theme-tokens.ts: Theme tokens and preset values
+ * - icon.ts: Icon component types
+ * - adapter.ts: UIAdapter interface and capability symbol
+ *
+ * [Design Principles]
+ * - Each file has a single responsibility
+ * - Facilitates on-demand imports for tree-shaking
+ * - Easy to maintain and extend
+ * - Full backward compatibility via this barrel export
+ */
+
+// =========================================
+// Common Types
+// =========================================
+export * from './common';
+
+// =========================================
+// Component Types
+// =========================================
+export * from './button';
+export * from './input';
+export * from './select';
+export * from './card';
+export * from './avatar';
+export * from './badge';
+export * from './tooltip';
+export * from './menu';
+export * from './modal';
+export * from './message';
+
+// =========================================
+// Theme System
+// =========================================
+export * from './theme-tokens';
+
+// =========================================
+// Icon System
+// =========================================
+export * from './icon';
+
+// =========================================
+// UI Adapter Interface
+// =========================================
+export * from './adapter';