API Reference
@hua-labs/ui/sdui
v1.0.0
Server-Driven UI 렌더링 시스템. JSON으로 UI 정의, 컴포넌트 레지스트리로 렌더링.
Main Exports
import {
// Renderer
SDUIRenderer, // Main SDUI renderer component
// Registry
defaultRegistry, // Built-in component registry
extendRegistry, // Extend with custom components
// Types
type SDUINode, // Single node definition
type SDUIPageSchema, // Full page schema
type SDUICondition, // Conditional rendering
type SDUIEventHandler, // Event handler definition
type ComponentRegistry,
} from '@hua-labs/ui/sdui';SDUIRenderer
import { SDUIRenderer, defaultRegistry } from '@hua-labs/ui/sdui';
function Page({ schema }: { schema: SDUIPageSchema }) {
return (
<SDUIRenderer
schema={schema}
registry={defaultRegistry}
data={{ user: currentUser }}
onAction={handleAction}
/>
);
}SDUINode Type
interface SDUINode {
type: string; // Component type
props?: Record<string, unknown>; // Component props
children?: SDUINode[] | string; // Children nodes or text
key?: string; // Unique key for lists
when?: SDUICondition; // Conditional rendering
on?: SDUIEventHandlers; // Event handlers
}Extend Registry
import { defaultRegistry, extendRegistry } from '@hua-labs/ui/sdui';
const customRegistry = extendRegistry({
// Add custom components
CustomCard: ({ title, children }) => (
<div className="custom-card">
<h3>{title}</h3>
{children}
</div>
),
// Override existing
Button: MyCustomButton,
});
<SDUIRenderer schema={schema} registry={customRegistry} />Built-in Components
defaultRegistry에 포함된 컴포넌트
BoxFlexGridContainerSectionSpacerDividerTextH1H2H3H4LinkButtonBadgeAvatarSkeletonProgressInputTextareaLabelCheckboxSwitchCardCardHeaderCardTitleCardContentCardFooterAlertAccordionTabsHeroSectionHeaderImageIconEvent Actions
// Supported action types
type ActionType =
| "navigate" // Navigate to page
| "api" // API call
| "setState" // Update context state
| "openModal" // Open modal
| "closeModal" // Close modal
| "custom"; // Custom handler
// Example
{
"type": "Button",
"props": { "children": "Submit" },
"on": {
"click": {
"type": "api",
"payload": { "method": "POST", "endpoint": "/api/submit" }
}
}
}Hue Editor
비주얼 SDUI 에디터 Hue가 개발 중이에요. 드래그앤드롭으로 UI를 만들고 JSON으로 내보낼 수 있어요.