@shellui/core 0.2.0 → 0.3.0-beta.1

package/src/features/settings/utils/mergePreferencesIntoSettings.spec.ts

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+import type { Settings } from '@shellui/sdk';
+import { mergePreferencesIntoSettings } from './mergePreferencesIntoSettings';
+
+const baseSettings: Settings = {
+  developerFeatures: { enabled: false },
+  errorReporting: { enabled: true },
+  logging: { namespaces: { shellsdk: false, shellcore: false } },
+  appearance: {
+    name: 'default',
+    displayName: 'Default',
+    mode: 'light',
+    colorScheme: 'system',
+    colors: {
+      light: {
+        background: '#fff',
+        foreground: '#000',
+        card: '#fff',
+        cardForeground: '#000',
+        popover: '#fff',
+        popoverForeground: '#000',
+        primary: '#000',
+        primaryForeground: '#fff',
+        secondary: '#eee',
+        secondaryForeground: '#000',
+        muted: '#eee',
+        mutedForeground: '#333',
+        accent: '#eee',
+        accentForeground: '#000',
+        destructive: '#f00',
+        destructiveForeground: '#fff',
+        border: '#ccc',
+        input: '#ccc',
+        ring: '#000',
+        radius: '0.5rem',
+        sidebarBackground: '#fff',
+        sidebarForeground: '#000',
+        sidebarPrimary: '#000',
+        sidebarPrimaryForeground: '#fff',
+        sidebarAccent: '#eee',
+        sidebarAccentForeground: '#000',
+        sidebarBorder: '#ccc',
+        sidebarRing: '#000',
+      },
+      dark: {
+        background: '#000',
+        foreground: '#fff',
+        card: '#000',
+        cardForeground: '#fff',
+        popover: '#000',
+        popoverForeground: '#fff',
+        primary: '#fff',
+        primaryForeground: '#000',
+        secondary: '#111',
+        secondaryForeground: '#fff',
+        muted: '#111',
+        mutedForeground: '#ddd',
+        accent: '#111',
+        accentForeground: '#fff',
+        destructive: '#900',
+        destructiveForeground: '#fff',
+        border: '#333',
+        input: '#333',
+        ring: '#fff',
+        radius: '0.5rem',
+        sidebarBackground: '#000',
+        sidebarForeground: '#fff',
+        sidebarPrimary: '#fff',
+        sidebarPrimaryForeground: '#000',
+        sidebarAccent: '#111',
+        sidebarAccentForeground: '#fff',
+        sidebarBorder: '#333',
+        sidebarRing: '#fff',
+      },
+    },
+  },
+  language: { code: 'en' },
+  region: { timezone: 'UTC' },
+  cookieConsent: { acceptedHosts: [], consentedCookieHosts: [] },
+  serviceWorker: { enabled: true },
+  user: null,
+};
+
+describe('mergePreferencesIntoSettings', () => {
+  it('applies valid preference values', () => {
+    const result = mergePreferencesIntoSettings(baseSettings, {
+      themeName: 'blue',
+      language: 'fr',
+      region: 'Europe/Paris',
+      colorScheme: 'dark',
+    });
+
+    expect(result.appearance.name).toBe('blue');
+    expect(result.appearance.colorScheme).toBe('dark');
+    expect(result.language.code).toBe('fr');
+    expect(result.region.timezone).toBe('Europe/Paris');
+  });
+
+  it('keeps current language and color scheme when incoming values are invalid', () => {
+    const result = mergePreferencesIntoSettings(baseSettings, {
+      language: 'es',
+      colorScheme: undefined,
+    });
+
+    expect(result.language.code).toBe('en');
+    expect(result.appearance.colorScheme).toBe('system');
+  });
+});

package/src/features/settings/utils/mergePreferencesIntoSettings.ts

@@ -0,0 +1,47 @@
+import type { Settings } from '@shellui/sdk';
+
+export type AppPreferences = {
+  themeName?: string;
+  language?: string;
+  region?: string;
+  colorScheme?: 'light' | 'dark' | 'system';
+};
+
+export const mergePreferencesIntoSettings = (
+  currentSettings: Settings,
+  preferences: AppPreferences,
+): Settings => {
+  const hasThemeName =
+    typeof preferences.themeName === 'string' && preferences.themeName.trim() !== '';
+  const hasLanguage =
+    typeof preferences.language === 'string' && preferences.language.trim() !== '';
+  const hasRegion = typeof preferences.region === 'string' && preferences.region.trim() !== '';
+  const hasColorScheme =
+    preferences.colorScheme === 'light' ||
+    preferences.colorScheme === 'dark' ||
+    preferences.colorScheme === 'system';
+  const normalizedColorScheme: 'light' | 'dark' | 'system' = hasColorScheme
+    ? preferences.colorScheme
+    : currentSettings.appearance.colorScheme;
+  const normalizedLanguage =
+    preferences.language === 'fr' || preferences.language === 'en'
+      ? preferences.language
+      : currentSettings.language.code;
+
+  return {
+    ...currentSettings,
+    appearance: {
+      ...currentSettings.appearance,
+      ...(hasThemeName ? { name: preferences.themeName?.trim() } : {}),
+      colorScheme: normalizedColorScheme,
+    },
+    language: {
+      ...currentSettings.language,
+      ...(hasLanguage ? { code: normalizedLanguage } : {}),
+    },
+    region: {
+      ...currentSettings.region,
+      ...(hasRegion ? { timezone: preferences.region?.trim() } : {}),
+    },
+  };
+};

package/src/features/settings/utils/resolveColorMode.spec.ts

@@ -0,0 +1,29 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { resolveColorMode } from './resolveColorMode';
+
+describe('resolveColorMode', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('returns explicit dark and light values unchanged', () => {
+    expect(resolveColorMode('dark')).toBe('dark');
+    expect(resolveColorMode('light')).toBe('light');
+  });
+
+  it('resolves system to dark when media query matches', () => {
+    vi.stubGlobal('window', {
+      matchMedia: () => ({ matches: true }),
+    });
+
+    expect(resolveColorMode('system')).toBe('dark');
+  });
+
+  it('resolves system to light when media query does not match', () => {
+    vi.stubGlobal('window', {
+      matchMedia: () => ({ matches: false }),
+    });
+
+    expect(resolveColorMode('system')).toBe('light');
+  });
+});

package/src/features/settings/utils/resolveColorMode.ts

@@ -0,0 +1,6 @@
+export const resolveColorMode = (colorScheme: 'light' | 'dark' | 'system'): 'light' | 'dark' => {
+  if (colorScheme === 'system' && typeof window !== 'undefined') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return colorScheme === 'dark' ? 'dark' : 'light';
+};

package/src/features/settings/utils/resolveLabel.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { resolveLabel } from './resolveLabel';
+
+describe('resolveLabel', () => {
+  it('returns plain string labels unchanged', () => {
+    expect(resolveLabel('Settings', 'en')).toBe('Settings');
+  });
+
+  it('returns translated label for requested language', () => {
+    expect(resolveLabel({ en: 'Settings', fr: 'Parametres' }, 'fr')).toBe('Parametres');
+  });
+
+  it('falls back to english then first available label', () => {
+    expect(resolveLabel({ en: 'Settings', fr: 'Parametres' }, 'de')).toBe('Settings');
+    expect(resolveLabel({ en: '', fr: '', es: 'Configuracion' }, 'de')).toBe('');
+  });
+});

package/src/features/settings/utils/resolveLabel.ts

@@ -0,0 +1,7 @@
+export const resolveLabel = (
+  value: string | { en: string; fr: string; [key: string]: string },
+  lang: string,
+): string => {
+  if (typeof value === 'string') return value;
+  return value[lang] || value.en || value.fr || Object.values(value)[0] || '';
+};

package/src/features/settings/utils/toAbsoluteFontUrls.spec.ts

@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { toAbsoluteFontUrls } from './toAbsoluteFontUrls';
+
+describe('toAbsoluteFontUrls', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('keeps absolute urls unchanged and normalizes relative ones', () => {
+    vi.stubGlobal('window', {
+      location: { origin: 'https://shellui.dev' },
+    });
+
+    expect(
+      toAbsoluteFontUrls([
+        'https://cdn.example.com/font.css',
+        'fonts/local.woff2',
+        '/fonts/a.woff2',
+      ]),
+    ).toEqual([
+      'https://cdn.example.com/font.css',
+      'https://shellui.dev/fonts/local.woff2',
+      'https://shellui.dev/fonts/a.woff2',
+    ]);
+  });
+});

package/src/features/settings/utils/toAbsoluteFontUrls.ts

@@ -0,0 +1,15 @@
+/** Convert font file URLs to absolute so iframes/modals on other ports or domains can load them. */
+export const toAbsoluteFontUrls = (urls: string[]): string[] => {
+  if (typeof window === 'undefined') return urls;
+  const origin = window.location.origin;
+
+  return urls.map((url) => {
+    const trimmed = url.trim();
+    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+      return trimmed;
+    }
+
+    const path = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    return `${origin}${path}`;
+  });
+};

package/src/features/settings/utils/toSettingsUser.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { toSettingsUser } from './toSettingsUser';
+
+describe('toSettingsUser', () => {
+  it('returns null when auth user is null', () => {
+    expect(toSettingsUser(null)).toBeNull();
+  });
+
+  it('maps auth user fields into settings user shape', () => {
+    const result = toSettingsUser({
+      id: 'u1',
+      email: 'test@example.com',
+      name: 'Test User',
+      profilePicture: 'https://example.com/avatar.png',
+      isStaff: false,
+      isCompanyOwner: false,
+      authProvider: 'github',
+      groups: [],
+    });
+
+    expect(result).toEqual({
+      id: 'u1',
+      email: 'test@example.com',
+      name: 'Test User',
+      profilePicture: 'https://example.com/avatar.png',
+      authProvider: 'github',
+      groups: null,
+    });
+
+    const withGroups = toSettingsUser({
+      id: 'u1',
+      email: 'test@example.com',
+      name: 'Test User',
+      profilePicture: null,
+      isStaff: true,
+      isCompanyOwner: false,
+      authProvider: 'github',
+      groups: ['beta', 'alpha'],
+    });
+    expect(withGroups).toEqual({
+      id: 'u1',
+      email: 'test@example.com',
+      name: 'Test User',
+      profilePicture: null,
+      authProvider: 'github',
+      groups: ['beta', 'alpha'],
+    });
+  });
+});

package/src/features/settings/utils/toSettingsUser.ts

@@ -0,0 +1,15 @@
+import type { Settings } from '@shellui/sdk';
+import type { AuthUser } from '../../auth/hooks/useAuth';
+
+export const toSettingsUser = (user: AuthUser | null): Settings['user'] => {
+  if (!user) return null;
+
+  return {
+    id: user.id,
+    email: user.email,
+    name: user.name,
+    profilePicture: user.profilePicture,
+    authProvider: user.authProvider,
+    groups: user.groups.length ? [...user.groups] : null,
+  };
+};

package/src/i18n/translations/en/common.json

@@ -9,6 +9,20 @@
   },
   "navigationError": "Navigation error",
   "navigationNotAllowed": "This URL is not configured in the app navigation.",
+  "adminShell": {
+    "djangoAdmin": "Django admin"
+  },
+  "authMenu": {
+    "login": "Login",
+    "logout": "Logout",
+    "profile": "Profile",
+    "settings": "Settings",
+    "administration": "Administration",
+    "noEmail": "No email",
+    "userFallback": "User",
+    "goToLoginAriaLabel": "Go to login",
+    "openAccountMenuAriaLabel": "Open account menu for {{name}}"
+  },
   "errorBoundary": {
     "titleChunk": "Page couldn't be loaded",
     "titleGeneric": "Something went wrong",

package/src/i18n/translations/en/settings.json

@@ -7,14 +7,59 @@
     "developer": "Developer"
   },
   "routes": {
+    "userAccount": "User account",
     "appearance": "Appearance",
     "languageAndRegion": "Language & region",
     "updateApp": "Software update",
     "advanced": "Advanced",
     "dataPrivacy": "Data Privacy",
+    "legalDocuments": "Legal documents",
     "develop": "Develop",
     "serviceWorker": "Service Worker"
   },
+  "userAccount": {
+    "profile": {
+      "avatarAltWithName": "{{name}} avatar",
+      "avatarAltDefault": "User avatar",
+      "unknownUser": "Unknown user",
+      "noEmail": "No email",
+      "placeholderInitial": "U"
+    },
+    "fields": {
+      "name": "Name",
+      "email": "Email",
+      "loginMethod": "Login method",
+      "groups": "Groups",
+      "noGroups": "None"
+    },
+    "loginMethods": {
+      "unknown": "Unknown",
+      "magicLinkEmail": "Magic link (Email)",
+      "github": "GitHub"
+    },
+    "developerDiagnostics": {
+      "title": "Developer diagnostics",
+      "jwtPayload": "JWT payload",
+      "sharedSettingsAccessToken": "Shared settings access token",
+      "rawUserSettings": "Raw user settings",
+      "copy": "Copy",
+      "notSharedForApp": "Not shared for this app.",
+      "unableToDecodeJwtPayload": "Unable to decode JWT payload.",
+      "noAccessTokenAvailable": "No access token available.",
+      "jwtTimestampTooltipAria": "Human-readable date for this timestamp"
+    },
+    "clipboard": {
+      "copyFailedTitle": "Copy failed",
+      "clipboardApiUnavailable": "Clipboard API is not available in this environment.",
+      "copiedTitle": "Copied",
+      "copiedDescription": "{{label}} copied to clipboard.",
+      "unableToCopyDiagnostics": "Unable to copy developer diagnostics."
+    },
+    "actions": {
+      "loggingOut": "Logging out...",
+      "logout": "Logout"
+    }
+  },
   "updateApp": {
     "description": "Check your app version and look for updates. When an update is available, you can install it from here.",
     "currentVersion": "Current version",

package/src/i18n/translations/fr/common.json

@@ -9,6 +9,20 @@
   },
   "navigationError": "Erreur de navigation",
   "navigationNotAllowed": "Cette URL n'est pas configurée dans la navigation de l'application.",
+  "adminShell": {
+    "djangoAdmin": "Admin Django"
+  },
+  "authMenu": {
+    "login": "Connexion",
+    "logout": "Se déconnecter",
+    "profile": "Profil",
+    "settings": "Paramètres",
+    "administration": "Administration",
+    "noEmail": "Aucun e-mail",
+    "userFallback": "Utilisateur",
+    "goToLoginAriaLabel": "Aller à la connexion",
+    "openAccountMenuAriaLabel": "Ouvrir le menu du compte pour {{name}}"
+  },
   "errorBoundary": {
     "titleChunk": "La page n'a pas pu être chargée",
     "titleGeneric": "Une erreur s'est produite",

package/src/i18n/translations/fr/settings.json

@@ -7,14 +7,59 @@
     "developer": "Développeur"
   },
   "routes": {
+    "userAccount": "Compte utilisateur",
     "appearance": "Apparence",
     "languageAndRegion": "Langue et région",
     "updateApp": "Mise à jour logicielle",
     "advanced": "Avancé",
     "dataPrivacy": "Confidentialité des données",
+    "legalDocuments": "Documents légaux",
     "develop": "Développement",
     "serviceWorker": "Service Worker"
   },
+  "userAccount": {
+    "profile": {
+      "avatarAltWithName": "Avatar de {{name}}",
+      "avatarAltDefault": "Avatar utilisateur",
+      "unknownUser": "Utilisateur inconnu",
+      "noEmail": "Aucun e-mail",
+      "placeholderInitial": "U"
+    },
+    "fields": {
+      "name": "Nom",
+      "email": "E-mail",
+      "loginMethod": "Méthode de connexion",
+      "groups": "Groupes",
+      "noGroups": "Aucun"
+    },
+    "loginMethods": {
+      "unknown": "Inconnue",
+      "magicLinkEmail": "Lien magique (e-mail)",
+      "github": "GitHub"
+    },
+    "developerDiagnostics": {
+      "title": "Diagnostics développeur",
+      "jwtPayload": "Payload JWT",
+      "sharedSettingsAccessToken": "Jeton d'accès des paramètres partagés",
+      "rawUserSettings": "Paramètres utilisateur bruts",
+      "copy": "Copier",
+      "notSharedForApp": "Non partagé pour cette application.",
+      "unableToDecodeJwtPayload": "Impossible de décoder le payload JWT.",
+      "noAccessTokenAvailable": "Aucun jeton d'accès disponible.",
+      "jwtTimestampTooltipAria": "Date lisible pour cet horodatage"
+    },
+    "clipboard": {
+      "copyFailedTitle": "Échec de la copie",
+      "clipboardApiUnavailable": "L'API Clipboard n'est pas disponible dans cet environnement.",
+      "copiedTitle": "Copié",
+      "copiedDescription": "{{label}} copié dans le presse-papiers.",
+      "unableToCopyDiagnostics": "Impossible de copier les diagnostics développeur."
+    },
+    "actions": {
+      "loggingOut": "Déconnexion...",
+      "logout": "Se déconnecter"
+    }
+  },
   "updateApp": {
     "description": "Consultez la version de l'application et vérifiez les mises à jour. Lorsqu'une mise à jour est disponible, vous pouvez l'installer depuis ici.",
     "currentVersion": "Version actuelle",

package/src/index.css

@@ -431,3 +431,40 @@
     width: 100%;
   }
 }
+
+/* Auth account dropdown menu animation (LoginButton) */
+@keyframes auth-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes auth-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+}
+
+[data-auth-menu-content] {
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  will-change: opacity, transform;
+}
+
+[data-auth-menu-content][data-state='open'] {
+  animation: auth-menu-in 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+[data-auth-menu-content][data-state='closed'] {
+  animation: auth-menu-out 0.12s cubic-bezier(0.4, 0, 1, 1) both;
+  pointer-events: none;
+}

package/src/index.ts

@@ -17,13 +17,19 @@ export type {
   ThemeColors,
   DrawerPosition,
   LayoutType,
+  BackendType,
+  BackendConfig,
   CookieConsentCategory,
   CookieDefinition,
   CookieConsentConfig,
+  LegalDocumentsConfig,
 } from './features/config/types.js';
 export { useConfig } from './features/config/useConfig.js';
+export { useAuth } from './features/auth/hooks/useAuth.js';
+export { AuthProvider } from './features/auth/AuthProvider.js';
 export { ConfigProvider } from './features/config/ConfigProvider.js';
 export type { ConfigContextValue, ConfigProviderProps } from './features/config/ConfigProvider.js';
+export type { AuthSession } from './features/auth/hooks/useAuth.js';
 export { default as urls } from './constants/urls.js';
 export {
   getCookieConsentAccepted,

package/src/routes/components/NavigationItemRoute.tsx

@@ -1,14 +1,45 @@
 import { ContentView } from '../../components/ContentView';
 import { useNavigationItems } from '../hooks/useNavigationItems';
 import { NotFoundView } from './NotFoundView';
+import { Navigate, useLocation } from 'react-router';
+import urls from '../../constants/urls';
+import { useAuth } from '../../features/auth/hooks/useAuth';
+import { RouteFallback } from './RouteFallback';
 
 export const NavigationItemRoute = () => {
-  const { url, currentItem } = useNavigationItems();
+  const location = useLocation();
+  const { isAuthenticated, isLoading } = useAuth();
+  const { url, currentItem, isRootFallback } = useNavigationItems();
+
+  if (isRootFallback) {
+    return (
+      <Navigate
+        to="/"
+        replace
+      />
+    );
+  }
 
   if (!currentItem) {
     return <NotFoundView />;
   }
 
+  if (currentItem.requiresAuth) {
+    if (isLoading) {
+      return <RouteFallback />;
+    }
+    if (!isAuthenticated) {
+      const next = `${location.pathname}${location.search}`;
+      const loginUrl = `${urls.login}?next=${encodeURIComponent(next)}`;
+      return (
+        <Navigate
+          to={loginUrl}
+          replace
+        />
+      );
+    }
+  }
+
   return (
     <ContentView
       url={url}

package/src/routes/components/NotFoundView.tsx

@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import { useConfig } from '../../features/config/useConfig';
-import { getNavPathPrefix } from '../../features/layouts/utils';
+import { filterNavigationForAuthState, getNavPathPrefix } from '../../features/layouts/utils';
 import type { NavigationItem, NavigationGroup } from '../../features/config/types';
+import { useAuth } from '../../features/auth/hooks/useAuth';
+import { useSettings } from '../../features/settings/hooks/useSettings';
 
 const flattenNavigationItems = (
   navigation: (NavigationItem | NavigationGroup)[],
@@ -18,6 +20,8 @@ const flattenNavigationItems = (
 
 export const NotFoundView = () => {
   const { config } = useConfig();
+  const { isAuthenticated } = useAuth();
+  const { settings } = useSettings();
   const { i18n } = useTranslation();
   const currentLanguage = i18n.language || 'en';
 
@@ -31,7 +35,13 @@ export const NotFoundView = () => {
 
   const navItems =
     config?.navigation && config.navigation.length > 0
-      ? flattenNavigationItems(config.navigation)
+      ? flattenNavigationItems(
+          filterNavigationForAuthState(
+            config.navigation,
+            isAuthenticated,
+            settings.developerFeatures.enabled,
+          ),
+        )
           .filter((item) => !item.hidden)
           .filter((item, index, self) => index === self.findIndex((i) => i.path === item.path))
       : [];
@@ -62,7 +72,7 @@ export const NotFoundView = () => {
           >
             {navItems.map((item, index) => (
               <span
-                key={item.path || 'root'}
+                key={`${item.path || 'root'}-${item.url}-${item.openIn || 'default'}-${index}`}
                 className="inline-flex items-center gap-x-2"
               >
                 {index > 0 && (