pxlr-cms 1.0.0

package/templates/blog/pxlr-cms/packages/admin/src/app/schemas/[name]/page.tsx

@@ -0,0 +1,312 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import Link from 'next/link';
+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 { 
+  ArrowLeft, 
+  Loader2, 
+  Plus, 
+  Trash2, 
+  GripVertical,
+  Save
+} from 'lucide-react';
+import { SchemaCodeGenerator } from '@/components/schema-code-generator';
+
+interface Field {
+  name: string;
+  type: string;
+  title: string;
+  required?: boolean;
+  description?: string;
+}
+
+const FIELD_TYPES = [
+  { value: 'string', label: 'Text' },
+  { value: 'text', label: 'Long Text' },
+  { value: 'number', label: 'Number' },
+  { value: 'boolean', label: 'Boolean' },
+  { value: 'date', label: 'Date' },
+  { value: 'datetime', label: 'Date & Time' },
+  { value: 'richText', label: 'Rich Text' },
+  { value: 'image', label: 'Image' },
+  { value: 'file', label: 'File' },
+  { value: 'slug', label: 'Slug' },
+  { value: 'url', label: 'URL' },
+  { value: 'email', label: 'Email' },
+  { value: 'reference', label: 'Reference' },
+  { value: 'array', label: 'Array' },
+  { value: 'object', label: 'Object' },
+];
+
+export default function EditSchemaPage() {
+  const params = useParams();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const schemaName = params.name as string;
+
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [fields, setFields] = useState<Field[]>([]);
+  const [isSingleton, setIsSingleton] = useState(false);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['schema', schemaName],
+    queryFn: () => api.get(`/schemas/${schemaName}`),
+  });
+
+  const schema = data?.schema;
+
+  useEffect(() => {
+    if (schema) {
+      setTitle(schema.title || '');
+      setDescription(schema.description || '');
+      setFields(schema.definition?.fields || []);
+      setIsSingleton(schema.is_singleton || false);
+    }
+  }, [schema]);
+
+  const updateMutation = useMutation({
+    mutationFn: (data: any) => api.put(`/schemas/${schemaName}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['schemas'] });
+      queryClient.invalidateQueries({ queryKey: ['schema', schemaName] });
+      toast({ title: 'Schema updated successfully' });
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const handleSave = () => {
+    updateMutation.mutate({
+      title,
+      description,
+      isSingleton,
+      fields,
+    });
+  };
+
+  const addField = () => {
+    setFields([
+      ...fields,
+      { name: '', type: 'string', title: '', required: false },
+    ]);
+  };
+
+  const updateField = (index: number, updates: Partial<Field>) => {
+    const newFields = [...fields];
+    newFields[index] = { ...newFields[index], ...updates };
+    setFields(newFields);
+  };
+
+  const removeField = (index: number) => {
+    setFields(fields.filter((_, i) => i !== index));
+  };
+
+  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 (!schema) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground">Schema not found</p>
+        <Link href="/schemas">
+          <Button className="mt-4">Back to Schemas</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/schemas">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Edit Schema</h1>
+            <p className="text-muted-foreground">{schemaName}</p>
+          </div>
+        </div>
+        <Button onClick={handleSave} disabled={updateMutation.isPending}>
+          {updateMutation.isPending ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Save className="mr-2 h-4 w-4" />
+          )}
+          Save Changes
+        </Button>
+      </div>
+
+      {/* Basic Info */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="text-lg font-semibold mb-4">Basic Information</h2>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="title">Title</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Display name"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+            />
+          </div>
+          <div className="flex items-center gap-2 md:col-span-2">
+            <input
+              type="checkbox"
+              id="singleton"
+              checked={isSingleton}
+              onChange={(e) => setIsSingleton(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300"
+            />
+            <Label htmlFor="singleton" className="font-normal">
+              Singleton (only one document of this type)
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      {/* Fields */}
+      <div className="rounded-lg border bg-card p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Fields</h2>
+          <Button onClick={addField} size="sm">
+            <Plus className="mr-2 h-4 w-4" />
+            Add Field
+          </Button>
+        </div>
+
+        {fields.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No fields defined. Add your first field.</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {fields.map((field, index) => (
+              <div
+                key={index}
+                className="flex items-start gap-4 rounded-lg border p-4 bg-muted/30"
+              >
+                <div className="flex items-center pt-2 text-muted-foreground cursor-move">
+                  <GripVertical className="h-5 w-5" />
+                </div>
+                <div className="flex-1 grid gap-4 md:grid-cols-4">
+                  <div className="space-y-2">
+                    <Label>Field Name</Label>
+                    <Input
+                      value={field.name}
+                      onChange={(e) =>
+                        updateField(index, {
+                          name: e.target.value.replace(/[^a-zA-Z0-9_]/g, ''),
+                        })
+                      }
+                      placeholder="fieldName"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Title</Label>
+                    <Input
+                      value={field.title}
+                      onChange={(e) => updateField(index, { title: e.target.value })}
+                      placeholder="Field Title"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Type</Label>
+                    <select
+                      value={field.type}
+                      onChange={(e) => updateField(index, { type: e.target.value })}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                    >
+                      {FIELD_TYPES.map((type) => (
+                        <option key={type.value} value={type.value}>
+                          {type.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>&nbsp;</Label>
+                    <div className="flex items-center gap-4 h-10">
+                      <label className="flex items-center gap-2 text-sm">
+                        <input
+                          type="checkbox"
+                          checked={field.required || false}
+                          onChange={(e) =>
+                            updateField(index, { required: e.target.checked })
+                          }
+                          className="h-4 w-4 rounded border-gray-300"
+                        />
+                        Required
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeField(index)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Preview */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="text-lg font-semibold mb-4">Schema Preview (JSON)</h2>
+        <pre className="rounded bg-muted p-4 text-sm overflow-auto max-h-64">
+          {JSON.stringify(
+            {
+              name: schemaName,
+              title,
+              description,
+              is_singleton: isSingleton,
+              fields,
+            },
+            null,
+            2
+          )}
+        </pre>
+      </div>
+
+      {/* Code Generator */}
+      <div className="rounded-lg border bg-card p-6">
+        <SchemaCodeGenerator
+          schemaName={schemaName}
+          schemaTitle={title}
+          fields={fields}
+          isSingleton={isSingleton}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/app/schemas/layout.tsx

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

package/templates/blog/pxlr-cms/packages/admin/src/app/schemas/page.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { useState } from 'react';
+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 Link from 'next/link';
+import { Plus, Database, Trash2, Edit, Loader2, Code } from 'lucide-react';
+
+interface Schema {
+  id: string;
+  name: string;
+  title: string;
+  description?: string;
+  is_singleton: boolean;
+  definition: any;
+  created_at: string;
+}
+
+export default function SchemasPage() {
+  const queryClient = useQueryClient();
+  const [isCreating, setIsCreating] = useState(false);
+  const [newSchema, setNewSchema] = useState({
+    name: '',
+    title: '',
+    description: '',
+  });
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['schemas'],
+    queryFn: () => api.get('/schemas'),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (schema: any) => api.post('/schemas', schema),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['schemas'] });
+      setIsCreating(false);
+      setNewSchema({ name: '', title: '', description: '' });
+      toast({ title: 'Schema created successfully' });
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (name: string) => api.delete(`/schemas/${name}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['schemas'] });
+      toast({ title: 'Schema deleted successfully' });
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const handleCreate = () => {
+    if (!newSchema.name || !newSchema.title) {
+      toast({ title: 'Please fill in required fields', variant: 'destructive' });
+      return;
+    }
+
+    createMutation.mutate({
+      name: newSchema.name,
+      title: newSchema.title,
+      description: newSchema.description,
+      fields: [
+        { name: 'title', type: 'string', title: 'Title', required: true },
+        { name: 'content', type: 'richText', title: 'Content' },
+      ],
+    });
+  };
+
+  const schemas: Schema[] = data?.schemas || [];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Content Schemas</h1>
+          <p className="text-muted-foreground">
+            Define the structure of your content types
+          </p>
+        </div>
+        <Button onClick={() => setIsCreating(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Schema
+        </Button>
+      </div>
+
+      {isCreating && (
+        <div className="rounded-lg border bg-card p-6">
+          <h2 className="text-lg font-semibold mb-4">Create New Schema</h2>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name (API identifier)</Label>
+              <Input
+                id="name"
+                placeholder="e.g., blogPost, article, my_page"
+                value={newSchema.name}
+                onChange={(e) =>
+                  setNewSchema({ ...newSchema, name: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })
+                }
+              />
+              <p className="text-xs text-muted-foreground">
+                Letters, numbers, underscores only. Start with a letter.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="title">Title (Display name)</Label>
+              <Input
+                id="title"
+                placeholder="e.g., Blog Post"
+                value={newSchema.title}
+                onChange={(e) =>
+                  setNewSchema({ ...newSchema, title: e.target.value })
+                }
+              />
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <Label htmlFor="description">Description</Label>
+              <Input
+                id="description"
+                placeholder="Optional description"
+                value={newSchema.description}
+                onChange={(e) =>
+                  setNewSchema({ ...newSchema, description: e.target.value })
+                }
+              />
+            </div>
+          </div>
+          <div className="flex gap-2 mt-4">
+            <Button onClick={handleCreate} disabled={createMutation.isPending}>
+              {createMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Create Schema
+            </Button>
+            <Button variant="outline" onClick={() => setIsCreating(false)}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : schemas.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12">
+          <Database className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 text-lg font-semibold">No schemas yet</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Create your first content schema to get started
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {schemas.map((schema) => (
+            <div
+              key={schema.id}
+              className="rounded-lg border bg-card p-6 shadow-sm"
+            >
+              <div className="flex items-start justify-between">
+                <div>
+                  <h3 className="font-semibold">{schema.title}</h3>
+                  <p className="text-sm text-muted-foreground">{schema.name}</p>
+                </div>
+                <div className="flex gap-1">
+                  <Link href={`/schemas/${schema.name}`}>
+                    <Button variant="ghost" size="icon">
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                  </Link>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => deleteMutation.mutate(schema.name)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              {schema.description && (
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {schema.description}
+                </p>
+              )}
+              <div className="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
+                <span>
+                  {schema.definition?.fields?.length || 0} fields
+                </span>
+                {schema.is_singleton && (
+                  <span className="rounded bg-muted px-1.5 py-0.5">
+                    Singleton
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/app/settings/layout.tsx

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