From 13e6345b1de163189213d056b0bcebd38ffdafe2 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Wed, 27 Aug 2025 09:34:30 -0400
Subject: [PATCH] add storybook (component dev)

---
 modules/Shell.qml               |  4 +--
 modules/Shortcuts.qml           |  6 +++++
 modules/storybook/Storybook.qml | 44 +++++++++++++++++++++++++++++++++
 services/Visibility.qml         |  2 ++
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 modules/storybook/Storybook.qml

diff --git a/modules/Shell.qml b/modules/Shell.qml
index d38c685..ed1e550 100644
--- a/modules/Shell.qml
+++ b/modules/Shell.qml
@@ -2,10 +2,9 @@ import "bar"
 import "launcher"
 import "pomodoro"
 import "powermenu"
+import "storybook"
 import Quickshell
-import Quickshell.Wayland
 import QtQuick
-import QtQuick.Effects
 
 Variants {
     model: Quickshell.screens
@@ -19,5 +18,6 @@ Variants {
         Launcher {}
         Pomodoro {}
         PowerMenu {}
+        Storybook {}
     }
 }
diff --git a/modules/Shortcuts.qml b/modules/Shortcuts.qml
index 2c47882..2eb064e 100644
--- a/modules/Shortcuts.qml
+++ b/modules/Shortcuts.qml
@@ -22,4 +22,10 @@ Scope {
         description: 'Open the Power Menu'
         onPressed: Visibility.powermenu = !Visibility.powermenu
     }
+
+    LuxShortcut {
+        name: 'storybook'
+        description: 'Open the Component Storybook'
+        onPressed: Visibility.storybook = !Visibility.storybook
+    }
 }
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
new file mode 100644
index 0000000..6334ec2
--- /dev/null
+++ b/modules/storybook/Storybook.qml
@@ -0,0 +1,44 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import qs.services
+import qs.widgets
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledWindow {
+    id: root
+    name: "storybook"
+
+    visible: Visibility.storybook
+    implicitWidth: rect.width
+    implicitHeight: rect.height
+
+    WlrLayershell.layer: WlrLayer.Top
+    WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+
+    WrapperRectangle {
+        id: rect
+
+        color: Theme.palette.base300
+        leftMargin: 48
+        rightMargin: 48
+        topMargin: 24
+        bottomMargin: 24
+        radius: 8
+
+        HyprlandFocusGrab {
+            active: Visibility.storybook
+            windows: [root]
+            onCleared: {
+                Visibility.storybook = false;
+            }
+        }
+
+        ColumnLayout {}
+    }
+}
diff --git a/services/Visibility.qml b/services/Visibility.qml
index d188159..b3a2678 100644
--- a/services/Visibility.qml
+++ b/services/Visibility.qml
@@ -7,6 +7,7 @@ Singleton {
     property alias launcher: properties.launcher
     property alias pomodoro: properties.pomodoro
     property alias powermenu: properties.powermenu
+    property alias storybook: properties.storybook
     property StyledPopupWindow activePopup
 
     function togglePopup(popup: StyledPopupWindow) {
@@ -23,5 +24,6 @@ Singleton {
         property bool launcher
         property bool pomodoro
         property bool powermenu
+        property bool storybook
     }
 }