@shellui/core 0.0.4

package/src/features/cookieConsent/cookieConsent.ts

@@ -0,0 +1,84 @@
+import type { ShellUIConfig } from '../config/types';
+
+const STORAGE_KEY = 'shellui:settings';
+
+function getConfig(): ShellUIConfig | undefined {
+  if (typeof globalThis === 'undefined') return undefined;
+  const g = globalThis as unknown as { __SHELLUI_CONFIG__?: string | ShellUIConfig };
+  const raw = g.__SHELLUI_CONFIG__;
+  if (raw === null || raw === undefined) return undefined;
+  return typeof raw === 'string' ? (JSON.parse(raw) as ShellUIConfig) : raw;
+}
+
+function getStoredCookieConsent(): {
+  acceptedHosts: string[];
+  consentedCookieHosts: string[];
+} {
+  if (typeof window === 'undefined') {
+    return { acceptedHosts: [], consentedCookieHosts: [] };
+  }
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return { acceptedHosts: [], consentedCookieHosts: [] };
+    const parsed = JSON.parse(stored) as {
+      cookieConsent?: { acceptedHosts?: string[]; consentedCookieHosts?: string[] };
+    };
+    return {
+      acceptedHosts: Array.isArray(parsed?.cookieConsent?.acceptedHosts)
+        ? parsed.cookieConsent.acceptedHosts
+        : [],
+      consentedCookieHosts: Array.isArray(parsed?.cookieConsent?.consentedCookieHosts)
+        ? parsed.cookieConsent.consentedCookieHosts
+        : [],
+    };
+  } catch {
+    return { acceptedHosts: [], consentedCookieHosts: [] };
+  }
+}
+
+/**
+ * Returns whether the given cookie host is accepted by the user.
+ * Use this outside React (e.g. in initSentry) to gate features by cookie consent.
+ * - If there is no cookieConsent config, returns true (no consent required).
+ * - If the host is not in the config list, returns true (unknown cookie, don't block).
+ * - Otherwise returns whether the host is in settings.cookieConsent.acceptedHosts.
+ */
+export function getCookieConsentAccepted(host: string): boolean {
+  const config = getConfig();
+  if (!config?.cookieConsent?.cookies?.length) return true;
+  const knownHosts = new Set(config.cookieConsent.cookies.map((c) => c.host));
+  if (!knownHosts.has(host)) return true;
+  const { acceptedHosts } = getStoredCookieConsent();
+  return acceptedHosts.includes(host);
+}
+
+/**
+ * Returns whether the app should ask for consent again because new cookies were added to config.
+ * True when current config has at least one host that is not in consentedCookieHosts (the list
+ * stored when the user last gave consent). When re-prompting, pre-fill with acceptedHosts so
+ * existing approvals are kept.
+ */
+export function getCookieConsentNeedsRenewal(): boolean {
+  const config = getConfig();
+  if (!config?.cookieConsent?.cookies?.length) return false;
+  const { consentedCookieHosts } = getStoredCookieConsent();
+  if (consentedCookieHosts.length === 0) return true; // Never consented
+  const currentHosts = new Set(config.cookieConsent.cookies.map((c) => c.host));
+  for (const host of currentHosts) {
+    if (!consentedCookieHosts.includes(host)) return true;
+  }
+  return false;
+}
+
+/**
+ * Returns the list of cookie hosts that are in the current config but were not in the list
+ * when the user last gave consent. Use to show "new" badges or to know which cookies need
+ * fresh approval while keeping existing acceptedHosts as pre-checked.
+ */
+export function getCookieConsentNewHosts(): string[] {
+  const config = getConfig();
+  if (!config?.cookieConsent?.cookies?.length) return [];
+  const { consentedCookieHosts } = getStoredCookieConsent();
+  const consentedSet = new Set(consentedCookieHosts);
+  return config.cookieConsent.cookies.map((c) => c.host).filter((host) => !consentedSet.has(host));
+}

package/src/features/cookieConsent/useCookieConsent.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { useConfig } from '../config/useConfig';
+import { useSettings } from '../settings/hooks/useSettings';
+import { getCookieConsentNeedsRenewal } from './cookieConsent';
+
+/**
+ * Returns whether the given cookie host is accepted (feature may run) and whether
+ * consent should be re-collected. Use to gate features in React components.
+ *
+ * - isAccepted: true if cookie consent is not configured, or the host is not in the config list,
+ *   or the user has accepted this host.
+ * - needsConsent: true if cookie consent is configured and the user has not yet consented,
+ *   or new cookies were added since last consent (renewal); when showing the UI again, pre-fill
+ *   with settings.cookieConsent.acceptedHosts to keep existing approvals.
+ */
+export function useCookieConsent(host: string): { isAccepted: boolean; needsConsent: boolean } {
+  const { config } = useConfig();
+  const { settings } = useSettings();
+
+  return useMemo(() => {
+    const cookieConsent = config?.cookieConsent;
+    const list = cookieConsent?.cookies ?? [];
+    const acceptedHosts = settings?.cookieConsent?.acceptedHosts ?? [];
+
+    if (!list.length) {
+      return { isAccepted: true, needsConsent: false };
+    }
+
+    const knownHosts = new Set(list.map((c) => c.host));
+    if (!knownHosts.has(host)) {
+      return { isAccepted: true, needsConsent: false };
+    }
+
+    const isAccepted = acceptedHosts.includes(host);
+    const needsConsent = acceptedHosts.length === 0 || getCookieConsentNeedsRenewal();
+
+    return { isAccepted, needsConsent };
+  }, [config?.cookieConsent, settings?.cookieConsent?.acceptedHosts, host]);
+}

package/src/features/drawer/DrawerContext.tsx

@@ -0,0 +1,116 @@
+import { shellui, type ShellUIMessage } from '@shellui/sdk';
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import type { DrawerDirection } from '@/components/ui/drawer';
+import { useModal } from '../modal/ModalContext';
+
+/**
+ * Validates and normalizes a URL for the drawer iframe.
+ * Allows same-origin, localhost, and external http(s) URLs (e.g. from nav config).
+ */
+const validateAndNormalizeUrl = (url: string | undefined | null): string | null => {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+
+  try {
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      new URL(url); // validate
+      return url;
+    }
+
+    if (url.startsWith('/') || url.startsWith('./') || !url.startsWith('//')) {
+      const currentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+      const normalizedPath = url.startsWith('/') ? url : `/${url}`;
+      return `${currentOrigin}${normalizedPath}`;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
+
+export const DEFAULT_DRAWER_POSITION: DrawerDirection = 'right';
+
+interface OpenDrawerOptions {
+  url?: string;
+  position?: DrawerDirection;
+  /** CSS length: height for top/bottom (e.g. "80vh", "400px"), width for left/right (e.g. "50vw", "320px") */
+  size?: string;
+}
+
+interface DrawerContextValue {
+  isOpen: boolean;
+  drawerUrl: string | null;
+  position: DrawerDirection;
+  size: string | null;
+  openDrawer: (options?: OpenDrawerOptions) => void;
+  closeDrawer: () => void;
+}
+
+const DrawerContext = createContext<DrawerContextValue | undefined>(undefined);
+
+export const useDrawer = () => {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawer must be used within a DrawerProvider');
+  }
+  return context;
+};
+
+interface DrawerProviderProps {
+  children: ReactNode;
+}
+
+export const DrawerProvider = ({ children }: DrawerProviderProps) => {
+  const { closeModal } = useModal();
+  const [isOpen, setIsOpen] = useState(false);
+  const [drawerUrl, setDrawerUrl] = useState<string | null>(null);
+  const [position, setPosition] = useState<DrawerDirection>(DEFAULT_DRAWER_POSITION);
+  const [size, setSize] = useState<string | null>(null);
+
+  const openDrawer = useCallback(
+    (options?: OpenDrawerOptions) => {
+      closeModal();
+      const url = options?.url;
+      const validatedUrl = url ? validateAndNormalizeUrl(url) : null;
+      setDrawerUrl(validatedUrl);
+      setPosition(options?.position ?? DEFAULT_DRAWER_POSITION);
+      setSize(options?.size ?? null);
+      setIsOpen(true);
+    },
+    [closeModal],
+  );
+
+  const closeDrawer = useCallback(() => {
+    setIsOpen(false);
+    // Do not reset drawerUrl/position here — Vaul's close animation uses the current
+    // direction. Resetting position (e.g. to 'right') mid-animation would make
+    // non-right drawers jump. State is set on next openDrawer().
+  }, []);
+
+  useEffect(() => {
+    const cleanupOpen = shellui.addMessageListener(
+      'SHELLUI_OPEN_DRAWER',
+      (data: ShellUIMessage) => {
+        const payload = data.payload as { url?: string; position?: DrawerDirection; size?: string };
+        openDrawer({ url: payload.url, position: payload.position, size: payload.size });
+      },
+    );
+
+    const cleanupClose = shellui.addMessageListener('SHELLUI_CLOSE_DRAWER', () => {
+      closeDrawer();
+    });
+
+    return () => {
+      cleanupOpen();
+      cleanupClose();
+    };
+  }, [openDrawer, closeDrawer]);
+
+  return (
+    <DrawerContext.Provider value={{ isOpen, drawerUrl, position, size, openDrawer, closeDrawer }}>
+      {children}
+    </DrawerContext.Provider>
+  );
+};

package/src/features/layouts/AppLayout.tsx

@@ -0,0 +1,63 @@
+import { lazy, Suspense, type LazyExoticComponent, type ComponentType } from 'react';
+import type { LayoutType, NavigationItem, NavigationGroup } from '../config/types';
+import { useSettings } from '../settings/SettingsContext';
+
+const DefaultLayout = lazy(() =>
+  import('./DefaultLayout').then((m) => ({ default: m.DefaultLayout })),
+);
+const FullscreenLayout = lazy(() =>
+  import('./FullscreenLayout').then((m) => ({ default: m.FullscreenLayout })),
+);
+const WindowsLayout = lazy(() =>
+  import('./WindowsLayout').then((m) => ({ default: m.WindowsLayout })),
+);
+
+interface AppLayoutProps {
+  layout?: LayoutType;
+  title?: string;
+  appIcon?: string;
+  logo?: string;
+  navigation: (NavigationItem | NavigationGroup)[];
+}
+
+function LayoutFallback() {
+  return (
+    <div
+      className="min-h-screen bg-background"
+      aria-hidden
+    />
+  );
+}
+
+/** Renders the layout based on settings.layout (override) or config.layout: 'sidebar' (default), 'fullscreen', or 'windows'. Lazy-loads only the active layout. */
+export function AppLayout({
+  layout = 'sidebar',
+  title,
+  appIcon,
+  logo,
+  navigation,
+}: AppLayoutProps) {
+  const { settings } = useSettings();
+  const effectiveLayout: LayoutType = settings.layout ?? layout;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let LayoutComponent: LazyExoticComponent<ComponentType<any>>;
+  let layoutProps: Record<string, unknown>;
+
+  if (effectiveLayout === 'fullscreen') {
+    LayoutComponent = FullscreenLayout;
+    layoutProps = { title, navigation };
+  } else if (effectiveLayout === 'windows') {
+    LayoutComponent = WindowsLayout;
+    layoutProps = { title, appIcon, logo, navigation };
+  } else {
+    LayoutComponent = DefaultLayout;
+    layoutProps = { title, appIcon, logo, navigation };
+  }
+
+  return (
+    <Suspense fallback={<LayoutFallback />}>
+      <LayoutComponent {...layoutProps} />
+    </Suspense>
+  );
+}