Skip to main content

Viewer Reference

Every component, provider, hook, and type exported by @overture-stack/lectern-ui. For a task-oriented walkthrough see Setup; for what each view shows a reader see the Viewer overview.

This page documents the library as it stands on main. Exports not yet in the published release are marked, and listed together under Release status.

What this page is, and is not

This is an export listing: what the package exposes, the props and fields of each export, and which are released. For how a component behaves, and to see it rendered in every state, use Storybook, which runs against the source and cannot drift from it.

Entry points

The package has two entry points:

Import pathContents
@overture-stack/lectern-uiEverything below: the composed views, data providers, hooks, theme, and types.
@overture-stack/lectern-ui/dictionary-tableThe table view's internals: SchemaTable, Toolbar, the individual toolbar buttons, and the loading skeletons.
note

Import SchemaTable and Toolbar from the /dictionary-table entry point. The root entry point currently re-exports both names from the same default binding as DictionaryTable, so all three resolve to the composed page rather than the individual components.

Composed views

DictionaryTable

The whole table view, wired to a Lectern server. Sets up LecternDataProvider and DictionaryTableStateProvider internally, so it needs no surrounding providers.

PropTypeRequiredDescription
lecternUrlstringYesBase URL of the Lectern server.
dictionaryNamestringYesName of the dictionary to display. Every version is fetched; the newest renders first.
filterDropdownsFilterDropdown[]NoAdds metadata filter dropdowns to the toolbar.
customColumnsCustomColumnConfig[]NoAdds custom columns to every schema table. Not in 1.0.0.

The prop type is exported as DictionaryTableProps.

DictionaryTableViewer

The same view without the data and state providers, for platforms supplying their own data source. Takes filterDropdowns and customColumns with the same meanings as above, and must be rendered inside a data provider and DictionaryTableStateProvider.

Requires no lecternUrl or dictionaryName of its own; it reads whatever the surrounding data provider loaded. The prop type is exported as DictionaryTableViewerProps.

Data providers

Each data provider loads dictionaries and publishes them, along with loading and error state, through useLecternData. Exactly one is needed.

ComponentPropTypeDescription
LecternDataProviderlecternUrlstringBase URL of the Lectern server.
dictionaryNamestringDictionary to fetch. All versions are retrieved and sorted newest-first.
HostedDictionaryDataProviderhostedUrlstringURL of a single dictionary JSON file. Parsed against the Lectern meta-schema; a validation failure surfaces as an error rather than an empty view.
DictionaryStaticDataProviderstaticDictionaries(DictionaryServerRecord | Dictionary)[]Dictionaries already in memory. No network request.

Their prop types are exported as LecternDataProviderProps, UrlDictionaryProviderProps, and StaticDictionaryProviderProps.

DictionaryTableStateProvider

Holds view state (the selected version, the required-fields filter, and active metadata filter selections) and must wrap the view inside whichever data provider is used. Takes only children. Its prop type is exported as DictionaryTableStateProviderProps.

Changing the selected version clears any active metadata filter selections, since a new version may not carry the same metadata values.

Hooks

useLecternData

Important

Throws when called outside a data provider.

Returns what the active data provider loaded:

FieldTypeDescription
dictionaries(DictionaryServerRecord | Dictionary)[] | undefinedLoaded dictionaries, newest version first.
lecternUrlstring | undefinedSet only by LecternDataProvider. Components use its presence to decide whether server-backed features, such as template download, are available.
namestring | undefinedRequested dictionary name. Set only by LecternDataProvider.
loadingbooleanTrue while fetching.
errorsstring[]Fetch and validation failures. Empty on success.

useDictionaryTableState

Important

Throws when called outside DictionaryTableStateProvider.

Returns the current view state and the setters that change it:

FieldTypeDescription
selectedDictionaryDictionaryServerRecord | Dictionary | undefinedThe version currently displayed.
currentDictionaryIndexnumberIts index in dictionaries.
setCurrentDictionaryIndex(index: number) => voidSwitches version.
filters'Required'[]Active attribute filter. Defaults to ['Required'], so the view opens showing only required and conditionally required fields.
setFilters(filters: 'Required'[]) => voidSets the attribute filter. Pass [] to show every field.
filterSelectionsRecord<string, string[]>Selected metadata filter values, keyed by filterProperty.
toggleFilter(filterProperty: string, value: string) => voidAdds or removes one metadata filter value.
resetFilters() => voidClears all metadata filter selections.

Configuration types

FilterDropdown

One toolbar dropdown that filters whole schemas by a metadata value.

PropertyTypeDescription
labelstringDropdown label, also used on the active-filter pills.
filterPropertystringDot path on the schema to filter by, for example meta.submitter. Options are collected from the loaded dictionary.

Selections are OR within one dropdown and AND across dropdowns. Array-valued metadata matches if any of its values are selected.

CustomColumnConfig

One appended column on every schema table. Not in 1.0.0.

PropertyTypeDescription
columnHeaderstringColumn heading, and the label in the toolbar's Columns dropdown.
metaPathstringDot path to a value on the field, usually under meta.
columnComponentComponentType<CustomColumnComponentProps>Renders the cell instead of the default renderer.
defaultVisiblebooleanStart the column hidden with false. Defaults to true.

At least one of metaPath and columnComponent is required; the type enforces this.

CustomColumnComponentProps

What a columnComponent receives. Not in 1.0.0.

PropertyTypeDescription
fieldSchemaFieldThe whole field, so a cell can fall back to other field properties.
metaPathstring | undefinedThe configured dot path, if any.
valueDictionaryMetaValue | DictionaryMeta | undefinedValue resolved at metaPath. Undefined when the path is absent or resolves to something outside the dictionary metadata types.

FilterCategory

A resolved filter dropdown: a FilterDropdown plus the options: string[] discovered in the dictionary. Built internally from filterDropdowns; needed only when driving Toolbar directly.

Individual components

Available from @overture-stack/lectern-ui/dictionary-table for platforms assembling their own layout. All of them read the dictionary and view state from context rather than props, unless listed below.

ComponentPropsDescription
SchemaTableschema, highlightedFieldName?, customColumns?One schema's fields as a table. The only view component that takes its schema by prop.
ToolbaronSelect, setIsCollapsed, isCollapsed, filterCategories?, columnVisibility?The full toolbar. The caller owns collapse state and schema selection.
DictionaryHeadernoneDictionary name, description with a "Show more" control, and the version switcher.
DictionaryVersionSwitchernoneVersion dropdown, labelled with each version and its creation date. Renders nothing when only one version is loaded.
TableOfContentsDropdownschemas, onSelectJump-to-schema dropdown.
AttributeFilterButtonnoneToggles the required-fields filter.
CollapseAllButtononClickCollapse-all control.
ExpandAllButtononClickExpand-all control.
DictionaryDownloadButtonfileType, iconOnly?, schemaName?, text?, tooltipText?Submission template download. fileType is 'tsv' or 'csv'; schemaName limits the download to one schema. Renders nothing unless a lecternUrl is in context.
MetaValueRenderervalueThe default custom-column cell renderer. Handles strings, numbers, booleans, arrays, and nested objects, and renders URL strings as links. Not in 1.0.0.
AccordionaccordionItems, collapseAll, selectedIndex?The collapsible section list the table view is built from. Also exported from the root entry point.

The loading skeletons (LoadingSpinnerPage, HeaderSkeleton, and ToolbarSkeleton) are exported from the same entry point.

Theming

ExportTypeDescription
ThemeProviderComponentSupplies a theme. Takes an optional theme prop, deep-merged into the active theme, so partial overrides are valid.
defaultThemeThemeThe theme used when no provider is present.
useThemeContext(overrides?: PartialTheme) => ThemeReads the active theme, optionally merging per-call overrides.
ThemeTypeThe full theme: colors, typography, dimensions, shadow, and icons.
PartialThemeTypeA recursively partial Theme, for passing to ThemeProvider.

Theme structure

Theme is inferred from defaultTheme, so the groups below are the complete set of what a PartialTheme can override. Each links to its definition, which is the authoritative list of tokens and their values.

GroupControlsSource
colorsSurface, text, border, and accent colours, including the palettes the table, toolbar, and filter pills draw from.colors.ts
typographyFont family, and the size, weight, and line height of each text role used by the components.typography.ts
dimensionsFixed measurements such as navbar height and the spacing the layout is built on.dimensions.ts
shadowElevation presets applied to raised surfaces such as dropdown menus.shadow.ts
iconsThe built-in icon components, each overridable individually.icons/

Utilities

ExportSignatureDescription
getByDotPath(obj: unknown, path: string) => unknownResolves a dot path, returning undefined rather than throwing on a missing segment. The same resolution used by custom columns and metadata filters. Not in 1.0.0.
sortDictionariesByVersion(dictionaries: DictionaryServerUnion[]) => DictionaryServerUnion[]Sorts newest version first, comparing versions numerically. Applied by every data provider.

Release status

The published release is 1.0.0. These exports exist only on main:

ExportFeature
CustomColumnConfig, CustomColumnComponentPropsCustom column configuration
MetaValueRendererDefault custom-column cell renderer
getByDotPathDot-path resolution utility
customColumns prop on DictionaryTable and DictionaryTableViewerCustom columns, and the toolbar's Columns dropdown

Everything else on this page is in 1.0.0, including the entity relationship diagram, metadata filters, the active-filter bar, and URL-hash deep links.