@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.48 → 2.0.0-next.50

package/.storybook/ComponentPreview.tsx

@@ -0,0 +1,26 @@
+import { useOf, DocsContext, Story } from '@storybook/addon-docs/blocks';
+import React, { useContext } from 'react';
+ 
+/**
+ * A block that displays the story name or title from the of prop
+ * - if a story reference is passed, it renders the story name
+ * - if a meta reference is passed, it renders the stories' title
+ * - if nothing is passed, it defaults to the primary story
+ */
+export const ComponentPreview = (props: { of?: string }) => {
+    const { of } = props;
+    if ('of' in props && of === undefined) {
+      throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+    }
+  
+    const { csfFile } = useOf(of || 'meta', ['meta']);
+    const context = useContext(DocsContext);
+  
+    const primaryStory = context.componentStoriesFromCSFFile(csfFile)[0];
+  
+    return primaryStory ? (
+        <div style={{ padding: '24px', backgroundColor: 'var(--container-section-color)', width: '100%', borderRadius: '2px'}}>
+            <Story of={primaryStory.moduleExport} />
+        </div>
+    ) : null;
+};

package/.storybook/PreviewTemplate.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Meta, Title, Primary, Controls, Stories, Description, Subtitle } from '@storybook/addon-docs/blocks';
+import { ComponentPreview } from './ComponentPreview.js';
+
+const STICKY_MAX_HEIGHT_VH = 80;
+const getStickyMaxHeight = () => (window.innerHeight * STICKY_MAX_HEIGHT_VH) / 100;
+
+function useStickyOnSmall(getMaxHeight: () => number, enabled: boolean) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isSticky, setIsSticky] = useState(true);
+
+  useEffect(() => {
+    if (!ref.current || !enabled) return;
+
+    const checkSticky = () => {
+      if (!ref.current) return;
+      const height = ref.current.getBoundingClientRect().height;
+      setIsSticky(height <= getMaxHeight());
+    };
+
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(checkSticky);
+    });
+
+    observer.observe(ref.current);
+
+    window.addEventListener('resize', checkSticky);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', checkSticky);
+    };
+  }, [getMaxHeight, enabled]);
+
+  return { ref, isSticky };
+}
+
+export const PreviewTemplate: React.FC = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const { ref: previewRef, isSticky } = useStickyOnSmall(getStickyMaxHeight, !isCollapsed);
+
+  return (
+    <>
+      <Meta />
+      <Title />
+      <ComponentPreview of="meta" />
+      <Subtitle />
+      <Description />
+      <div>
+        <div
+          ref={previewRef}
+          style={{
+            position: isSticky ? 'sticky' : 'relative',
+            top: isSticky ? 0 : undefined,
+            zIndex: 10,
+            backgroundColor: 'var(--container-section-color)',
+            borderRadius: '2px',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Toolbar */}
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '8px 12px',
+            borderBottom: isCollapsed ? 'none' : '1px solid rgba(128, 128, 128, 0.2)',
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
+          }}>
+            <span style={{ fontSize: '12px', fontWeight: 500, opacity: 0.7 }}>Preview</span>
+            <button
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              style={{
+                padding: '4px 8px',
+                fontSize: '11px',
+                border: '1px solid rgba(128, 128, 128, 0.3)',
+                borderRadius: '4px',
+                background: 'transparent',
+                cursor: 'pointer',
+              }}
+            >
+              {isCollapsed ? 'Expand' : 'Collapse'}
+            </button>
+          </div>
+          {/* Preview content */}
+          {!isCollapsed && (
+            <div style={{ padding: '24px' }}>
+              <Primary />
+            </div>
+          )}
+        </div>
+        <Controls />
+      </div>
+      <Stories />
+    </>
+  );
+};
+
+export default PreviewTemplate; 

package/.storybook/action-handler.ts

@@ -0,0 +1,81 @@
+import type {PartialStoryFn, Renderer} from 'storybook/internal/types';
+
+import {makeDecorator, useEffect} from 'storybook/preview-api';
+import {getCustomElements} from '@storybook/web-components';
+
+import {action} from 'storybook/actions';
+
+const actionsFn = (e: Event) => {
+  const eventName = e.type;
+  let detail: unknown = undefined;
+  if (e instanceof CustomEvent) {
+    if (e.detail !== undefined) {
+      const serialized = JSON.stringify(e.detail);
+      detail = serialized !== undefined ? JSON.parse(serialized) : undefined;
+    }
+  }
+  action(eventName)({
+    detail,
+    type: e.type,
+    bubbles: e.bubbles,
+    composed: e.composed,
+    cancelable: e.cancelable,
+    target: e.target,
+  });
+};
+
+const recursiveFindObcElement = (element: HTMLElement): HTMLElement | null => {
+  if (element.tagName.startsWith('OBC-')) {
+    return element;
+  }
+  if (element.children.length > 0) {
+    for (const child of element.children) {
+      const obcElement = recursiveFindObcElement(child as HTMLElement);
+      if (obcElement) {
+        return obcElement;
+      }
+    }
+  }
+  return null;
+};
+
+const applyEventHandlers = (...handles: string[]) => {
+  useEffect(() => {
+    const root = document.getElementById('storybook-root');
+    const obcElement = root && recursiveFindObcElement(root);
+    if (obcElement) {
+      handles.forEach((eventName) => {
+        obcElement.addEventListener(eventName, actionsFn);
+      });
+      return () =>
+        handles.forEach((eventName) =>
+          obcElement.removeEventListener(eventName, actionsFn)
+        );
+    }
+    return undefined;
+  }, [handles]);
+};
+
+export const withActions: <T extends Renderer>(
+  storyFn: PartialStoryFn<T>
+) => T['storyResult'] = makeDecorator({
+  name: 'withActions',
+  parameterName: 'actions',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context) => {
+    const customElements = getCustomElements();
+    const module = customElements.modules.find(
+      (m: {declarations: {tagName: string}[]}) =>
+        m.declarations.find((e) => e.tagName === context.component)
+    );
+    const component = module?.declarations.find(
+      (e: {tagName: string}) => e.tagName === context.component
+    );
+    const events = component?.events?.map((e: {name: string}) => e.name);
+    if (events) {
+      applyEventHandlers(...events);
+    }
+
+    return getStory(context);
+  },
+});

package/.storybook/channels.ts

@@ -0,0 +1,44 @@
+// These constants are the single source of truth for the Storybook channel
+// links shown in the sidebar brand area and on the Introduction page.
+//
+// Background: the library has two long-lived release branches:
+//   - `stable`  → published quarterly to the Stable Storybook
+//   - `develop` → published on every merge to the Develop Storybook
+//
+// The Develop URL below is a placeholder until the second Firebase Hosting
+// site is provisioned and a branch-based deploy workflow is in place.
+
+export const STORYBOOK_STABLE_URL = 'https://openbridge-storybook.web.app';
+export const STORYBOOK_DEVELOP_URL =
+  'https://openbridge-next-storybook.web.app';
+
+/**
+ * Detects the current Storybook branch/channel.
+ * Priorities:
+ * 1. VITE_STORYBOOK_BRANCH env var (set during CI build)
+ * 2. Hostname detection (for deployed instances)
+ * 3. Default to 'develop' (for local dev)
+ */
+export const getBranch = (): 'stable' | 'develop' => {
+  // Use process.env and window globals instead of import.meta to avoid IIFE warnings in Storybook Manager.
+  // These are injected/defined in main.ts.
+  const envBranch =
+    (typeof process !== 'undefined' && process.env?.VITE_STORYBOOK_BRANCH) ||
+    (typeof window !== 'undefined' && (window as any).VITE_STORYBOOK_BRANCH);
+
+  if (envBranch === 'stable' || envBranch === 'develop') {
+    return envBranch as 'stable' | 'develop';
+  }
+
+  if (typeof window !== 'undefined' && window.location.hostname) {
+    const host = window.location.hostname;
+    if (host.includes('-next')) return 'develop';
+    if (host.includes('openbridge-storybook.web.app')) return 'stable';
+  }
+
+  return 'develop';
+};
+
+export const STORYBOOK_BRANCH = getBranch();
+export const isStable = STORYBOOK_BRANCH === 'stable';
+export const isDevelop = STORYBOOK_BRANCH === 'develop';

package/.storybook/main.ts

@@ -0,0 +1,313 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import {createRequire} from 'node:module';
+import {dirname, join} from 'path';
+import type {StorybookConfig} from '@storybook/web-components-vite';
+import FullReload from 'vite-plugin-full-reload';
+
+const require = createRequire(import.meta.url);
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../docs/**/*.mdx',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('storybook-addon-tag-badges'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-vitest'),
+    // getAbsolutePath('storybook-addon-vis'),
+  ],
+
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+
+  staticDirs: [{from: '../public', to: '/assets'}],
+
+  async viteFinal(viteConfig) {
+    // full reload whenever a TypeScript, CSS (or HTML) file in /src changes
+    viteConfig.plugins ??= [];
+    viteConfig.plugins.push(FullReload(['src/**/*.{ts,css,html}']));
+
+    // Ensure process.env.VITE_STORYBOOK_BRANCH is replaced in the preview
+    viteConfig.define = {
+      ...viteConfig.define,
+      'process.env.VITE_STORYBOOK_BRANCH': JSON.stringify(
+        process.env.VITE_STORYBOOK_BRANCH || ''
+      ),
+    };
+
+    return viteConfig;
+  },
+
+  previewHead: (head, options) => `
+    <dialog> ${options.configType}</dialog>
+    ${head}
+    <style>
+    @font-face {
+    font-family: Noto Sans;
+    src: url(./assets/NotoSans.ttf);
+    }
+
+     @font-face {
+    font-family: 'noto-sans';
+    src: url(./assets/NotoSans.ttf);
+    }
+</style>
+  `,
+
+  managerHead: (head) => `
+  ${head}
+  <script>
+    window.VITE_STORYBOOK_BRANCH = "${process.env.VITE_STORYBOOK_BRANCH || ''}";
+  </script>
+  <style>
+    /* OpenBridge Storybook UI Fixes */
+
+    /* ========== DARK THEME ========== */
+    @media (prefers-color-scheme: dark) {
+      /* Search results - non-matched letters */
+      #storybook-explorer-searchfield ~ div li,
+      #storybook-explorer-searchfield ~ div li span,
+      #storybook-explorer-searchfield ~ div li div,
+      [id*="search"] ~ * li,
+      [role="listbox"] li,
+      [role="listbox"] li span,
+      [role="option"],
+      [role="option"] span {
+        color: rgb(140, 140, 140) !important;
+      }
+
+      /* Matched/searched letters */
+      #storybook-explorer-searchfield ~ div mark,
+      [id*="search"] ~ * mark,
+      [role="listbox"] mark,
+      [role="option"] mark,
+      mark {
+        background: transparent !important;
+        color: rgb(233, 233, 233) !important;
+        font-weight: 600 !important;
+      }
+
+      /* Search result path text */
+      [role="option"] > div:last-child,
+      [role="listbox"] li > div:last-child {
+        color: rgb(140, 140, 140) !important;
+      }
+
+      /* Search result icons */
+      [role="listbox"] svg,
+      [role="option"] svg {
+        color: rgb(180, 180, 180) !important;
+      }
+
+      /* Search results background */
+      [role="listbox"],
+      [role="listbox"] li,
+      [role="option"] {
+        background: rgb(24, 24, 24) !important;
+      }
+
+      /* Sidebar item text */
+      button[data-nodetype] > span,
+      [data-nodetype="component"] span,
+      [data-nodetype="story"] span {
+        color: rgb(220, 220, 220) !important;
+      }
+
+      /* Selected/active sidebar item text */
+      [data-selected="true"] span {
+        color: rgb(255, 255, 255) !important;
+      }
+
+      /* Search input placeholder */
+      input::placeholder {
+        color: rgb(140, 140, 140) !important;
+      }
+
+      /* Sidebar icons */
+      #storybook-explorer-tree .sidebar-item svg {
+        color: rgb(180, 180, 180) !important;
+      }
+
+      /* Selected sidebar item background */
+      [data-selected="true"] {
+        background: rgb(60, 60, 60) !important;
+      }
+
+      /* Remove box-shadow on selected items */
+      [data-selected="true"] *,
+      [data-selected="true"] [class*="css-"] {
+        box-shadow: none !important;
+      }
+    }
+
+    /* ========== LIGHT THEME ========== */
+    @media (prefers-color-scheme: light) {
+      /* Search results - non-matched letters */
+      #storybook-explorer-searchfield ~ div li,
+      #storybook-explorer-searchfield ~ div li span,
+      #storybook-explorer-searchfield ~ div li div,
+      [id*="search"] ~ * li,
+      [role="listbox"] li,
+      [role="listbox"] li span,
+      [role="option"],
+      [role="option"] span {
+        color: rgb(112, 112, 112) !important;
+      }
+
+      /* Matched/searched letters */
+      #storybook-explorer-searchfield ~ div mark,
+      [id*="search"] ~ * mark,
+      [role="listbox"] mark,
+      [role="option"] mark,
+      mark {
+        background: transparent !important;
+        color: rgb(31, 31, 31) !important;
+        font-weight: 600 !important;
+      }
+
+      /* Search result path text */
+      [role="option"] > div:last-child,
+      [role="listbox"] li > div:last-child {
+        color: rgb(112, 112, 112) !important;
+      }
+
+      /* Search result icons */
+      [role="listbox"] svg,
+      [role="option"] svg {
+        color: rgb(83, 83, 83) !important;
+      }
+
+      /* Search results background */
+      [role="listbox"],
+      [role="listbox"] li,
+      [role="option"] {
+        background: rgb(247, 247, 247) !important;
+      }
+
+      /* Sidebar item text */
+      button[data-nodetype] > span,
+      [data-nodetype="component"] span,
+      [data-nodetype="story"] span {
+        color: rgb(31, 31, 31) !important;
+      }
+
+
+      /* Search input placeholder */
+      input::placeholder {
+        color: rgb(112, 112, 112) !important;
+      }
+
+      /* Sidebar icons */
+      #storybook-explorer-tree .sidebar-item svg {
+        color: rgb(83, 83, 83) !important;
+      }
+
+      /* Non-selected sidebar item HOVER state - gray background */
+      [data-nodetype]:not([data-selected="true"]):hover,
+      [data-nodetype="story"]:not([data-selected="true"]):hover,
+      [data-nodetype="component"]:not([data-selected="true"]):hover,
+      [data-nodetype="docs"]:not([data-selected="true"]):hover,
+      .css-wzf5rv:hover,
+      .css-wzf5rv:focus {
+        --tree-node-background-hover: rgb(224, 224, 224) !important;
+        background: rgb(224, 224, 224) !important;
+        box-shadow: none !important;
+      }
+
+      /* Selected sidebar item background - light blue */
+      [data-selected="true"],
+      button[data-selected="true"],
+      a[data-selected="true"],
+      [data-nodetype][data-selected="true"],
+      [data-nodetype="story"][data-selected="true"],
+      [data-nodetype="component"][data-selected="true"],
+      [data-nodetype="docs"][data-selected="true"] {
+        background: #DBECFF !important;
+      }
+
+      /* Selected sidebar item text - dark for contrast on light blue */
+      [data-selected="true"] span,
+      [data-selected="true"] > span,
+      [data-selected="true"] div,
+      [data-selected="true"] [class*="css-"],
+      button[data-selected="true"] span,
+      a[data-selected="true"] span,
+      [data-nodetype][data-selected="true"] span,
+      [data-nodetype="story"][data-selected="true"] span,
+      [data-nodetype="component"][data-selected="true"] span,
+      [data-nodetype="docs"][data-selected="true"] span {
+        color: rgb(31, 31, 31) !important;
+      }
+
+      /* Remove box-shadow on selected items */
+      [data-selected="true"] *,
+      [data-selected="true"] [class*="css-"] {
+        box-shadow: none !important;
+      }
+
+      /* Selected sidebar item HOVER state - slightly darker light blue */
+      [data-selected="true"]:hover,
+      button[data-selected="true"]:hover,
+      a[data-selected="true"]:hover,
+      [data-nodetype][data-selected="true"]:hover,
+      [data-nodetype="story"][data-selected="true"]:hover,
+      [data-nodetype="component"][data-selected="true"]:hover,
+      [data-nodetype="docs"][data-selected="true"]:hover {
+        background: #C8E0FF !important;
+        box-shadow: none !important;
+      }
+
+      /* Remove box-shadow on selected item hover */
+      [data-selected="true"]:hover * {
+        box-shadow: none !important;
+      }
+
+      /* Selected sidebar item text on hover - keep dark */
+      [data-selected="true"]:hover span,
+      [data-selected="true"]:hover div,
+      [data-selected="true"]:hover [class*="css-"],
+      button[data-selected="true"]:hover span,
+      a[data-selected="true"]:hover span,
+      [data-nodetype][data-selected="true"]:hover span {
+        color: rgb(31, 31, 31) !important;
+      }
+
+      /* Fix context menu button (three dots) blue background */
+      [data-selected="true"] button,
+      [data-selected="true"]:hover button,
+      [data-selected="true"] [aria-label],
+      [data-selected="true"]:hover [aria-label],
+      button[aria-label*="menu" i],
+      button[aria-label*="actions" i],
+      .sidebar-item button,
+      [data-nodetype] button {
+        background: transparent !important;
+        background-color: transparent !important;
+      }
+
+      /* Fix boolean toggle buttons - use white background with dark text */
+      [class*="css-"] input:checked ~ span:last-of-type,
+      [class*="css-"] input:not(:checked) ~ span:first-of-type {
+        background: rgb(255, 255, 255) !important;
+        color: rgb(31, 31, 31) !important;
+      }
+    }
+
+  </style>
+  `,
+
+  docs: {},
+};
+export default config;
+
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

package/.storybook/manager.ts

@@ -0,0 +1,71 @@
+import {addons} from 'storybook/manager-api';
+import {openbridgeDark, openbridgeLight} from './openbridgeTheme.js';
+
+// Detect system color scheme preference
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+addons.setConfig({
+  // Use OpenBridge themed variants for both light and dark mode
+  theme: prefersDark ? openbridgeDark : openbridgeLight,
+
+  // Put controls panel on the right side
+  panelPosition: 'right',
+  selectedPanel: 'addon-controls',
+  initialActive: 'canvas',
+
+  // Sidebar configuration
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ['other'],
+  },
+
+  // Tag badges for version indicators
+  tagBadges: [
+    {
+      tags: '5.0',
+      badge: {
+        text: '5.0',
+        style: {
+          backgroundColor: 'rgb(255, 219, 55)',
+          color: '#000',
+        },
+        tooltip: 'OpenBridge 5.0',
+      },
+      display: {
+        sidebar: ['component'],
+        toolbar: true,
+      },
+    },
+    {
+      tags: 'alpha',
+      badge: {
+        text: '6.0 Alpha',
+        style: {
+          backgroundColor: 'rgb(255, 219, 55)',
+          color: '#000',
+        },
+        tooltip: 'Alpha components are still under design and may change.',
+      },
+      display: {
+        sidebar: ['component'],
+        toolbar: true,
+      },
+    },
+    {
+      tags: 'wip',
+      badge: {
+        text: 'WIP',
+        style: {
+          backgroundColor: 'rgb(255, 219, 55)',
+          color: '#000',
+        },
+        tooltip:
+          'Work in progress components are still under development and may change.',
+      },
+      display: {
+        sidebar: ['component'],
+        toolbar: true,
+      },
+    },
+  ],
+});