@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/layout/clamp.meta.ts

@@ -0,0 +1,29 @@
+// Shared, renderer-agnostic metadata for the Clamp story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const clampMeta: StoryMeta = {
+    title: 'Layout/Clamp',
+    description:
+        'Adw.Clamp limits its child to a maximum width and centres it, tightening the layout as space shrinks.',
+    controls: [
+        {
+            name: 'maximumSize',
+            label: 'Maximum size',
+            type: ControlType.RANGE,
+            min: 200,
+            max: 600,
+            step: 10,
+            defaultValue: 400,
+        },
+        {
+            name: 'tighteningThreshold',
+            label: 'Tightening threshold',
+            type: ControlType.RANGE,
+            min: 100,
+            max: 600,
+            step: 10,
+            defaultValue: 300,
+        },
+    ],
+};

package/src/layout/clamp.story.ts

@@ -0,0 +1,59 @@
+// Adw.Clamp — constrains its child to a maximum size, centring it within wider space.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { clampMeta } from './clamp.meta.js';
+
+/** Story: Adw.Clamp constraining a wide child so the clamping is visible. */
+export class ClampStory extends StoryWidget {
+    private _clamp: Adw.Clamp | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookClamp' }, ClampStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ClampStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...clampMeta, component: Adw.Clamp.$gtype };
+    }
+
+    initialize(): void {
+        const inner = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, widthRequest: 520 });
+        inner.add_css_class('card');
+
+        const label = new Gtk.Label({
+            label: 'This content is clamped — it stops growing past the maximum size and stays centred.',
+            wrap: true,
+            xalign: 0,
+            hexpand: true,
+            marginTop: 18,
+            marginBottom: 18,
+            marginStart: 18,
+            marginEnd: 18,
+        });
+        inner.append(label);
+
+        this._clamp = new Adw.Clamp({
+            maximumSize: this.args.maximumSize as number,
+            tighteningThreshold: this.args.tighteningThreshold as number,
+            child: inner,
+        });
+        this.addContent(this._clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._clamp) return;
+        this._clamp.maximumSize = this.args.maximumSize as number;
+        this._clamp.tighteningThreshold = this.args.tighteningThreshold as number;
+    }
+}
+
+GObject.type_ensure(ClampStory.$gtype);
+
+export const ClampStories: StoryModule = { stories: [ClampStory] };

package/src/layout/header-bar.meta.ts

@@ -0,0 +1,14 @@
+// Shared, renderer-agnostic metadata for the Header Bar story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const headerBarMeta: StoryMeta = {
+    title: 'Layout/Header Bar',
+    description:
+        'Adw.HeaderBar hosts a custom title widget with start and end controls — the standard top chrome of an Adwaita window.',
+    controls: [
+        { name: 'title', label: 'Title', type: ControlType.TEXT, defaultValue: 'Text Editor' },
+        { name: 'subtitle', label: 'Subtitle', type: ControlType.TEXT, defaultValue: 'notes.md' },
+        { name: 'showTitle', label: 'Show title', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};

package/src/layout/header-bar.story.ts

@@ -0,0 +1,66 @@
+// Adw.HeaderBar — a window header bar with a custom title widget and packed buttons.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import Gio from '@girs/gio-2.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { headerBarMeta } from './header-bar.meta.js';
+
+/** Story: Adw.HeaderBar with an Adw.WindowTitle, a start icon button and an end menu button. */
+export class HeaderBarStory extends StoryWidget {
+    private _headerBar: Adw.HeaderBar | null = null;
+    private _title: Adw.WindowTitle | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookHeaderBar' }, HeaderBarStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(HeaderBarStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...headerBarMeta, component: Adw.HeaderBar.$gtype };
+    }
+
+    initialize(): void {
+        this._title = new Adw.WindowTitle({
+            title: this.args.title as string,
+            subtitle: this.args.subtitle as string,
+        });
+
+        this._headerBar = new Adw.HeaderBar({
+            titleWidget: this._title,
+            showTitle: this.args.showTitle as boolean,
+            widthRequest: 460,
+        });
+
+        const backButton = new Gtk.Button({ iconName: 'go-previous-symbolic' });
+        backButton.add_css_class('flat');
+        this._headerBar.pack_start(backButton);
+
+        const menu = new Gio.Menu();
+        menu.append('New Window', 'app.new-window');
+        menu.append('Preferences', 'app.preferences');
+        menu.append('About', 'app.about');
+
+        const menuButton = new Gtk.MenuButton({ iconName: 'open-menu-symbolic', menuModel: menu });
+        menuButton.add_css_class('flat');
+        this._headerBar.pack_end(menuButton);
+
+        this.addContent(this._headerBar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._headerBar || !this._title) return;
+        this._title.title = this.args.title as string;
+        this._title.subtitle = this.args.subtitle as string;
+        this._headerBar.showTitle = this.args.showTitle as boolean;
+    }
+}
+
+GObject.type_ensure(HeaderBarStory.$gtype);
+
+export const HeaderBarStories: StoryModule = { stories: [HeaderBarStory] };

package/src/layout/toolbar-view.meta.ts

@@ -0,0 +1,18 @@
+// Shared, renderer-agnostic metadata for the Toolbar View story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const toolbarViewMeta: StoryMeta = {
+    title: 'Layout/Toolbar View',
+    description:
+        'Adw.ToolbarView pins a top header bar and a bottom toolbar around its content, each independently revealable.',
+    controls: [
+        { name: 'revealTopBars', label: 'Reveal top bars', type: ControlType.BOOLEAN, defaultValue: true },
+        {
+            name: 'revealBottomBars',
+            label: 'Reveal bottom bars',
+            type: ControlType.BOOLEAN,
+            defaultValue: true,
+        },
+    ],
+};

package/src/layout/toolbar-view.story.ts

@@ -0,0 +1,71 @@
+// Adw.ToolbarView — wraps content between revealable top and bottom toolbars.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { toolbarViewMeta } from './toolbar-view.meta.js';
+
+/** Story: Adw.ToolbarView with a header bar, status-page content and a bottom action bar. */
+export class ToolbarViewStory extends StoryWidget {
+    private _view: Adw.ToolbarView | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookToolbarView' }, ToolbarViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ToolbarViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...toolbarViewMeta, component: Adw.ToolbarView.$gtype };
+    }
+
+    initialize(): void {
+        this._view = new Adw.ToolbarView({
+            widthRequest: 460,
+            heightRequest: 320,
+            revealTopBars: this.args.revealTopBars as boolean,
+            revealBottomBars: this.args.revealBottomBars as boolean,
+        });
+
+        const header = new Adw.HeaderBar({
+            titleWidget: new Adw.WindowTitle({ title: 'Documents', subtitle: '12 items' }),
+        });
+        this._view.add_top_bar(header);
+
+        const content = new Adw.StatusPage({
+            iconName: 'folder-documents-symbolic',
+            title: 'Your library',
+            description: 'Content sits between the toolbars and scrolls independently of them.',
+        });
+        this._view.content = content;
+
+        const bottomBar = new Gtk.ActionBar();
+        const addButton = new Gtk.Button({ iconName: 'list-add-symbolic' });
+        addButton.add_css_class('flat');
+        const removeButton = new Gtk.Button({ iconName: 'list-remove-symbolic' });
+        removeButton.add_css_class('flat');
+        bottomBar.pack_start(addButton);
+        bottomBar.pack_start(removeButton);
+        bottomBar.set_center_widget(new Gtk.Label({ label: 'Selection: none' }));
+        const shareButton = new Gtk.Button({ iconName: 'send-to-symbolic' });
+        shareButton.add_css_class('flat');
+        bottomBar.pack_end(shareButton);
+        this._view.add_bottom_bar(bottomBar);
+
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._view) return;
+        this._view.revealTopBars = this.args.revealTopBars as boolean;
+        this._view.revealBottomBars = this.args.revealBottomBars as boolean;
+    }
+}
+
+GObject.type_ensure(ToolbarViewStory.$gtype);
+
+export const ToolbarViewStories: StoryModule = { stories: [ToolbarViewStory] };

package/src/layout/wrap-box.meta.ts

@@ -0,0 +1,29 @@
+// Shared, renderer-agnostic metadata for the Wrap Box story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const wrapBoxMeta: StoryMeta = {
+    title: 'Layout/Wrap Box',
+    description:
+        'Adw.WrapBox flows its children horizontally and wraps them onto new lines when they run out of room.',
+    controls: [
+        {
+            name: 'childSpacing',
+            label: 'Child spacing',
+            type: ControlType.RANGE,
+            min: 0,
+            max: 36,
+            step: 1,
+            defaultValue: 8,
+        },
+        {
+            name: 'lineSpacing',
+            label: 'Line spacing',
+            type: ControlType.RANGE,
+            min: 0,
+            max: 36,
+            step: 1,
+            defaultValue: 8,
+        },
+    ],
+};

package/src/layout/wrap-box.story.ts

@@ -0,0 +1,52 @@
+// Adw.WrapBox — a box that lays children out in a line, wrapping onto new lines as needed.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { wrapBoxMeta } from './wrap-box.meta.js';
+
+/** Story: Adw.WrapBox flowing a set of chip-like buttons across multiple lines. */
+export class WrapBoxStory extends StoryWidget {
+    private _wrap: Adw.WrapBox | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookWrapBox' }, WrapBoxStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(WrapBoxStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...wrapBoxMeta, component: Adw.WrapBox.$gtype };
+    }
+
+    initialize(): void {
+        this._wrap = new Adw.WrapBox({
+            childSpacing: this.args.childSpacing as number,
+            lineSpacing: this.args.lineSpacing as number,
+            widthRequest: 460,
+        });
+
+        const tags = ['Design', 'Adwaita', 'GNOME', 'GTK', 'Typescript', 'Storybook', 'Wrapping', 'Layout'];
+        for (const tag of tags) {
+            const chip = new Gtk.Button({ label: tag });
+            chip.add_css_class('pill');
+            this._wrap.append(chip);
+        }
+
+        this.addContent(this._wrap);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._wrap) return;
+        this._wrap.childSpacing = this.args.childSpacing as number;
+        this._wrap.lineSpacing = this.args.lineSpacing as number;
+    }
+}
+
+GObject.type_ensure(WrapBoxStory.$gtype);
+
+export const WrapBoxStories: StoryModule = { stories: [WrapBoxStory] };

package/src/metas.ts

@@ -0,0 +1,41 @@
+// Barrel re-exporting all renderer-agnostic story metadata (*.meta.ts) so
+// sibling renderer packages (e.g. the NativeScript storybook showcase) can
+// import the SAME metadata the GTK *.story.ts and browser *.web.ts use,
+// keeping all three targets in lockstep for 1:1 comparison.
+// Auto-generated grouping; safe to edit. Exported via package.json "./metas".
+
+export * from './buttons/button-content.meta.js';
+export * from './buttons/button-styles.meta.js';
+export * from './buttons/split-button.meta.js';
+export * from './buttons/toggle-group.meta.js';
+export * from './feedback/about-dialog.meta.js';
+export * from './feedback/alert-dialog.meta.js';
+export * from './feedback/preferences-dialog.meta.js';
+export * from './feedback/toast.meta.js';
+export * from './layout/clamp.meta.js';
+export * from './layout/header-bar.meta.js';
+export * from './layout/toolbar-view.meta.js';
+export * from './layout/wrap-box.meta.js';
+export * from './navigation/bottom-sheet.meta.js';
+export * from './navigation/navigation-split-view.meta.js';
+export * from './navigation/navigation-view.meta.js';
+export * from './navigation/overlay-split-view.meta.js';
+export * from './navigation/sidebar.meta.js';
+export * from './presentation/avatar.meta.js';
+export * from './presentation/banner.meta.js';
+export * from './presentation/spinner.meta.js';
+export * from './presentation/status-page.meta.js';
+export * from './presentation/window-title.meta.js';
+export * from './rows/action-row.meta.js';
+export * from './rows/button-row.meta.js';
+export * from './rows/combo-row.meta.js';
+export * from './rows/entry-row.meta.js';
+export * from './rows/expander-row.meta.js';
+export * from './rows/password-entry-row.meta.js';
+export * from './rows/preferences-group.meta.js';
+export * from './rows/spin-row.meta.js';
+export * from './rows/switch-row.meta.js';
+export * from './view-switching/carousel.meta.js';
+export * from './view-switching/inline-view-switcher.meta.js';
+export * from './view-switching/tab-view.meta.js';
+export * from './view-switching/view-switcher.meta.js';

package/src/navigation/bottom-sheet.meta.ts

@@ -0,0 +1,13 @@
+// Shared, renderer-agnostic metadata for the Bottom Sheet story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const bottomSheetMeta: StoryMeta = {
+    title: 'Navigation/Bottom Sheet',
+    description: 'Adw.BottomSheet — a sheet that slides up over the content. Toggle "Open" to reveal it.',
+    controls: [
+        { name: 'open', label: 'Open', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'modal', label: 'Modal', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'canClose', label: 'Can close', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};

package/src/navigation/bottom-sheet.story.ts

@@ -0,0 +1,90 @@
+// Adw.BottomSheet — a content area with a sheet that slides up from the bottom.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { bottomSheetMeta } from './bottom-sheet.meta.js';
+
+/** Story: Adw.BottomSheet with a toggleable sheet child. */
+export class BottomSheetStory extends StoryWidget {
+    private _sheet: Adw.BottomSheet | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookBottomSheet' }, BottomSheetStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(BottomSheetStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...bottomSheetMeta, component: Adw.BottomSheet.$gtype };
+    }
+
+    private buildContent(): Gtk.Widget {
+        const toggle = new Gtk.Button({
+            label: 'Toggle sheet',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+            vexpand: true,
+        });
+        toggle.add_css_class('pill');
+        toggle.add_css_class('suggested-action');
+        toggle.connect('clicked', () => {
+            if (this._sheet) this._sheet.open = !this._sheet.open;
+        });
+        return toggle;
+    }
+
+    private buildSheet(): Gtk.Widget {
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            marginTop: 18,
+            marginBottom: 24,
+            marginStart: 18,
+            marginEnd: 18,
+        });
+        box.append(new Gtk.Label({ label: 'Share track', halign: Gtk.Align.START, cssClasses: ['title-2'] }));
+
+        const group = new Adw.PreferencesGroup();
+        for (const [title, icon] of [
+            ['Copy link', 'edit-copy-symbolic'],
+            ['Send to a friend', 'mail-send-symbolic'],
+            ['Add to playlist', 'list-add-symbolic'],
+        ] as const) {
+            const row = new Adw.ActionRow({ title });
+            row.add_prefix(new Gtk.Image({ iconName: icon }));
+            row.activatable = true;
+            group.add(row);
+        }
+        box.append(group);
+        return box;
+    }
+
+    initialize(): void {
+        this._sheet = new Adw.BottomSheet({
+            content: this.buildContent(),
+            sheet: this.buildSheet(),
+            open: this.args.open as boolean,
+            modal: this.args.modal as boolean,
+            canClose: this.args.canClose as boolean,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        this.addContent(this._sheet);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._sheet) return;
+        this._sheet.open = this.args.open as boolean;
+        this._sheet.modal = this.args.modal as boolean;
+        this._sheet.canClose = this.args.canClose as boolean;
+    }
+}
+
+GObject.type_ensure(BottomSheetStory.$gtype);
+
+export const BottomSheetStories: StoryModule = { stories: [BottomSheetStory] };

package/src/navigation/navigation-split-view.meta.ts

@@ -0,0 +1,13 @@
+// Shared, renderer-agnostic metadata for the Navigation Split View story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const navigationSplitViewMeta: StoryMeta = {
+    title: 'Navigation/Navigation Split View',
+    description:
+        'Adw.NavigationSplitView — a resizable sidebar beside a content pane. When collapsed it folds into a navigation stack.',
+    controls: [
+        { name: 'showContent', label: 'Show content', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'collapsed', label: 'Collapsed', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/navigation/navigation-split-view.story.ts

@@ -0,0 +1,83 @@
+// Adw.NavigationSplitView — a two-pane sidebar/content split that collapses
+// into a single navigation stack. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { navigationSplitViewMeta } from './navigation-split-view.meta.js';
+
+/** Story: Adw.NavigationSplitView with a boxed-list sidebar and a content page. */
+export class NavigationSplitViewStory extends StoryWidget {
+    private _view: Adw.NavigationSplitView | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookNavigationSplitView' }, NavigationSplitViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(NavigationSplitViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...navigationSplitViewMeta, component: Adw.NavigationSplitView.$gtype };
+    }
+
+    private buildSidebar(): Adw.NavigationPage {
+        const group = new Adw.PreferencesGroup();
+        for (const [title, subtitle, icon] of [
+            ['All Mail', '128 messages', 'mail-unread-symbolic'],
+            ['Starred', '6 messages', 'starred-symbolic'],
+            ['Drafts', '2 messages', 'document-edit-symbolic'],
+            ['Archive', '512 messages', 'folder-symbolic'],
+        ] as const) {
+            const row = new Adw.ActionRow({ title, subtitle });
+            row.add_prefix(new Gtk.Image({ iconName: icon }));
+            row.activatable = true;
+            group.add(row);
+        }
+
+        const toolbarView = new Adw.ToolbarView();
+        toolbarView.add_top_bar(new Adw.HeaderBar());
+        toolbarView.content = group;
+
+        return new Adw.NavigationPage({ title: 'Mailboxes', child: toolbarView });
+    }
+
+    private buildContent(): Adw.NavigationPage {
+        const status = new Adw.StatusPage({
+            iconName: 'mail-unread-symbolic',
+            title: 'All Mail',
+            description: 'Select a conversation from the list to read it here.',
+            vexpand: true,
+        });
+
+        const toolbarView = new Adw.ToolbarView();
+        toolbarView.add_top_bar(new Adw.HeaderBar());
+        toolbarView.content = status;
+
+        return new Adw.NavigationPage({ title: 'All Mail', child: toolbarView });
+    }
+
+    initialize(): void {
+        this._view = new Adw.NavigationSplitView({
+            sidebar: this.buildSidebar(),
+            content: this.buildContent(),
+            showContent: this.args.showContent as boolean,
+            collapsed: this.args.collapsed as boolean,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._view) return;
+        this._view.showContent = this.args.showContent as boolean;
+        this._view.collapsed = this.args.collapsed as boolean;
+    }
+}
+
+GObject.type_ensure(NavigationSplitViewStory.$gtype);
+
+export const NavigationSplitViewStories: StoryModule = { stories: [NavigationSplitViewStory] };

package/src/navigation/navigation-view.meta.ts

@@ -0,0 +1,19 @@
+// Shared, renderer-agnostic metadata for the Navigation View story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const navigationViewMeta: StoryMeta = {
+    title: 'Navigation/Navigation View',
+    description:
+        'Adw.NavigationView — a navigation stack. The root page pushes a detail page, which gets an automatic back button.',
+    controls: [
+        { name: 'rootTitle', label: 'Root title', type: ControlType.TEXT, defaultValue: 'Contacts' },
+        { name: 'detailTitle', label: 'Detail title', type: ControlType.TEXT, defaultValue: 'Ada Lovelace' },
+        {
+            name: 'animateTransitions',
+            label: 'Animate transitions',
+            type: ControlType.BOOLEAN,
+            defaultValue: true,
+        },
+    ],
+};