Implementation:TobikoData Sqlmesh Additional Components

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Web_Components
Last Updated	2026-02-07 20:00 GMT

Overview

React wrapper components for Lit-based Tobiko design system web components used in the SQLMesh UI.

Description

The Additional_Components module creates React-compatible wrappers around custom Lit web components from the Tobiko design system. It uses @lit/react to bridge the gap between Lit web components and React, defining custom elements and exporting React components for buttons, icons, tabs, split panes, metadata displays, source lists, tooltips, and more. Each component is registered with a tbk- prefix in the custom element registry.

Usage

Import and use these components as standard React components in the SQLMesh web UI. They provide consistent design language and behavior across the application while maintaining compatibility with React's rendering model.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/utils/additional-components.ts

Signature

// Component exports (selection)
export const TBKButton: React.Component
export const TBKIcon: React.Component
export const TBKTooltip: React.Component
export const TBKInformation: React.Component
export const TBKTextBlock: React.Component
export const TBKDatetime: React.Component
export const TBKDetails: React.Component
export const TBKTabs: React.Component
export const TBKTab: React.Component
export const TBKTabPanel: React.Component
export const TBKSplitPane: React.Component
export const TBKScroll: React.Component
export const TBKMetadata: React.Component
export const TBKMetadataSection: React.Component
export const TBKMetadataItem: React.Component
export const TBKBadge: React.Component
export const TBKModelName: React.Component
export const TBKResizeObserver: React.Component
export const TBKSourceList: React.Component
export const TBKSourceListItem: React.Component
export const TBKSourceListSection: React.Component

Import

import {
  TBKButton,
  TBKIcon,
  TBKTabs,
  TBKTab,
  TBKTabPanel,
  TBKSplitPane,
  TBKTooltip
} from '~/utils/additional-components'

Available Components

UI Controls

Component	Tag Name	Purpose
TBKButton	tbk-button	Action buttons with consistent styling
TBKIcon	tbk-icon	Icon display with multiple icon sets
TBKTooltip	tbk-tooltip	Hover tooltips for additional information
TBKDetails	tbk-details	Expandable details/accordion component

Layout Components

Component	Tag Name	Purpose
TBKSplitPane	tbk-split-pane	Resizable split pane layout (emits onChange event)
TBKScroll	tbk-scroll	Custom scrollable container
TBKResizeObserver	tbk-resize-observer	Element resize detection

Content Display

Component	Tag Name	Purpose
TBKTextBlock	tbk-text-block	Formatted text display
TBKInformation	tbk-information	Information display with icon
TBKDatetime	tbk-datetime	Date/time display with formatting
TBKBadge	tbk-badge	Status badges and labels
TBKModelName	tbk-model-name	Formatted model name display

Tabs

Component	Tag Name	Purpose
TBKTabs	tbk-tabs	Tab container/controller
TBKTab	tbk-tab	Individual tab button
TBKTabPanel	tbk-tab-panel	Tab content panel

Metadata Display

Component	Tag Name	Purpose
TBKMetadata	tbk-metadata	Metadata container
TBKMetadataSection	tbk-metadata-section	Section within metadata
TBKMetadataItem	tbk-metadata-item	Individual metadata item

Source List

Component	Tag Name	Purpose
TBKSourceList	tbk-ui-source-list	File/source list container (emits onChange event)
TBKSourceListItem	tbk-ui-source-list-item	Individual list item
TBKSourceListSection	tbk-ui-source-list-section	Section within source list

Implementation Details

Lit-React Bridge

Uses @lit/react createComponent to bridge Lit web components to React:

export const TBKButton = createComponent({
  tagName: 'tbk-button',
  elementClass: Button,
  react: React,
})

Custom Element Registration

Each Lit component is registered in the custom element registry:

Button.defineAs('tbk-button')
Icon.defineAs('tbk-icon')

Event Mapping

Some components map custom events to React props:

TBKSplitPane: Maps 'sl-reposition' to onChange
TBKSourceList: Maps 'change' to onChange

Type Safety

All components are typed as any for flexibility in React usage. This allows passing custom props without strict type checking.

Usage Examples

import {
  TBKButton,
  TBKIcon,
  TBKTabs,
  TBKTab,
  TBKTabPanel,
  TBKSplitPane,
  TBKTooltip,
  TBKMetadata,
  TBKMetadataSection,
  TBKMetadataItem,
  TBKSourceList,
  TBKSourceListItem
} from '~/utils/additional-components'

// Button with icon
function ActionButton() {
  return (
    <TBKButton onClick={() => console.log('Clicked')}>
      <TBKIcon name="play" />
      Run Query
    </TBKButton>
  )
}

// Tabs
function EditorTabs() {
  return (
    <TBKTabs>
      <TBKTab slot="nav" panel="editor">Editor</TBKTab>
      <TBKTab slot="nav" panel="results">Results</TBKTab>

      <TBKTabPanel name="editor">
        {/* Editor content */}
      </TBKTabPanel>
      <TBKTabPanel name="results">
        {/* Results content */}
      </TBKTabPanel>
    </TBKTabs>
  )
}

// Split pane
function Layout() {
  return (
    <TBKSplitPane
      position={30}
      onChange={(e) => console.log('Resized:', e.detail)}
    >
      <div slot="start">Sidebar</div>
      <div slot="end">Main content</div>
    </TBKSplitPane>
  )
}

// Tooltip
function HelpText() {
  return (
    <TBKTooltip content="Click to execute the query">
      <TBKButton>Run</TBKButton>
    </TBKTooltip>
  )
}

// Metadata display
function ModelMetadata({ model }) {
  return (
    <TBKMetadata>
      <TBKMetadataSection heading="Details">
        <TBKMetadataItem label="Name">{model.name}</TBKMetadataItem>
        <TBKMetadataItem label="Type">{model.type}</TBKMetadataItem>
        <TBKMetadataItem label="Owner">{model.owner}</TBKMetadataItem>
      </TBKMetadataSection>
    </TBKMetadata>
  )
}

// Source list (file tree)
function FileTree({ files }) {
  return (
    <TBKSourceList onChange={(e) => console.log('Selected:', e.detail)}>
      {files.map(file => (
        <TBKSourceListItem key={file.id} value={file.path}>
          {file.name}
        </TBKSourceListItem>
      ))}
    </TBKSourceList>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment