simplycms 0.4.0

package/src/admin/layouts/AdminSidebar.tsx

@@ -0,0 +1,356 @@
+import { NavLink } from 'simplycms/core/components/NavLink';
+import { adminPath } from '../lib/adminLinks';
+import { useSidebar } from 'simplycms/ui/sidebar';
+import { useT, type MessageKey } from 'simplycms/i18n';
+
+interface SidebarItem {
+  titleKey: MessageKey;
+  url: string;
+  icon: LucideIcon;
+}
+
+import type { LucideIcon } from 'lucide-react';
+import {
+  LayoutDashboard,
+  FolderTree,
+  Package,
+  Settings,
+  Users,
+  ShoppingCart,
+  FileText,
+  Wrench,
+  Globe,
+  Tags,
+  ListChecks,
+  Puzzle,
+  Truck,
+  Map,
+  Building,
+  Palette,
+  DollarSign,
+  Percent,
+  Calculator,
+  ImageIcon,
+  MessageSquare,
+} from 'lucide-react';
+import { PluginSlot } from 'simplycms/plugins/PluginSlot';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from 'simplycms/ui/sidebar';
+
+// Пункти меню тримають КЛЮЧІ, не тексти: масив лишається на рівні модуля
+// (він статичний), а підпис резолвиться під час рендера через `t()`.
+const catalogItems = [
+  {
+    titleKey: 'admin.nav.sections',
+    url: adminPath('sections'),
+    icon: FolderTree,
+  },
+  {
+    titleKey: 'admin.nav.properties',
+    url: adminPath('properties'),
+    icon: ListChecks,
+  },
+  { titleKey: 'admin.nav.products', url: adminPath('products'), icon: Package },
+  {
+    titleKey: 'admin.nav.priceTypes',
+    url: adminPath('price-types'),
+    icon: DollarSign,
+  },
+  {
+    titleKey: 'admin.nav.discounts',
+    url: adminPath('discounts'),
+    icon: Percent,
+  },
+  {
+    titleKey: 'admin.nav.priceValidator',
+    url: adminPath('price-validator'),
+    icon: Calculator,
+  },
+] satisfies SidebarItem[];
+
+const ordersItems = [
+  {
+    titleKey: 'admin.nav.orders',
+    url: adminPath('orders'),
+    icon: ShoppingCart,
+  },
+  {
+    titleKey: 'admin.nav.orderStatuses',
+    url: adminPath('order-statuses'),
+    icon: Tags,
+  },
+] satisfies SidebarItem[];
+
+const servicesItems = [
+  { titleKey: 'admin.nav.services', url: adminPath('services'), icon: Wrench },
+  {
+    titleKey: 'admin.nav.serviceRequests',
+    url: adminPath('service-requests'),
+    icon: FileText,
+  },
+] satisfies SidebarItem[];
+
+const shippingItems = [
+  {
+    titleKey: 'admin.nav.shippingMethods',
+    url: adminPath('shipping/methods'),
+    icon: Truck,
+  },
+  {
+    titleKey: 'admin.nav.shippingZones',
+    url: adminPath('shipping/zones'),
+    icon: Map,
+  },
+  {
+    titleKey: 'admin.nav.pickupPoints',
+    url: adminPath('shipping/pickup-points'),
+    icon: Building,
+  },
+] satisfies SidebarItem[];
+
+const contentItems = [
+  { titleKey: 'admin.nav.banners', url: adminPath('banners'), icon: ImageIcon },
+  {
+    titleKey: 'admin.nav.reviews',
+    url: adminPath('reviews'),
+    icon: MessageSquare,
+  },
+] satisfies SidebarItem[];
+
+const settingsItems = [
+  { titleKey: 'admin.nav.plugins', url: adminPath('plugins'), icon: Puzzle },
+  { titleKey: 'admin.nav.themes', url: adminPath('themes'), icon: Palette },
+  { titleKey: 'admin.nav.users', url: adminPath('users'), icon: Users },
+  {
+    titleKey: 'admin.nav.userCategories',
+    url: adminPath('user-categories'),
+    icon: Tags,
+  },
+  { titleKey: 'admin.nav.languages', url: adminPath('languages'), icon: Globe },
+  {
+    titleKey: 'admin.nav.settings',
+    url: adminPath('settings'),
+    icon: Settings,
+  },
+] satisfies SidebarItem[];
+
+export function AdminSidebar() {
+  const t = useT();
+  const { state } = useSidebar();
+  const collapsed = state === 'collapsed';
+
+  return (
+    <Sidebar collapsible="icon" className="border-r">
+      <SidebarContent className="pt-4">
+        {/* Logo */}
+        <div className="px-4 mb-4">
+          <NavLink to="/admin" className="flex items-center gap-2">
+            <LayoutDashboard className="h-6 w-6 text-primary" />
+            {!collapsed && <span className="font-bold text-lg">CMS</span>}
+          </NavLink>
+        </div>
+
+        {/* Dashboard */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <NavLink
+                    to="/admin"
+                    exact
+                    className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                    activeClassName="bg-primary/10 text-primary font-medium"
+                  >
+                    <LayoutDashboard className="h-4 w-4" />
+                    {!collapsed && <span>{t('admin.nav.dashboard')}</span>}
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Catalog */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.catalog')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {catalogItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Orders */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.orders')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {ordersItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Services */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.services')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {servicesItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Shipping */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.shipping')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {shippingItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Content */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.content')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {contentItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Plugin slot: sidebar items from plugins */}
+        <PluginSlot
+          name="admin.sidebar.items"
+          context={{ collapsed }}
+          wrapper={(children) => (
+            <SidebarGroup>
+              <SidebarGroupLabel>
+                {!collapsed && t('admin.nav.group.plugins')}
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {children.map((child, index) => (
+                    <SidebarMenuItem key={`plugin-item-${index}`}>
+                      {child}
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+        />
+
+        {/* Settings */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            {!collapsed && t('admin.nav.group.settings')}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {settingsItems.map((item) => (
+                <SidebarMenuItem key={item.titleKey}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors"
+                      activeClassName="bg-primary/10 text-primary font-medium"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{t(item.titleKey)}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

package/src/admin/lib/adminLinks.ts

@@ -0,0 +1,19 @@
+// Централізований резолвер admin-посилань (LinkResolver для admin-зони).
+// Прибирає хардкод "/admin/*" по сторінках адмінки.
+
+const ADMIN_BASE = '/admin';
+
+/**
+ * Побудувати admin-шлях. `adminPath()` → база; `adminPath("products")` →
+ * `/admin/products`; `adminPath(\`products/${id}\`)` → `/admin/products/<id>`.
+ */
+export function adminPath(sub?: string): string {
+  if (!sub) return ADMIN_BASE;
+  return `${ADMIN_BASE}/${sub.replace(/^\/+/, '')}`;
+}
+
+/** LinkResolver-обʼєкт для admin-зони. */
+export const adminLinks = {
+  base: (): string => ADMIN_BASE,
+  to: adminPath,
+};

package/src/admin/lib/pluginSettingsFields.ts

@@ -0,0 +1,40 @@
+import { z } from 'zod';
+import type { ZodObject, ZodRawShape } from 'zod';
+
+/**
+ * Проєкція JSON Schema, яку рендерить форма налаштувань плагіна. Джерело —
+ * `z.toJSONSchema` від схеми з `definePlugin({ settings })`: конвенція SDK —
+ * `.describe()` дає підпис поля, `z.enum` стає select-ом, `.default()` —
+ * значенням за замовчуванням.
+ */
+export interface SettingsField {
+  type?: string;
+  enum?: unknown[];
+  default?: unknown;
+  description?: string;
+}
+
+/**
+ * Поля форми зі Zod-схеми. `z.toJSONSchema` кидає на непредставних типах
+ * (z.date(), .transform(), z.custom) — а `validatePluginModule` перевіряє
+ * лише «схожість на Zod-схему», тож сюди може доїхати легальна для Zod, але
+ * непредставна для форми схема. Це не привід валити сторінку адмінки
+ * (дух §8 «ніяких падінь від плагіна»): warn + «немає налаштувань».
+ */
+export function settingsFields(
+  schema: ZodObject<ZodRawShape> | undefined,
+): [string, SettingsField][] {
+  if (!schema) return [];
+  try {
+    const jsonSchema = z.toJSONSchema(schema) as {
+      properties?: Record<string, SettingsField>;
+    };
+    return Object.entries(jsonSchema.properties ?? {});
+  } catch (error) {
+    console.warn(
+      '[admin] settings-схема плагіна непредставна у формі:',
+      error instanceof Error ? error.message : error,
+    );
+    return [];
+  }
+}

package/src/admin/lib/revalidateTheme.ts

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+import { useRouter } from '@tanstack/react-router';
+import { useT, type Translator } from 'simplycms/i18n';
+
+/**
+ * Скидання серверного кешу активної теми — ЄДИНА точка для всієї адмінки.
+ *
+ * Звертаємось по HTTP, а не імпортом обробника: ребро
+ * `simplycms/admin → simplycms/storefront-routes` заборонене (T5 → T5).
+ * Авторизація — cookie-сесія, guard `isAdmin` живе на боці роуту (403).
+ *
+ * Кидає на не-2xx і на мережевій помилці — мовчки ковтати відповідь не можна:
+ * саме `catch {}` ховав те, що старий `/api/revalidate` взагалі не існує.
+ */
+export async function revalidateTheme(t: Translator): Promise<void> {
+  const response = await fetch('/api/revalidate-theme', { method: 'POST' });
+
+  if (!response.ok) {
+    throw new Error(
+      t('admin.common.revalidate.serverError', { status: response.status }),
+    );
+  }
+}
+
+/**
+ * Скидання ОБОХ кешів активної теми — серверного і клієнтського.
+ *
+ * 🔴 Самого `revalidateTheme()` не досить, і це не теорія: каркасний роут
+ * `_storefront` має `staleTime: 5 * 60_000`, тож після активації теми
+ * TanStack Router до п'яти хвилин віддає закешований `themeName` із лоадера.
+ * Перехід із адмінки на вітрину В МЕЖАХ застосунку показував стару тему, а
+ * тост казав «Зміни застосовані на сайті» — тобто брехав. Ловилось лише
+ * hard-refresh-ем (спіймано живою перевіркою 2026-08-04).
+ *
+ * Що фікс НЕ покриває свідомо: інша вкладка з уже відкритою вітриною
+ * побачить зміну після власного перезавантаження або коли спливе її
+ * `staleTime`. Синхронізація вкладок вимагала б каналу реального часу — для
+ * перемикання теми це невиправдана складність.
+ */
+export function useRevalidateStorefront(): () => Promise<void> {
+  const t = useT();
+  const router = useRouter();
+
+  return useCallback(async () => {
+    await revalidateTheme(t);
+    await router.invalidate();
+  }, [router, t]);
+}
+
+/** Текст для toast-а, коли кеш вітрини скинути не вдалося (TTL — 5 хвилин). */
+export function revalidateFailureDescription(
+  t: Translator,
+  error: unknown,
+): string {
+  const suffix = t('admin.common.revalidate.delay');
+  return error instanceof Error ? `${error.message}. ${suffix}` : suffix;
+}