@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/browser/navigation/overlay-split-view.web.ts

@@ -0,0 +1,106 @@
+// Browser port of the Overlay Split View story. Shares metadata with
+// overlay-split-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { overlaySplitViewMeta } from '../../navigation/overlay-split-view.meta.js';
+
+/**
+ * Sidebar rows — title plus the symbolic icon shown as the row prefix. Icon
+ * names mirror the native story's GTK names 1:1 (the `-symbolic` suffix is
+ * dropped to form the adwaita-web mask class, as elsewhere in the browser port).
+ */
+const SIDEBAR_ROWS: ReadonlyArray<readonly [string, string]> = [
+    ['Home', 'go-home'],
+    ['Discover', 'system-search'],
+    ['Library', 'folder-music'],
+    ['Settings', 'emblem-system'],
+];
+
+export class OverlaySplitViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+
+    constructor() {
+        super(OverlaySplitViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return overlaySplitViewMeta;
+    }
+
+    private buildSidebar(): HTMLElement {
+        // A boxed list of activatable rows, each with a leading symbolic icon —
+        // the equivalent of the native story's Adw.PreferencesGroup of ActionRows.
+        const group = document.createElement('adw-preferences-group');
+        for (const [title, icon] of SIDEBAR_ROWS) {
+            const row = document.createElement('adw-action-row');
+            row.setAttribute('title', title);
+            row.setAttribute('activatable', '');
+
+            const iconEl = document.createElement('span');
+            iconEl.setAttribute('slot', 'prefix');
+            iconEl.className = `adw-icon adw-icon--${icon}`;
+            row.appendChild(iconEl);
+
+            group.appendChild(row);
+        }
+
+        // Toolbar view with a title-less header bar, framing the boxed list.
+        // `sidebar` styling mirrors the native add_css_class('sidebar').
+        const toolbarView = document.createElement('adw-toolbar-view');
+        toolbarView.classList.add('sidebar');
+
+        const header = document.createElement('adw-header-bar');
+        header.setAttribute('slot', 'top');
+        toolbarView.appendChild(header);
+        toolbarView.appendChild(group);
+
+        return toolbarView;
+    }
+
+    private buildContent(): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', 'folder-music');
+        status.setAttribute('title', 'Your Library');
+        status.setAttribute(
+            'description',
+            'Toggle the sidebar to browse sections. Collapse it to overlay the content.',
+        );
+
+        const toolbarView = document.createElement('adw-toolbar-view');
+        const header = document.createElement('adw-header-bar');
+        header.setAttribute('slot', 'top');
+        toolbarView.appendChild(header);
+        toolbarView.appendChild(status);
+
+        return toolbarView;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('adw-overlay-split-view');
+        this._view.style.width = '480px';
+        this._view.style.height = '340px';
+
+        const sidebar = this.buildSidebar();
+        sidebar.setAttribute('slot', 'sidebar');
+
+        const content = this.buildContent();
+        content.setAttribute('slot', 'content');
+
+        this._view.append(sidebar, content);
+
+        this._sync();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._view) return;
+        this._view.toggleAttribute('show-sidebar', this.args.showSidebar as boolean);
+        this._view.toggleAttribute('collapsed', this.args.collapsed as boolean);
+    }
+}
+
+export const OverlaySplitViewWebStories: WebStoryModule = { stories: [OverlaySplitViewWebStory] };

package/src/browser/navigation/sidebar.web.ts

@@ -0,0 +1,84 @@
+// Browser port of the Sidebar story. Shares metadata with sidebar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { sidebarMeta } from '../../navigation/sidebar.meta.js';
+
+export class SidebarWebStory extends StoryElement {
+    private _sidebar: HTMLElement | null = null;
+    private _status: HTMLElement | null = null;
+
+    private readonly items: readonly { title: string; subtitle: string; icon: string }[] = [
+        { title: 'Inbox', subtitle: '3 unread', icon: 'mail-unread-symbolic' },
+        { title: 'Starred', subtitle: 'Favourites', icon: 'starred-symbolic' },
+        { title: 'Sent', subtitle: 'Outgoing mail', icon: 'mail-send-symbolic' },
+        { title: 'Archive', subtitle: 'Older mail', icon: 'folder-symbolic' },
+    ];
+
+    constructor() {
+        super(SidebarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return sidebarMeta;
+    }
+
+    initialize(): void {
+        const section = document.createElement('adw-sidebar-section');
+        section.setAttribute('title', 'Mailboxes');
+        for (const entry of this.items) {
+            const item = document.createElement('adw-sidebar-item');
+            item.setAttribute('title', entry.title);
+            item.setAttribute('subtitle', entry.subtitle);
+            item.setAttribute('icon-name', entry.icon);
+            section.append(item);
+        }
+
+        this._sidebar = document.createElement('adw-sidebar');
+        this._sidebar.setAttribute('mode', this.args.mode as string);
+        this._sidebar.setAttribute('selected', String(this.args.selected as number));
+        this._sidebar.style.width = '220px';
+        this._sidebar.append(section);
+        this._sidebar.addEventListener('notify::selected', () => this._syncContent());
+
+        this._status = document.createElement('adw-status-page');
+        this._status.style.flex = '1 1 auto';
+
+        const box = document.createElement('div');
+        box.style.display = 'flex';
+        box.style.width = '480px';
+        box.style.height = '340px';
+        box.style.border = '1px solid var(--card-shade-color)';
+        box.style.borderRadius = 'var(--card-radius, 12px)';
+        box.style.overflow = 'hidden';
+
+        const separator = document.createElement('div');
+        separator.style.width = '1px';
+        separator.style.alignSelf = 'stretch';
+        separator.style.backgroundColor = 'var(--separator-color, var(--card-shade-color))';
+
+        box.append(this._sidebar, separator, this._status);
+
+        this._syncContent();
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._sidebar) return;
+        this._sidebar.setAttribute('mode', this.args.mode as string);
+        this._sidebar.setAttribute('selected', String(this.args.selected as number));
+        this._syncContent();
+    }
+
+    private _syncContent(): void {
+        if (!this._sidebar || !this._status) return;
+        const selected = Number((this._sidebar as unknown as { selected: number }).selected);
+        const item = this.items[selected] ?? this.items[0];
+        this._status.setAttribute('title', item.title);
+        // adw-status-page's `icon` attribute is a plain symbolic name (it strips
+        // -symbolic and builds the adw-icon class itself).
+        this._status.setAttribute('icon', item.icon.replace(/-symbolic$/, ''));
+        this._status.setAttribute('description', item.subtitle);
+    }
+}
+
+export const SidebarWebStories: WebStoryModule = { stories: [SidebarWebStory] };

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

@@ -0,0 +1,36 @@
+// Browser port of the Avatar story. Shares metadata with avatar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { avatarMeta } from '../../presentation/avatar.meta.js';
+
+export class AvatarWebStory extends StoryElement {
+    private _avatar: HTMLElement | null = null;
+
+    constructor() {
+        super(AvatarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return avatarMeta;
+    }
+
+    initialize(): void {
+        this._avatar = document.createElement('adw-avatar');
+        this._sync();
+        this.addContent(this._avatar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._avatar) return;
+        this._avatar.setAttribute('text', this.args.text as string);
+        this._avatar.setAttribute('size', String(this.args.size as number));
+        this._avatar.toggleAttribute('show-initials', this.args.showInitials as boolean);
+        this._avatar.setAttribute('icon', (this.args.iconName as string).replace(/-symbolic$/, ''));
+    }
+}
+
+export const AvatarWebStories: WebStoryModule = { stories: [AvatarWebStory] };

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

@@ -0,0 +1,41 @@
+// Browser port of the Banner story. Shares metadata with banner.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { bannerMeta } from '../../presentation/banner.meta.js';
+
+export class BannerWebStory extends StoryElement {
+    private _banner: HTMLElement | null = null;
+
+    constructor() {
+        super(BannerWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return bannerMeta;
+    }
+
+    initialize(): void {
+        this._banner = document.createElement('adw-banner');
+        this._sync();
+
+        // The native story shows the banner full-width inside a sized container.
+        const container = document.createElement('div');
+        container.style.cssText = 'width:460px;max-width:100%;';
+        container.append(this._banner);
+        this.addContent(container);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._banner) return;
+        this._banner.setAttribute('title', this.args.title as string);
+        this._banner.setAttribute('button-label', this.args.buttonLabel as string);
+        this._banner.toggleAttribute('revealed', this.args.revealed as boolean);
+        this._banner.toggleAttribute('use-markup', this.args.useMarkup as boolean);
+    }
+}
+
+export const BannerWebStories: WebStoryModule = { stories: [BannerWebStory] };

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

@@ -0,0 +1,28 @@
+// Browser port of the Spinner story. Shares metadata with spinner.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { spinnerMeta } from '../../presentation/spinner.meta.js';
+
+export class SpinnerWebStory extends StoryElement {
+    private _spinner: HTMLElement | null = null;
+
+    constructor() {
+        super(SpinnerWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return spinnerMeta;
+    }
+
+    initialize(): void {
+        this._spinner = document.createElement('adw-spinner');
+        this._spinner.setAttribute('size', String(this.args.size as number));
+        this.addContent(this._spinner);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (this._spinner) this._spinner.setAttribute('size', String(this.args.size as number));
+    }
+}
+
+export const SpinnerWebStories: WebStoryModule = { stories: [SpinnerWebStory] };

package/src/browser/presentation/status-page.web.ts

@@ -0,0 +1,43 @@
+// Browser port of the Status Page story. Shares metadata with status-page.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { statusPageMeta } from '../../presentation/status-page.meta.js';
+
+export class StatusPageWebStory extends StoryElement {
+    private _page: HTMLElement | null = null;
+
+    constructor() {
+        super(StatusPageWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return statusPageMeta;
+    }
+
+    initialize(): void {
+        this._page = document.createElement('adw-status-page');
+
+        // Suggested-action pill button, matching the native story's child.
+        const button = document.createElement('adw-button');
+        button.setAttribute('label', 'New Document');
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        this._page.appendChild(button);
+
+        this._sync();
+        this.addContent(this._page);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._page) return;
+        this._page.setAttribute('icon', (this.args.iconName as string).replace(/-symbolic$/, ''));
+        this._page.setAttribute('title', this.args.title as string);
+        this._page.setAttribute('description', this.args.description as string);
+    }
+}
+
+export const StatusPageWebStories: WebStoryModule = { stories: [StatusPageWebStory] };

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

@@ -0,0 +1,34 @@
+// Browser port of the Window Title story. Shares metadata with window-title.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { windowTitleMeta } from '../../presentation/window-title.meta.js';
+
+export class WindowTitleWebStory extends StoryElement {
+    private _windowTitle: HTMLElement | null = null;
+
+    constructor() {
+        super(WindowTitleWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return windowTitleMeta;
+    }
+
+    initialize(): void {
+        this._windowTitle = document.createElement('adw-window-title');
+        this._sync();
+        this.addContent(this._windowTitle);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._windowTitle) return;
+        this._windowTitle.setAttribute('title', this.args.title as string);
+        this._windowTitle.setAttribute('subtitle', this.args.subtitle as string);
+    }
+}
+
+export const WindowTitleWebStories: WebStoryModule = { stories: [WindowTitleWebStory] };

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

@@ -0,0 +1,61 @@
+// Browser port of the Action Row story. Shares metadata with action-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { actionRowMeta } from '../../rows/action-row.meta.js';
+
+/** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
+function iconClass(gtkName: string): string {
+    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+}
+
+export class ActionRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+    private _icon: HTMLElement | null = null;
+
+    constructor() {
+        super(ActionRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return actionRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-action-row');
+
+        this._icon = document.createElement('span');
+        this._icon.setAttribute('slot', 'prefix');
+        this._icon.className = iconClass(this.args.iconName as string);
+
+        const button = document.createElement('adw-button');
+        button.setAttribute('slot', 'suffix');
+        button.setAttribute('icon', 'go-next');
+        button.setAttribute('flat', '');
+
+        this._row.append(this._icon, button);
+        this._syncRow();
+
+        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._syncRow();
+        if (this._icon) this._icon.className = iconClass(this.args.iconName as string);
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('subtitle', this.args.subtitle as string);
+        this._row.toggleAttribute('activatable', this.args.activatable as boolean);
+    }
+}
+
+export const ActionRowWebStories: WebStoryModule = { stories: [ActionRowWebStory] };

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

@@ -0,0 +1,64 @@
+// Browser port of the Button Row story. Shares metadata with button-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { buttonRowMeta } from '../../rows/button-row.meta.js';
+
+const STYLE_CLASSES = ['suggested-action', 'destructive-action'];
+
+/** GTK symbolic name (e.g. "list-add-symbolic") → adwaita-web start-icon-name. */
+function iconName(gtkName: string): string {
+    return gtkName.replace(/-symbolic$/, '');
+}
+
+export class ButtonRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(ButtonRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return buttonRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-button-row');
+        this._syncRow();
+
+        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._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+
+        const icon = iconName(this.args.startIconName as string);
+        if (icon) this._row.setAttribute('start-icon-name', icon);
+        else this._row.removeAttribute('start-icon-name');
+
+        this._applyStyle(this.args.style as string);
+    }
+
+    private _applyStyle(style: string): void {
+        if (!this._row) return;
+        for (const cls of STYLE_CLASSES) {
+            this._row.classList.remove(cls);
+        }
+        if (style !== 'none') {
+            this._row.classList.add(style);
+        }
+    }
+}
+
+export const ButtonRowWebStories: WebStoryModule = { stories: [ButtonRowWebStory] };

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

@@ -0,0 +1,44 @@
+// Browser port of the Combo Row story. Shares metadata with combo-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { COMBO_ROW_OPTIONS, comboRowMeta } from '../../rows/combo-row.meta.js';
+
+export class ComboRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(ComboRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return comboRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-combo-row');
+        this._row.setAttribute('items', JSON.stringify([...COMBO_ROW_OPTIONS]));
+        this._syncRow();
+
+        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._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('subtitle', this.args.subtitle as string);
+        this._row.setAttribute('selected', String(this.args.selected as number));
+    }
+}
+
+export const ComboRowWebStories: WebStoryModule = { stories: [ComboRowWebStory] };

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

@@ -0,0 +1,42 @@
+// Browser port of the Entry Row story. Shares metadata with entry-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { entryRowMeta } from '../../rows/entry-row.meta.js';
+
+export class EntryRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(EntryRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return entryRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-entry-row');
+        this._syncRow();
+
+        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._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('text', this.args.text as string);
+    }
+}
+
+export const EntryRowWebStories: WebStoryModule = { stories: [EntryRowWebStory] };

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

@@ -0,0 +1,53 @@
+// Browser port of the Expander Row story. Shares metadata with expander-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { expanderRowMeta } from '../../rows/expander-row.meta.js';
+
+export class ExpanderRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(ExpanderRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return expanderRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-expander-row');
+
+        const hostRow = document.createElement('adw-entry-row');
+        hostRow.setAttribute('title', 'Host');
+        hostRow.setAttribute('text', 'proxy.example.com');
+
+        const authRow = document.createElement('adw-switch-row');
+        authRow.setAttribute('title', 'Use authentication');
+
+        this._row.append(hostRow, authRow);
+        this._syncRow();
+
+        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._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('subtitle', this.args.subtitle as string);
+        this._row.toggleAttribute('expanded', this.args.expanded as boolean);
+        this._row.toggleAttribute('show-enable-switch', this.args.showEnableSwitch as boolean);
+    }
+}
+
+export const ExpanderRowWebStories: WebStoryModule = { stories: [ExpanderRowWebStory] };