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

package/.storybook/openbridgeTheme.ts

@@ -0,0 +1,197 @@
+import {create} from 'storybook/theming/create';
+import {
+  STORYBOOK_STABLE_URL,
+  STORYBOOK_DEVELOP_URL,
+  isStable,
+} from './channels.js';
+
+// OpenBridge Design System Colors
+const colors = {
+  // Day/Light theme colors
+  day: {
+    // Backgrounds
+    containerGlobal: 'rgb(252, 252, 252)',
+    containerBackground: 'rgb(247, 247, 247)',
+    containerSection: 'rgb(240, 240, 240)',
+    containerBackdrop: 'rgb(224, 224, 224)',
+
+    // Elements
+    elementActive: 'rgb(31, 31, 31)',
+    elementNeutral: 'rgb(83, 83, 83)',
+    elementInactive: 'rgb(112, 112, 112)',
+    elementDisabled: 'rgb(190, 190, 190)',
+
+    // Borders
+    outline: 'rgb(221, 221, 221)',
+    divider: 'rgb(221, 221, 221)',
+    focus: 'rgb(66, 113, 179)',
+
+    // Brand blues
+    blue400: 'rgb(66, 113, 179)',
+    blue500: 'rgb(45, 84, 139)',
+    blue600: 'rgb(29, 60, 103)',
+
+    // Inputs
+    inputBg: 'rgb(255, 255, 255)',
+    inputBorder: 'rgb(190, 190, 190)',
+    inputHover: 'rgb(237, 237, 237)',
+  },
+
+  // Night/Dark theme colors
+  night: {
+    // Backgrounds
+    containerGlobal: 'rgb(18, 18, 18)',
+    containerBackground: 'rgb(24, 24, 24)',
+    containerSection: 'rgb(31, 31, 31)',
+    containerBackdrop: 'rgb(38, 38, 38)',
+
+    // Elements
+    elementActive: 'rgb(233, 233, 233)',
+    elementNeutral: 'rgb(180, 180, 180)',
+    elementInactive: 'rgb(140, 140, 140)',
+    elementDisabled: 'rgb(90, 90, 90)',
+
+    // Borders
+    outline: 'rgb(60, 60, 60)',
+    divider: 'rgb(50, 50, 50)',
+    focus: 'rgb(150, 196, 254)',
+
+    // Brand blues
+    blue300: 'rgb(93, 143, 213)',
+    blue400: 'rgb(66, 113, 179)',
+    blue100: 'rgb(202, 222, 252)',
+
+    // Inputs
+    inputBg: 'rgb(38, 38, 38)',
+    inputBorder: 'rgb(60, 60, 60)',
+    inputHover: 'rgb(50, 50, 50)',
+  },
+};
+
+// Typography
+const typography = {
+  fontBase: '"Noto Sans", sans-serif',
+  fontCode: 'monospace',
+};
+
+// Brand
+// `brandTitle` accepts raw HTML so we can stack the wordmark and a small
+// secondary link to the other release channel. Inline styles use
+// `currentColor` so the link inherits each theme's `barTextColor`.
+const brand = {
+  brandTitle: `
+    <span style="display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2;">
+      <span style="font-weight: 700;">OpenBridge</span>
+      <a
+        href="${isStable ? STORYBOOK_DEVELOP_URL : STORYBOOK_STABLE_URL}"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="font-size: 11px; opacity: 0.75; color: currentColor; text-decoration: underline; margin-top: 2px;"
+      >View ${isStable ? 'Develop' : 'Stable'} Build →</a>
+    </span>
+  `,
+  brandUrl: 'https://www.openbridge.no/',
+  // brandImage: '/assets/openbridge-logo.svg', // Uncomment if you have a logo
+};
+
+/**
+ * OpenBridge Dark Theme (Night/Dusk)
+ * Use this for dark mode preference
+ */
+export const openbridgeDark = create({
+  base: 'dark',
+
+  // Typography
+  ...typography,
+
+  // Brand
+  ...brand,
+
+  // Primary colors - using brighter colors for better visibility
+  colorPrimary: colors.night.focus, // Light blue - used for selected sidebar item
+  colorSecondary: colors.night.elementActive,
+
+  // UI backgrounds
+  appBg: colors.night.containerBackground,
+  appContentBg: colors.night.containerSection,
+  appPreviewBg: colors.night.containerSection,
+  appBorderColor: colors.night.outline,
+  appBorderRadius: 4,
+
+  // Text colors - improved contrast
+  textColor: colors.night.elementActive,
+  textInverseColor: colors.day.elementActive,
+  textMutedColor: colors.night.elementNeutral,
+
+  // Toolbar colors
+  barTextColor: colors.night.elementNeutral,
+  barHoverColor: colors.night.elementActive,
+  barSelectedColor: colors.night.elementActive,
+  barBg: colors.night.containerBackdrop,
+
+  // Form colors - fixes the search input issue!
+  inputBg: colors.night.inputBg,
+  inputBorder: colors.night.inputBorder,
+  inputTextColor: colors.night.elementActive,
+  inputBorderRadius: 4,
+
+  // Button colors
+  buttonBg: colors.night.inputBg,
+  buttonBorder: colors.night.inputBorder,
+
+  // Boolean inputs
+  booleanBg: colors.night.inputBg,
+  booleanSelectedBg: colors.night.blue400,
+});
+
+/**
+ * OpenBridge Light Theme (Day/Bright)
+ * Use this for light mode preference
+ */
+export const openbridgeLight = create({
+  base: 'light',
+
+  // Typography
+  ...typography,
+
+  // Brand
+  ...brand,
+
+  colorPrimary: colors.day.containerBackdrop,
+  colorSecondary: colors.day.blue500,
+
+  // UI backgrounds
+  appBg: colors.day.containerBackground,
+  appContentBg: colors.day.containerGlobal,
+  appPreviewBg: colors.day.containerSection,
+  appBorderColor: colors.day.outline,
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: colors.day.elementActive,
+  textInverseColor: colors.night.elementActive,
+  textMutedColor: colors.day.elementNeutral,
+
+  // Toolbar colors
+  barTextColor: colors.day.elementNeutral,
+  barHoverColor: colors.day.elementActive,
+  barSelectedColor: colors.day.blue500,
+  barBg: colors.day.containerGlobal,
+
+  // Form colors - fixes the search input issue!
+  inputBg: colors.day.inputBg,
+  inputBorder: colors.day.inputBorder,
+  inputTextColor: colors.day.elementActive,
+  inputBorderRadius: 4,
+
+  // Button colors
+  buttonBg: colors.day.inputBg,
+  buttonBorder: colors.day.inputBorder,
+
+  // Boolean inputs
+  booleanBg: colors.day.containerBackdrop,
+  booleanSelectedBg: colors.day.blue500,
+});
+
+// Default export for backwards compatibility
+export default openbridgeDark;

package/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<style>
+  * {
+    font-family: Noto Sans;
+  }
+
+  .sb-show-main,
+  .docs-story {
+    background-color: var(--container-background-color);
+  }
+</style>
+<script>
+  (function () {
+    document.documentElement.setAttribute('data-obc-theme', 'day');
+  })();
+</script>

package/.storybook/preview.tsx

@@ -0,0 +1,129 @@
+import PreviewTemplate from './PreviewTemplate.js';
+
+import '../src/main.css';
+import {
+  Preview,
+  setCustomElementsManifest,
+} from '@storybook/web-components-vite';
+
+import customElements from '../custom-elements.json';
+import {withActions} from './action-handler.js';
+
+setCustomElementsManifest(customElements);
+
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
+import {DecoratorFunction} from 'storybook/internal/types';
+import {html} from 'lit';
+import React from 'react';
+
+export const decorators: DecoratorFunction[] = [
+  withThemeByDataAttribute({
+    themes: {
+      night: 'night',
+      dusk: 'dusk',
+      day: 'day',
+      bright: 'bright',
+    },
+    defaultTheme: 'day',
+    attributeName: 'data-obc-theme',
+  }),
+  (story, context) => {
+    const sizeClass =
+      context.globals.componentSize || 'obc-component-size-regular';
+    return html`<div class="${sizeClass}">${story()}</div>`;
+  },
+  withActions,
+];
+
+const preview: Preview = {
+  globalTypes: {
+    componentSize: {
+      name: 'Component Size',
+      description: 'Global component size class',
+      defaultValue: 'obc-component-size-regular',
+      toolbar: {
+        icon: 'expandalt',
+        items: [
+          {value: 'obc-component-size-regular', title: 'Regular'},
+          {value: 'obc-component-size-medium', title: 'Medium'},
+          {value: 'obc-component-size-large', title: 'Large'},
+          {value: 'obc-component-size-xl', title: 'XL'},
+        ],
+        showName: true,
+      },
+    },
+    cross: {
+      name: 'Cross',
+      description: 'Cross',
+      defaultValue: true,
+      toolbar: {
+        icon: 'cross',
+        items: [
+          {value: false, title: 'Cross: off'},
+          {value: true, title: 'Cross: on'},
+        ],
+        showName: true,
+      },
+    },
+  },
+  parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Introduction',
+          ['Introduction', 'Getting Started'],
+          'Application Components',
+          'UI Components',
+          'Bars and Graphs',
+          'Instruments',
+          'Indicators',
+          'Automation',
+          'AR',
+          'Integration',
+          'Pages',
+          '*',
+          'Building Blocks',
+        ],
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    backgrounds: {
+      grid: {
+        cellSize: 8,
+      },
+      default: 'container-background-color',
+      options: {
+        'container-section-color': {
+          name: 'container-section-color',
+          value: 'var(--container-section-color)',
+          default: true,
+        },
+        'container-background-color': {
+          name: 'container-background-color',
+          value: 'var(--container-background-color)',
+        },
+        'integration-container-global-color': {
+          name: 'integration-container-global-color',
+          value: 'var(--integration-container-global-color)',
+        },
+      },
+    },
+
+    docs: {
+      page: () => <PreviewTemplate />,
+      codePanel: true,
+    },
+  },
+  tags: ['autodocs', 'snapshot'],
+  initialGlobals: {
+    componentSize: 'obc-component-size-regular',
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,23 @@
+import {setProjectAnnotations} from '@storybook/web-components-vite';
+import * as projectAnnotations from './preview.js';
+import {vis, visAnnotations} from 'storybook-addon-vis/vitest-setup';
+
+// Disable all animations and transitions to prevent flaky visual tests
+const style = document.createElement('style');
+style.textContent = `
+  *, *::before, *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+`;
+document.head.appendChild(style);
+
+// This is an important step to apply the right configuration when testing your
+// stories.
+// More info at:
+// https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([projectAnnotations, visAnnotations]);
+
+vis.setup();