create-pxlr 1.0.0

package/templates/clean/pxlr-cms/packages/admin/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/templates/clean/pxlr-cms/packages/admin/src/app/content/[id]/page.tsx

@@ -0,0 +1,503 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from '@/components/ui/use-toast';
+import { RichTextEditor } from '@/components/editor/rich-text-editor';
+import { MediaPicker } from '@/components/editor/media-picker';
+import { useI18n } from '@/lib/i18n/context';
+import { 
+  ArrowLeft, 
+  Loader2, 
+  Save, 
+  Trash2, 
+  Globe, 
+  Calendar,
+  Eye,
+  EyeOff,
+  ImageIcon,
+  X,
+  Check,
+  Clock
+} from 'lucide-react';
+import Link from 'next/link';
+
+interface Document {
+  id: string;
+  schema_name: string;
+  schema_title?: string;
+  schema_definition?: {
+    fields: Array<{
+      name: string;
+      type: string;
+      title?: string;
+      required?: boolean;
+      description?: string;
+    }>;
+  };
+  data: Record<string, any>;
+  status: string;
+  locale: string;
+  created_at: string;
+  updated_at: string;
+}
+
+function getPublicUrl(url: string): string {
+  if (!url) return '';
+  return url
+    .replace('http://minio:9000', 'http://localhost:9010')
+    .replace('http://localhost:9000', 'http://localhost:9010');
+}
+
+export default function EditContentPage() {
+  const router = useRouter();
+  const params = useParams();
+  const queryClient = useQueryClient();
+  const { locale } = useI18n();
+  const id = params.id as string;
+
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [status, setStatus] = useState<string>('draft');
+  const [mediaPickerField, setMediaPickerField] = useState<string | null>(null);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['document', id],
+    queryFn: () => api.get(`/content/${id}`),
+    enabled: !!id,
+  });
+
+  const document: Document | null = data?.document;
+
+  useEffect(() => {
+    if (document) {
+      setFormData(document.data || {});
+      setStatus(document.status);
+    }
+  }, [document]);
+
+  const updateMutation = useMutation({
+    mutationFn: (data: any) => api.put(`/content/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['document', id] });
+      queryClient.invalidateQueries({ queryKey: ['documents'] });
+      toast({ title: locale === 'ru' ? 'Документ сохранён' : 'Document saved' });
+    },
+    onError: (error: any) => {
+      toast({ title: locale === 'ru' ? 'Ошибка' : 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => api.delete(`/content/${id}`),
+    onSuccess: () => {
+      toast({ title: locale === 'ru' ? 'Документ удалён' : 'Document deleted' });
+      router.push('/content');
+    },
+    onError: (error: any) => {
+      toast({ title: locale === 'ru' ? 'Ошибка' : 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateMutation.mutate({ data: formData, status });
+  };
+
+  const handlePublish = () => {
+    updateMutation.mutate({ data: formData, status: 'published' });
+    setStatus('published');
+  };
+
+  const handleUnpublish = () => {
+    updateMutation.mutate({ data: formData, status: 'draft' });
+    setStatus('draft');
+  };
+
+  const renderField = (field: Document['schema_definition']['fields'][0]) => {
+    const value = formData[field.name] ?? '';
+
+    switch (field.type) {
+      case 'string':
+        return (
+          <Input
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+            className="text-base"
+          />
+        );
+
+      case 'slug':
+        return (
+          <div className="flex gap-2">
+            <Input
+              value={value}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                [field.name]: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-') 
+              })}
+              placeholder="url-slug"
+              className="font-mono text-sm"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                const title = formData.title || formData.name || '';
+                const slug = title.toLowerCase()
+                  .replace(/[а-яё]/g, (c: string) => {
+                    const map: Record<string, string> = {
+                      'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo',
+                      'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm',
+                      'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
+                      'ф': 'f', 'х': 'h', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 'ъ': '',
+                      'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
+                    };
+                    return map[c] || c;
+                  })
+                  .replace(/[^a-z0-9]+/g, '-')
+                  .replace(/-+/g, '-')
+                  .replace(/^-|-$/g, '');
+                setFormData({ ...formData, [field.name]: slug });
+              }}
+            >
+              {locale === 'ru' ? 'Сгенерировать' : 'Generate'}
+            </Button>
+          </div>
+        );
+
+      case 'text':
+        return (
+          <textarea
+            className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-y"
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+          />
+        );
+
+      case 'number':
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: parseFloat(e.target.value) || 0 })}
+            className="text-base"
+          />
+        );
+
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-3 cursor-pointer">
+            <div className={`relative w-11 h-6 rounded-full transition-colors ${value ? 'bg-green-500' : 'bg-gray-300'}`}>
+              <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${value ? 'translate-x-5' : 'translate-x-0.5'}`} />
+              <input
+                type="checkbox"
+                checked={value || false}
+                onChange={(e) => setFormData({ ...formData, [field.name]: e.target.checked })}
+                className="sr-only"
+              />
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {value ? (locale === 'ru' ? 'Да' : 'Yes') : (locale === 'ru' ? 'Нет' : 'No')}
+            </span>
+          </label>
+        );
+
+      case 'date':
+        return (
+          <Input
+            type="date"
+            value={value ? value.split('T')[0] : ''}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            className="text-base"
+          />
+        );
+
+      case 'datetime':
+        return (
+          <Input
+            type="datetime-local"
+            value={value ? value.slice(0, 16) : ''}
+            onChange={(e) => setFormData({ ...formData, [field.name]: new Date(e.target.value).toISOString() })}
+            className="text-base"
+          />
+        );
+
+      case 'richText':
+        return (
+          <RichTextEditor
+            value={value}
+            onChange={(content) => setFormData({ ...formData, [field.name]: content })}
+            placeholder={locale === 'ru' ? 'Начните писать...' : 'Start writing...'}
+            onImageUpload={() => setMediaPickerField(field.name)}
+          />
+        );
+
+      case 'image':
+        const imageValue = typeof value === 'object' ? value : (value ? { url: value } : null);
+        return (
+          <div className="space-y-3">
+            {imageValue?.url ? (
+              <div className="relative inline-block">
+                <img
+                  src={getPublicUrl(imageValue.url)}
+                  alt={imageValue.alt || ''}
+                  className="max-h-48 rounded-lg border"
+                />
+                <button
+                  type="button"
+                  onClick={() => setFormData({ ...formData, [field.name]: null })}
+                  className="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setMediaPickerField(field.name)}
+                className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-lg hover:border-primary hover:bg-muted/50 transition-colors"
+              >
+                <ImageIcon className="h-10 w-10 text-muted-foreground mb-2" />
+                <span className="text-sm text-muted-foreground">
+                  {locale === 'ru' ? 'Нажмите для выбора изображения' : 'Click to select image'}
+                </span>
+              </button>
+            )}
+            {imageValue?.url && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => setMediaPickerField(field.name)}
+              >
+                <ImageIcon className="h-4 w-4 mr-2" />
+                {locale === 'ru' ? 'Заменить' : 'Replace'}
+              </Button>
+            )}
+          </div>
+        );
+
+      case 'url':
+      case 'email':
+        return (
+          <Input
+            type={field.type === 'email' ? 'email' : 'url'}
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.type === 'email' ? 'email@example.com' : 'https://'}
+            className="text-base"
+          />
+        );
+
+      default:
+        return (
+          <Input
+            value={typeof value === 'object' ? JSON.stringify(value) : value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+            className="text-base"
+          />
+        );
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !document) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Link href="/content">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">
+              {locale === 'ru' ? 'Документ не найден' : 'Document Not Found'}
+            </h1>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const fields = document.schema_definition?.fields || [];
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <Link href="/content">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          </Link>
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold tracking-tight">
+                {formData.title || document.schema_title || document.schema_name}
+              </h1>
+              <span
+                className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                  status === 'published'
+                    ? 'bg-green-100 text-green-700'
+                    : 'bg-amber-100 text-amber-700'
+                }`}
+              >
+                {status === 'published' ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+                {status === 'published' 
+                  ? (locale === 'ru' ? 'Опубликовано' : 'Published') 
+                  : (locale === 'ru' ? 'Черновик' : 'Draft')}
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              {document.schema_title || document.schema_name} • ID: {document.id.slice(0, 8)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="grid grid-cols-3 gap-6">
+          {/* Main content */}
+          <div className="col-span-2 space-y-6">
+            {fields.map((field) => (
+              <div key={field.name} className="rounded-lg border bg-card p-5">
+                <Label className="text-sm font-medium mb-3 block">
+                  {field.title || field.name}
+                  {field.required && <span className="text-red-500 ml-1">*</span>}
+                </Label>
+                {field.description && (
+                  <p className="text-xs text-muted-foreground mb-3">{field.description}</p>
+                )}
+                {renderField(field)}
+              </div>
+            ))}
+
+            {fields.length === 0 && Object.keys(formData).length > 0 && (
+              Object.entries(formData).map(([key, value]) => (
+                <div key={key} className="rounded-lg border bg-card p-5">
+                  <Label className="text-sm font-medium mb-3 block">{key}</Label>
+                  <Input
+                    value={typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                    onChange={(e) => setFormData({ ...formData, [key]: e.target.value })}
+                  />
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4">
+            {/* Actions */}
+            <div className="rounded-lg border bg-card p-4 space-y-3">
+              <h3 className="font-medium text-sm">{locale === 'ru' ? 'Действия' : 'Actions'}</h3>
+              <div className="space-y-2">
+                <Button type="submit" className="w-full" disabled={updateMutation.isPending}>
+                  {updateMutation.isPending ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-2 h-4 w-4" />
+                  )}
+                  {locale === 'ru' ? 'Сохранить' : 'Save'}
+                </Button>
+                {status !== 'published' ? (
+                  <Button type="button" variant="secondary" className="w-full" onClick={handlePublish}>
+                    <Check className="mr-2 h-4 w-4" />
+                    {locale === 'ru' ? 'Опубликовать' : 'Publish'}
+                  </Button>
+                ) : (
+                  <Button type="button" variant="outline" className="w-full" onClick={handleUnpublish}>
+                    <EyeOff className="mr-2 h-4 w-4" />
+                    {locale === 'ru' ? 'Снять с публикации' : 'Unpublish'}
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Info */}
+            <div className="rounded-lg border bg-card p-4 space-y-3">
+              <h3 className="font-medium text-sm">{locale === 'ru' ? 'Информация' : 'Info'}</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Globe className="h-4 w-4" />
+                  <span>{document.locale}</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Calendar className="h-4 w-4" />
+                  <span>{new Date(document.created_at).toLocaleDateString()}</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Clock className="h-4 w-4" />
+                  <span>{new Date(document.updated_at).toLocaleTimeString()}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Danger zone */}
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+              <h3 className="font-medium text-sm text-red-700 mb-3">
+                {locale === 'ru' ? 'Опасная зона' : 'Danger Zone'}
+              </h3>
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="w-full"
+                onClick={() => {
+                  if (confirm(locale === 'ru' ? 'Удалить документ?' : 'Delete this document?')) {
+                    deleteMutation.mutate();
+                  }
+                }}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {locale === 'ru' ? 'Удалить' : 'Delete'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      {/* Media Picker */}
+      <MediaPicker
+        isOpen={!!mediaPickerField}
+        onClose={() => setMediaPickerField(null)}
+        onSelect={(url, file) => {
+          if (mediaPickerField) {
+            const field = fields.find(f => f.name === mediaPickerField);
+            if (field?.type === 'image') {
+              setFormData({ 
+                ...formData, 
+                [mediaPickerField]: { url, alt: file.original_filename } 
+              });
+            } else if (field?.type === 'richText') {
+              // For rich text, we'd need to inject into the editor
+              // This is handled by the editor's onImageUpload callback
+              setFormData({ 
+                ...formData, 
+                [mediaPickerField]: (formData[mediaPickerField] || '') + `\n<img src="${url}" alt="${file.original_filename}" />\n`
+              });
+            }
+          }
+          setMediaPickerField(null);
+        }}
+      />
+    </div>
+  );
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/content/layout.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { AuthLayout } from '@/components/layout/auth-layout';
+
+export default function ContentLayout({ children }: { children: React.ReactNode }) {
+  return <AuthLayout>{children}</AuthLayout>;
+}