@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+function useTheme() {
+  const [theme, setTheme] = React.useState<"light" | "dark" | "system">("system")
+  React.useEffect(() => {
+    const el = document.documentElement
+    const check = () =>
+      setTheme(el.classList.contains("dark") ? "dark" : "light")
+    check()
+    const observer = new MutationObserver(check)
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+    return () => observer.disconnect()
+  }, [])
+  return { theme }
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/frontend/src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/frontend/src/components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/frontend/src/components/ui/tooltip-base.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-xs text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/frontend/src/config/api.ts

@@ -0,0 +1,16 @@
+/**
+ * Self-hosted API config always uses relative paths by default.
+ */
+export const apiBaseUrl: string = '';
+
+/** Full URL to start OIDC login for a provider. Pass apiBaseUrl when using from context (e.g. useAppConfig().apiBaseUrl). */
+export function getAuthProviderUrl(providerKey: string, baseUrl?: string): string {
+  const url = baseUrl ?? apiBaseUrl;
+  return url ? `${url.replace(/\/$/, '')}/api/auth/${providerKey}` : `/api/auth/${providerKey}`;
+}
+
+/** Base path for app routes. */
+export const appBasePath: string = '';
+
+/** Root path for the app (dashboard). */
+export const appRootPath: string = '/';

package/frontend/src/config/mode.ts

@@ -0,0 +1,6 @@
+/**
+ * SlugBase frontend runtime mode is self-hosted only.
+ */
+export const mode: 'selfhosted' = 'selfhosted';
+export const isCloud = false;
+export const isSelfhosted = true;

package/frontend/src/contexts/AppConfigContext.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext } from 'react';
+import { appBasePath as defaultAppBasePath, apiBaseUrl as defaultApiBaseUrl, appRootPath as defaultAppRootPath } from '../config/api';
+
+export interface AppConfig {
+  appBasePath: string;
+  apiBaseUrl: string;
+  appRootPath: string;
+}
+
+const defaultConfig: AppConfig = {
+  appBasePath: defaultAppBasePath,
+  apiBaseUrl: defaultApiBaseUrl,
+  appRootPath: defaultAppRootPath,
+};
+
+const AppConfigContext = createContext<AppConfig>(defaultConfig);
+
+export function AppConfigProvider({
+  children,
+  appBasePath,
+  apiBaseUrl,
+  appRootPath,
+}: {
+  children: React.ReactNode;
+  appBasePath?: string;
+  apiBaseUrl?: string;
+  appRootPath?: string;
+}) {
+  const value: AppConfig = {
+    appBasePath: appBasePath ?? defaultConfig.appBasePath,
+    apiBaseUrl: apiBaseUrl ?? defaultConfig.apiBaseUrl,
+    appRootPath: appRootPath ?? defaultConfig.appRootPath,
+  };
+  return <AppConfigContext.Provider value={value}>{children}</AppConfigContext.Provider>;
+}
+
+export function useAppConfig(): AppConfig {
+  return useContext(AppConfigContext);
+}

package/frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,137 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import api from '../api/client';
+import { getAuthProviderUrl } from '../config/api';
+import { useTranslation } from 'react-i18next';
+import { useAppConfig } from './AppConfigContext';
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  user_key: string;
+  is_admin: boolean;
+  language: string;
+  theme: string;
+  ai_suggestions_enabled?: boolean;
+  email_pending?: string | null;
+  oidc_provider?: string | null;
+  oidc_sub?: string | null;
+}
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  login: (provider: string) => void;
+  logout: () => Promise<void>;
+  updateUser: (updates: Partial<User>) => Promise<void>;
+  checkAuth: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { i18n } = useTranslation();
+  const { apiBaseUrl } = useAppConfig();
+
+  useEffect(() => {
+    // Apply initial theme based on browser preference before checking auth
+    // This ensures dark mode works on login page and other public pages
+    // Only apply if user hasn't set a preference yet
+    const root = document.documentElement;
+    if (!root.dataset.userTheme) {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    }
+    
+    checkAuth();
+  }, []);
+
+  useEffect(() => {
+    if (user) {
+      i18n.changeLanguage(user.language);
+      applyTheme(user.theme);
+    }
+  }, [user, i18n]);
+
+  async function checkAuth() {
+    try {
+      const response = await api.get('/auth/me');
+      setUser(response.data);
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function login(provider: string) {
+    window.location.href = getAuthProviderUrl(provider, apiBaseUrl);
+  }
+
+  async function logout() {
+    try {
+      await api.post('/auth/logout');
+      setUser(null);
+      window.location.href = '/';
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  }
+
+  async function updateUser(updates: Partial<User>): Promise<any> {
+    try {
+      const response = await api.put('/users/me', updates);
+      // Only update user if email wasn't changed (email verification required)
+      if (!response.data.emailVerificationRequired) {
+        setUser(response.data);
+      } else {
+        // Refresh user to get email_pending
+        await checkAuth();
+      }
+      if (updates.language) {
+        i18n.changeLanguage(updates.language);
+      }
+      if (updates.theme) {
+        applyTheme(updates.theme);
+      }
+      return response.data;
+    } catch (error) {
+      console.error('Update user error:', error);
+      throw error;
+    }
+  }
+
+  function applyTheme(theme: string) {
+    const root = document.documentElement;
+    // Mark that user has set a theme preference
+    root.dataset.userTheme = 'true';
+    
+    if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    // Sync to localStorage for consistency when user logs out
+    localStorage.setItem('slugbase_theme', theme);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout, updateUser, checkAuth }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

package/frontend/src/contexts/SearchCommandContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+interface SearchCommandContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openSearch: () => void;
+}
+
+const SearchCommandContext = createContext<SearchCommandContextValue | null>(null);
+
+export function SearchCommandProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const openSearch = useCallback(() => setOpen(true), []);
+  const value: SearchCommandContextValue = { open, setOpen, openSearch };
+  return (
+    <SearchCommandContext.Provider value={value}>
+      {children}
+    </SearchCommandContext.Provider>
+  );
+}
+
+export function useSearchCommand(): SearchCommandContextValue {
+  const ctx = useContext(SearchCommandContext);
+  if (!ctx) {
+    throw new Error('useSearchCommand must be used within SearchCommandProvider');
+  }
+  return ctx;
+}

package/frontend/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 1024 // lg - matches Layout mobile breakpoint
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/frontend/src/hooks/useConfirmDialog.ts

@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+
+interface ConfirmDialogState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  itemName?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'default';
+  onConfirm: () => void;
+}
+
+export function useConfirmDialog() {
+  const [dialogState, setDialogState] = useState<ConfirmDialogState>({
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: () => {},
+  });
+
+  const showConfirm = useCallback((
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    options?: {
+      itemName?: string;
+      confirmText?: string;
+      cancelText?: string;
+      variant?: 'danger' | 'warning' | 'default';
+    }
+  ) => {
+    setDialogState({
+      isOpen: true,
+      title,
+      message,
+      onConfirm,
+      itemName: options?.itemName,
+      confirmText: options?.confirmText,
+      cancelText: options?.cancelText,
+      variant: options?.variant || 'default',
+    });
+  }, []);
+
+  const hideConfirm = useCallback(() => {
+    setDialogState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    dialogState.onConfirm();
+    hideConfirm();
+  }, [dialogState, hideConfirm]);
+
+  return {
+    showConfirm,
+    hideConfirm,
+    dialogState: {
+      ...dialogState,
+      onConfirm: handleConfirm,
+      onCancel: hideConfirm,
+    },
+  };
+}

package/frontend/src/hooks/useMarketingTheme.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+const THEME_STORAGE_KEY = 'slugbase_theme';
+
+function getIsDark(): boolean {
+  return document.documentElement.classList.contains('dark');
+}
+
+function applyThemeToDocument(theme: 'light' | 'dark') {
+  const root = document.documentElement;
+  root.dataset.userTheme = 'true';
+  localStorage.setItem(THEME_STORAGE_KEY, theme);
+  if (theme === 'dark') {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+}
+
+export function useMarketingTheme() {
+  const { user, updateUser } = useAuth();
+  const [isDark, setIsDark] = useState(getIsDark);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setIsDark(getIsDark()));
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  function setTheme(theme: 'light' | 'dark') {
+    if (user) {
+      updateUser({ theme });
+    } else {
+      applyThemeToDocument(theme);
+      setIsDark(theme === 'dark');
+    }
+  }
+
+  function toggleTheme() {
+    const nextTheme: 'light' | 'dark' = isDark ? 'light' : 'dark';
+    setTheme(nextTheme);
+  }
+
+  return { isDark, setTheme, toggleTheme };
+}

package/frontend/src/i18n.ts

@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import enTranslations from '@/locales/en.json';
+import deTranslations from '@/locales/de.json';
+import frTranslations from '@/locales/fr.json';
+import esTranslations from '@/locales/es.json';
+import itTranslations from '@/locales/it.json';
+import ptTranslations from '@/locales/pt.json';
+import nlTranslations from '@/locales/nl.json';
+import ruTranslations from '@/locales/ru.json';
+import jaTranslations from '@/locales/ja.json';
+import zhTranslations from '@/locales/zh.json';
+import plTranslations from '@/locales/pl.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: enTranslations },
+      de: { translation: deTranslations },
+      fr: { translation: frTranslations },
+      es: { translation: esTranslations },
+      it: { translation: itTranslations },
+      pt: { translation: ptTranslations },
+      nl: { translation: nlTranslations },
+      ru: { translation: ruTranslations },
+      ja: { translation: jaTranslations },
+      zh: { translation: zhTranslations },
+      pl: { translation: plTranslations },
+    },
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;