@shellui/core 0.2.0-alpha.4 → 0.2.0-beta.1

package/src/features/layouts/sidebar/NavigationContent.tsx

@@ -0,0 +1,159 @@
+import { Link, useLocation } from 'react-router';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shellui } from '@shellui/sdk';
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from '../../../components/ui/sidebar';
+import { cn } from '../../../lib/utils';
+import { getActivePathPrefix, getNavPathPrefix, flattenNavigationItems } from '../utils';
+import { getExternalFaviconUrl } from './sidebarUtils';
+import { ExternalLinkIcon } from './SidebarIcons';
+
+export function NavigationContent({
+  navigation,
+}: {
+  navigation: (NavigationItem | NavigationGroup)[];
+}) {
+  const location = useLocation();
+  const { i18n } = useTranslation();
+  const currentLanguage = i18n.language || 'en';
+
+  const resolveLocalizedString = (
+    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] || '';
+  };
+
+  const hasAnyIcons = useMemo(() => {
+    return navigation.some((item) => {
+      if ('title' in item && 'items' in item) {
+        return (item as NavigationGroup).items.some((navItem) => !!navItem.icon);
+      }
+      return !!(item as NavigationItem).icon;
+    });
+  }, [navigation]);
+
+  const flatItems = useMemo(() => flattenNavigationItems(navigation), [navigation]);
+  const activePathPrefix = useMemo(
+    () => getActivePathPrefix(location.pathname, flatItems),
+    [location.pathname, flatItems],
+  );
+
+  const isGroup = (item: NavigationItem | NavigationGroup): item is NavigationGroup => {
+    return 'title' in item && 'items' in item;
+  };
+
+  const renderNavItem = (navItem: NavigationItem) => {
+    const pathPrefix = getNavPathPrefix(navItem);
+    const isOverlay = navItem.openIn === 'modal' || navItem.openIn === 'drawer';
+    const isExternal = navItem.openIn === 'external';
+    const isActive = !isOverlay && !isExternal && pathPrefix === activePathPrefix;
+    const itemLabel = resolveLocalizedString(navItem.label, currentLanguage);
+    const faviconUrl = isExternal && !navItem.icon ? getExternalFaviconUrl(navItem.url) : null;
+    const iconSrc = navItem.icon ?? faviconUrl ?? null;
+    const iconEl = iconSrc ? (
+      <img
+        src={iconSrc}
+        alt=""
+        className={cn('h-4 w-4', 'shrink-0')}
+      />
+    ) : hasAnyIcons ? (
+      <span className="h-4 w-4 shrink-0" />
+    ) : null;
+    const externalIcon = isExternal ? (
+      <ExternalLinkIcon className="ml-auto h-4 w-4 shrink-0 opacity-70" />
+    ) : null;
+    const content = (
+      <>
+        {iconEl}
+        <span className="truncate">{itemLabel}</span>
+        {externalIcon}
+      </>
+    );
+    const linkOrTrigger =
+      navItem.openIn === 'modal' ? (
+        <button
+          type="button"
+          onClick={() => shellui.openModal(navItem.url)}
+          className="flex items-center gap-2 w-full cursor-pointer text-left"
+        >
+          {content}
+        </button>
+      ) : navItem.openIn === 'drawer' ? (
+        <button
+          type="button"
+          onClick={() => shellui.openDrawer({ url: navItem.url, position: navItem.drawerPosition })}
+          className="flex items-center gap-2 w-full cursor-pointer text-left"
+        >
+          {content}
+        </button>
+      ) : navItem.openIn === 'external' ? (
+        <a
+          href={navItem.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 w-full"
+        >
+          {content}
+        </a>
+      ) : (
+        <Link
+          to={pathPrefix}
+          className="flex items-center gap-2 w-full"
+        >
+          {content}
+        </Link>
+      );
+    return (
+      <SidebarMenuButton
+        asChild
+        isActive={isActive}
+        className={cn('w-full', isActive && 'bg-sidebar-accent text-sidebar-accent-foreground')}
+      >
+        {linkOrTrigger}
+      </SidebarMenuButton>
+    );
+  };
+
+  return (
+    <>
+      {navigation.map((item) => {
+        if (isGroup(item)) {
+          const groupTitle = resolveLocalizedString(item.title, currentLanguage);
+          return (
+            <SidebarGroup
+              key={groupTitle}
+              className="mt-0"
+            >
+              <SidebarGroupLabel className="mb-1">{groupTitle}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu className="gap-0.5">
+                  {item.items.map((navItem) => (
+                    <SidebarMenuItem key={navItem.path}>{renderNavItem(navItem)}</SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          );
+        }
+        return (
+          <SidebarMenu
+            key={item.path}
+            className="gap-0.5"
+          >
+            <SidebarMenuItem>{renderNavItem(item)}</SidebarMenuItem>
+          </SidebarMenu>
+        );
+      })}
+    </>
+  );
+}

package/src/features/layouts/sidebar/SidebarIcons.tsx

@@ -0,0 +1,93 @@
+import { cn } from '../../../lib/utils';
+
+/** Inline SVG: external-link icon. Bundled so consumers don't need to serve static SVGs. */
+export function ExternalLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line
+        x1="10"
+        y1="14"
+        x2="21"
+        y2="3"
+      />
+    </svg>
+  );
+}
+
+/** Caret up: expand (show second line). */
+export function CaretUpIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}
+
+/** Caret down: collapse (hide second line). */
+export function CaretDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+/** Home icon for mobile bottom bar (same as sidebar logo action). */
+export function HomeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+      <polyline points="9 22 9 12 15 12 15 22" />
+    </svg>
+  );
+}

package/src/features/layouts/sidebar/SidebarInner.tsx

@@ -0,0 +1,48 @@
+import { Link } from 'react-router';
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+import { SidebarHeader, SidebarContent, SidebarFooter } from '../../../components/ui/sidebar';
+import { NavigationContent } from './NavigationContent';
+
+/** Reusable sidebar inner: header, main nav, footer. Used in desktop Sidebar and mobile Drawer. */
+export function SidebarInner({
+  title,
+  logo,
+  startNav,
+  endItems,
+}: {
+  title?: string;
+  logo?: string;
+  startNav: (NavigationItem | NavigationGroup)[];
+  endItems: (NavigationItem | NavigationGroup)[];
+}) {
+  return (
+    <>
+      <SidebarHeader className="border-b border-sidebar-border pb-4">
+        {(title || logo) && (
+          <Link
+            to="/"
+            className="flex items-center pl-1 pr-3 py-2 text-lg font-semibold text-sidebar-foreground hover:text-sidebar-foreground/80 transition-colors"
+          >
+            {logo && logo.trim() ? (
+              <img
+                src={logo}
+                alt={title || 'Logo'}
+                className="h-5 w-auto shrink-0 object-contain sidebar-logo"
+              />
+            ) : title ? (
+              <span className="leading-none">{title}</span>
+            ) : null}
+          </Link>
+        )}
+      </SidebarHeader>
+      <SidebarContent className="gap-1">
+        <NavigationContent navigation={startNav} />
+      </SidebarContent>
+      {endItems.length > 0 && (
+        <SidebarFooter>
+          <NavigationContent navigation={endItems} />
+        </SidebarFooter>
+      )}
+    </>
+  );
+}

package/src/features/layouts/sidebar/SidebarLayout.tsx

@@ -0,0 +1,86 @@
+import { Outlet } from 'react-router';
+import { useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Sidebar } from '../../../components/ui/sidebar';
+import { cn } from '../../../lib/utils';
+import {
+  filterNavigationByViewport,
+  filterNavigationForSidebar,
+  flattenNavigationItems,
+  resolveLocalizedString as resolveLocalizedLabel,
+  splitNavigationByPosition,
+} from '../utils';
+import { SidebarInner } from './SidebarInner';
+import { MobileBottomNav } from './MobileBottomNav';
+import type { SidebarLayoutProps } from './types';
+import { useNavigationItems } from '../../../routes/hooks/useNavigationItems';
+
+const SidebarLayoutContent = ({ title, logo, navigation }: SidebarLayoutProps) => {
+  const { i18n } = useTranslation();
+  const { navigationItem, rootItem } = useNavigationItems();
+
+  const currentLanguage = useMemo(() => {
+    return i18n.language || 'en';
+  }, [i18n]);
+
+  const { startNav, endItems, mobileNavItems } = useMemo(() => {
+    const desktopNav = filterNavigationByViewport(navigation, 'desktop');
+    const mobileNav = filterNavigationByViewport(navigation, 'mobile');
+    const { start, end } = splitNavigationByPosition(desktopNav);
+    const mobileFlat = flattenNavigationItems(mobileNav);
+
+    return {
+      startNav: filterNavigationForSidebar(start),
+      endItems: end,
+      mobileNavItems: mobileFlat,
+    };
+  }, [navigation]);
+
+  useEffect(() => {
+    if (!title) return;
+    if (navigationItem) {
+      const label = resolveLocalizedLabel(navigationItem.label, currentLanguage);
+      document.title = `${label} | ${title}`;
+    } else {
+      document.title = title;
+    }
+  }, [navigationItem, title, currentLanguage]);
+
+  return (
+    <div>
+      <div className="flex h-screen overflow-hidden">
+        <Sidebar className={cn('hidden md:flex shrink-0')}>
+          <SidebarInner
+            title={title}
+            logo={logo}
+            startNav={startNav}
+            endItems={endItems}
+          />
+        </Sidebar>
+
+        <main className="flex-1 flex flex-col overflow-hidden bg-background relative min-w-0">
+          <div className="flex-1 flex flex-col overflow-auto pb-16 md:pb-0">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+
+      <MobileBottomNav
+        items={mobileNavItems}
+        currentLanguage={currentLanguage}
+        showHomeButton={!rootItem}
+      />
+    </div>
+  );
+};
+
+export function SidebarLayout({ title, appIcon, logo, navigation }: SidebarLayoutProps) {
+  return (
+    <SidebarLayoutContent
+      title={title}
+      appIcon={appIcon}
+      logo={logo}
+      navigation={navigation}
+    />
+  );
+}

package/src/features/layouts/sidebar/sidebarUtils.ts

@@ -0,0 +1,23 @@
+/** DuckDuckGo favicon URL for a given page URL (used when openIn === 'external' and no icon is set). */
+export function getExternalFaviconUrl(url: string): string | null {
+  try {
+    const parsed = new URL(url);
+    const hostname = parsed.hostname;
+    if (!hostname) return null;
+    return `https://icons.duckduckgo.com/ip3/${hostname}.ico`;
+  } catch {
+    return null;
+  }
+}
+
+/** Approximate width per slot (icon + label + padding) and gap for dynamic slot count. */
+export const BOTTOM_NAV_SLOT_WIDTH = 64;
+export const BOTTOM_NAV_GAP = 4;
+export const BOTTOM_NAV_PX = 12;
+/** Max slots in the row (Home + nav + optional More) to avoid overflow/duplicated wrap. */
+export const BOTTOM_NAV_MAX_SLOTS = 6;
+
+/** True when the icon is a local app icon (/icons/); external images (avatars, favicons) are shown as-is. */
+export function isAppIcon(src: string): boolean {
+  return src.startsWith('/icons/');
+}

package/src/features/layouts/sidebar/types.ts

@@ -0,0 +1,8 @@
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+
+export interface SidebarLayoutProps {
+  title?: string;
+  appIcon?: string;
+  logo?: string;
+  navigation: (NavigationItem | NavigationGroup)[];
+}

package/src/features/layouts/utils.ts

@@ -2,7 +2,35 @@ import type { NavigationItem, NavigationGroup, LocalizedString } from '../config
 
 /** Path prefix for a nav item: "/" for root (path '' or '/'), otherwise "/{path}". */
 export function getNavPathPrefix(item: NavigationItem): string {
-  return item.path === '/' || item.path === '' ? '/' : `/${item.path}`;
+  return item.path === '' ? '/' : `/${item.path}`;
+}
+
+/** Whether a URL string uses hash-based routing (e.g. contains /#/). */
+export function isHashRouterUrl(url: string): boolean {
+  return url.includes('/#/');
+}
+
+/** Whether a nav item uses hash-based routing (explicit flag or inferred from url). */
+export function isHashRouterNavItem(item: NavigationItem): boolean {
+  if (item.useHashRouter === true) return true;
+  if (item.useHashRouter === false) return false;
+  return isHashRouterUrl(item.url);
+}
+
+/** Base URL without hash (origin + pathname before #). Used to match and build iframe URLs for hash apps. */
+export function getBaseUrlWithoutHash(url: string): string {
+  const hashIndex = url.indexOf('#');
+  if (hashIndex === -1) return url;
+  const base = url.slice(0, hashIndex);
+  return base.endsWith('/') ? base : `${base}/`;
+}
+
+/** Hash path from a URL (part after #), e.g. "/themes" from "http://localhost:5173/#/themes". Returns "" if no hash. */
+export function getHashPathFromUrl(url: string): string {
+  const hashIndex = url.indexOf('#');
+  if (hashIndex === -1) return '';
+  const hash = url.slice(hashIndex + 1);
+  return hash.startsWith('/') ? hash : `/${hash}`;
 }
 
 /** Among items that match the current pathname, return the longest path prefix. Used so only one nav item is active when URLs nest (e.g. /foo and /foo/bar). */