@shellui/core 0.0.4

package/src/features/layouts/utils.ts

@@ -0,0 +1,99 @@
+import type { NavigationItem, NavigationGroup, LocalizedString } from '../config/types';
+
+/** Resolve a localized string to a single string for the given language. */
+export function resolveLocalizedString(value: LocalizedString | undefined, lang: string): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  return value[lang] || value.en || value.fr || Object.values(value)[0] || '';
+}
+
+/** Flatten navigation items from groups or flat array. */
+export function flattenNavigationItems(
+  navigation: (NavigationItem | NavigationGroup)[],
+): NavigationItem[] {
+  if (navigation.length === 0) {
+    return [];
+  }
+  return navigation.flatMap((item) => {
+    if ('title' in item && 'items' in item) {
+      return (item as NavigationGroup).items;
+    }
+    return item as NavigationItem;
+  });
+}
+
+export type Viewport = 'mobile' | 'desktop';
+
+/** Filter navigation by viewport: remove hidden and viewport-specific hidden items (and empty groups). */
+export function filterNavigationByViewport(
+  navigation: (NavigationItem | NavigationGroup)[],
+  viewport: Viewport,
+): (NavigationItem | NavigationGroup)[] {
+  if (navigation.length === 0) return [];
+  const hideOnMobile = viewport === 'mobile';
+  const hideOnDesktop = viewport === 'desktop';
+  return navigation
+    .map((item) => {
+      if ('title' in item && 'items' in item) {
+        const group = item as NavigationGroup;
+        const visibleItems = group.items.filter((navItem) => {
+          if (navItem.hidden) return false;
+          if (hideOnMobile && navItem.hiddenOnMobile) return false;
+          if (hideOnDesktop && navItem.hiddenOnDesktop) return false;
+          return true;
+        });
+        if (visibleItems.length === 0) return null;
+        return { ...group, items: visibleItems };
+      }
+      const navItem = item as NavigationItem;
+      if (navItem.hidden) return null;
+      if (hideOnMobile && navItem.hiddenOnMobile) return null;
+      if (hideOnDesktop && navItem.hiddenOnDesktop) return null;
+      return item;
+    })
+    .filter((item): item is NavigationItem | NavigationGroup => item !== null);
+}
+
+/** Filter navigation for sidebar: remove hidden items and groups that become empty. */
+export function filterNavigationForSidebar(
+  navigation: (NavigationItem | NavigationGroup)[],
+): (NavigationItem | NavigationGroup)[] {
+  if (navigation.length === 0) return [];
+  return navigation
+    .map((item) => {
+      if ('title' in item && 'items' in item) {
+        const group = item as NavigationGroup;
+        const visibleItems = group.items.filter((navItem) => !navItem.hidden);
+        if (visibleItems.length === 0) return null;
+        return { ...group, items: visibleItems };
+      }
+      const navItem = item as NavigationItem;
+      if (navItem.hidden) return null;
+      return item;
+    })
+    .filter((item): item is NavigationItem | NavigationGroup => item !== null);
+}
+
+/** Split navigation by position: start (main content) and end (footer). */
+export function splitNavigationByPosition(navigation: (NavigationItem | NavigationGroup)[]): {
+  start: (NavigationItem | NavigationGroup)[];
+  end: NavigationItem[];
+} {
+  const start: (NavigationItem | NavigationGroup)[] = [];
+  const end: NavigationItem[] = [];
+  for (const item of navigation) {
+    const position = 'position' in item ? (item.position ?? 'start') : 'start';
+    if (position === 'end') {
+      if ('title' in item && 'items' in item) {
+        const group = item as NavigationGroup;
+        end.push(...group.items.filter((navItem) => !navItem.hidden));
+      } else {
+        const navItem = item as NavigationItem;
+        if (!navItem.hidden) end.push(navItem);
+      }
+    } else {
+      start.push(item);
+    }
+  }
+  return { start, end };
+}

package/src/features/modal/ModalContext.tsx

@@ -0,0 +1,112 @@
+import { shellui, type ShellUIMessage } from '@shellui/sdk';
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+
+/**
+ * Validates and normalizes a URL to ensure it's from the same domain or localhost
+ * @param url - The URL or path to validate
+ * @returns The normalized absolute URL or null if invalid
+ */
+export const validateAndNormalizeUrl = (url: string | undefined | null): string | null => {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+
+  try {
+    // If it's already an absolute URL, check if it's same origin or localhost
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      const urlObj = new URL(url);
+      const currentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+
+      // Allow same origin
+      if (urlObj.origin === currentOrigin) {
+        return url;
+      }
+
+      // Allow localhost URLs (for development)
+      if (urlObj.hostname === 'localhost' || urlObj.hostname === '127.0.0.1') {
+        return url;
+      }
+
+      return null; // Different origin, reject for security
+    }
+
+    // If it's a relative URL, make it absolute using current origin
+    if (url.startsWith('/') || url.startsWith('./') || !url.startsWith('//')) {
+      const currentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+      // Ensure relative paths start with /
+      const normalizedPath = url.startsWith('/') ? url : `/${url}`;
+      return `${currentOrigin}${normalizedPath}`;
+    }
+
+    // Reject protocol-relative URLs (//example.com) for security
+    return null;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid URL:', url, error);
+    return null;
+  }
+};
+
+interface ModalContextValue {
+  isOpen: boolean;
+  modalUrl: string | null;
+  openModal: (url?: string) => void;
+  closeModal: () => void;
+}
+
+const ModalContext = createContext<ModalContextValue | undefined>(undefined);
+
+export const useModal = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('useModal must be used within a ModalProvider');
+  }
+  return context;
+};
+
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+export const ModalProvider = ({ children }: ModalProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [modalUrl, setModalUrl] = useState<string | null>(null);
+
+  const openModal = useCallback((url?: string) => {
+    const validatedUrl = url ? validateAndNormalizeUrl(url) : null;
+    setModalUrl(validatedUrl);
+    setIsOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+    // Clear URL after a short delay to allow animation to complete
+    setTimeout(() => setModalUrl(null), 200);
+  }, []);
+
+  // Listen for postMessage events from nested iframes
+  useEffect(() => {
+    const cleanupOpenModal = shellui.addMessageListener(
+      'SHELLUI_OPEN_MODAL',
+      (data: ShellUIMessage) => {
+        const payload = data.payload as { url?: string };
+        openModal(payload.url);
+      },
+    );
+
+    const cleanupCloseModal = shellui.addMessageListener('SHELLUI_CLOSE_MODAL', () => {
+      closeModal();
+    });
+
+    return () => {
+      cleanupOpenModal();
+      cleanupCloseModal();
+    };
+  }, [openModal, closeModal]);
+
+  return (
+    <ModalContext.Provider value={{ isOpen, modalUrl, openModal, closeModal }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};

package/src/features/sentry/initSentry.ts

@@ -0,0 +1,72 @@
+import { getCookieConsentAccepted } from '../cookieConsent/cookieConsent';
+
+const SETTINGS_KEY = 'shellui:settings';
+
+/** True after @sentry/react has been lazy-loaded and init() was called. */
+let sentryLoaded = false;
+
+function isErrorReportingEnabled(): boolean {
+  if (typeof window === 'undefined') return true;
+  // If cookie consent is configured with a cookie for sentry.io, only enable when user accepted it
+  if (!getCookieConsentAccepted('sentry.io')) return false;
+  try {
+    const stored = localStorage.getItem(SETTINGS_KEY);
+    if (!stored) return true;
+    const parsed = JSON.parse(stored) as { errorReporting?: { enabled?: boolean } };
+    return parsed?.errorReporting?.enabled !== false;
+  } catch {
+    return true;
+  }
+}
+
+type SentryGlobals = {
+  __SHELLUI_SENTRY_DSN__?: string;
+  __SHELLUI_SENTRY_ENVIRONMENT__?: string;
+  __SHELLUI_SENTRY_RELEASE__?: string;
+};
+
+/**
+ * Initialize error reporting only in production when configured and user has not disabled it.
+ * Lazy-loads @sentry/react only when needed so the bundle is not loaded when Sentry is unused.
+ * Reads DSN, environment, and release from __SHELLUI_SENTRY_DSN__, __SHELLUI_SENTRY_ENVIRONMENT__,
+ * and __SHELLUI_SENTRY_RELEASE__ (injected at build time) and user preference from settings.
+ * Exported so the settings UI can re-initialize when the user re-enables reporting.
+ */
+export function initSentry(): void {
+  const isDev = (import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV;
+  if (isDev) {
+    return;
+  }
+  if (!isErrorReportingEnabled()) {
+    return;
+  }
+  const g = globalThis as unknown as SentryGlobals;
+  const dsn = g.__SHELLUI_SENTRY_DSN__;
+  if (!dsn || typeof dsn !== 'string') {
+    return;
+  }
+  void import('@sentry/react').then((Sentry) => {
+    Sentry.init({
+      dsn,
+      environment: g.__SHELLUI_SENTRY_ENVIRONMENT__ ?? 'production',
+      release: g.__SHELLUI_SENTRY_RELEASE__,
+    });
+    sentryLoaded = true;
+  });
+}
+
+/**
+ * Close Sentry when the user disables error reporting in settings.
+ * Only loads @sentry/react if it was already initialized (avoids loading the chunk just to close).
+ */
+export function closeSentry(): void {
+  if (!sentryLoaded) {
+    return;
+  }
+  void import('@sentry/react').then((Sentry) => {
+    Sentry.close();
+    sentryLoaded = false;
+  });
+}
+
+initSentry();

package/src/features/settings/SettingsContext.tsx

@@ -0,0 +1,19 @@
+import { useContext, createContext } from 'react';
+import type { Settings } from '@shellui/sdk';
+
+export interface SettingsContextValue {
+  settings: Settings;
+  updateSettings: (updates: Partial<Settings>) => void;
+  updateSetting: <K extends keyof Settings>(key: K, updates: Partial<Settings[K]>) => void;
+  resetAllData: () => void;
+}
+
+export const SettingsContext = createContext<SettingsContextValue | undefined>(undefined);
+
+export function useSettings() {
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error('useSettings must be used within a SettingsProvider');
+  }
+  return context;
+}