@gjsify/example-gtk-adwaita-storybook 0.54.0 → 0.55.0

package/src/browser/navigation/popover-menu-bar.web.ts

@@ -0,0 +1,40 @@
+// Browser port of the Popover Menu Bar story. Shares metadata with
+// popover-menu-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { POPOVER_MENU_BAR_ITEMS, popoverMenuBarMeta } from '../../navigation/popover-menu-bar.meta.js';
+
+export class PopoverMenuBarWebStory extends StoryElement {
+    private _bar!: HTMLElement;
+
+    constructor() {
+        super(PopoverMenuBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return popoverMenuBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-popover-menu-bar');
+        this._apply();
+        this.addContent(this._bar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        const entries = this.args.showLast === false ? POPOVER_MENU_BAR_ITEMS.slice(0, 3) : POPOVER_MENU_BAR_ITEMS;
+        this._bar.setAttribute('menu-model', JSON.stringify(entries));
+        // `position` reaches each item's popover, exactly as the GTK story walks the bar's
+        // children — the popovers are the bar's, not the bar's own placement.
+        for (const popover of this._bar.querySelectorAll('gtk-popover-menu')) {
+            popover.setAttribute('position', this.args.position as string);
+        }
+    }
+}
+
+export const PopoverMenuBarWebStories: WebStoryModule = { stories: [PopoverMenuBarWebStory] };

package/src/browser/presentation/calendar.web.ts

@@ -0,0 +1,49 @@
+// Browser port of the Calendar story. Shares metadata with calendar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { CALENDAR_STORY_DATE, CALENDAR_STORY_MARKS, calendarMeta } from '../../presentation/calendar.meta.js';
+
+export class CalendarWebStory extends StoryElement {
+    private _calendar: HTMLElement | null = null;
+    private _marked = false;
+
+    constructor() {
+        super(CalendarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return calendarMeta;
+    }
+
+    initialize(): void {
+        this._calendar = document.createElement('gtk-calendar');
+        // The ISO form `GDateTime` serialises to, which is what the element's `date` door
+        // reads — so the GTK story's GDateTime and this string are the same write.
+        this._calendar.setAttribute('date', CALENDAR_STORY_DATE);
+        this._apply();
+        this.addContent(this._calendar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._calendar) return;
+        // Two of the three default TRUE and one defaults FALSE (gtkcalendar.c:440-460), so
+        // all three are written as explicit values.
+        this._calendar.setAttribute('show-heading', String(this.args.showHeading as boolean));
+        this._calendar.setAttribute('show-day-names', String(this.args.showDayNames as boolean));
+        this._calendar.toggleAttribute('show-week-numbers', this.args.showWeekNumbers as boolean);
+
+        const calendar = this._calendar as HTMLElement & {
+            markDay(day: number): void;
+            clearMarks(): void;
+        };
+        if (this._marked) calendar.clearMarks();
+        for (const day of CALENDAR_STORY_MARKS) calendar.markDay(day);
+        this._marked = true;
+    }
+}
+
+export const CalendarWebStories: WebStoryModule = { stories: [CalendarWebStory] };

package/src/browser/presentation/column-view.web.ts

@@ -0,0 +1,45 @@
+// Browser port of the Column View story. Shares metadata with column-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { COLUMN_VIEW_ITEMS, columnViewMeta } from '../../presentation/column-view.meta.js';
+
+export class ColumnViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+
+    constructor() {
+        super(ColumnViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return columnViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('gtk-column-view');
+        this._view.setAttribute('model', JSON.stringify(COLUMN_VIEW_ITEMS));
+        // The same two fields the GTK story gives its two column factories: the label and
+        // the id beside it.
+        this._view.setAttribute(
+            'columns',
+            JSON.stringify([
+                { key: 'label', id: 'name', title: 'Name', expand: true, sortable: true },
+                { key: 'value', id: 'code', title: 'Code' },
+            ]),
+        );
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view) return;
+        this._view.toggleAttribute('show-row-separators', this.args.showRowSeparators as boolean);
+        this._view.toggleAttribute('show-column-separators', this.args.showColumnSeparators as boolean);
+        this._view.toggleAttribute('reorderable', this.args.reorderable as boolean);
+    }
+}
+
+export const ColumnViewWebStories: WebStoryModule = { stories: [ColumnViewWebStory] };

package/src/browser/presentation/flow-box.web.ts

@@ -0,0 +1,52 @@
+// Browser port of the Flow Box story. Shares metadata with flow-box.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { FLOW_BOX_CELLS, flowBoxMeta } from '../../presentation/flow-box.meta.js';
+
+export class FlowBoxWebStory extends StoryElement {
+    private _box: HTMLElement | null = null;
+
+    constructor() {
+        super(FlowBoxWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return flowBoxMeta;
+    }
+
+    initialize(): void {
+        this._box = document.createElement('gtk-flow-box');
+        this._box.style.width = '100%';
+        for (const name of FLOW_BOX_CELLS) {
+            const cell = document.createElement('gtk-flow-box-child');
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', name);
+            cell.appendChild(label);
+            this._box.appendChild(cell);
+        }
+        this._apply();
+        this.addContent(this._box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._box) return;
+        this._box.setAttribute('selection-mode', this.args.selectionMode as string);
+        // HORIZONTAL is the default here, so `horizontal` is the bare attribute's meaning and
+        // only the vertical arg has to write.
+        this._box.setAttribute('orientation', this.args.orientation as string);
+        // Clamped to the ParamSpec minimum of 1 (gtkflowbox.c:3767-3770), the same clamp the
+        // setter applies to a 0.
+        this._box.setAttribute(
+            'max-children-per-line',
+            String(Math.max(1, Math.trunc(this.args.maxChildrenPerLine as number))),
+        );
+        this._box.toggleAttribute('homogeneous', this.args.homogeneous as boolean);
+        this._box.setAttribute('row-spacing', String(Math.max(0, Math.trunc(this.args.rowSpacing as number))));
+    }
+}
+
+export const FlowBoxWebStories: WebStoryModule = { stories: [FlowBoxWebStory] };

package/src/browser/presentation/grid-view.web.ts

@@ -0,0 +1,37 @@
+// Browser port of the Grid View story. Shares metadata with grid-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { GRID_VIEW_ITEMS, gridViewMeta } from '../../presentation/grid-view.meta.js';
+
+export class GridViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+
+    constructor() {
+        super(GridViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gridViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('gtk-grid-view');
+        this._view.setAttribute('model', JSON.stringify(GRID_VIEW_ITEMS));
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view) return;
+        const min = Math.max(1, this.args.minColumns as number);
+        this._view.setAttribute('min-columns', String(min));
+        this._view.setAttribute('max-columns', String(Math.max(min, this.args.maxColumns as number)));
+        this._view.setAttribute('selection-mode', this.args.selectionMode as string);
+    }
+}
+
+export const GridViewWebStories: WebStoryModule = { stories: [GridViewWebStory] };

package/src/browser/presentation/list-box.web.ts

@@ -0,0 +1,48 @@
+// Browser port of the List Box story. Shares metadata with list-box.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { LIST_BOX_ROWS, listBoxMeta } from '../../presentation/list-box.meta.js';
+
+export class ListBoxWebStory extends StoryElement {
+    private _box: HTMLElement | null = null;
+
+    constructor() {
+        super(ListBoxWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return listBoxMeta;
+    }
+
+    initialize(): void {
+        this._box = document.createElement('gtk-list-box');
+        this._box.style.width = '100%';
+        // The rows GTK would WRAP around each appended child are the rows here, which is
+        // the one thing the markup form has to spell.
+        for (const title of LIST_BOX_ROWS) {
+            const row = document.createElement('gtk-list-box-row');
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', title);
+            row.appendChild(label);
+            this._box.appendChild(row);
+        }
+        this._apply();
+        this.addContent(this._box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._box) return;
+        this._box.setAttribute('selection-mode', this.args.selectionMode as string);
+        this._box.toggleAttribute('show-separators', this.args.showSeparators as boolean);
+        // `activate-on-single-click` defaults TRUE, so the bare attribute is the default and
+        // `="false"` is how a story asks for a double click.
+        this._box.setAttribute('activate-on-single-click', String(this.args.activateOnSingleClick as boolean));
+        this._box.setAttribute('tab-behavior', this.args.tabBehavior as string);
+    }
+}
+
+export const ListBoxWebStories: WebStoryModule = { stories: [ListBoxWebStory] };

package/src/browser/presentation/list-view.web.ts

@@ -0,0 +1,36 @@
+// Browser port of the List View story. Shares metadata with list-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { LIST_VIEW_ITEMS, listViewMeta } from '../../presentation/list-view.meta.js';
+
+export class ListViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+
+    constructor() {
+        super(ListViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return listViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('gtk-list-view');
+        this._view.setAttribute('model', JSON.stringify(LIST_VIEW_ITEMS));
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view) return;
+        this._view.setAttribute('selection-mode', this.args.selectionMode as string);
+        this._view.toggleAttribute('show-separators', this.args.showSeparators as boolean);
+        this._view.toggleAttribute('single-click-activate', this.args.singleClickActivate as boolean);
+    }
+}
+
+export const ListViewWebStories: WebStoryModule = { stories: [ListViewWebStory] };

package/src/browser/presentation/tree-expander.web.ts

@@ -0,0 +1,68 @@
+// Browser port of the Tree Expander story. Shares metadata with tree-expander.story.ts.
+//
+// The GTK rendering gets its rows from a `Gtk.TreeListModel`; this one declares the same
+// rows directly, because the browser element takes the three numbers it would have read
+// off a `Gtk.TreeListRow` as attributes (ADR 0089). Same tree, same depths, same leaves.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { TREE_EXPANDER_TREE, treeExpanderMeta } from '../../presentation/tree-expander.meta.js';
+
+interface TreeRow {
+    readonly label: string;
+    readonly depth: number;
+    readonly expandable: boolean;
+}
+
+/** The tree flattened to rows, parents before their children. */
+const ROWS: readonly TreeRow[] = Object.entries(TREE_EXPANDER_TREE).flatMap(([parent, children]) => [
+    { label: parent, depth: 0, expandable: children.length > 0 },
+    ...children.map((child) => ({ label: child, depth: 1, expandable: false })),
+]);
+
+export class TreeExpanderWebStory extends StoryElement {
+    private _expanders: HTMLElement[] = [];
+
+    constructor() {
+        super(TreeExpanderWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return treeExpanderMeta;
+    }
+
+    initialize(): void {
+        const list = document.createElement('gtk-box');
+        list.setAttribute('orientation', 'vertical');
+        list.setAttribute('spacing', '6');
+        for (const row of ROWS) {
+            const expander = document.createElement('gtk-tree-expander');
+            expander.setAttribute('depth', String(row.depth));
+            expander.toggleAttribute('expandable', row.expandable);
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', row.label);
+            expander.appendChild(label);
+            list.appendChild(expander);
+            this._expanders.push(expander);
+        }
+        this._apply();
+        this.addContent(list);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const expanded = this.args.expanded as boolean;
+        this._expanders.forEach((expander, index) => {
+            expander.toggleAttribute('expanded', expanded);
+            expander.toggleAttribute('hide-expander', this.args.hideExpander as boolean);
+            expander.setAttribute('indent-for-icon', String(this.args.indentForIcon as boolean));
+            // A collapsed parent's children are not in a `GtkTreeListModel` at all, so the
+            // rows go with the arrow rather than only the arrow turning.
+            if (ROWS[index]!.depth > 0) expander.hidden = !expanded;
+        });
+    }
+}
+
+export const TreeExpanderWebStories: WebStoryModule = { stories: [TreeExpanderWebStory] };

package/src/browser/presentation/window-handle.web.ts

@@ -0,0 +1,42 @@
+// Browser port of the Window Handle story. Shares metadata with window-handle.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { windowHandleMeta } from '../../presentation/window-handle.meta.js';
+
+export class WindowHandleWebStory extends StoryElement {
+    private _handle: HTMLElement | null = null;
+
+    constructor() {
+        super(WindowHandleWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return windowHandleMeta;
+    }
+
+    initialize(): void {
+        const handle = document.createElement('gtk-window-handle');
+        const bar = document.createElement('adw-header-bar');
+        const title = document.createElement('adw-window-title');
+        title.setAttribute('title', 'Notes');
+        bar.appendChild(title);
+        handle.appendChild(bar);
+        this._handle = handle;
+        this._apply();
+        this.addContent(handle);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const handle = this._handle;
+        if (!handle) return;
+        // The `gtk-titlebar-double-click` setting, spelled as the attribute a document can
+        // write: the web port has no `Gtk.Settings` to resolve the action through.
+        handle.setAttribute('double-click-action', this.args.action as string);
+    }
+}
+
+export const WindowHandleWebStories: WebStoryModule = { stories: [WindowHandleWebStory] };

package/src/browser/rows/preferences-row.web.ts

@@ -0,0 +1,43 @@
+// Browser port of the Preferences Row story. Shares metadata with preferences-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { preferencesRowMeta } from '../../rows/preferences-row.meta.js';
+
+export class PreferencesRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(PreferencesRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return preferencesRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-preferences-row');
+        this._sync();
+
+        const group = document.createElement('adw-preferences-group');
+        group.append(this._row);
+
+        const clamp = document.createElement('adw-clamp');
+        clamp.setAttribute('maximum-size', '400');
+        clamp.append(group);
+
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.toggleAttribute('use-markup', this.args.useMarkup as boolean);
+        this._row.toggleAttribute('title-selectable', this.args.titleSelectable as boolean);
+    }
+}
+
+export const PreferencesRowWebStories: WebStoryModule = { stories: [PreferencesRowWebStory] };