@gjsify/example-gtk-adwaita-storybook 0.38.1 → 0.40.0

package/src/overview/widgets.meta.ts

@@ -33,6 +33,54 @@ export const OVERVIEW_ADVANCED_ROWS: ReadonlyArray<OverviewExpanderRow> = [
 /** The accent names the gallery's combo row offers — a plain widget demo, not the real setting. */
 export const OVERVIEW_ACCENT_OPTIONS: readonly string[] = ['Blue', 'Teal', 'Green', 'Orange'];
 
+/**
+ * The gallery's preference-group headings.
+ *
+ * Shared for the same reason the rows are: they were literals repeated in all
+ * three renderings, and the NativeScript copy had drifted to UPPERCASE
+ * (`APPEARANCE`) while GTK and the browser used title case. It was the only file
+ * in that showcase spelling group titles that way, so it read as a house style
+ * without being one — `Adw.PreferencesGroup:title` is rendered as given on every
+ * target, and libadwaita does not upper-case it.
+ */
+export const OVERVIEW_GROUP_TITLES = {
+    appearance: 'Appearance',
+    account: 'Account',
+    shortcuts: 'Shortcuts',
+    actions: 'Actions',
+} as const;
+
+/**
+ * Every remaining string the gallery puts on screen.
+ *
+ * The rows, shortcuts and accent names were already shared; the labels around
+ * them were not, and that is where the uppercase drift got in. Sharing only the
+ * headings would fix the one instance and leave the class — a literal repeated in
+ * three renderings, with nothing comparing them — so the whole content of the
+ * gallery lives here and each target only decides how to BUILD it.
+ */
+export const OVERVIEW_TEXT = {
+    bannerTitle: 'You have unsaved changes',
+    bannerButton: 'Save',
+    darkMode: 'Dark mode',
+    darkModeSubtitle: 'Use the dark Adwaita palette',
+    notifications: 'Notifications',
+    notificationsSubtitle: 'Show toasts for events',
+    accentColor: 'Accent color',
+    name: 'Name',
+    nameValue: 'Ada Lovelace',
+    email: 'Email',
+    emailValue: 'ada@example.com',
+    devices: 'Devices',
+    advanced: 'Advanced',
+    advancedSubtitle: 'More options',
+    save: 'Save changes',
+    delete: 'Delete account',
+} as const;
+
+/** The spin row's range and starting value, shared so the three agree on it too. */
+export const OVERVIEW_DEVICES = { value: 3, lower: 1, upper: 10, step: 1 } as const;
+
 /** The shortcut rows, so the newest widget appears in context and not only alone. */
 export const OVERVIEW_SHORTCUTS: ReadonlyArray<{ title: string; accelerator: string }> = [
     { title: 'Copy', accelerator: '<Control>C' },

package/src/overview/widgets.story.ts

@@ -8,7 +8,10 @@ import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@
 import {
     OVERVIEW_ACCENT_OPTIONS,
     OVERVIEW_ADVANCED_ROWS,
+    OVERVIEW_DEVICES,
+    OVERVIEW_GROUP_TITLES,
     OVERVIEW_SHORTCUTS,
+    OVERVIEW_TEXT,
     overviewWidgetsMeta,
 } from './widgets.meta.js';
 
@@ -32,8 +35,8 @@ export class OverviewWidgetsStory extends StoryWidget {
         const box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: true });
 
         this._banner = new Adw.Banner({
-            title: 'You have unsaved changes',
-            button_label: 'Save',
+            title: OVERVIEW_TEXT.bannerTitle,
+            button_label: OVERVIEW_TEXT.bannerButton,
             revealed: this.args.revealed as boolean,
         });
         box.append(this._banner);
@@ -43,14 +46,24 @@ export class OverviewWidgetsStory extends StoryWidget {
         // --- Appearance: switches and a combo. A widget demo only — the
         // storybook's OWN appearance lives in the header bar's dialog, and wiring
         // these to it would give one setting two controls that disagree.
-        const appearance = new Adw.PreferencesGroup({ title: 'Appearance' });
+        const appearance = new Adw.PreferencesGroup({ title: OVERVIEW_GROUP_TITLES.appearance });
         appearance.add(
-            new Adw.SwitchRow({ title: 'Dark mode', subtitle: 'Use the dark Adwaita palette', active: false }),
+            new Adw.SwitchRow({
+                title: OVERVIEW_TEXT.darkMode,
+                subtitle: OVERVIEW_TEXT.darkModeSubtitle,
+                active: false,
+            }),
+        );
+        appearance.add(
+            new Adw.SwitchRow({
+                title: OVERVIEW_TEXT.notifications,
+                subtitle: OVERVIEW_TEXT.notificationsSubtitle,
+                active: true,
+            }),
         );
-        appearance.add(new Adw.SwitchRow({ title: 'Notifications', subtitle: 'Show toasts for events', active: true }));
         appearance.add(
             new Adw.ComboRow({
-                title: 'Accent color',
+                title: OVERVIEW_TEXT.accentColor,
                 model: Gtk.StringList.new([...OVERVIEW_ACCENT_OPTIONS]),
                 selected: 0,
             }),
@@ -58,26 +71,36 @@ export class OverviewWidgetsStory extends StoryWidget {
         page.add(appearance);
 
         // --- Account: entries, a spin row, and a nested expander ---
-        const account = new Adw.PreferencesGroup({ title: 'Account' });
+        const account = new Adw.PreferencesGroup({ title: OVERVIEW_GROUP_TITLES.account });
 
-        const name = new Adw.EntryRow({ title: 'Name' });
-        name.set_text('Ada Lovelace');
+        const name = new Adw.EntryRow({ title: OVERVIEW_TEXT.name });
+        name.set_text(OVERVIEW_TEXT.nameValue);
         account.add(name);
 
-        const email = new Adw.EntryRow({ title: 'Email' });
-        email.set_text('ada@example.com');
+        const email = new Adw.EntryRow({ title: OVERVIEW_TEXT.email });
+        email.set_text(OVERVIEW_TEXT.emailValue);
         account.add(email);
 
         const devices = new Adw.SpinRow({
-            title: 'Devices',
-            adjustment: new Gtk.Adjustment({ value: 3, lower: 1, upper: 10, step_increment: 1, page_increment: 1 }),
+            title: OVERVIEW_TEXT.devices,
+            adjustment: new Gtk.Adjustment({
+                value: OVERVIEW_DEVICES.value,
+                lower: OVERVIEW_DEVICES.lower,
+                upper: OVERVIEW_DEVICES.upper,
+                step_increment: OVERVIEW_DEVICES.step,
+                page_increment: OVERVIEW_DEVICES.step,
+            }),
         });
         // The displayed value does not always follow the adjustment through
         // property-init ordering, so it is set explicitly.
-        devices.set_value(3);
+        devices.set_value(OVERVIEW_DEVICES.value);
         account.add(devices);
 
-        const advanced = new Adw.ExpanderRow({ title: 'Advanced', subtitle: 'More options', expanded: true });
+        const advanced = new Adw.ExpanderRow({
+            title: OVERVIEW_TEXT.advanced,
+            subtitle: OVERVIEW_TEXT.advancedSubtitle,
+            expanded: true,
+        });
         for (const row of OVERVIEW_ADVANCED_ROWS) {
             advanced.add_row(
                 row.kind === 'switch'
@@ -89,7 +112,7 @@ export class OverviewWidgetsStory extends StoryWidget {
         page.add(account);
 
         // --- Shortcuts: the newest widget, in context ---
-        const shortcuts = new Adw.PreferencesGroup({ title: 'Shortcuts' });
+        const shortcuts = new Adw.PreferencesGroup({ title: OVERVIEW_GROUP_TITLES.shortcuts });
         for (const shortcut of OVERVIEW_SHORTCUTS) {
             const row = new Adw.ActionRow({ title: shortcut.title });
             row.add_suffix(new Adw.ShortcutLabel({ accelerator: shortcut.accelerator, valign: Gtk.Align.CENTER }));
@@ -98,7 +121,7 @@ export class OverviewWidgetsStory extends StoryWidget {
         page.add(shortcuts);
 
         // --- Actions: the two button styles side by side ---
-        const actions = new Adw.PreferencesGroup({ title: 'Actions' });
+        const actions = new Adw.PreferencesGroup({ title: OVERVIEW_GROUP_TITLES.actions });
         const buttons = new Gtk.Box({
             orientation: Gtk.Orientation.HORIZONTAL,
             spacing: 12,
@@ -106,10 +129,10 @@ export class OverviewWidgetsStory extends StoryWidget {
             margin_top: 6,
             margin_bottom: 6,
         });
-        const save = new Gtk.Button({ label: 'Save changes' });
+        const save = new Gtk.Button({ label: OVERVIEW_TEXT.save });
         save.add_css_class('suggested-action');
         buttons.append(save);
-        const remove = new Gtk.Button({ label: 'Delete account' });
+        const remove = new Gtk.Button({ label: OVERVIEW_TEXT.delete });
         remove.add_css_class('destructive-action');
         buttons.append(remove);
         actions.add(buttons);

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

@@ -0,0 +1,20 @@
+// Shared, renderer-agnostic metadata for the View Switcher Bar story. Imported by the
+// GTK renderer (view-switcher-bar.story.ts), the browser renderer
+// (browser/view-switching/view-switcher-bar.web.ts) and the NativeScript one.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The three pages every rendering puts in its stack, so the bar has the same buttons. */
+export const VIEW_SWITCHER_BAR_PAGES: ReadonlyArray<{ name: string; title: string; icon: string }> = [
+    { name: 'inbox', title: 'Inbox', icon: 'mail-unread-symbolic' },
+    { name: 'starred', title: 'Starred', icon: 'starred-symbolic' },
+    { name: 'archive', title: 'Archive', icon: 'folder-symbolic' },
+];
+
+export const viewSwitcherBarMeta: StoryMeta = {
+    title: 'View Switching/View Switcher Bar',
+    description:
+        'Adw.ViewSwitcherBar — the narrow-window switcher, pinned to the bottom of a toolbar view. `reveal` ' +
+        'is a REQUEST, not a state: a stack with fewer than two pages stays collapsed however loudly it is asked.',
+    controls: [{ name: 'reveal', label: 'Reveal', type: ControlType.BOOLEAN, defaultValue: true }],
+};

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

@@ -0,0 +1,61 @@
+// Adw.ViewSwitcherBar — the narrow-window switcher, pinned to the bottom.
+// 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 { VIEW_SWITCHER_BAR_PAGES, viewSwitcherBarMeta } from './view-switcher-bar.meta.js';
+
+/** Story: an Adw.ViewSwitcherBar at the bottom of a toolbar view, driving its stack. */
+export class ViewSwitcherBarStory extends StoryWidget {
+    private _bar: Adw.ViewSwitcherBar | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookViewSwitcherBar' }, ViewSwitcherBarStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ViewSwitcherBarStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...viewSwitcherBarMeta, component: Adw.ViewSwitcherBar.$gtype };
+    }
+
+    initialize(): void {
+        const stack = new Adw.ViewStack({ vexpand: true });
+        for (const page of VIEW_SWITCHER_BAR_PAGES) {
+            const status = new Adw.StatusPage({
+                iconName: page.icon,
+                title: page.title,
+                description: `The ${page.title.toLowerCase()} page.`,
+                vexpand: true,
+            });
+            stack.add_titled_with_icon(status, page.name, page.title, page.icon);
+        }
+
+        this._bar = new Adw.ViewSwitcherBar({ stack });
+        this._apply();
+
+        // The bar belongs at an edge — a toolbar view is where libadwaita puts it,
+        // and it is what makes the story show the bar's real position rather than a
+        // widget floating in the middle of the preview.
+        const view = new Adw.ToolbarView({ content: stack, widthRequest: 360, heightRequest: 360 });
+        view.add_bottom_bar(this._bar);
+
+        this.addContent(view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        this._bar.reveal = this.args.reveal as boolean;
+    }
+}
+
+GObject.type_ensure(ViewSwitcherBarStory.$gtype);
+
+export const ViewSwitcherBarStories: StoryModule = { stories: [ViewSwitcherBarStory] };