@gjsify/adwaita-storybook 0.11.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -5
- package/src/_virtual/_rolldown/runtime22.js +1 -0
- package/src/app2.js +1 -1
- package/src/controls22.js +1 -0
- package/src/styles22.js +198 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gjsify/adwaita-storybook",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "Browser renderer for the @gjsify/stories contract — the web counterpart of @gjsify/storybook, built on @gjsify/adwaita-web",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"browser"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@gjsify/adwaita-web": "^0.
|
|
34
|
-
"@gjsify/stories": "^0.
|
|
35
|
-
"@gjsify/storybook-core": "^0.
|
|
33
|
+
"@gjsify/adwaita-web": "^0.13.0",
|
|
34
|
+
"@gjsify/stories": "^0.13.0",
|
|
35
|
+
"@gjsify/storybook-core": "^0.13.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@gjsify/cli": "^0.
|
|
38
|
+
"@gjsify/cli": "^0.13.0",
|
|
39
39
|
"typescript": "^6.0.3"
|
|
40
40
|
},
|
|
41
41
|
"gjsify": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./runtime2.js";
|
package/src/app2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{createControlRow as e}from"./
|
|
1
|
+
import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{createControlRow as e}from"./controls22.js";import{injectStorybookStyles as t}from"./styles22.js";import"@gjsify/adwaita-web";import{StorybookController as n}from"@gjsify/storybook-core";function h(e,t={},n=[]){let r=document.createElement(e);for(let[e,n]of Object.entries(t))r.setAttribute(e,n);for(let e of n)r.append(e);return r}var StorybookWebApp=class{_controller=new n(this,e=>this._buildControls(e));_options;_container;_listEl;_previewEl;_previewTitle;_controlsGroup;_navSplit;_controlsSplit;_backBtn;_rowByTitle=new Map;constructor(e,t){this._container=e,this._options=t}mount(){t(),this._buildUI(),this._observeBreakpoint(),this._exposeGlobal(),this._controller.mount(this._options.stories,this._options.openFirst!==!1)}_observeBreakpoint(){let apply=()=>this._applyBreakpoint();typeof ResizeObserver<`u`?new ResizeObserver(apply).observe(this._navSplit):globalThis.addEventListener?.(`resize`,apply),apply()}_applyBreakpoint(){let e=this._navSplit.clientWidth;if(e===0)return;let t=e<620,n=e<1e3,r=this._navSplit,i=this._controlsSplit;r.collapsed!==t&&(r.collapsed=t),i.collapsed!==n&&(i.collapsed=n),this._navSplit.removeAttribute(`show-content`),this._backBtn.hidden=!0,i.showSidebar=!n}get activeStory(){return this._controller.activeStory}listStories(){return this._controller.listStories()}openStoryByTitle(e){return this._controller.openStoryByTitle(e)}getCurrentStory(){return this._controller.getCurrentStory()}setActiveArg(e,t){return this._controller.setActiveArg(e,t)}renderSidebar(e,t){this._listEl.replaceChildren(),this._rowByTitle.clear();for(let{category:n,stories:r}of e){this._listEl.append(h(`div`,{class:`sb-category`},[n]));for(let{instance:e,name:n}of r){let r=h(`div`,{class:`sb-story-row`,role:`button`,tabindex:`0`},[n]);r.addEventListener(`click`,()=>t(e)),r.addEventListener(`keydown`,n=>{(n.key===`Enter`||n.key===` `)&&(n.preventDefault(),t(e))}),this._listEl.append(r),this._rowByTitle.set(e.meta.title,r)}}}markSelected(e){for(let[t,n]of this._rowByTitle)n.classList.toggle(`selected`,t===e)}setPreviewTitle(e){this._previewTitle.setAttribute(`title`,e)}showPreview(e){this._previewEl.replaceChildren(e.element),this._navSplit.collapsed&&this._navSplit.setAttribute(`show-content`,``)}renderControls(e){let t=this._controlsGroup.querySelector(`.adw-preferences-group-listbox`);if(t){t.replaceChildren();for(let n of e)t.append(n.view)}}_buildControls(t){let n=[],r=t.meta.controls;if(Array.isArray(r))for(let i of r){if(!i?.name||!i?.type){console.warn(`Invalid control configuration:`,i);continue}let r=e(t,i);r&&n.push(r)}return n}_buildUI(){this._listEl=h(`div`,{class:`sb-sidebar-list navigation-sidebar`});let e=h(`div`,{class:`sb-sidebar-scroll`},[this._listEl]),t=h(`div`,{slot:`sidebar`,class:`sb-sidebar-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[h(`adw-window-title`,{slot:`center`,title:this._options.title??`Stories`})]),e])]);this._previewEl=h(`div`,{class:`sb-preview-scroll`}),this._controlsGroup=h(`adw-preferences-group`,{title:`Controls`});let n=h(`div`,{slot:`sidebar`,class:`sb-controls-scroll`},[h(`div`,{class:`sb-controls-page`},[this._controlsGroup])]),r=h(`adw-overlay-split-view`,{"sidebar-position":`end`,"show-sidebar":``,"min-sidebar-width":`280`,"max-sidebar-width":`360`},[h(`div`,{slot:`content`,class:`sb-preview-pane`},[this._previewEl]),n]);this._controlsSplit=r,this._backBtn=h(`button`,{class:`adw-header-btn sb-back-btn`,slot:`start`,title:`Back to stories`,"aria-label":`Back to stories`}),this._backBtn.append(h(`span`,{class:`adw-icon adw-icon--go-previous`})),this._backBtn.hidden=!0,this._backBtn.addEventListener(`click`,()=>this._navSplit.removeAttribute(`show-content`)),this._previewTitle=h(`adw-window-title`,{slot:`center`,title:`Preview`});let i=h(`button`,{class:`adw-header-btn sb-toggle-controls`,title:`Toggle Controls`,"aria-label":`Toggle Controls`});i.append(h(`span`,{class:`adw-icon adw-icon--sidebar-show`})),i.setAttribute(`slot`,`end`),i.addEventListener(`click`,()=>{r.showSidebar=!r.showSidebar});let a=h(`div`,{slot:`content`,class:`sb-content-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[this._backBtn,this._previewTitle,i]),r])]);this._navSplit=h(`adw-navigation-split-view`,{"min-sidebar-width":`220`,"max-sidebar-width":`320`},[t,a]);let o=h(`adw-window`,{class:`sb-window`},[this._navSplit]);this._container.replaceChildren(o)}_exposeGlobal(){globalThis.__storybook={listStories:()=>this.listStories(),openStory:e=>this.openStoryByTitle(e),getCurrentStory:()=>this.getCurrentStory(),setArg:(e,t)=>this.setActiveArg(e,t),getArgs:()=>this.activeStory?.args??null}}};function mountStorybook(e,t){let n=new StorybookWebApp(e,t);return n.mount(),n}export{StorybookWebApp,mountStorybook};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import"./_virtual/_rolldown/runtime22.js";import{bindControl as e}from"@gjsify/storybook-core";function createControlRow(n,r){return e(n,r,t)}const t={text(e){let t=document.createElement(`adw-entry-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`changed`,e=>cb(e.detail.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let n=document.createElement(`adw-action-row`);n.setAttribute(`title`,e),t&&n.setAttribute(`subtitle`,t);let r=document.createElement(`input`);r.type=`color`,r.className=`sb-color-input`,r.slot=`suffix`,n.appendChild(r);let cb=()=>{};return r.addEventListener(`input`,()=>cb(r.value)),{node:n,get:()=>r.value,set:e=>{r.value=e},onChange:e=>{cb=e}}},boolean(e){let t=document.createElement(`adw-switch-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`notify::active`,e=>cb(e.detail.active)),{node:t,get:()=>t.hasAttribute(`active`),set:e=>{t.toggleAttribute(`active`,e)},onChange:e=>{cb=e}}},number(e){let t=document.createElement(`adw-spin-row`);t.setAttribute(`title`,label(e)),t.setAttribute(`min`,String(e.min??0)),t.setAttribute(`max`,String(e.max??100)),t.setAttribute(`step`,String(e.step??1));let cb=()=>{};return t.addEventListener(`notify::value`,e=>cb(e.detail.value)),{node:t,get:()=>t.value??0,set:e=>{t.value=e},onChange:e=>{cb=e}}},select(e){let t=e.options??[],n=document.createElement(`adw-combo-row`);n.setAttribute(`title`,label(e)),n.setAttribute(`items`,JSON.stringify(t.map(e=>e.label)));let cb=()=>{};return n.addEventListener(`notify::selected`,e=>cb(e.detail.selected)),{node:n,get:()=>n.selected??0,set:e=>{n.selected=e},onChange:e=>{cb=e}}},range(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=Number.isInteger(r),format=e=>i?String(Math.round(e)):e.toFixed(2),a=document.createElement(`div`);a.className=`sb-range-row`;let o=document.createElement(`div`);o.className=`sb-range-header`;let s=document.createElement(`span`);s.className=`sb-range-title`,s.textContent=label(e);let c=document.createElement(`span`);c.className=`sb-range-value`,o.append(s,c);let l=document.createElement(`input`);if(l.type=`range`,l.className=`sb-range-input`,l.min=String(t),l.max=String(n),l.step=String(r),e.description){let t=document.createElement(`span`);t.className=`sb-range-description`,t.textContent=e.description,a.append(o,t,l)}else a.append(o,l);let cb=()=>{};return l.addEventListener(`input`,()=>{let e=parseFloat(l.value);c.textContent=format(e),cb(e)}),{node:a,get:()=>parseFloat(l.value),set:e=>{l.value=String(e),c.textContent=format(e)},onChange:e=>{cb=e}}}};function label(e){return e.label||e.name}export{createControlRow};
|
package/src/styles22.js
ADDED
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import"./_virtual/_rolldown/runtime22.js";let e=!1;function injectStorybookStyles(){if(e||typeof document>`u`)return;if(document.getElementById(`adwaita-storybook-style`)){e=!0;return}let t=document.createElement(`style`);t.id=`adwaita-storybook-style`,t.textContent=`
|
|
2
|
+
.sb-window {
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
min-height: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Each pane in the outer split view is a flex column that fills its height. */
|
|
10
|
+
.sb-sidebar-pane,
|
|
11
|
+
.sb-content-pane {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
min-height: 0;
|
|
15
|
+
min-width: 0;
|
|
16
|
+
flex: 1 1 auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* The toolbar-view content holds either a scroller (sidebar) or the split view
|
|
20
|
+
(content); the inner panes own the scrolling, so this level never scrolls. */
|
|
21
|
+
.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,
|
|
22
|
+
.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Background scheme: the content header + preview + controls all sit on the
|
|
27
|
+
window (story) background as one surface; only the left story-list column
|
|
28
|
+
(its header + list) keeps the distinct sidebar shade. Matches the native
|
|
29
|
+
renderer. The default adw-header-bar background is its own headerbar shade,
|
|
30
|
+
so override it per pane here. */
|
|
31
|
+
.sb-content-pane adw-header-bar {
|
|
32
|
+
background-color: var(--window-bg-color);
|
|
33
|
+
}
|
|
34
|
+
.sb-sidebar-pane adw-header-bar {
|
|
35
|
+
background-color: var(--sidebar-bg-color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sb-sidebar-scroll {
|
|
39
|
+
flex: 1 1 auto;
|
|
40
|
+
min-height: 0;
|
|
41
|
+
overflow-y: auto;
|
|
42
|
+
background-color: var(--sidebar-bg-color);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* --- Story list (mirrors GTK .navigation-sidebar) --- */
|
|
46
|
+
.sb-sidebar-list {
|
|
47
|
+
padding: var(--spacing-xs);
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
gap: 1px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.sb-category {
|
|
54
|
+
font-size: var(--font-size-small);
|
|
55
|
+
font-weight: 700;
|
|
56
|
+
opacity: var(--dim-opacity);
|
|
57
|
+
padding: 10px var(--spacing-m) 4px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sb-story-row {
|
|
61
|
+
padding: var(--spacing-xs) var(--spacing-m);
|
|
62
|
+
margin: 0 var(--spacing-xs);
|
|
63
|
+
border-radius: var(--button-radius);
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
color: var(--window-fg-color);
|
|
66
|
+
font-size: var(--font-size-base);
|
|
67
|
+
white-space: nowrap;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.sb-story-row:hover {
|
|
73
|
+
background-color: var(--button-bg-color);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.sb-story-row.selected {
|
|
77
|
+
background-color: var(--accent-bg-color);
|
|
78
|
+
color: var(--accent-fg-color);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* --- Preview area --- */
|
|
82
|
+
.sb-preview-scroll {
|
|
83
|
+
flex: 1 1 auto;
|
|
84
|
+
min-height: 0;
|
|
85
|
+
min-width: 0;
|
|
86
|
+
overflow: auto;
|
|
87
|
+
background-color: var(--window-bg-color);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.sb-story-page {
|
|
91
|
+
display: flex;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
padding: var(--spacing-xl) var(--spacing-m);
|
|
94
|
+
min-height: 100%;
|
|
95
|
+
box-sizing: border-box;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.sb-story-clamp {
|
|
99
|
+
width: 100%;
|
|
100
|
+
max-width: 600px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.sb-story-group-header {
|
|
104
|
+
padding: var(--spacing-xs) 2px;
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
gap: 2px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.sb-story-group-title {
|
|
111
|
+
font-size: var(--font-size-heading);
|
|
112
|
+
font-weight: 700;
|
|
113
|
+
color: var(--window-fg-color);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.sb-story-group-description {
|
|
117
|
+
font-size: var(--font-size-base);
|
|
118
|
+
opacity: var(--dim-opacity);
|
|
119
|
+
color: var(--window-fg-color);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Centered, dashed-framed preview stage (mirrors the native .story-stage). */
|
|
123
|
+
.story-stage {
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
gap: var(--spacing-m);
|
|
129
|
+
padding: var(--spacing-l);
|
|
130
|
+
margin-top: var(--spacing-s);
|
|
131
|
+
border: 1px dashed rgba(127, 127, 127, 0.28);
|
|
132
|
+
border-radius: var(--card-radius);
|
|
133
|
+
min-height: 80px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* --- Controls panel --- */
|
|
137
|
+
.sb-controls-scroll {
|
|
138
|
+
height: 100%;
|
|
139
|
+
overflow-y: auto;
|
|
140
|
+
background-color: var(--window-bg-color);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.sb-controls-page {
|
|
144
|
+
padding: var(--spacing-l);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Range-control card (mirrors the native .story-range-row). */
|
|
148
|
+
.sb-range-row {
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
gap: var(--spacing-xs);
|
|
152
|
+
padding: var(--spacing-m);
|
|
153
|
+
border-bottom: 1px solid var(--card-shade-color);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.sb-range-row:last-child {
|
|
157
|
+
border-bottom: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.sb-range-header {
|
|
161
|
+
display: flex;
|
|
162
|
+
justify-content: space-between;
|
|
163
|
+
align-items: baseline;
|
|
164
|
+
gap: var(--spacing-m);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.sb-range-title {
|
|
168
|
+
font-size: var(--font-size-base);
|
|
169
|
+
font-weight: 700;
|
|
170
|
+
color: var(--card-fg-color);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.sb-range-value {
|
|
174
|
+
font-size: var(--font-size-base);
|
|
175
|
+
font-variant-numeric: tabular-nums;
|
|
176
|
+
opacity: var(--dim-opacity);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.sb-range-description {
|
|
180
|
+
font-size: var(--font-size-small);
|
|
181
|
+
opacity: var(--dim-opacity);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.sb-range-input {
|
|
185
|
+
width: 100%;
|
|
186
|
+
accent-color: var(--accent-bg-color);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.sb-color-input {
|
|
190
|
+
width: 42px;
|
|
191
|
+
height: 28px;
|
|
192
|
+
padding: 0;
|
|
193
|
+
border: 1px solid var(--card-shade-color);
|
|
194
|
+
border-radius: var(--button-radius);
|
|
195
|
+
background: none;
|
|
196
|
+
cursor: pointer;
|
|
197
|
+
}
|
|
198
|
+
`,document.head.appendChild(t),e=!0}export{injectStorybookStyles};
|