@shellui/core 0.2.0 → 0.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/core",
-  "version": "0.2.0",
+  "version": "0.3.0-beta.0",
   "description": "ShellUI Core - Core React application runtime",
   "main": "src/index.ts",
   "type": "module",
@@ -39,14 +39,18 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@sentry/react": "^10.39.0",
+    "@supabase/supabase-js": "^2.99.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^25.8.11",
     "react-i18next": "^16.5.4",
+    "react-icons": "^5.6.0",
+    "react-markdown": "^10.1.0",
     "react-router": "^7.13.0",
     "roarr": "^7.21.4",
     "sonner": "^2.0.7",
@@ -58,7 +62,7 @@
     "workbox-routing": "^7.4.0",
     "workbox-strategies": "^7.4.0",
     "workbox-window": "^7.4.0",
-    "@shellui/sdk": "0.2.0"
+    "@shellui/sdk": "0.3.0-beta.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -74,9 +78,10 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "scripts": {
-    "test": "echo \"No tests specified for @shellui/core\""
+    "test": "node scripts/test.js"
   }
 }

package/src/app.tsx

@@ -9,6 +9,7 @@ import { ThemeProvider } from './features/theme/ThemeProvider';
 import { I18nProvider } from './i18n/I18nProvider';
 import { DialogProvider } from './features/alertDialog/DialogContext';
 import { CookieConsentModal } from './features/cookieConsent/CookieConsentModal';
+import { AuthProvider } from './features/auth/AuthProvider';
 import './features/sentry/initSentry';
 import './i18n/config'; // Initialize i18n
 import './index.css';
@@ -103,15 +104,17 @@ const App = () => {
 
   return (
     <ConfigProvider>
-      <SettingsProvider>
-        <ThemeProvider>
-          <I18nProvider>
-            <DialogProvider>
-              <AppContent />
-            </DialogProvider>
-          </I18nProvider>
-        </ThemeProvider>
-      </SettingsProvider>
+      <AuthProvider>
+        <SettingsProvider>
+          <ThemeProvider>
+            <I18nProvider>
+              <DialogProvider>
+                <AppContent />
+              </DialogProvider>
+            </I18nProvider>
+          </ThemeProvider>
+        </SettingsProvider>
+      </AuthProvider>
     </ConfigProvider>
   );
 };

package/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'text-foreground',
+        muted: 'border-border bg-muted/50 text-muted-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '../../lib/utils';
+import { Z_INDEX } from '../../lib/z-index';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 6, forceMount, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      forceMount={forceMount}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1',
+        'data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+        className,
+      )}
+      style={{ zIndex: Z_INDEX.MODAL_CONTENT }}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex items-center gap-2 cursor-pointer select-none rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+      'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: ComponentPropsWithoutRef<'span'>) => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+    {...props}
+  />
+);
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+};

package/src/components/ui/sidebar.tsx

@@ -129,7 +129,7 @@ const SidebarGroupContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
 SidebarGroupContent.displayName = 'SidebarGroupContent';
 
 const sidebarMenuButtonVariants = cva(
-  'flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:bg-sidebar-accent focus-visible:text-sidebar-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground',
+  'flex w-full appearance-none items-center gap-2 overflow-hidden rounded-md bg-transparent p-2 text-left text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:filter-none focus-visible:bg-sidebar-accent focus-visible:text-sidebar-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground',
   {
     variants: {
       variant: {

package/src/constants/urls.ts

@@ -1,4 +1,12 @@
 export default {
   settings: '/__settings',
   cookiePreferences: '/__cookie-preferences',
+  login: '/login',
+  loginCallback: '/login/callback',
+  admin: '/admin',
+  legalDocuments: '/legal',
+  legalPrivacyPolicy: '/legal/privacy-policy',
+  legalTermsOfService: '/legal/terms-of-service',
+  legalNotice: '/legal/legal-notice',
+  legalDataProcessingAgreement: '/legal/data-processing-agreement',
 };

package/src/features/admin/AdminView.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Outlet, Route, Routes, useLocation, useNavigate } from 'react-router';
+import { Button } from '../../components/ui/button';
+import urls from '../../constants/urls';
+import { ContentView } from '../../components/ContentView';
+import { LoginButton } from '../auth/components/LoginButton';
+import { useAuth } from '../auth/hooks/useAuth';
+import { useConfig } from '../config/useConfig';
+import type { NavigationItem } from '../config/types';
+import { getBaseUrlWithoutHash } from '../layouts/utils';
+import { AdminForbiddenAccess } from './components/AdminForbiddenAccess';
+import { AppLayout } from '../layouts/AppLayout';
+
+/** Admin microfrontend uses hash routes (e.g. createHashRouter); sync shell `/admin/...` with iframe `#/...`. */
+function buildAdminIframeSrc(
+  baseAdminContentUrl: string,
+  normalizedAdminPath: string,
+  pathname: string,
+  search: string,
+): string {
+  const pathAfterAdmin = pathname.startsWith(normalizedAdminPath)
+    ? pathname.slice(normalizedAdminPath.length)
+    : '';
+  const segment = pathAfterAdmin.replace(/^\/+|\/+$/g, '');
+  const hashRoute = segment ? `/${segment}` : '/';
+  const originBase = getBaseUrlWithoutHash(baseAdminContentUrl).replace(/\/+$/, '');
+  return `${originBase}/#${hashRoute}${search}`;
+}
+
+const AdminAccessGuard = ({ allow }: { allow: boolean }) => {
+  if (!allow) {
+    return <AdminForbiddenAccess />;
+  }
+  return <Outlet />;
+};
+
+export const AdminView = () => {
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { config } = useConfig();
+  const { user } = useAuth();
+  const isStaff = Boolean(user?.isStaff);
+  const canOpenAdminPanel = Boolean(user?.isStaff || user?.isCompanyOwner);
+  const djangoAdminHref = useMemo(() => {
+    if (config.backend?.type !== 'shellui' || !config.backend.url?.trim()) {
+      return null;
+    }
+    return `${config.backend.url.replace(/\/+$/, '')}/admin`;
+  }, [config.backend?.type, config.backend?.url]);
+  const configuredAdminPathname = config.backend?.adminPathname?.trim();
+  const adminPath =
+    configuredAdminPathname && configuredAdminPathname.startsWith('/')
+      ? configuredAdminPathname
+      : urls.admin;
+  const baseAdminContentUrl = config.backend?.adminUrl?.trim() || urls.settings;
+  const initialAdminContentUrlRef = useRef<string | null>(null);
+  if (!initialAdminContentUrlRef.current) {
+    const normalizedAdminPath = adminPath.replace(/\/+$/, '');
+    initialAdminContentUrlRef.current = buildAdminIframeSrc(
+      baseAdminContentUrl,
+      normalizedAdminPath,
+      location.pathname,
+      location.search,
+    );
+  }
+  const initialAdminContentUrl = initialAdminContentUrlRef.current;
+  const adminContentItem = useMemo<NavigationItem>(
+    () => ({
+      label: 'Settings',
+      path: adminPath.replace(/^\/+/, ''),
+      url: baseAdminContentUrl,
+      /** Required so ContentView maps iframe hash → shell path (`/admin`, `/admin/users`, …). */
+      useHashRouter: true,
+    }),
+    [adminPath, baseAdminContentUrl],
+  );
+
+  useEffect(() => {
+    if (config?.title) {
+      document.title = `Administration | ${config.title}`;
+    } else {
+      document.title = 'Administration';
+    }
+  }, [config?.title]);
+
+  return (
+    <AppLayout>
+      <div className="flex h-full w-full flex-col overflow-hidden bg-background">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-card px-2 md:px-3">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/')}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+              aria-hidden
+            >
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+            Back to home
+          </Button>
+          <div className="flex items-center gap-2">
+            {isStaff && djangoAdminHref ? (
+              <Button
+                variant="outline"
+                size="sm"
+                asChild
+              >
+                <a
+                  href={djangoAdminHref}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('adminShell.djangoAdmin')}
+                </a>
+              </Button>
+            ) : null}
+            <LoginButton
+              variant="appbar"
+              logoutOnly
+            />
+          </div>
+        </header>
+        <main className="flex min-h-0 flex-1">
+          <Routes>
+            <Route element={<AdminAccessGuard allow={canOpenAdminPanel} />}>
+              <Route
+                path="*"
+                element={
+                  <ContentView
+                    url={initialAdminContentUrl}
+                    pathPrefix={adminPath.replace(/^\/+/, '')}
+                    navItem={adminContentItem}
+                  />
+                }
+              />
+            </Route>
+          </Routes>
+        </main>
+      </div>
+    </AppLayout>
+  );
+};

package/src/features/admin/components/AdminForbiddenAccess.tsx

@@ -0,0 +1,10 @@
+export const AdminForbiddenAccess = () => {
+  return (
+    <div className="flex h-full w-full items-center justify-center p-6">
+      <div className="max-w-md text-center">
+        <h1 className="text-xl font-semibold">Access forbidden</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Contact your administrator.</p>
+      </div>
+    </div>
+  );
+};