@bitovi/vybit 0.10.3 → 0.11.1
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/README.md +5 -3
- package/overlay/dist/overlay.js +9 -5
- package/package.json +1 -1
- package/panel/dist/assets/{DesignMode-CFbFFIBZ.js → DesignMode-Ch-krWhx.js} +1 -1
- package/panel/dist/assets/index-CGc6ZuTL.js +62 -0
- package/panel/dist/index.html +1 -1
- package/shared/types.ts +2 -0
- package/storybook-addon/manager-v10.tsx +35 -0
- package/storybook-addon/manager.tsx +2 -2
- package/storybook-addon/package.json +1 -1
- package/storybook-addon/preset.js +14 -2
- package/storybook-addon/preview-v10.ts +32 -0
- package/panel/dist/assets/index-aBt_Tt69.js +0 -62
package/panel/dist/index.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
font-size: 12px;
|
|
17
17
|
}
|
|
18
18
|
</style>
|
|
19
|
-
<script type="module" crossorigin src="/panel/assets/index-
|
|
19
|
+
<script type="module" crossorigin src="/panel/assets/index-CGc6ZuTL.js"></script>
|
|
20
20
|
<link rel="stylesheet" crossorigin href="/panel/assets/index-BdUOBofL.css">
|
|
21
21
|
</head>
|
|
22
22
|
<body>
|
package/shared/types.ts
CHANGED
|
@@ -128,6 +128,8 @@ export interface ElementSelectedMessage {
|
|
|
128
128
|
export interface ClearHighlightsMessage {
|
|
129
129
|
type: 'CLEAR_HIGHLIGHTS';
|
|
130
130
|
to: 'overlay';
|
|
131
|
+
/** When true, also clears the selected element context (currentTargetEl, currentBoundary, etc). */
|
|
132
|
+
deselect?: boolean;
|
|
131
133
|
}
|
|
132
134
|
|
|
133
135
|
export interface SwitchContainerMessage {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { addons, types } from 'storybook/manager-api';
|
|
3
|
+
import { AddonPanel } from 'storybook/internal/components';
|
|
4
|
+
|
|
5
|
+
const ADDON_ID = 'vybit';
|
|
6
|
+
const PANEL_ID = `${ADDON_ID}/panel`;
|
|
7
|
+
|
|
8
|
+
addons.register(ADDON_ID, (api) => {
|
|
9
|
+
addons.add(PANEL_ID, {
|
|
10
|
+
type: types.PANEL,
|
|
11
|
+
title: 'VyBit',
|
|
12
|
+
paramKey: 'vybit',
|
|
13
|
+
render: ({ active }) => {
|
|
14
|
+
const serverUrl =
|
|
15
|
+
api.getCurrentParameter<{ serverUrl?: string }>('vybit')?.serverUrl
|
|
16
|
+
?? 'http://localhost:3333';
|
|
17
|
+
|
|
18
|
+
if (active) {
|
|
19
|
+
api.togglePanelPosition('right');
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<AddonPanel active={active ?? false}>
|
|
24
|
+
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
|
|
25
|
+
<iframe
|
|
26
|
+
src={`${serverUrl}/panel/`}
|
|
27
|
+
style={{ width: '100%', height: '100%', border: 'none' }}
|
|
28
|
+
title="Vybit Panel"
|
|
29
|
+
/>
|
|
30
|
+
</div>
|
|
31
|
+
</AddonPanel>
|
|
32
|
+
);
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -8,7 +8,7 @@ const PANEL_ID = `${ADDON_ID}/panel`;
|
|
|
8
8
|
addons.register(ADDON_ID, (api) => {
|
|
9
9
|
addons.add(PANEL_ID, {
|
|
10
10
|
type: types.PANEL,
|
|
11
|
-
title: '
|
|
11
|
+
title: 'VyBit',
|
|
12
12
|
paramKey: 'vybit',
|
|
13
13
|
render: ({ active }) => {
|
|
14
14
|
const serverUrl =
|
|
@@ -21,7 +21,7 @@ addons.register(ADDON_ID, (api) => {
|
|
|
21
21
|
|
|
22
22
|
return (
|
|
23
23
|
<AddonPanel active={active ?? false}>
|
|
24
|
-
<div style={{
|
|
24
|
+
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
|
|
25
25
|
<iframe
|
|
26
26
|
src={`${serverUrl}/panel/`}
|
|
27
27
|
style={{ width: '100%', height: '100%', border: 'none' }}
|
|
@@ -1,10 +1,22 @@
|
|
|
1
1
|
const { join } = require('path');
|
|
2
2
|
|
|
3
|
+
// Detect SB major version to choose the right entry points.
|
|
4
|
+
// SB10 consolidates imports under 'storybook/*'; SB8 uses '@storybook/*'.
|
|
5
|
+
let sbMajor = 8;
|
|
6
|
+
try {
|
|
7
|
+
const sbPkgPath = require.resolve('storybook/package.json', { paths: [process.cwd()] });
|
|
8
|
+
const ver = require(sbPkgPath).version;
|
|
9
|
+
sbMajor = parseInt(ver.split('.')[0], 10);
|
|
10
|
+
} catch { /* default to 8 */ }
|
|
11
|
+
|
|
12
|
+
const managerFile = sbMajor >= 10 ? './manager-v10.tsx' : './manager.tsx';
|
|
13
|
+
const previewFile = sbMajor >= 10 ? './preview-v10.ts' : './preview.ts';
|
|
14
|
+
|
|
3
15
|
module.exports = {
|
|
4
16
|
managerEntries(entry = []) {
|
|
5
|
-
return [...entry, join(__dirname,
|
|
17
|
+
return [...entry, join(__dirname, managerFile)];
|
|
6
18
|
},
|
|
7
19
|
previewAnnotations(entry = []) {
|
|
8
|
-
return [...entry, join(__dirname,
|
|
20
|
+
return [...entry, join(__dirname, previewFile)];
|
|
9
21
|
},
|
|
10
22
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { addons } from 'storybook/preview-api';
|
|
2
|
+
|
|
3
|
+
let injected = false;
|
|
4
|
+
|
|
5
|
+
export const decorators = [
|
|
6
|
+
(StoryFn: any, context: any) => {
|
|
7
|
+
const serverUrl =
|
|
8
|
+
context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
|
|
9
|
+
|
|
10
|
+
if (!injected) {
|
|
11
|
+
console.log('[vybit-addon] Injecting overlay script from', serverUrl);
|
|
12
|
+
const script = document.createElement('script');
|
|
13
|
+
script.src = `${serverUrl}/overlay.js`;
|
|
14
|
+
script.onload = () => console.log('[vybit-addon] overlay.js loaded successfully');
|
|
15
|
+
script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
|
|
16
|
+
document.head.appendChild(script);
|
|
17
|
+
injected = true;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return StoryFn();
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
const channel = addons.getChannel();
|
|
25
|
+
let lastStoryId: string | undefined;
|
|
26
|
+
|
|
27
|
+
channel.on('storyRendered', (storyId?: string) => {
|
|
28
|
+
// Only reset selection on actual story navigation, not HMR updates
|
|
29
|
+
if (storyId && storyId === lastStoryId) return;
|
|
30
|
+
lastStoryId = storyId;
|
|
31
|
+
window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
|
|
32
|
+
});
|