flarecms 0.1.0 → 0.1.2

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

@@ -1,247 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,221 +0,0 @@
-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>
-  );
-}