Components

Trek's admin UI is built with ViewComponent, Stimulus and Turbo, styled with PostCSS and Radix colors, with light & dark themes.

UI components

The main building blocks, all in the Trek:: namespace:

Component	Purpose
LayoutComponent	admin layout, with header, menu and panel slots
HeaderComponent	top navigation bar
MenuComponent	sidebar navigation, with polymorphic slots
BrandComponent	logo, title & subtitle area
DialogComponent	modal dialogs, with configurable title and buttons
TabsComponent	tabbed interfaces
ButtonComponent	buttons & button-styled links
ListComponent	record lists
PropertiesComponent	key-value property display
PaginationComponent	Kaminari-backed pagination
ToasterComponent / Toaster::ToastComponent	flash notifications
HeadingComponent	headings
SectionComponent	a titled section of a page, with an optional hint under its heading
GateComponent	the frame of the sign-in and password reset screens: a centred card under the brand
IconComponent	SVG icon renderer
Dashboard::SectionComponent / Dashboard::TileComponent	dashboard sections of shortcut tiles

Dashboard tiles

A tile is a link by default. With method:, it issues another HTTP method through Turbo (as a data-turbo-method link), so a tile can create a record in one click rather than open a form; data: adds attributes to the link, such as a confirmation:

s.with_tile(
  text: "New weekly draft",
  icon: "trek/add",
  href: [:draft_current_week, :admin, :newsletters],
  method: :post,
  data: { turbo_confirm: "Create this week's draft?" }
)

Form components

Rendered by the form builder helpers, under Trek::Form:::

GroupComponent, FieldsetComponent, ActionsComponent (configurable aspect & classnames), ErrorsComponent, TextFieldComponent, ImageFieldComponent, SoundFieldComponent, SwitchBoxComponent, CollectionSelectComponent, GroupedCollectionSelectComponent, LinkSelectComponent and ContentEditorComponent.

Content editor

Trek::Form::ContentEditorComponent wraps the Tiptap editor and accepts nodes, blocks and floating (all enabled by default) to toggle the text buttons, the block buttons and the floating menu, and autofocus:

f.content_editor :intro, nodes: false, floating: false

Content is stored as ProseMirror JSON and rendered with formatted_content. Image uploads (Uppy), link insertion and prompts are served by the panel controllers. See the Content editor guide for its toolbar, how content is stored and rendered, and how to customize it.