pxlr-cms 1.0.0

package/templates/blog/pxlr-cms/packages/admin/src/components/editor/rich-text-editor.tsx

@@ -0,0 +1,387 @@
+'use client';
+
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import Highlight from '@tiptap/extension-highlight';
+import { useState, useCallback } from 'react';
+import { 
+  Bold, 
+  Italic, 
+  Underline as UnderlineIcon,
+  Strikethrough,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  Undo,
+  Redo,
+  Link as LinkIcon,
+  Image as ImageIcon,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Highlighter,
+  Minus,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  onImageUpload?: () => void;
+}
+
+export function RichTextEditor({ 
+  value, 
+  onChange, 
+  placeholder = 'Начните писать...',
+  onImageUpload 
+}: RichTextEditorProps) {
+  const [isLinkMenuOpen, setIsLinkMenuOpen] = useState(false);
+  const [linkUrl, setLinkUrl] = useState('');
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3],
+        },
+      }),
+      Image.configure({
+        HTMLAttributes: {
+          class: 'rounded-lg max-w-full h-auto',
+        },
+      }),
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: 'text-blue-600 underline cursor-pointer',
+        },
+      }),
+      Placeholder.configure({
+        placeholder,
+      }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      Underline,
+      Highlight.configure({
+        multicolor: true,
+      }),
+    ],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm sm:prose-base max-w-none focus:outline-none min-h-[200px] px-4 py-3',
+      },
+    },
+  });
+
+  const addImage = useCallback((url: string) => {
+    if (editor && url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+  }, [editor]);
+
+  const setLink = useCallback(() => {
+    if (!editor) return;
+    
+    if (linkUrl) {
+      editor.chain().focus().setLink({ href: linkUrl }).run();
+    } else {
+      editor.chain().focus().unsetLink().run();
+    }
+    setIsLinkMenuOpen(false);
+    setLinkUrl('');
+  }, [editor, linkUrl]);
+
+  if (!editor) {
+    return null;
+  }
+
+  const ToolbarButton = ({ 
+    onClick, 
+    isActive, 
+    children,
+    title 
+  }: { 
+    onClick: () => void; 
+    isActive?: boolean; 
+    children: React.ReactNode;
+    title?: string;
+  }) => (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      className={cn(
+        'p-2 rounded hover:bg-gray-100 transition-colors',
+        isActive && 'bg-gray-200 text-blue-600'
+      )}
+    >
+      {children}
+    </button>
+  );
+
+  return (
+    <div className="border rounded-lg overflow-hidden bg-white">
+      {/* Toolbar */}
+      <div className="border-b bg-gray-50 p-2 flex flex-wrap gap-1">
+        {/* Text formatting */}
+        <div className="flex items-center gap-0.5 border-r pr-2 mr-2">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            isActive={editor.isActive('bold')}
+            title="Жирный"
+          >
+            <Bold className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            isActive={editor.isActive('italic')}
+            title="Курсив"
+          >
+            <Italic className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleUnderline().run()}
+            isActive={editor.isActive('underline')}
+            title="Подчёркнутый"
+          >
+            <UnderlineIcon className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            isActive={editor.isActive('strike')}
+            title="Зачёркнутый"
+          >
+            <Strikethrough className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHighlight().run()}
+            isActive={editor.isActive('highlight')}
+            title="Выделение"
+          >
+            <Highlighter className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleCode().run()}
+            isActive={editor.isActive('code')}
+            title="Код"
+          >
+            <Code className="h-4 w-4" />
+          </ToolbarButton>
+        </div>
+
+        {/* Headings */}
+        <div className="flex items-center gap-0.5 border-r pr-2 mr-2">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            isActive={editor.isActive('heading', { level: 1 })}
+            title="Заголовок 1"
+          >
+            <Heading1 className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            isActive={editor.isActive('heading', { level: 2 })}
+            title="Заголовок 2"
+          >
+            <Heading2 className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            isActive={editor.isActive('heading', { level: 3 })}
+            title="Заголовок 3"
+          >
+            <Heading3 className="h-4 w-4" />
+          </ToolbarButton>
+        </div>
+
+        {/* Lists */}
+        <div className="flex items-center gap-0.5 border-r pr-2 mr-2">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            isActive={editor.isActive('bulletList')}
+            title="Маркированный список"
+          >
+            <List className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            isActive={editor.isActive('orderedList')}
+            title="Нумерованный список"
+          >
+            <ListOrdered className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            isActive={editor.isActive('blockquote')}
+            title="Цитата"
+          >
+            <Quote className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setHorizontalRule().run()}
+            title="Горизонтальная линия"
+          >
+            <Minus className="h-4 w-4" />
+          </ToolbarButton>
+        </div>
+
+        {/* Alignment */}
+        <div className="flex items-center gap-0.5 border-r pr-2 mr-2">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
+            isActive={editor.isActive({ textAlign: 'left' })}
+            title="По левому краю"
+          >
+            <AlignLeft className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+            isActive={editor.isActive({ textAlign: 'center' })}
+            title="По центру"
+          >
+            <AlignCenter className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
+            isActive={editor.isActive({ textAlign: 'right' })}
+            title="По правому краю"
+          >
+            <AlignRight className="h-4 w-4" />
+          </ToolbarButton>
+        </div>
+
+        {/* Insert */}
+        <div className="flex items-center gap-0.5 border-r pr-2 mr-2">
+          <ToolbarButton
+            onClick={() => setIsLinkMenuOpen(!isLinkMenuOpen)}
+            isActive={editor.isActive('link')}
+            title="Ссылка"
+          >
+            <LinkIcon className="h-4 w-4" />
+          </ToolbarButton>
+          {onImageUpload && (
+            <ToolbarButton
+              onClick={onImageUpload}
+              title="Вставить изображение"
+            >
+              <ImageIcon className="h-4 w-4" />
+            </ToolbarButton>
+          )}
+        </div>
+
+        {/* Undo/Redo */}
+        <div className="flex items-center gap-0.5">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().undo().run()}
+            title="Отменить"
+          >
+            <Undo className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().redo().run()}
+            title="Повторить"
+          >
+            <Redo className="h-4 w-4" />
+          </ToolbarButton>
+        </div>
+      </div>
+
+      {/* Link input */}
+      {isLinkMenuOpen && (
+        <div className="border-b bg-gray-50 p-2 flex items-center gap-2">
+          <input
+            type="url"
+            value={linkUrl}
+            onChange={(e) => setLinkUrl(e.target.value)}
+            placeholder="https://example.com"
+            className="flex-1 px-3 py-1.5 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+            onKeyDown={(e) => e.key === 'Enter' && setLink()}
+          />
+          <Button size="sm" onClick={setLink}>
+            {editor.isActive('link') ? 'Обновить' : 'Добавить'}
+          </Button>
+          {editor.isActive('link') && (
+            <Button 
+              size="sm" 
+              variant="outline"
+              onClick={() => {
+                editor.chain().focus().unsetLink().run();
+                setIsLinkMenuOpen(false);
+              }}
+            >
+              Удалить
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Editor content */}
+      <EditorContent editor={editor} />
+
+      {/* Bubble menu for selection */}
+      {editor && (
+        <BubbleMenu 
+          editor={editor} 
+          tippyOptions={{ duration: 100 }}
+          className="bg-gray-900 rounded-lg shadow-lg p-1 flex gap-0.5"
+        >
+          <button
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={cn(
+              'p-1.5 rounded text-white hover:bg-gray-700',
+              editor.isActive('bold') && 'bg-gray-700'
+            )}
+          >
+            <Bold className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={cn(
+              'p-1.5 rounded text-white hover:bg-gray-700',
+              editor.isActive('italic') && 'bg-gray-700'
+            )}
+          >
+            <Italic className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => {
+              const url = editor.getAttributes('link').href;
+              setLinkUrl(url || '');
+              setIsLinkMenuOpen(true);
+            }}
+            className={cn(
+              'p-1.5 rounded text-white hover:bg-gray-700',
+              editor.isActive('link') && 'bg-gray-700'
+            )}
+          >
+            <LinkIcon className="h-4 w-4" />
+          </button>
+        </BubbleMenu>
+      )}
+    </div>
+  );
+}
+
+// Export function to insert image into editor
+export function insertImageToEditor(editor: any, url: string) {
+  if (editor) {
+    editor.chain().focus().setImage({ src: url }).run();
+  }
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/layout/auth-layout.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/auth';
+import { Sidebar } from '@/components/layout/sidebar';
+import { Header } from '@/components/layout/header';
+import { Loader2 } from 'lucide-react';
+
+export function AuthLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuthStore();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.replace('/login');
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-auto bg-muted/30 p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/layout/header.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/auth';
+import { useI18n } from '@/lib/i18n/context';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { LogOut, User, Bell } from 'lucide-react';
+
+export function Header() {
+  const router = useRouter();
+  const { user, logout } = useAuthStore();
+  const { t } = useI18n();
+
+  const handleLogout = () => {
+    logout();
+    router.push('/login');
+  };
+
+  const initials = user?.name
+    ? user.name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+    : 'U';
+
+  return (
+    <header className="flex h-16 items-center justify-between border-b bg-card px-6">
+      <div className="flex items-center gap-4">
+        <h2 className="text-lg font-medium">{t('header.contentManagement')}</h2>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="icon">
+          <Bell className="h-5 w-5" />
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+              <Avatar className="h-10 w-10">
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56" align="end" forceMount>
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex flex-col space-y-1">
+                <p className="text-sm font-medium leading-none">{user?.name}</p>
+                <p className="text-xs leading-none text-muted-foreground">
+                  {user?.email}
+                </p>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => router.push('/profile')}>
+              <User className="mr-2 h-4 w-4" />
+              <span>{t('header.profile')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>{t('header.logout')}</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/layout/sidebar.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n/context';
+import {
+  LayoutDashboard,
+  FileText,
+  Database,
+  Images,
+  Settings,
+  Box,
+} from 'lucide-react';
+import type { TranslationKey } from '@/lib/i18n/translations';
+
+const navigation: { key: TranslationKey; href: string; icon: any }[] = [
+  { key: 'nav.dashboard', href: '/', icon: LayoutDashboard },
+  { key: 'nav.content', href: '/content', icon: FileText },
+  { key: 'nav.schemas', href: '/schemas', icon: Database },
+  { key: 'nav.media', href: '/media', icon: Images },
+  { key: 'nav.settings', href: '/settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { t } = useI18n();
+
+  return (
+    <div className="flex h-full w-64 flex-col border-r bg-card">
+      <div className="flex h-16 items-center gap-2 border-b px-6">
+        <Box className="h-6 w-6 text-primary" />
+        <span className="text-lg font-semibold">PXLR CMS</span>
+      </div>
+
+      <nav className="flex-1 space-y-1 p-4">
+        {navigation.map((item) => {
+          const isActive = pathname === item.href || 
+            (item.href !== '/' && pathname.startsWith(`${item.href}/`));
+          return (
+            <Link
+              key={item.key}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )}
+            >
+              <item.icon className="h-5 w-5" />
+              {t(item.key)}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="border-t p-4">
+        <div className="rounded-lg bg-muted p-4">
+          <p className="text-xs text-muted-foreground">Version 1.0.0</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Self-hosted CMS
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/providers.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+import { Toaster } from '@/components/ui/toaster';
+import { I18nProvider } from '@/lib/i18n/context';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider>
+        {children}
+        <Toaster />
+      </I18nProvider>
+    </QueryClientProvider>
+  );
+}