Fleetbase Ember UI

The component library behind the Fleetbase console — layout, data, forms, calendars and modals for Ember applications and Fleetbase extensions.

Documentation · Playground · Playground guide · Contributing

---

Documentation

The reference documentation lives at fleetbase.io/docs/ui — every argument, every yielded block, and the guidance on when to reach for which component.

The playground is its interactive companion: each documented component has a page where you change arguments and watch the real component react.

Installation

pnpm add @fleetbase/ember-ui

Requires Node 18 or newer. The addon brings its own styles; no additional CSS import is needed.

Usage

Components resolve like any other Ember component once the addon is installed:

<Layout::Container>
    <Layout::Header />
    <Layout::Sidebar />
    <Layout::Main>
        <ContentPanel @title="Orders" @open={{true}}>
            <Table @columns={{this.columns}} @rows={{this.orders}} @selectable={{true}} />
        </ContentPanel>

        <Button @type="primary" @text="New order" @icon="plus" @onClick={{this.createOrder}} />
    </Layout::Main>
</Layout::Container>

Services are injected the usual way:

import { inject as service } from '@ember/service';

export default class OrdersController extends Controller {
    @service modalsManager;

    @action confirmDelete(order) {
        return this.modalsManager.confirm({
            title: 'Delete this order?',
            body: `${order.reference} will be removed permanently.`,
            confirm: () => order.destroyRecord(),
        });
    }
}

Components

The documented surface is 63 components. Each links to its reference page and to a live, editable example.

Layout & Structure — 17 components

Component	Docs	Playground
<Layout::Container />	docs	try it
<Layout::Header />	docs	try it
<Layout::Sidebar />	docs	try it
<Layout::Main />	docs	try it
<Layout::Section />	docs	try it
<Layout::MobileNavbar />	docs	try it
<ContentPanel />	docs	try it
<Overlay />	docs	try it
<Drawer />	docs	try it
<Layout::Resource::Tabular />	docs	try it
<Layout::Resource::Card />	docs	try it
<Layout::Resource::CardsGrid />	docs	try it
<Layout::Resource::Panel />	docs	try it
<Floating />	docs	try it
<Attach::Tooltip />	docs	try it
<Attach::Popover />	docs	try it
<Spacer />	docs	try it

Navigation — 3 components

Component	Docs	Playground
<TabNavigation />	docs	try it
<Tabs />	docs	try it
<DropdownButton />	docs	try it

Buttons & Actions — 3 components

Component	Docs	Playground
<Button />	docs	try it
<ClickToCopy />	docs	try it
<ClickToReveal />	docs	try it

Forms & Inputs — 15 components

Component	Docs	Playground
<InputGroup />	docs	try it
<Checkbox />	docs	try it
<Toggle />	docs	try it
<Select />	docs	try it
<MultiSelect />	docs	try it
<ComboBox />	docs	try it
<ModelSelect />	docs	try it
<DatePicker />	docs	try it
<DateTimeInput />	docs	try it
<PhoneInput />	docs	try it
<CoordinatesInput />	docs	try it
<ModelCoordinatesInput />	docs	try it
<UnitInput />	docs	try it
<MoneyInput />	docs	try it
<FileUpload />	docs	try it

Data Display — 9 components

Component	Docs	Playground
<Table />	docs	try it
<Badge />	docs	try it
<Pill />	docs	try it
<ProgressBar />	docs	try it
<Spinner />	docs	try it
<Timeline />	docs	try it
<ActivityLog />	docs	try it
<File />	docs	try it
<CommentThread />	docs	try it

Calendars & Boards — 3 components

Component	Docs	Playground
<FullCalendar />	docs	try it
<EventCalendar />	docs	try it
<Kanban />	docs	try it

Modals — 9 components

Component	Docs	Playground
<Modal::Default />	docs	try it
<Modal::Layouts::Confirm />	docs	try it
<Modal::Layouts::Alert />	docs	try it
<Modal::Layouts::Prompt />	docs	try it
<Modal::Layouts::BulkAction />	docs	try it
<Modal::Layouts::Progress />	docs	try it
<Modal::Layouts::Process />	docs	try it
<Modal::Layouts::Loading />	docs	try it
<Modal::Layouts::OptionPrompt />	docs	try it

Dashboard — 1 component

Component	Docs	Playground
<Dashboard />	docs	try it

Builders — 2 components

Component	Docs	Playground
<ReportBuilder />	docs	try it
<TemplateBuilder />	docs	try it

Registry & Slots — 1 component

Component	Docs	Playground
<RegistryYield />	docs	try it

The addon exports more components than this — table cells, chat internals, builder sub-components and other implementation details. Those are deliberately undocumented: they are internal to the components above and are not covered by the documentation, the playground, or any compatibility promise.

Playground

Built from this addon's own dummy application, so it renders the real components through normal Ember resolution with the real addon styles.

pnpm start                    # http://localhost:4200
pnpm run build:playground     # static GitHub Pages artifact into playground-dist/

Route	Purpose
/components	Searchable, categorized catalog
/components/:slug	Full page: controls, presets, event log, usage snippet
/embed/:slug	Minimal iframe view, embedded by the documentation site

Argument state is carried in one encoded query parameter, so a configured example is a shareable link and the embed shows exactly what the full page shows.

See PLAYGROUND.md for the architecture, the registry schema, how to add an example, iframe integration and resize messaging, and how to update the documented allowlist when fleetbase.io/docs/ui changes.

Development

pnpm install --frozen-lockfile

pnpm start                # serve the playground / dummy app
pnpm test                 # lint + the full suite
pnpm run test:ember       # the suite on its own
pnpm run lint             # eslint, ember-template-lint, stylelint
pnpm run build            # production build

Run a subset while working on one component:

pnpm exec ember test --filter="Integration | Component | button"

Testing and coverage

The suite runs in headless Chrome through Testem. Coverage is gated at 100% of first-party addon/ source — statements, branches, functions and lines — and enforced in CI:

pnpm run test:coverage       # run the suite with coverage
pnpm run coverage:check      # enforce the gate

Contributing

See the Contributing guide.

License

Licensed under the GNU Affero General Public License v3.0 or later.