@fnd-platform/cms 1.0.0-alpha.1

package/lib/templates/content-editor.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generates the content editor form component template.
+ *
+ * This template provides a dynamic form component that renders
+ * fields based on a content type definition.
+ *
+ * @returns Template string for app/components/admin/content-editor.tsx
+ */
+export declare function getContentEditorTemplate(): string;
+//# sourceMappingURL=content-editor.d.ts.map

package/lib/templates/content-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editor.d.ts","sourceRoot":"","sources":["../../src/templates/content-editor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAqVjD"}

package/lib/templates/content-editor.js

@@ -0,0 +1,354 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getContentEditorTemplate = getContentEditorTemplate;
+/**
+ * Generates the content editor form component template.
+ *
+ * This template provides a dynamic form component that renders
+ * fields based on a content type definition.
+ *
+ * @returns Template string for app/components/admin/content-editor.tsx
+ */
+function getContentEditorTemplate() {
+  return `import { useState, useEffect, useMemo } from 'react';
+import { Form, useNavigation, useActionData } from '@remix-run/react';
+import { Save, Eye, Archive, Trash2, ArrowLeft } from 'lucide-react';
+import type { ContentType, FieldDefinition } from '~/lib/content-types';
+import { generateContentSchema, validateContent, getFieldError } from '~/lib/content-schema';
+import { DynamicField } from '~/components/form-fields';
+import { Button } from '~/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card';
+import { Badge } from '~/components/ui/badge';
+import { cn } from '~/lib/utils';
+
+/**
+ * Props for ContentEditor component.
+ */
+export interface ContentEditorProps {
+  /** Content type definition */
+  contentType: ContentType;
+  /** Initial content data (for editing) */
+  initialData?: Record<string, unknown>;
+  /** Whether creating new content or editing */
+  mode: 'create' | 'edit';
+  /** Cancel URL (back button destination) */
+  cancelUrl: string;
+  /** User permissions */
+  permissions: {
+    canPublish: boolean;
+    canDelete: boolean;
+  };
+}
+
+/**
+ * Action data returned from form submission.
+ */
+export interface ContentActionData {
+  success?: boolean;
+  errors?: Record<string, string[]>;
+  message?: string;
+}
+
+/**
+ * Dynamic content editor form component.
+ *
+ * Renders a form based on the content type definition with:
+ * - Field state management
+ * - Client-side validation
+ * - Save/Publish/Unpublish/Delete actions
+ *
+ * @example
+ * \`\`\`tsx
+ * <ContentEditor
+ *   contentType={blogPost}
+ *   initialData={existingContent}
+ *   mode="edit"
+ *   cancelUrl="/admin/content/blog-post"
+ *   permissions={{ canPublish: true, canDelete: true }}
+ * />
+ * \`\`\`
+ */
+export function ContentEditor({
+  contentType,
+  initialData,
+  mode,
+  cancelUrl,
+  permissions,
+}: ContentEditorProps) {
+  const navigation = useNavigation();
+  const actionData = useActionData<ContentActionData>();
+  const isSubmitting = navigation.state === 'submitting';
+
+  // Initialize form data from initial data or defaults
+  const [formData, setFormData] = useState<Record<string, unknown>>(() => {
+    const data: Record<string, unknown> = {
+      id: initialData?.id ?? '',
+      status: initialData?.status ?? 'draft',
+    };
+
+    for (const field of contentType.fields) {
+      if (initialData?.[field.name] !== undefined) {
+        data[field.name] = initialData[field.name];
+      } else if (field.defaultValue !== undefined) {
+        data[field.name] = field.defaultValue;
+      } else {
+        // Set default empty values based on type
+        switch (field.type) {
+          case 'boolean':
+            data[field.name] = false;
+            break;
+          case 'tags':
+          case 'multiselect':
+            data[field.name] = [];
+            break;
+          case 'media':
+            data[field.name] = (field as { multiple?: boolean }).multiple ? [] : '';
+            break;
+          case 'reference':
+            data[field.name] = (field as { multiple?: boolean }).multiple ? [] : '';
+            break;
+          default:
+            data[field.name] = '';
+        }
+      }
+    }
+
+    return data;
+  });
+
+  // Client-side validation errors
+  const [clientErrors, setClientErrors] = useState<Record<string, string[]>>({});
+
+  // Combine client and server errors
+  const allErrors = useMemo(() => {
+    return { ...clientErrors, ...(actionData?.errors ?? {}) };
+  }, [clientErrors, actionData?.errors]);
+
+  // Generate validation schema
+  const schema = useMemo(() => generateContentSchema(contentType), [contentType]);
+
+  // Update a single field
+  const updateField = (fieldName: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }));
+    // Clear error for this field when it changes
+    if (clientErrors[fieldName]) {
+      setClientErrors((prev) => {
+        const next = { ...prev };
+        delete next[fieldName];
+        return next;
+      });
+    }
+  };
+
+  // Validate form before submission
+  const validateForm = (): boolean => {
+    const result = validateContent(schema, formData);
+    if (!result.success && result.errors) {
+      setClientErrors(result.errors);
+      return false;
+    }
+    setClientErrors({});
+    return true;
+  };
+
+  // Get current status info
+  const currentStatus = contentType.statuses.find(
+    (s) => s.value === formData.status
+  ) ?? contentType.statuses[0];
+
+  // Check if content is published
+  const isPublished = formData.status === 'published';
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" asChild>
+            <a href={cancelUrl}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </a>
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold">
+              {mode === 'create' ? \`New \${contentType.singularLabel}\` : \`Edit \${contentType.singularLabel}\`}
+            </h1>
+            {mode === 'edit' && (
+              <Badge
+                variant={currentStatus.color === 'success' ? 'default' : 'secondary'}
+                className={cn(
+                  currentStatus.color === 'success' && 'bg-green-500',
+                  currentStatus.color === 'warning' && 'bg-yellow-500',
+                  currentStatus.color === 'destructive' && 'bg-red-500'
+                )}
+              >
+                {currentStatus.label}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Form */}
+      <Form
+        method="post"
+        onSubmit={(e) => {
+          if (!validateForm()) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {/* Hidden field with serialized form data */}
+        <input
+          type="hidden"
+          name="_formData"
+          value={JSON.stringify(formData)}
+        />
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Content Area */}
+          <div className="lg:col-span-2 space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Content</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                {contentType.fields
+                  .filter((field) => !isMetaField(field))
+                  .map((field) => (
+                    <DynamicField
+                      key={field.name}
+                      field={field}
+                      value={formData[field.name]}
+                      onChange={(value) => updateField(field.name, value)}
+                      error={getFieldError(allErrors, field.name)}
+                      disabled={isSubmitting}
+                      formData={formData}
+                    />
+                  ))}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Actions Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Actions</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {/* Save Draft */}
+                <Button
+                  type="submit"
+                  name="_action"
+                  value="save"
+                  className="w-full"
+                  disabled={isSubmitting}
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  {isSubmitting ? 'Saving...' : 'Save Draft'}
+                </Button>
+
+                {/* Publish / Unpublish */}
+                {permissions.canPublish && (
+                  <>
+                    {!isPublished ? (
+                      <Button
+                        type="submit"
+                        name="_action"
+                        value="publish"
+                        variant="secondary"
+                        className="w-full"
+                        disabled={isSubmitting}
+                      >
+                        <Eye className="h-4 w-4 mr-2" />
+                        Publish
+                      </Button>
+                    ) : (
+                      <Button
+                        type="submit"
+                        name="_action"
+                        value="unpublish"
+                        variant="secondary"
+                        className="w-full"
+                        disabled={isSubmitting}
+                      >
+                        <Archive className="h-4 w-4 mr-2" />
+                        Unpublish
+                      </Button>
+                    )}
+                  </>
+                )}
+
+                {/* Delete */}
+                {mode === 'edit' && permissions.canDelete && (
+                  <Button
+                    type="submit"
+                    name="_action"
+                    value="delete"
+                    variant="destructive"
+                    className="w-full"
+                    disabled={isSubmitting}
+                    onClick={(e) => {
+                      if (!confirm('Are you sure you want to delete this content?')) {
+                        e.preventDefault();
+                      }
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Meta Fields Card */}
+            {contentType.fields.some(isMetaField) && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Settings</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  {contentType.fields
+                    .filter(isMetaField)
+                    .map((field) => (
+                      <DynamicField
+                        key={field.name}
+                        field={field}
+                        value={formData[field.name]}
+                        onChange={(value) => updateField(field.name, value)}
+                        error={getFieldError(allErrors, field.name)}
+                        disabled={isSubmitting}
+                        formData={formData}
+                      />
+                    ))}
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+
+        {/* Error Summary */}
+        {actionData?.message && !actionData.success && (
+          <div className="mt-6 p-4 bg-destructive/10 border border-destructive rounded-md">
+            <p className="text-sm text-destructive">{actionData.message}</p>
+          </div>
+        )}
+      </Form>
+    </div>
+  );
+}
+
+/**
+ * Check if a field should be in the sidebar (meta fields).
+ * Meta fields are: slug, date, datetime, select (for categories), boolean, tags
+ */
+function isMetaField(field: FieldDefinition): boolean {
+  const metaFieldTypes = ['slug', 'date', 'datetime', 'boolean', 'tags', 'select'];
+  return metaFieldTypes.includes(field.type);
+}
+`;
+}
+//# sourceMappingURL=content-editor.js.map

package/lib/templates/content-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editor.js","sourceRoot":"","sources":["../../src/templates/content-editor.ts"],"names":[],"mappings":";;AAQA,4DAqVC;AA7VD;;;;;;;GAOG;AACH,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmVR,CAAC;AACF,CAAC"}

package/lib/templates/content-schema.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generates the content schema template for Zod validation.
+ *
+ * This template provides utilities for generating Zod schemas
+ * from content type field definitions.
+ *
+ * @returns Template string for app/lib/content-schema.ts
+ */
+export declare function getContentSchemaTemplate(): string;
+//# sourceMappingURL=content-schema.d.ts.map

package/lib/templates/content-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-schema.d.ts","sourceRoot":"","sources":["../../src/templates/content-schema.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAqQjD"}

package/lib/templates/content-schema.js

@@ -0,0 +1,274 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getContentSchemaTemplate = getContentSchemaTemplate;
+/**
+ * Generates the content schema template for Zod validation.
+ *
+ * This template provides utilities for generating Zod schemas
+ * from content type field definitions.
+ *
+ * @returns Template string for app/lib/content-schema.ts
+ */
+function getContentSchemaTemplate() {
+  return `/**
+ * Content Schema Generation
+ *
+ * This module generates Zod schemas from content type field definitions
+ * for client-side and server-side validation.
+ */
+
+import { z } from 'zod';
+import type { FieldDefinition, ContentType } from './content-types';
+
+// ============================================================================
+// Schema Generation
+// ============================================================================
+
+/**
+ * Generate a Zod schema for a single field definition.
+ */
+export function generateFieldSchema(field: FieldDefinition): z.ZodTypeAny {
+  let schema: z.ZodTypeAny;
+
+  switch (field.type) {
+    case 'text': {
+      let textSchema = z.string();
+      if (field.minLength !== undefined) {
+        textSchema = textSchema.min(field.minLength, \`Must be at least \${field.minLength} characters\`);
+      }
+      if (field.maxLength !== undefined) {
+        textSchema = textSchema.max(field.maxLength, \`Must be at most \${field.maxLength} characters\`);
+      }
+      if (field.pattern !== undefined) {
+        textSchema = textSchema.regex(new RegExp(field.pattern), 'Invalid format');
+      }
+      schema = textSchema;
+      break;
+    }
+
+    case 'textarea': {
+      let textareaSchema = z.string();
+      if (field.minLength !== undefined) {
+        textareaSchema = textareaSchema.min(field.minLength, \`Must be at least \${field.minLength} characters\`);
+      }
+      if (field.maxLength !== undefined) {
+        textareaSchema = textareaSchema.max(field.maxLength, \`Must be at most \${field.maxLength} characters\`);
+      }
+      schema = textareaSchema;
+      break;
+    }
+
+    case 'richtext': {
+      schema = z.string();
+      break;
+    }
+
+    case 'slug': {
+      schema = z.string()
+        .min(1, 'Slug is required')
+        .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, 'Slug must be lowercase letters, numbers, and hyphens only');
+      break;
+    }
+
+    case 'media': {
+      if (field.multiple) {
+        schema = z.array(z.string());
+      } else {
+        schema = z.string();
+      }
+      break;
+    }
+
+    case 'select': {
+      const validValues = field.options.map((opt) => opt.value);
+      schema = z.enum(validValues as [string, ...string[]]);
+      break;
+    }
+
+    case 'multiselect': {
+      const validOptions = field.options.map((opt) => opt.value);
+      let multiselectSchema = z.array(z.enum(validOptions as [string, ...string[]]));
+      if (field.min !== undefined) {
+        multiselectSchema = multiselectSchema.min(field.min, \`Select at least \${field.min} options\`);
+      }
+      if (field.max !== undefined) {
+        multiselectSchema = multiselectSchema.max(field.max, \`Select at most \${field.max} options\`);
+      }
+      schema = multiselectSchema;
+      break;
+    }
+
+    case 'date': {
+      let dateSchema = z.string().regex(/^\\d{4}-\\d{2}-\\d{2}$/, 'Invalid date format');
+      if (field.min !== undefined) {
+        dateSchema = dateSchema.refine(
+          (val) => new Date(val) >= new Date(field.min!),
+          \`Date must be on or after \${field.min}\`
+        );
+      }
+      if (field.max !== undefined) {
+        dateSchema = dateSchema.refine(
+          (val) => new Date(val) <= new Date(field.max!),
+          \`Date must be on or before \${field.max}\`
+        );
+      }
+      schema = dateSchema;
+      break;
+    }
+
+    case 'datetime': {
+      let datetimeSchema = z.string().datetime({ message: 'Invalid datetime format' });
+      if (field.min !== undefined) {
+        datetimeSchema = datetimeSchema.refine(
+          (val) => new Date(val) >= new Date(field.min!),
+          \`Datetime must be on or after \${field.min}\`
+        );
+      }
+      if (field.max !== undefined) {
+        datetimeSchema = datetimeSchema.refine(
+          (val) => new Date(val) <= new Date(field.max!),
+          \`Datetime must be on or before \${field.max}\`
+        );
+      }
+      schema = datetimeSchema;
+      break;
+    }
+
+    case 'boolean': {
+      schema = z.boolean();
+      break;
+    }
+
+    case 'number': {
+      let numberSchema = field.decimal ? z.number() : z.number().int('Must be a whole number');
+      if (field.min !== undefined) {
+        numberSchema = numberSchema.min(field.min, \`Must be at least \${field.min}\`);
+      }
+      if (field.max !== undefined) {
+        numberSchema = numberSchema.max(field.max, \`Must be at most \${field.max}\`);
+      }
+      schema = numberSchema;
+      break;
+    }
+
+    case 'tags': {
+      let tagsSchema = z.array(z.string());
+      if (field.min !== undefined) {
+        tagsSchema = tagsSchema.min(field.min, \`Add at least \${field.min} tags\`);
+      }
+      if (field.max !== undefined) {
+        tagsSchema = tagsSchema.max(field.max, \`Add at most \${field.max} tags\`);
+      }
+      schema = tagsSchema;
+      break;
+    }
+
+    case 'reference': {
+      if (field.multiple) {
+        schema = z.array(z.string());
+      } else {
+        schema = z.string();
+      }
+      break;
+    }
+
+    default: {
+      schema = z.unknown();
+    }
+  }
+
+  // Make optional if not required
+  if (!field.required) {
+    schema = schema.optional();
+  }
+
+  return schema;
+}
+
+/**
+ * Generate a Zod schema for a content type.
+ */
+export function generateContentSchema(contentType: ContentType): z.ZodObject<Record<string, z.ZodTypeAny>> {
+  const shape: Record<string, z.ZodTypeAny> = {
+    // System fields
+    id: z.string().optional(),
+    status: z.string().default('draft'),
+  };
+
+  // Add field schemas
+  for (const field of contentType.fields) {
+    if (!field.hidden) {
+      shape[field.name] = generateFieldSchema(field);
+    }
+  }
+
+  return z.object(shape);
+}
+
+// ============================================================================
+// Validation Utilities
+// ============================================================================
+
+/**
+ * Validation result with typed errors.
+ */
+export interface ValidationResult<T> {
+  success: boolean;
+  data?: T;
+  errors?: Record<string, string[]>;
+}
+
+/**
+ * Validate content data against a schema.
+ */
+export function validateContent<T>(
+  schema: z.ZodSchema<T>,
+  data: unknown
+): ValidationResult<T> {
+  const result = schema.safeParse(data);
+
+  if (result.success) {
+    return {
+      success: true,
+      data: result.data,
+    };
+  }
+
+  // Transform Zod errors into field-keyed error map
+  const errors: Record<string, string[]> = {};
+  for (const issue of result.error.issues) {
+    const path = issue.path.join('.');
+    if (!errors[path]) {
+      errors[path] = [];
+    }
+    errors[path].push(issue.message);
+  }
+
+  return {
+    success: false,
+    errors,
+  };
+}
+
+/**
+ * Get the first error message for a field.
+ */
+export function getFieldError(
+  errors: Record<string, string[]> | undefined,
+  fieldName: string
+): string | undefined {
+  return errors?.[fieldName]?.[0];
+}
+
+/**
+ * Check if a field has errors.
+ */
+export function hasFieldError(
+  errors: Record<string, string[]> | undefined,
+  fieldName: string
+): boolean {
+  return Boolean(errors?.[fieldName]?.length);
+}
+`;
+}
+//# sourceMappingURL=content-schema.js.map

package/lib/templates/content-schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-schema.js","sourceRoot":"","sources":["../../src/templates/content-schema.ts"],"names":[],"mappings":";;AAQA,4DAqQC;AA7QD;;;;;;;GAOG;AACH,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmQR,CAAC;AACF,CAAC"}

package/lib/templates/content-table.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates the content table component template.
+ *
+ * This component displays:
+ * - Table of content items for a specific type
+ * - Status badges
+ * - Edit/Delete actions
+ * - Empty state
+ *
+ * @returns Template string for app/components/admin/content-table.tsx
+ */
+export declare function getContentTableTemplate(): string;
+//# sourceMappingURL=content-table.d.ts.map

package/lib/templates/content-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-table.d.ts","sourceRoot":"","sources":["../../src/templates/content-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,CAiKhD"}