flarecms 0.1.0

package/src/client/components/content-list.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react';
+import { apiFetch } from '../lib/api';
+import { useStore } from '@nanostores/react';
+import { $schema } from '../store/schema';
+import { $router, navigate } from '../store/router';
+import {
+  FileEdit as FileEditIcon,
+  Trash2 as Trash2Icon,
+  Loader2 as Loader2Icon,
+  Search as SearchIcon,
+  ChevronDown as ChevronDownIcon,
+  Filter as FilterIcon,
+  LayoutGrid as LayoutGridIcon,
+  List as ListIcon,
+  History as HistoryIcon,
+} from 'lucide-react';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui/table';
+import { Button } from './ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from './ui/card';
+import { Input } from './ui/input';
+
+export function ContentList({ slug }: { slug: string }) {
+  const [data, setData] = useState<any[]>([]);
+  const [meta, setMeta] = useState<any>(null);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const { data: schema } = useStore($schema);
+
+  const fetchContent = async () => {
+    setLoading(true);
+    try {
+      const response = await apiFetch(`/content/${slug}?page=${page}&limit=20`);
+      const json = await response.json();
+      setData(json.data || []);
+      setMeta(json.meta || null);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchContent();
+  }, [slug, page]);
+
+  const handleDelete = async (id: string | number) => {
+    if (!confirm('Are you certain? This action is irreversible.')) return;
+    try {
+      await apiFetch(`/content/${slug}/${id}`, { method: 'DELETE' });
+      fetchContent();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center p-20 text-muted-foreground gap-6 bg-background border rounded-lg shadow-sm">
+        <Loader2Icon className="size-8 animate-spin text-primary" />
+        <p className="font-semibold text-[10px] uppercase tracking-[0.2em]">
+          Synchronizing Data...
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Table Actions Bar */}
+      <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
+        <div className="flex items-center gap-2 w-full md:w-auto">
+          <div className="relative w-full md:w-64 group">
+            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground transition-colors" />
+            <Input
+              placeholder="Search entries..."
+              className="pl-9 h-9 text-xs"
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-9 gap-2 text-xs font-semibold"
+          >
+            <FilterIcon className="size-3.5" />
+            Filter
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-1 border bg-muted/50 rounded-md p-0.5 border-border shrink-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 bg-background shadow-sm text-primary"
+          >
+            <ListIcon className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground/50 hover:text-foreground"
+          >
+            <LayoutGridIcon className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      <Card className="py-0 shadow-none border-border overflow-hidden">
+        <CardHeader className="bg-muted/30 border-b py-3 px-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider leading-none">
+              <HistoryIcon className="size-3.5 opacity-50" />
+              Synchronized Ledger
+            </div>
+            <div className="flex items-center gap-2 text-[10px] text-muted-foreground font-semibold uppercase tracking-wider">
+              <span className="size-1.5 bg-primary rounded-full" />
+              <span>{meta?.total || data.length} Entries</span>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent text-muted-foreground uppercase text-[10px] font-bold tracking-wider bg-muted/20">
+                <TableHead className="pl-6 py-3">
+                  Document Identification
+                </TableHead>
+                {schema?.fields?.slice(0, 2).map((field: any) => (
+                  <TableHead key={field.id}>{field.label}</TableHead>
+                ))}
+                <TableHead>Created</TableHead>
+                <TableHead className="text-right pr-6">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.map((item) => (
+                <TableRow
+                  key={item.id}
+                  className="group transition-colors border-border/50"
+                >
+                  <TableCell className="pl-6 py-4">
+                    <div className="flex flex-col gap-0.5">
+                      <span
+                        className="font-semibold text-primary hover:underline cursor-pointer text-sm leading-tight"
+                        onClick={() => navigate('document_edit', { slug, id: item.id })}
+                      >
+                        {item.slug || `Entry #${item.id}`}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground font-medium font-mono uppercase tracking-tighter opacity-70">
+                        ID: {item.id}
+                      </span>
+                    </div>
+                  </TableCell>
+
+                  {schema?.fields?.slice(0, 2).map((field: any) => (
+                    <TableCell
+                      key={field.id}
+                      className="text-xs font-medium text-foreground/80"
+                    >
+                      {String(item[field.slug] || '—')}
+                    </TableCell>
+                  ))}
+
+                  <TableCell className="text-[11px] text-muted-foreground font-medium">
+                    {item.created_at
+                      ? new Date(item.created_at).toLocaleDateString()
+                      : '—'}
+                  </TableCell>
+
+                  <TableCell className="text-right pr-6">
+                    <div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-7 text-muted-foreground hover:text-primary"
+                        onClick={() => navigate('document_edit', { slug, id: item.id })}
+                      >
+                        <FileEditIcon className="size-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-7 text-muted-foreground hover:text-destructive"
+                        onClick={() => handleDelete(item.id)}
+                      >
+                        <Trash2Icon className="size-3.5" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {data.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={10}
+                    className="h-64 text-center text-muted-foreground bg-muted/5"
+                  >
+                    <div className="flex flex-col items-center justify-center gap-4">
+                      <HistoryIcon className="size-12 opacity-10" />
+                      <p className="text-sm font-semibold text-foreground/50">
+                        No Data Available
+                      </p>
+                      <p className="text-[10px] uppercase font-semibold tracking-wider opacity-40">
+                        Add your first entry to begin
+                      </p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Footer Info */}
+      <div className="px-1 flex justify-between items-center text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+        <p>
+          Showing {meta ? (meta.page - 1) * meta.limit + 1 : 1} — {meta ? Math.min(meta.page * meta.limit, meta.total) : data.length} of {meta?.total || data.length}
+        </p>
+        <div className="flex gap-4">
+          <button 
+            disabled={!meta?.hasPrevPage}
+            onClick={() => setPage(p => p - 1)}
+            className="hover:text-primary disabled:opacity-30 disabled:hover:text-muted-foreground cursor-pointer transition-colors"
+          >
+            Previous
+          </button>
+          <button 
+            disabled={!meta?.hasNextPage}
+            onClick={() => setPage(p => p + 1)}
+            className="hover:text-primary disabled:opacity-30 disabled:hover:text-muted-foreground cursor-pointer transition-colors"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/dynamic-form.tsx

@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { $schema } from '../store/schema';
+import { Loader2Icon, CheckIcon, TypeIcon } from 'lucide-react';
+import type { Field } from '../types';
+import { Button } from './ui/button';
+
+interface DynamicFormProps {
+  slug: string;
+  onSubmit: (data: Record<string, any>) => void;
+  onCancel: () => void;
+  initialData?: Record<string, any> | null;
+  isSubmitting?: boolean;
+}
+
+export function DynamicForm({
+  slug,
+  onSubmit,
+  onCancel,
+  initialData,
+  isSubmitting,
+}: DynamicFormProps) {
+  const { data: schema, loading } = useStore($schema);
+  const [formData, setFormData] = useState<Record<string, any>>(
+    initialData || {},
+  );
+
+  if (loading)
+    return (
+      <div className="flex flex-col items-center gap-4 py-20 justify-center text-muted-foreground">
+        <Loader2Icon className="size-8 animate-spin text-primary/40" />
+        <p className="text-[10px] font-bold uppercase tracking-widest">
+          Acquiring Structure...
+        </p>
+      </div>
+    );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isSubmitting) return;
+    onSubmit(formData);
+  };
+
+  const renderField = (field: Field) => {
+    const value = formData[field.slug] ?? '';
+    const onChange = (val: any) =>
+      setFormData({ ...formData, [field.slug]: val });
+
+    switch (field.type) {
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-4 cursor-pointer p-5 bg-muted/20 rounded-md border border-border/50 hover:bg-muted/30 transition-all border-dashed group opacity-100 disabled:opacity-50">
+            <div className="relative flex items-center">
+              <input
+                type="checkbox"
+                className="peer sr-only"
+                checked={!!value}
+                disabled={isSubmitting}
+                onChange={(e) => onChange(e.target.checked)}
+              />
+              <div className="w-10 h-5 bg-muted-foreground/20 rounded-full peer peer-checked:bg-primary transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-3 after:w-3 after:transition-transform peer-checked:after:translate-x-5" />
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xs font-bold text-foreground group-hover:text-primary transition-colors">
+                {field.label}
+              </span>
+              <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider opacity-60">
+                Binary State Toggle
+              </span>
+            </div>
+          </label>
+        );
+
+      case 'richtext':
+        return (
+          <div className="space-y-2">
+            <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+              {field.label}
+            </label>
+            <textarea
+              className="w-full bg-muted/20 border border-border rounded-md px-4 py-3 text-sm focus:bg-background transition-all min-h-[180px] outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+              value={value}
+              disabled={isSubmitting}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={`Enter content for ${field.label.toLowerCase()}...`}
+            />
+          </div>
+        );
+
+      case 'number':
+        return (
+          <div className="space-y-2">
+            <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+              {field.label}
+            </label>
+            <input
+              type="number"
+              className="w-full h-10 bg-muted/20 border border-border rounded-md px-4 text-sm focus:bg-background transition-all outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+              value={value}
+              disabled={isSubmitting}
+              onChange={(e) => onChange(Number(e.target.value))}
+            />
+          </div>
+        );
+
+      case 'date':
+        return (
+          <div className="space-y-2">
+            <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+              {field.label}
+            </label>
+            <input
+              type="date"
+              className="w-full h-10 bg-muted/20 border border-border rounded-md px-4 text-sm focus:bg-background transition-all outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+              value={value}
+              disabled={isSubmitting}
+              onChange={(e) => onChange(e.target.value)}
+            />
+          </div>
+        );
+
+      default:
+        return (
+          <div className="space-y-2">
+            <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+              {field.label}
+            </label>
+            <input
+              type="text"
+              className="w-full h-10 bg-muted/20 border border-border rounded-md px-4 text-sm focus:bg-background transition-all outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+              value={value}
+              disabled={isSubmitting}
+              onChange={(e) => onChange(e.target.value)}
+            />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-10">
+      <fieldset disabled={isSubmitting} className="space-y-8 contents">
+        {schema?.fields?.map((field: Field) => (
+          <div key={field.id}>{renderField(field)}</div>
+        ))}
+        {(!schema?.fields || schema.fields.length === 0) && (
+          <div className="p-12 text-center bg-muted/10 rounded-lg border border-dashed flex flex-col items-center gap-4">
+            <TypeIcon className="size-8 opacity-10" />
+            <div className="space-y-1">
+              <p className="text-sm font-bold uppercase tracking-wider text-foreground/50">
+                Model Void
+              </p>
+              <p className="text-[10px] uppercase font-semibold text-muted-foreground tracking-widest opacity-40">
+                Define fields in the structure engine to begin entry
+              </p>
+            </div>
+          </div>
+        )}
+      </fieldset>
+
+      <div className="flex justify-end gap-3 pt-8 border-t border-dashed">
+        <Button
+          type="button"
+          variant="ghost"
+          disabled={isSubmitting}
+          onClick={onCancel}
+          className="text-xs font-semibold h-10 px-6 text-muted-foreground hover:text-foreground"
+        >
+          Discard Changes
+        </Button>
+        <Button
+          type="submit"
+          disabled={isSubmitting}
+          className="font-bold h-10 px-8 text-xs tracking-tight min-w-32"
+        >
+          {isSubmitting ? (
+            <Loader2Icon className="size-4 mr-2 animate-spin" />
+          ) : (
+            <CheckIcon className="size-4 mr-2" />
+          )}
+          {isSubmitting
+            ? 'Processing...'
+            : initialData?.id
+              ? 'Update Document'
+              : 'Create Document'}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/client/components/field-modal.tsx

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import {
+  PlusIcon,
+  Loader2Icon,
+  TypeIcon,
+  HashIcon,
+  CheckSquareIcon,
+  CalendarIcon,
+  AlignLeftIcon,
+} from 'lucide-react';
+import { $addField } from '../store/schema';
+import type { Field } from '../types';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+interface FieldModalProps {
+  children: React.ReactElement;
+  collectionId: string;
+  collectionSlug: string;
+}
+
+const FIELD_TYPES = [
+  { id: 'text', label: 'Plain Text', icon: <TypeIcon className="w-4 h-4" /> },
+  {
+    id: 'richtext',
+    label: 'Rich Text',
+    icon: <AlignLeftIcon className="w-4 h-4" />,
+  },
+  { id: 'number', label: 'Number', icon: <HashIcon className="w-4 h-4" /> },
+  {
+    id: 'boolean',
+    label: 'Boolean',
+    icon: <CheckSquareIcon className="w-4 h-4" />,
+  },
+  { id: 'date', label: 'Date', icon: <CalendarIcon className="w-4 h-4" /> },
+] as const;
+
+export function FieldModal({
+  children,
+  collectionId,
+  collectionSlug,
+}: FieldModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState<Partial<Field>>({
+    label: '',
+    slug: '',
+    type: 'text',
+    required: false,
+  });
+
+  const { mutate, loading } = useStore($addField);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await mutate({
+        ...formData,
+        collectionId,
+        collectionSlug,
+      });
+      setIsOpen(false);
+      setFormData({ label: '', slug: '', type: 'text', required: false });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger render={children} />
+      <DialogContent className="sm:max-w-[540px] p-0 overflow-hidden border-border bg-background rounded-md shadow-lg">
+        <DialogHeader className="px-8 py-8 border-b bg-muted/30">
+          <div className="flex items-center gap-4">
+            <div className="p-2.5 bg-background border rounded-md shadow-sm">
+              <PlusIcon className="size-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle className="text-lg font-bold tracking-tight">
+                New Structure Field
+              </DialogTitle>
+              <DialogDescription className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mt-0.5">
+                Define Attribute Parameter
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit}>
+          <div className="p-8 space-y-8">
+            <div className="grid grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <Label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+                  Field Label
+                </Label>
+                <Input
+                  required
+                  placeholder="e.g. Featured Toggle"
+                  className="h-10 bg-muted/20 focus:bg-background transition-all border-border rounded-md px-4 text-sm font-medium"
+                  value={formData.label}
+                  onChange={(e) => {
+                    const label = e.target.value;
+                    const slug = label
+                      .toLowerCase()
+                      .replace(/\s+/g, '_')
+                      .replace(/[^a-z0-9_]/g, '');
+                    setFormData({ ...formData, label, slug });
+                  }}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+                  Database Key
+                </Label>
+                <Input
+                  required
+                  className="h-10 bg-muted/20 focus:bg-background transition-all border-border rounded-md font-mono text-[11px] font-semibold text-muted-foreground"
+                  value={formData.slug}
+                  onChange={(e) =>
+                    setFormData({ ...formData, slug: e.target.value })
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <Label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60 pl-1">
+                Field Type
+              </Label>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                {FIELD_TYPES.map((type) => (
+                  <button
+                    key={type.id}
+                    type="button"
+                    onClick={() =>
+                      setFormData({ ...formData, type: type.id as any })
+                    }
+                    className={`flex items-center gap-3 p-3.5 rounded-md border transition-all text-left group ${
+                      formData.type === type.id
+                        ? 'bg-primary/5 border-primary text-primary font-bold shadow-sm'
+                        : 'bg-background border-border text-muted-foreground hover:border-muted-foreground/30 hover:text-foreground'
+                    }`}
+                  >
+                    <div
+                      className={
+                        formData.type === type.id
+                          ? 'text-primary'
+                          : 'text-muted-foreground/40 group-hover:text-muted-foreground/60 transition-colors'
+                      }
+                    >
+                      {type.icon}
+                    </div>
+                    <span className="text-[11px] uppercase tracking-tight leading-none font-semibold">
+                      {type.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <label className="flex items-center gap-4 cursor-pointer group p-5 bg-muted/20 border border-border/50 rounded-md hover:bg-muted/30 transition-all border-dashed">
+              <div className="relative flex items-center">
+                <input
+                  type="checkbox"
+                  className="peer sr-only"
+                  checked={formData.required}
+                  onChange={(e) =>
+                    setFormData({ ...formData, required: e.target.checked })
+                  }
+                />
+                <div className="w-10 h-5 bg-muted-foreground/20 rounded-full peer peer-checked:bg-primary transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-3 after:w-3 after:transition-transform peer-checked:after:translate-x-5" />
+              </div>
+              <div className="flex-1">
+                <p className="text-xs font-bold text-foreground">
+                  Required Property
+                </p>
+                <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-widest opacity-60">
+                  Enforce data integrity
+                </p>
+              </div>
+            </label>
+          </div>
+
+          <DialogFooter className="bg-muted/10 border-t p-6 px-8 gap-3 sm:gap-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => setIsOpen(false)}
+              className="text-xs font-semibold text-muted-foreground hover:text-foreground h-10 px-6"
+            >
+              Discard
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading}
+              className="font-bold px-8 rounded-md h-10 text-xs tracking-tight"
+            >
+              {loading ? (
+                <Loader2Icon className="size-4 animate-spin mr-2.5" />
+              ) : (
+                <PlusIcon className="size-4 mr-2.5" />
+              )}
+              Add Property
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}