@bitovi/vybit 0.10.2 → 0.11.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.
Files changed (12) hide show
  1. package/README.md +5 -3
  2. package/overlay/dist/overlay.js +17 -1
  3. package/package.json +5 -2
  4. package/panel/dist/assets/{DesignMode-DIE1QwEI.js → DesignMode-CFbFFIBZ.js} +1 -1
  5. package/panel/dist/assets/{index-BQ3lRnYp.js → index-aBt_Tt69.js} +10 -10
  6. package/panel/dist/index.html +1 -1
  7. package/storybook-addon/manager-v10.tsx +35 -0
  8. package/storybook-addon/manager.tsx +8 -6
  9. package/storybook-addon/package.json +1 -1
  10. package/storybook-addon/preset.js +16 -1
  11. package/storybook-addon/preview-v10.ts +32 -0
  12. package/storybook-addon/preview.ts +3 -0
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-BQ3lRnYp.js"></script>
19
+ <script type="module" crossorigin src="/panel/assets/index-aBt_Tt69.js"></script>
20
20
  <link rel="stylesheet" crossorigin href="/panel/assets/index-BdUOBofL.css">
21
21
  </head>
22
22
  <body>
package/storybook-addon/manager-v10.tsx ADDED
@@ -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
+ });
package/storybook-addon/manager.tsx CHANGED
@@ -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: 'Vybit',
11
+ title: 'VyBit',
12
12
  paramKey: 'vybit',
13
13
  render: ({ active }) => {
14
14
  const serverUrl =
@@ -21,11 +21,13 @@ addons.register(ADDON_ID, (api) => {
21
21
 
22
22
  return (
23
23
  <AddonPanel active={active ?? false}>
24
- <iframe
25
- src={`${serverUrl}/panel/`}
26
- style={{ width: '100%', height: '100%', border: 'none' }}
27
- title="Vybit Panel"
28
- />
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>
29
31
  </AddonPanel>
30
32
  );
31
33
  },
package/storybook-addon/package.json CHANGED
@@ -5,6 +5,6 @@
5
5
  "type": "commonjs",
6
6
  "description": "Storybook addon wiring for Vybit — overlay injection + panel registration",
7
7
  "peerDependencies": {
8
- "storybook": "^8.0.0"
8
+ "storybook": "^8.0.0 || ^10.0.0"
9
9
  }
10
10
  }
package/storybook-addon/preset.js CHANGED
@@ -1,7 +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, './manager.tsx')];
17
+ return [...entry, join(__dirname, managerFile)];
18
+ },
19
+ previewAnnotations(entry = []) {
20
+ return [...entry, join(__dirname, previewFile)];
6
21
  },
7
22
  };
package/storybook-addon/preview-v10.ts ADDED
@@ -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
+ });
package/storybook-addon/preview.ts CHANGED
@@ -8,8 +8,11 @@ export const decorators = [
8
8
  context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
9
9
 
10
10
  if (!injected) {
11
+ console.log('[vybit-addon] Injecting overlay script from', serverUrl);
11
12
  const script = document.createElement('script');
12
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);
13
16
  document.head.appendChild(script);
14
17
  injected = true;
15
18
  }