@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/rows/switch-row.story.ts

@@ -0,0 +1,49 @@
+// Adw.SwitchRow — a boxed-list row pairing a title/subtitle with a switch.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { switchRowMeta } from './switch-row.meta.js';
+
+/** Story: Adw.SwitchRow inside a boxed list (Adw.PreferencesGroup). */
+export class SwitchRowStory extends StoryWidget {
+    private _row: Adw.SwitchRow | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookSwitchRow' }, SwitchRowStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(SwitchRowStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...switchRowMeta, component: Adw.SwitchRow.$gtype };
+    }
+
+    initialize(): void {
+        this._row = new Adw.SwitchRow({
+            title: this.args.title as string,
+            subtitle: this.args.subtitle as string,
+            active: this.args.active as boolean,
+        });
+
+        const group = new Adw.PreferencesGroup();
+        group.add(this._row);
+
+        const clamp = new Adw.Clamp({ maximumSize: 400, child: group });
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._row) return;
+        this._row.title = this.args.title as string;
+        this._row.subtitle = this.args.subtitle as string;
+        this._row.active = this.args.active as boolean;
+    }
+}
+
+GObject.type_ensure(SwitchRowStory.$gtype);
+
+export const SwitchRowStories: StoryModule = { stories: [SwitchRowStory] };

package/src/view-switching/carousel.meta.ts

@@ -0,0 +1,35 @@
+// Shared, renderer-agnostic metadata for the Carousel stories. Imported by both
+// the GTK renderer (carousel.story.ts) and the browser renderer
+// (browser/view-switching/carousel.web.ts) so the two expose identical controls.
+// Adw.Carousel ships two indicator widgets, so there are two stories — one
+// paired with dot indicators, one with line indicators.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+const carouselControls: StoryMeta['controls'] = [
+    {
+        name: 'allowScrollWheel',
+        label: 'Allow scroll wheel',
+        type: ControlType.BOOLEAN,
+        defaultValue: true,
+    },
+    {
+        name: 'allowLongSwipes',
+        label: 'Allow long swipes',
+        type: ControlType.BOOLEAN,
+        defaultValue: false,
+    },
+];
+
+export const carouselDotsMeta: StoryMeta = {
+    title: 'View Switching/Carousel (Dots)',
+    description:
+        'Adw.Carousel — a horizontally swipeable pager with three pages, paired with Adw.CarouselIndicatorDots.',
+    controls: carouselControls,
+};
+
+export const carouselLinesMeta: StoryMeta = {
+    title: 'View Switching/Carousel (Lines)',
+    description: 'Adw.Carousel — the same swipeable pager paired with Adw.CarouselIndicatorLines instead of dots.',
+    controls: carouselControls,
+};

package/src/view-switching/carousel.story.ts

@@ -0,0 +1,131 @@
+// Adw.Carousel — a swipeable pager paired with page indicators. 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 { carouselDotsMeta, carouselLinesMeta } from './carousel.meta.js';
+
+const PAGES: ReadonlyArray<{ title: string; css: string }> = [
+    { title: 'Welcome', css: 'accent' },
+    { title: 'Discover', css: 'success' },
+    { title: 'Get started', css: 'warning' },
+];
+
+function buildPage(title: string, cssClass: string): Gtk.Widget {
+    const box = new Gtk.Box({
+        orientation: Gtk.Orientation.VERTICAL,
+        halign: Gtk.Align.CENTER,
+        valign: Gtk.Align.CENTER,
+        widthRequest: 440,
+        heightRequest: 260,
+    });
+    box.add_css_class('card');
+    box.add_css_class(cssClass);
+
+    const label = new Gtk.Label({ label: title, vexpand: true, valign: Gtk.Align.CENTER });
+    label.add_css_class('title-1');
+    box.append(label);
+
+    return box;
+}
+
+/** Story: Adw.Carousel with dot indicators. */
+export class CarouselDotsStory extends StoryWidget {
+    private _carousel: Adw.Carousel | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookCarouselDots' }, CarouselDotsStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(CarouselDotsStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...carouselDotsMeta, component: Adw.Carousel.$gtype };
+    }
+
+    initialize(): void {
+        this._carousel = new Adw.Carousel({
+            allowScrollWheel: this.args.allowScrollWheel as boolean,
+            allowLongSwipes: this.args.allowLongSwipes as boolean,
+            vexpand: true,
+        });
+        for (const page of PAGES) {
+            this._carousel.append(buildPage(page.title, page.css));
+        }
+
+        const dots = new Adw.CarouselIndicatorDots({ carousel: this._carousel });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._carousel);
+        box.append(dots);
+
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._carousel) return;
+        this._carousel.allowScrollWheel = this.args.allowScrollWheel as boolean;
+        this._carousel.allowLongSwipes = this.args.allowLongSwipes as boolean;
+    }
+}
+
+GObject.type_ensure(CarouselDotsStory.$gtype);
+
+/** Story: Adw.Carousel with line indicators. */
+export class CarouselLinesStory extends StoryWidget {
+    private _carousel: Adw.Carousel | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookCarouselLines' }, CarouselLinesStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(CarouselLinesStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...carouselLinesMeta, component: Adw.Carousel.$gtype };
+    }
+
+    initialize(): void {
+        this._carousel = new Adw.Carousel({
+            allowScrollWheel: this.args.allowScrollWheel as boolean,
+            allowLongSwipes: this.args.allowLongSwipes as boolean,
+            vexpand: true,
+        });
+        for (const page of PAGES) {
+            this._carousel.append(buildPage(page.title, page.css));
+        }
+
+        const lines = new Adw.CarouselIndicatorLines({ carousel: this._carousel });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._carousel);
+        box.append(lines);
+
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._carousel) return;
+        this._carousel.allowScrollWheel = this.args.allowScrollWheel as boolean;
+        this._carousel.allowLongSwipes = this.args.allowLongSwipes as boolean;
+    }
+}
+
+GObject.type_ensure(CarouselLinesStory.$gtype);
+
+export const CarouselStories: StoryModule = { stories: [CarouselDotsStory, CarouselLinesStory] };

package/src/view-switching/inline-view-switcher.meta.ts

@@ -0,0 +1,25 @@
+// Shared, renderer-agnostic metadata for the Inline View Switcher story.
+// Imported by both the GTK renderer (inline-view-switcher.story.ts) and the
+// browser renderer (browser/view-switching/inline-view-switcher.web.ts) so the
+// two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const inlineViewSwitcherMeta: StoryMeta = {
+    title: 'View Switching/Inline View Switcher',
+    description:
+        'Adw.InlineViewSwitcher — a compact inline switcher that can show labels, icons, or both for an Adw.ViewStack.',
+    controls: [
+        {
+            name: 'displayMode',
+            label: 'Display mode',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Labels', value: 'labels' },
+                { label: 'Icons', value: 'icons' },
+                { label: 'Both', value: 'both' },
+            ],
+            defaultValue: 'both',
+        },
+    ],
+};

package/src/view-switching/inline-view-switcher.story.ts

@@ -0,0 +1,88 @@
+// Adw.InlineViewSwitcher — a compact, toolbar-friendly switcher for an Adw.ViewStack.
+// 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 { inlineViewSwitcherMeta } from './inline-view-switcher.meta.js';
+
+/** Story: Adw.InlineViewSwitcher driving an Adw.ViewStack of three pages. */
+export class InlineViewSwitcherStory extends StoryWidget {
+    private _switcher: Adw.InlineViewSwitcher | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookInlineViewSwitcher' }, InlineViewSwitcherStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(InlineViewSwitcherStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...inlineViewSwitcherMeta, component: Adw.InlineViewSwitcher.$gtype };
+    }
+
+    private buildPage(title: string, icon: string, body: string): Gtk.Widget {
+        return new Adw.StatusPage({
+            iconName: icon,
+            title,
+            description: body,
+            vexpand: true,
+        });
+    }
+
+    initialize(): void {
+        const stack = new Adw.ViewStack({ vexpand: true });
+        stack.add_titled_with_icon(
+            this.buildPage('Overview', 'view-grid-symbolic', 'A quick summary of your project.'),
+            'overview',
+            'Overview',
+            'view-grid-symbolic',
+        );
+        stack.add_titled_with_icon(
+            this.buildPage('Activity', 'document-edit-symbolic', 'Recent edits and changes.'),
+            'activity',
+            'Activity',
+            'document-edit-symbolic',
+        );
+        stack.add_titled_with_icon(
+            this.buildPage('Settings', 'emblem-system-symbolic', 'Configure how things behave.'),
+            'settings',
+            'Settings',
+            'emblem-system-symbolic',
+        );
+
+        this._switcher = new Adw.InlineViewSwitcher({
+            stack,
+            displayMode: this.modeFromArg(this.args.displayMode as string),
+            halign: Gtk.Align.CENTER,
+        });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._switcher);
+        box.append(stack);
+
+        this.addContent(box);
+    }
+
+    private modeFromArg(value: string): Adw.InlineViewSwitcherDisplayMode {
+        if (value === 'labels') return Adw.InlineViewSwitcherDisplayMode.LABELS;
+        if (value === 'icons') return Adw.InlineViewSwitcherDisplayMode.ICONS;
+        return Adw.InlineViewSwitcherDisplayMode.BOTH;
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._switcher) return;
+        this._switcher.displayMode = this.modeFromArg(this.args.displayMode as string);
+    }
+}
+
+GObject.type_ensure(InlineViewSwitcherStory.$gtype);
+
+export const InlineViewSwitcherStories: StoryModule = { stories: [InlineViewSwitcherStory] };

package/src/view-switching/tab-view.meta.ts

@@ -0,0 +1,12 @@
+// Shared, renderer-agnostic metadata for the Tab View story. Imported by both
+// the GTK renderer (tab-view.story.ts) and the browser renderer
+// (browser/view-switching/tab-view.web.ts) so the two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const tabViewMeta: StoryMeta = {
+    title: 'View Switching/Tab View',
+    description:
+        'Adw.TabView with an Adw.TabBar header — three tabbed pages; the tab bar can auto-hide when only one tab remains.',
+    controls: [{ name: 'autohide', label: 'Autohide tab bar', type: ControlType.BOOLEAN, defaultValue: false }],
+};

package/src/view-switching/tab-view.story.ts

@@ -0,0 +1,72 @@
+// Adw.TabView — a tabbed container with an Adw.TabBar header. 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 { tabViewMeta } from './tab-view.meta.js';
+
+const TABS: ReadonlyArray<{ title: string; body: string }> = [
+    { title: 'Overview', body: 'A summary of everything at a glance.' },
+    { title: 'Details', body: 'The specifics, broken down line by line.' },
+    { title: 'History', body: 'A log of every change made so far.' },
+];
+
+/** Story: Adw.TabView with an Adw.TabBar and three appended pages. */
+export class TabViewStory extends StoryWidget {
+    private _tabBar: Adw.TabBar | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookTabView' }, TabViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(TabViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...tabViewMeta, component: Adw.TabView.$gtype };
+    }
+
+    private buildPageBody(title: string, body: string): Gtk.Widget {
+        const status = new Adw.StatusPage({
+            iconName: 'view-paged-symbolic',
+            title,
+            description: body,
+            vexpand: true,
+        });
+        return status;
+    }
+
+    initialize(): void {
+        const tabView = new Adw.TabView({ vexpand: true });
+        for (const tab of TABS) {
+            const page = tabView.append(this.buildPageBody(tab.title, tab.body));
+            page.title = tab.title;
+        }
+
+        this._tabBar = new Adw.TabBar({
+            view: tabView,
+            autohide: this.args.autohide as boolean,
+        });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._tabBar);
+        box.append(tabView);
+
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._tabBar) return;
+        this._tabBar.autohide = this.args.autohide as boolean;
+    }
+}
+
+GObject.type_ensure(TabViewStory.$gtype);
+
+export const TabViewStories: StoryModule = { stories: [TabViewStory] };

package/src/view-switching/view-switcher.meta.ts

@@ -0,0 +1,23 @@
+// Shared, renderer-agnostic metadata for the View Switcher story. Imported by
+// both the GTK renderer (view-switcher.story.ts) and the browser renderer
+// (browser/view-switching/view-switcher.web.ts) so the two expose identical
+// controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const viewSwitcherMeta: StoryMeta = {
+    title: 'View Switching/View Switcher',
+    description: 'Adw.ViewSwitcher — a segmented switcher whose buttons select pages in a paired Adw.ViewStack.',
+    controls: [
+        {
+            name: 'policy',
+            label: 'Policy',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Wide', value: 'wide' },
+                { label: 'Narrow', value: 'narrow' },
+            ],
+            defaultValue: 'wide',
+        },
+    ],
+};

package/src/view-switching/view-switcher.story.ts

@@ -0,0 +1,87 @@
+// Adw.ViewSwitcher — a tab-style switcher driving an Adw.ViewStack of pages.
+// 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 { viewSwitcherMeta } from './view-switcher.meta.js';
+
+/** Story: Adw.ViewSwitcher mounted above an Adw.ViewStack with three pages. */
+export class ViewSwitcherStory extends StoryWidget {
+    private _switcher: Adw.ViewSwitcher | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookViewSwitcher' }, ViewSwitcherStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ViewSwitcherStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...viewSwitcherMeta, component: Adw.ViewSwitcher.$gtype };
+    }
+
+    private buildPage(title: string, icon: string, body: string): Gtk.Widget {
+        const status = new Adw.StatusPage({
+            iconName: icon,
+            title,
+            description: body,
+            vexpand: true,
+        });
+        return status;
+    }
+
+    initialize(): void {
+        const stack = new Adw.ViewStack({ vexpand: true });
+        stack.add_titled_with_icon(
+            this.buildPage('Inbox', 'mail-unread-symbolic', 'You have three unread conversations.'),
+            'inbox',
+            'Inbox',
+            'mail-unread-symbolic',
+        );
+        stack.add_titled_with_icon(
+            this.buildPage('Starred', 'starred-symbolic', 'Messages you have marked as important.'),
+            'starred',
+            'Starred',
+            'starred-symbolic',
+        );
+        stack.add_titled_with_icon(
+            this.buildPage('Archive', 'folder-symbolic', 'Older conversations kept for reference.'),
+            'archive',
+            'Archive',
+            'folder-symbolic',
+        );
+
+        this._switcher = new Adw.ViewSwitcher({
+            stack,
+            policy: this.policyFromArg(this.args.policy as string),
+            halign: Gtk.Align.CENTER,
+        });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._switcher);
+        box.append(stack);
+
+        this.addContent(box);
+    }
+
+    private policyFromArg(value: string): Adw.ViewSwitcherPolicy {
+        return value === 'narrow' ? Adw.ViewSwitcherPolicy.NARROW : Adw.ViewSwitcherPolicy.WIDE;
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._switcher) return;
+        this._switcher.policy = this.policyFromArg(this.args.policy as string);
+    }
+}
+
+GObject.type_ensure(ViewSwitcherStory.$gtype);
+
+export const ViewSwitcherStories: StoryModule = { stories: [ViewSwitcherStory] };