@fnd-platform/cms 1.0.0-alpha.1

package/lib/templates/form-fields/number-field.js

@@ -0,0 +1,87 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getNumberFieldTemplate = getNumberFieldTemplate;
+/**
+ * Generates the number field component template.
+ *
+ * @returns Template string for app/components/form-fields/number-field.tsx
+ */
+function getNumberFieldTemplate() {
+  return `import type { NumberFieldDefinition } from '~/lib/content-types';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { cn } from '~/lib/utils';
+import type { FieldProps } from './index';
+
+/**
+ * Numeric input field.
+ */
+export function NumberField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<NumberFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+
+  const handleChange = (inputValue: string) => {
+    if (inputValue === '') {
+      onChange(undefined);
+      return;
+    }
+
+    const numValue = field.decimal
+      ? parseFloat(inputValue)
+      : parseInt(inputValue, 10);
+
+    if (!isNaN(numValue)) {
+      onChange(numValue);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(field.required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+        {field.label}
+      </Label>
+      <Input
+        id={id}
+        name={field.name}
+        type="number"
+        value={value !== undefined && value !== null ? String(value) : ''}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={field.placeholder}
+        disabled={disabled}
+        min={field.min}
+        max={field.max}
+        step={field.step ?? (field.decimal ? 'any' : 1)}
+        className={cn(error && 'border-destructive')}
+        aria-invalid={!!error}
+        aria-describedby={error ? \`\${id}-error\` : field.description ? \`\${id}-description\` : undefined}
+      />
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+      {(field.min !== undefined || field.max !== undefined) && !error && !field.description && (
+        <p className="text-sm text-muted-foreground">
+          {field.min !== undefined && field.max !== undefined
+            ? \`Value must be between \${field.min} and \${field.max}\`
+            : field.min !== undefined
+              ? \`Minimum value: \${field.min}\`
+              : \`Maximum value: \${field.max}\`}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=number-field.js.map

package/lib/templates/form-fields/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/number-field.ts"],"names":[],"mappings":";;AAKA,wDA6EC;AAlFD;;;;GAIG;AACH,SAAgB,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ER,CAAC;AACF,CAAC"}

package/lib/templates/form-fields/reference-field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates the reference field component template.
+ *
+ * This is a placeholder that will be fully implemented in a later sprint.
+ *
+ * @returns Template string for app/components/form-fields/reference-field.tsx
+ */
+export declare function getReferenceFieldTemplate(): string;
+//# sourceMappingURL=reference-field.d.ts.map

package/lib/templates/form-fields/reference-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reference-field.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/reference-field.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CAqIlD"}

package/lib/templates/form-fields/reference-field.js

@@ -0,0 +1,145 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getReferenceFieldTemplate = getReferenceFieldTemplate;
+/**
+ * Generates the reference field component template.
+ *
+ * This is a placeholder that will be fully implemented in a later sprint.
+ *
+ * @returns Template string for app/components/form-fields/reference-field.tsx
+ */
+function getReferenceFieldTemplate() {
+  return `import { Link2, X, Search } from 'lucide-react';
+import type { ReferenceFieldDefinition } from '~/lib/content-types';
+import { Label } from '~/components/ui/label';
+import { Button } from '~/components/ui/button';
+import { Badge } from '~/components/ui/badge';
+import { cn } from '~/lib/utils';
+import type { FieldProps } from './index';
+
+/**
+ * Content reference field.
+ *
+ * Note: This is a placeholder component. Full reference picking
+ * functionality will be implemented in a later sprint with a
+ * content browser modal.
+ */
+export function ReferenceField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<ReferenceFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+  const references = field.multiple
+    ? (Array.isArray(value) ? value : [])
+    : (value ? [value as string] : []);
+
+  const handleRemove = (refId: string) => {
+    if (disabled) return;
+    if (field.multiple) {
+      onChange((references as string[]).filter((r) => r !== refId));
+    } else {
+      onChange('');
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label className={cn(field.required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+        {field.label}
+      </Label>
+      <div
+        className={cn(
+          'border rounded-md p-4',
+          error && 'border-destructive'
+        )}
+      >
+        {references.length > 0 ? (
+          <div className="space-y-2">
+            {references.map((refId) => (
+              <div
+                key={refId}
+                className="flex items-center justify-between gap-2 p-2 bg-muted rounded-md"
+              >
+                <div className="flex items-center gap-2">
+                  <Link2 className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-mono">{refId}</span>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => handleRemove(refId)}
+                  disabled={disabled}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+            {field.multiple && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="w-full"
+                disabled
+              >
+                <Search className="h-4 w-4 mr-2" />
+                Add Reference
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-6">
+            <div className="mx-auto w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3">
+              <Link2 className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium mb-1">Content Reference</p>
+            <p className="text-xs text-muted-foreground mb-3">
+              Link to {field.contentTypes.join(', ')}
+            </p>
+            <Button type="button" variant="outline" size="sm" disabled>
+              <Search className="h-4 w-4 mr-2" />
+              Browse Content
+            </Button>
+            <p className="text-xs text-muted-foreground mt-2">
+              Reference browser coming soon
+            </p>
+          </div>
+        )}
+      </div>
+      {/* Hidden inputs for form submission */}
+      {field.multiple ? (
+        references.map((refId) => (
+          <input key={refId} type="hidden" name={\`\${field.name}[]\`} value={refId} />
+        ))
+      ) : references.length > 0 ? (
+        <input type="hidden" name={field.name} value={references[0]} />
+      ) : null}
+      <div className="flex gap-2 flex-wrap">
+        <span className="text-sm text-muted-foreground">Accepts:</span>
+        {field.contentTypes.map((type) => (
+          <Badge key={type} variant="outline" className="text-xs">
+            {type}
+          </Badge>
+        ))}
+      </div>
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=reference-field.js.map

package/lib/templates/form-fields/reference-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reference-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/reference-field.ts"],"names":[],"mappings":";;AAOA,8DAqIC;AA5ID;;;;;;GAMG;AACH,SAAgB,yBAAyB;IACvC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIR,CAAC;AACF,CAAC"}

package/lib/templates/form-fields/richtext-field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates the rich text field component template.
+ *
+ * Uses Tiptap-based RichTextEditor for WYSIWYG content editing.
+ *
+ * @returns Template string for app/components/form-fields/richtext-field.tsx
+ */
+export declare function getRichtextFieldTemplate(): string;
+//# sourceMappingURL=richtext-field.d.ts.map

package/lib/templates/form-fields/richtext-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"richtext-field.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/richtext-field.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAgDjD"}

package/lib/templates/form-fields/richtext-field.js

@@ -0,0 +1,60 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getRichtextFieldTemplate = getRichtextFieldTemplate;
+/**
+ * Generates the rich text field component template.
+ *
+ * Uses Tiptap-based RichTextEditor for WYSIWYG content editing.
+ *
+ * @returns Template string for app/components/form-fields/richtext-field.tsx
+ */
+function getRichtextFieldTemplate() {
+  return `import type { RichtextFieldDefinition } from '~/lib/content-types';
+import { Label } from '~/components/ui/label';
+import { RichTextEditor } from '~/components/editor/rich-text-editor';
+import { cn } from '~/lib/utils';
+import type { FieldProps } from './index';
+
+/**
+ * Rich text editor field.
+ *
+ * Provides a full WYSIWYG editing experience using Tiptap.
+ * Supports bold, italic, headings, lists, code blocks, links, and images.
+ */
+export function RichtextField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<RichtextFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(field.required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+        {field.label}
+      </Label>
+      <RichTextEditor
+        value={(value as string) ?? ''}
+        onChange={onChange}
+        placeholder={field.placeholder ?? 'Start writing...'}
+        disabled={disabled}
+        error={!!error}
+      />
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=richtext-field.js.map

package/lib/templates/form-fields/richtext-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richtext-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/richtext-field.ts"],"names":[],"mappings":";;AAOA,4DAgDC;AAvDD;;;;;;GAMG;AACH,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CR,CAAC;AACF,CAAC"}

package/lib/templates/form-fields/select-field.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates the select field component template.
+ *
+ * @returns Template string for app/components/form-fields/select-field.tsx
+ */
+export declare function getSelectFieldTemplate(): string;
+//# sourceMappingURL=select-field.d.ts.map

package/lib/templates/form-fields/select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/select-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CA4D/C"}

package/lib/templates/form-fields/select-field.js

@@ -0,0 +1,70 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getSelectFieldTemplate = getSelectFieldTemplate;
+/**
+ * Generates the select field component template.
+ *
+ * @returns Template string for app/components/form-fields/select-field.tsx
+ */
+function getSelectFieldTemplate() {
+  return `import type { SelectFieldDefinition } from '~/lib/content-types';
+import { Label } from '~/components/ui/label';
+import { cn } from '~/lib/utils';
+import type { FieldProps } from './index';
+
+/**
+ * Single select dropdown field.
+ */
+export function SelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<SelectFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(field.required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+        {field.label}
+      </Label>
+      <select
+        id={id}
+        name={field.name}
+        value={(value as string) ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive',
+          !value && 'text-muted-foreground'
+        )}
+        aria-invalid={!!error}
+        aria-describedby={error ? \`\${id}-error\` : field.description ? \`\${id}-description\` : undefined}
+      >
+        <option value="" disabled>
+          {field.placeholder ?? 'Select an option...'}
+        </option>
+        {field.options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=select-field.js.map

package/lib/templates/form-fields/select-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/select-field.ts"],"names":[],"mappings":";;AAKA,wDA4DC;AAjED;;;;GAIG;AACH,SAAgB,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DR,CAAC;AACF,CAAC"}

package/lib/templates/form-fields/slug-field.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates the slug field component template.
+ *
+ * @returns Template string for app/components/form-fields/slug-field.tsx
+ */
+export declare function getSlugFieldTemplate(): string;
+//# sourceMappingURL=slug-field.d.ts.map

package/lib/templates/form-fields/slug-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slug-field.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/slug-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAqI7C"}

package/lib/templates/form-fields/slug-field.js

@@ -0,0 +1,143 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getSlugFieldTemplate = getSlugFieldTemplate;
+/**
+ * Generates the slug field component template.
+ *
+ * @returns Template string for app/components/form-fields/slug-field.tsx
+ */
+function getSlugFieldTemplate() {
+  return `import { useState, useEffect, useCallback } from 'react';
+import { Lock, Unlock, RefreshCw } from 'lucide-react';
+import type { SlugFieldDefinition } from '~/lib/content-types';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { Button } from '~/components/ui/button';
+import { cn } from '~/lib/utils';
+import { generateSlug } from '~/lib/slug-utils';
+import type { FieldProps } from './index';
+
+/**
+ * URL slug field with auto-generation from source field.
+ */
+export function SlugField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+  formData,
+}: FieldProps<SlugFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+  const [isLocked, setIsLocked] = useState(true);
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+
+  // Get the source field value for auto-generation
+  const sourceValue = formData?.[field.sourceField] as string | undefined;
+
+  // Auto-generate slug from source field when locked
+  const regenerateSlug = useCallback(() => {
+    if (sourceValue) {
+      const newSlug = generateSlug(sourceValue);
+      onChange(newSlug);
+    }
+  }, [sourceValue, onChange]);
+
+  // Auto-update slug when source changes and slug is locked
+  useEffect(() => {
+    if (isLocked && !hasBeenEdited && sourceValue) {
+      regenerateSlug();
+    }
+  }, [isLocked, hasBeenEdited, sourceValue, regenerateSlug]);
+
+  const handleChange = (newValue: string) => {
+    // Normalize to valid slug characters
+    const normalized = newValue.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-');
+    onChange(normalized);
+    setHasBeenEdited(true);
+  };
+
+  const toggleLock = () => {
+    if (isLocked) {
+      setIsLocked(false);
+    } else {
+      setIsLocked(true);
+      setHasBeenEdited(false);
+      regenerateSlug();
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id} className={cn(field.required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+        {field.label}
+      </Label>
+      <div className="flex gap-2">
+        {field.prefix && (
+          <span className="flex items-center px-3 text-sm text-muted-foreground bg-muted rounded-l-md border border-r-0">
+            {field.prefix}
+          </span>
+        )}
+        <div className="relative flex-1">
+          <Input
+            id={id}
+            name={field.name}
+            type="text"
+            value={(value as string) ?? ''}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={disabled || isLocked}
+            className={cn(
+              field.prefix && 'rounded-l-none',
+              'pr-20',
+              error && 'border-destructive'
+            )}
+            aria-invalid={!!error}
+            aria-describedby={error ? \`\${id}-error\` : field.description ? \`\${id}-description\` : undefined}
+          />
+          <div className="absolute right-1 top-1/2 -translate-y-1/2 flex gap-1">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={regenerateSlug}
+              disabled={disabled || !sourceValue}
+              title="Regenerate from title"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={toggleLock}
+              disabled={disabled}
+              title={isLocked ? 'Unlock for manual editing' : 'Lock to auto-generate'}
+            >
+              {isLocked ? <Lock className="h-4 w-4" /> : <Unlock className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+      {!field.description && !error && (
+        <p className="text-sm text-muted-foreground">
+          {isLocked ? 'Auto-generated from ' + field.sourceField + '. Click unlock to edit manually.' : 'Manual editing enabled. Click lock to auto-generate.'}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=slug-field.js.map

package/lib/templates/form-fields/slug-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slug-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/slug-field.ts"],"names":[],"mappings":";;AAKA,oDAqIC;AA1ID;;;;GAIG;AACH,SAAgB,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIR,CAAC;AACF,CAAC"}

package/lib/templates/form-fields/tags-field.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates the tags field component template.
+ *
+ * @returns Template string for app/components/form-fields/tags-field.tsx
+ */
+export declare function getTagsFieldTemplate(): string;
+//# sourceMappingURL=tags-field.d.ts.map

package/lib/templates/form-fields/tags-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-field.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/tags-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAkK7C"}