@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/custom/satellite-shell-utils.ts

@@ -0,0 +1,163 @@
+import type { NavLink } from '@tuturuuu/ui/custom/navigation';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+
+export type SidebarStructureRenderProps = {
+  closeOnMobile?: () => void;
+  expandSidebar?: () => void;
+  isCollapsed: boolean;
+  standalone?: boolean;
+  setIsCollapsed?: Dispatch<SetStateAction<boolean>>;
+};
+
+export type WorkspaceSelectRenderer = (
+  props: SidebarStructureRenderProps
+) => ReactNode;
+
+export type NavigationState = {
+  currentLinks: (NavLink | null)[];
+  direction: 'forward' | 'backward';
+  history: (NavLink | null)[][];
+  titleHistory: string[];
+};
+
+export function matchesPath(
+  pathname: string,
+  target?: string,
+  hasChildren?: boolean
+) {
+  if (!target) return false;
+  if (hasChildren) {
+    return pathname === target || pathname.startsWith(`${target}/`);
+  }
+  return pathname === target;
+}
+
+function cleanNavigationSeparators(
+  items: (NavLink | null | undefined)[]
+): (NavLink | null)[] {
+  const result: (NavLink | null)[] = [];
+
+  for (const item of items) {
+    if (item === undefined) continue;
+    if (!item && (result.length === 0 || result.at(-1) === null)) continue;
+    result.push(item);
+  }
+
+  while (result.at(-1) === null) result.pop();
+  return result;
+}
+
+export function getFilteredLinks(
+  linksToFilter: (NavLink | null)[] | undefined
+): (NavLink | null)[] {
+  const filtered = (linksToFilter || []).flatMap((link) => {
+    if (!link) return [null];
+    if (link.disabled) return [];
+
+    if (link.children && link.children.length > 1) {
+      const filteredChildren = getFilteredLinks(link.children);
+      if (!filteredChildren.some(Boolean)) return [];
+      return [{ ...link, children: filteredChildren }];
+    }
+
+    if (link.children && link.children.length === 1) {
+      return getFilteredLinks([link.children[0] as NavLink]);
+    }
+
+    return [link];
+  });
+
+  return cleanNavigationSeparators(filtered);
+}
+
+function hasActiveChild(
+  navLinks: (NavLink | null)[],
+  pathname: string
+): boolean {
+  return navLinks.some((child) => {
+    const childMatches =
+      (child?.href &&
+        matchesPath(pathname, child.href, Boolean(child.children?.length))) ||
+      child?.aliases?.some((alias) =>
+        matchesPath(pathname, alias, Boolean(child.children?.length))
+      );
+
+    if (childMatches) return true;
+    if (child?.children) return hasActiveChild(child.children, pathname);
+    return false;
+  });
+}
+
+export function findActiveNavigation({
+  currentPath,
+  navLinks,
+}: {
+  currentPath: string;
+  navLinks: (NavLink | null)[];
+}): NavigationState | null {
+  for (const link of navLinks) {
+    if (!link) continue;
+
+    if (link.children?.length) {
+      const deeper = findActiveNavigation({
+        currentPath,
+        navLinks: link.children,
+      });
+      if (deeper) {
+        return {
+          currentLinks: deeper.currentLinks,
+          direction: 'forward',
+          history: [navLinks, ...deeper.history],
+          titleHistory: [link.title, ...deeper.titleHistory],
+        };
+      }
+
+      if (hasActiveChild(link.children, currentPath)) {
+        return {
+          currentLinks: link.children,
+          direction: 'forward',
+          history: [navLinks],
+          titleHistory: [link.title],
+        };
+      }
+    }
+
+    const linkMatches =
+      (link.href &&
+        matchesPath(currentPath, link.href, Boolean(link.children?.length))) ||
+      link.aliases?.some((alias) =>
+        matchesPath(currentPath, alias, Boolean(link.children?.length))
+      );
+
+    if (linkMatches && link.children?.length) {
+      return {
+        currentLinks: link.children,
+        direction: 'forward',
+        history: [navLinks],
+        titleHistory: [link.title],
+      };
+    }
+  }
+
+  return null;
+}
+
+export function getNavigationMatches({
+  currentLinks,
+  pathname,
+}: {
+  currentLinks: (NavLink | null)[];
+  pathname: string;
+}) {
+  return currentLinks
+    .filter((link): link is NavLink => Boolean(link))
+    .filter(
+      (link) =>
+        (link.href &&
+          matchesPath(pathname, link.href, Boolean(link.children?.length))) ||
+        link.aliases?.some((alias) =>
+          matchesPath(pathname, alias, Boolean(link.children?.length))
+        )
+    )
+    .sort((a, b) => (b.href?.length || 0) - (a.href?.length || 0));
+}

package/src/components/ui/custom/satellite-shell.test.tsx

@@ -0,0 +1,169 @@
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { DropdownMenuItem } from '../dropdown-menu';
+import type { NavLink } from './navigation';
+import { SatelliteFooterActions } from './satellite-footer-actions';
+import { SidebarNavigation } from './satellite-navigation';
+import { SatelliteShell } from './satellite-shell';
+import { SatelliteUserMenu } from './satellite-user-menu';
+import { useSatelliteShell } from './use-satellite-shell';
+
+afterEach(cleanup);
+
+describe('framework-independent satellite shell', () => {
+  it('renders native links, the app launcher, content and account slots without Next providers', () => {
+    const openApps = vi.fn();
+    const toggle = vi.fn();
+    render(
+      <SatelliteShell
+        isCollapsed={false}
+        setIsCollapsed={toggle}
+        hideSizeToggle
+        brand={{
+          appName: 'Colab',
+          appHref: '/',
+          centralHref: 'https://tuturuuu.com',
+          logo: <span>Logo</span>,
+          launcherLabel: 'Apps',
+          onAppClick: openApps,
+        }}
+        homeLabel="Home"
+        sidebarLabels={{ open: 'Expand', close: 'Collapse' }}
+        sidebarContent={
+          <SidebarNavigation
+            links={[
+              { title: 'Workshop', href: '/room' },
+              null,
+              { title: 'Guide', href: '/guide' },
+            ]}
+            isCollapsed={false}
+            renderLink={(link) => <a href={link.href}>{link.title}</a>}
+          />
+        }
+        actions={<span>Account settings</span>}
+        userPopover={<span>Avatar</span>}
+      >
+        <h1>Team workshop</h1>
+      </SatelliteShell>
+    );
+    expect(screen.getByRole('main').textContent).toContain('Team workshop');
+    expect(
+      screen.getByRole('link', { name: 'Workshop' }).getAttribute('href')
+    ).toBe('/room');
+    expect(screen.getByText('Account settings')).toBeTruthy();
+    fireEvent.click(screen.getAllByRole('button', { name: 'Apps' })[0]!);
+    expect(openApps).toHaveBeenCalledOnce();
+  });
+
+  it('preserves route-driven submenus, back navigation and collapse persistence', () => {
+    const persistCollapsed = vi.fn();
+    const links: NavLink[] = [
+      {
+        title: 'Workspace',
+        children: [
+          { title: 'Tasks', href: '/tasks' },
+          { title: 'Calendar', href: '/calendar' },
+        ],
+      },
+    ];
+    const { result, rerender } = renderHook(
+      ({ pathname }) =>
+        useSatelliteShell({
+          pathname,
+          links,
+          backLabel: 'Back',
+          persistCollapsed,
+        }),
+      { initialProps: { pathname: '/tasks' } }
+    );
+    expect(result.current.navState.titleHistory).toEqual(['Workspace']);
+    act(() => result.current.backButton.onClick?.());
+    expect(result.current.navState.history).toEqual([]);
+    act(() => result.current.handleToggle());
+    expect(result.current.isCollapsed).toBe(true);
+    expect(persistCollapsed).toHaveBeenCalledWith(true);
+    rerender({ pathname: '/calendar' });
+    expect(result.current.navState.titleHistory).toEqual(['Workspace']);
+  });
+
+  it('preserves hidden and hover behavior while respecting open dialogs', () => {
+    const handleBehaviorChange = vi.fn();
+    const links: NavLink[] = [];
+    const { result, rerender } = renderHook(
+      ({ behavior }: { behavior: 'hidden' | 'hover' }) =>
+        useSatelliteShell({
+          pathname: '/',
+          links,
+          backLabel: 'Back',
+          behavior,
+          handleBehaviorChange,
+        }),
+      { initialProps: { behavior: 'hidden' } }
+    );
+    expect(result.current.isCollapsed).toBe(true);
+    act(() => result.current.handleToggle());
+    expect(handleBehaviorChange).toHaveBeenCalledWith('collapsed');
+    rerender({ behavior: 'hover' });
+    act(() => result.current.onMouseEnter?.());
+    expect(result.current.isCollapsed).toBe(false);
+    const { unmount } = render(
+      <div role="dialog" data-state="open">
+        Settings
+      </div>
+    );
+    act(() => result.current.onMouseLeave?.());
+    expect(result.current.isCollapsed).toBe(false);
+    unmount();
+    act(() => result.current.onMouseLeave?.());
+    expect(result.current.isCollapsed).toBe(true);
+  });
+});
+
+describe('shared account chrome', () => {
+  it('exposes the signed-in identity and adapter actions in the profile menu', () => {
+    render(
+      <SatelliteUserMenu
+        name="Ngọc Nguyễn"
+        email="ngoc@example.com"
+        label="Account"
+        online
+      >
+        <DropdownMenuItem asChild>
+          <a href="/profile">My profile</a>
+        </DropdownMenuItem>
+      </SatelliteUserMenu>
+    );
+    const trigger = screen.getByRole('button', { name: 'Account' });
+    expect(trigger.textContent).toContain('Ngọc Nguyễn');
+    expect(trigger.textContent).toContain('ngoc@example.com');
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    expect(
+      screen.getByRole('menuitem', { name: 'My profile' }).getAttribute('href')
+    ).toBe('/profile');
+  });
+  it('keeps collapsed feedback and community actions accessible', () => {
+    const feedback = vi.fn();
+    render(
+      <SatelliteFooterActions
+        wsId=""
+        isCollapsed
+        showUpgrade={false}
+        labels={{ upgrade: 'Upgrade', feedback: 'Feedback' }}
+        discordHref="https://discord.gg/example"
+        onFeedback={feedback}
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Feedback' }));
+    expect(feedback).toHaveBeenCalledOnce();
+    expect(
+      screen.getByRole('link', { name: 'Discord' }).getAttribute('href')
+    ).toBe('https://discord.gg/example');
+  });
+});

package/src/components/ui/custom/satellite-shell.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import {
+  SatelliteBrand,
+  type SatelliteBrandProps,
+  ShellAnchor,
+} from './satellite-brand';
+import { Structure } from './structure';
+
+export interface SatelliteShellProps
+  extends Omit<
+    ComponentProps<typeof Structure>,
+    'sidebarHeader' | 'mobileHeader'
+  > {
+  brand: SatelliteBrandProps;
+  homeLabel: string;
+  collapsedLogo?: SatelliteBrandProps['logo'];
+  mobileBrandActions?: SatelliteBrandProps['actions'];
+}
+
+/** Actual satellite chrome. Framework adapters supply routing, auth and workspace services. */
+export function SatelliteShell({
+  brand,
+  homeLabel,
+  collapsedLogo,
+  mobileBrandActions,
+  ...props
+}: SatelliteShellProps) {
+  const Link = brand.LinkComponent ?? ShellAnchor;
+  return (
+    <Structure
+      {...props}
+      sidebarHeader={
+        props.isCollapsed ? (
+          <Link
+            aria-label={homeLabel}
+            className="flex flex-none items-center justify-center"
+            href={brand.centralHref}
+          >
+            {collapsedLogo ?? brand.logo}
+          </Link>
+        ) : (
+          <SatelliteBrand {...brand} />
+        )
+      }
+      mobileHeader={<SatelliteBrand {...brand} actions={mobileBrandActions} />}
+    />
+  );
+}

package/src/components/ui/custom/satellite-theme-dropdown-items.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Check, Monitor, Moon, Sun } from '@tuturuuu/icons';
+import { useTheme } from 'next-themes';
+import { DropdownMenuItem, DropdownMenuSeparator } from '../dropdown-menu';
+
+export function SatelliteThemeDropdownItems({
+  t,
+}: {
+  t: (key: 'dark' | 'light' | 'system') => string;
+}) {
+  const { theme, systemTheme, setTheme } = useTheme();
+
+  const isSystem = theme === 'system' || theme === null;
+
+  const primaryTheme = theme?.split('-')?.[0] as
+    | 'light'
+    | 'dark'
+    | 'system'
+    | undefined;
+
+  const updateTheme = ({
+    primary = primaryTheme,
+  }: {
+    primary?: 'light' | 'dark' | 'system';
+    secondary?:
+      | 'pink'
+      | 'purple'
+      | 'yellow'
+      | 'orange'
+      | 'green'
+      | 'blue'
+      | null;
+  }) => {
+    let theme = '';
+
+    if (primary) theme += primary === 'system' ? systemTheme : primary;
+
+    // remove leading dash
+    if (theme.startsWith('-')) theme = theme.slice(1);
+
+    setTheme(theme);
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className="cursor-pointer"
+        onClick={() => updateTheme({ primary: 'light' })}
+        disabled={primaryTheme === 'light'}
+      >
+        {primaryTheme === 'light' ? (
+          <Check className="h-4 w-4 text-dynamic-yellow" />
+        ) : (
+          <Sun className="h-4 w-4 text-dynamic-yellow" />
+        )}
+
+        {t('light')}
+      </DropdownMenuItem>
+
+      <DropdownMenuItem
+        className="cursor-pointer"
+        onClick={() => updateTheme({ primary: 'dark' })}
+        disabled={primaryTheme === 'dark'}
+      >
+        {primaryTheme === 'dark' ? (
+          <Check className="h-4 w-4 text-dynamic-purple" />
+        ) : (
+          <Moon className="h-4 w-4 text-dynamic-purple" />
+        )}
+
+        {t('dark')}
+      </DropdownMenuItem>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem
+        className="cursor-pointer"
+        onClick={() => setTheme('system')}
+        disabled={isSystem}
+      >
+        {isSystem ? (
+          <Check className="h-4 w-4" />
+        ) : (
+          <Monitor className="h-4 w-4" />
+        )}
+
+        {t('system')}
+      </DropdownMenuItem>
+    </>
+  );
+}

package/src/components/ui/custom/satellite-user-menu-items.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import {
+  AlertTriangle,
+  Check,
+  ExternalLink,
+  Globe,
+  LogOut,
+  Palette,
+  PanelLeft,
+  PanelLeftClose,
+  PanelLeftOpen,
+  SquareMousePointer,
+} from '@tuturuuu/icons';
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import type { ReactNode } from 'react';
+
+export type SidebarBehavior = 'expanded' | 'collapsed' | 'hover' | 'hidden';
+
+/** One menu definition for the Next.js satellite and framework adapters. */
+export function SatelliteUserMenuItems({
+  centralUrl,
+  t,
+  sidebar,
+  languageItems,
+  themeItems,
+  accountItems,
+  workspaceSelect,
+  signedIn,
+  onReport,
+  onLogout,
+}: {
+  centralUrl: string;
+  t: (
+    key:
+      | 'common.collapsed'
+      | 'common.dashboard'
+      | 'common.expand_on_hover'
+      | 'common.expanded'
+      | 'common.hidden'
+      | 'common.language'
+      | 'common.logout'
+      | 'common.report-problem'
+      | 'common.sidebar'
+      | 'common.theme'
+  ) => string;
+  sidebar?: {
+    behavior: SidebarBehavior;
+    handleBehaviorChange: (value: SidebarBehavior) => void;
+  } | null;
+  languageItems: ReactNode;
+  themeItems: ReactNode;
+  accountItems: ReactNode;
+  workspaceSelect?: ReactNode;
+  signedIn: boolean;
+  onReport: () => void;
+  onLogout: () => void;
+}) {
+  return (
+    <>
+      {workspaceSelect ? (
+        <>
+          <div className="w-full p-1 [&_[data-slot=popover-trigger]]:h-9">
+            {workspaceSelect}
+          </div>
+          <DropdownMenuSeparator />
+        </>
+      ) : null}
+      <DropdownMenuGroup>
+        <DropdownMenuItem asChild>
+          <a
+            href={centralUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            <ExternalLink className="h-4 w-4 text-dynamic-green" />
+            <span>{t('common.dashboard')}</span>
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        {sidebar && (
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="hidden md:flex">
+              <PanelLeft className="h-4 w-4 text-dynamic-purple" />
+              <span>{t('common.sidebar')}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent sideOffset={4}>
+                <DropdownMenuItem
+                  onClick={() => sidebar.handleBehaviorChange('expanded')}
+                  disabled={sidebar.behavior === 'expanded'}
+                >
+                  <PanelLeftOpen className="h-4 w-4 text-dynamic-purple" />
+                  <span>{t('common.expanded')}</span>
+                  {sidebar.behavior === 'expanded' && (
+                    <Check className="ml-auto h-4 w-4" />
+                  )}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => sidebar.handleBehaviorChange('collapsed')}
+                  disabled={sidebar.behavior === 'collapsed'}
+                >
+                  <PanelLeftClose className="h-4 w-4 text-dynamic-purple" />
+                  <span>{t('common.collapsed')}</span>
+                  {sidebar.behavior === 'collapsed' && (
+                    <Check className="ml-auto h-4 w-4" />
+                  )}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => sidebar.handleBehaviorChange('hover')}
+                  disabled={sidebar.behavior === 'hover'}
+                >
+                  <SquareMousePointer className="h-4 w-4 text-dynamic-purple" />
+                  <span>{t('common.expand_on_hover')}</span>
+                  {sidebar.behavior === 'hover' && (
+                    <Check className="ml-auto h-4 w-4" />
+                  )}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => sidebar.handleBehaviorChange('hidden')}
+                  disabled={sidebar.behavior === 'hidden'}
+                >
+                  <PanelLeft className="h-4 w-4 text-dynamic-purple" />
+                  <span>{t('common.hidden')}</span>
+                  {sidebar.behavior === 'hidden' && (
+                    <Check className="ml-auto h-4 w-4" />
+                  )}
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        )}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Globe className="h-4 w-4 text-dynamic-indigo" />
+            <span>{t('common.language')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent sideOffset={4}>
+              {languageItems}
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Palette className="h-4 w-4 text-dynamic-cyan" />
+            <span>{t('common.theme')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent sideOffset={4}>
+              {themeItems}
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={(e) => {
+            e.preventDefault();
+            onReport();
+          }}
+        >
+          <AlertTriangle className="h-4 w-4 text-dynamic-yellow" />
+          <span>{t('common.report-problem')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      {signedIn && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>{accountItems}</DropdownMenuGroup>
+        </>
+      )}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onClick={onLogout} className="cursor-pointer">
+        <LogOut className="h-4 w-4 text-dynamic-red" />
+        <span>{t('common.logout')}</span>
+      </DropdownMenuItem>
+    </>
+  );
+}