@fnd-platform/cms 1.0.0-alpha.1

package/lib/templates/editor/toolbar.d.ts

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

package/lib/templates/editor/toolbar.d.ts.map

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

package/lib/templates/editor/toolbar.js

@@ -0,0 +1,272 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getEditorToolbarTemplate = getEditorToolbarTemplate;
+/**
+ * Generates the editor toolbar component template.
+ *
+ * @returns Template string for app/components/editor/toolbar.tsx
+ */
+function getEditorToolbarTemplate() {
+  return `import * as React from 'react';
+import type { Editor } from '@tiptap/react';
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Code,
+  Link,
+  Unlink,
+  Image,
+} from 'lucide-react';
+import { Button } from '~/components/ui/button';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '~/components/ui/popover';
+import { cn } from '~/lib/utils';
+
+export interface EditorToolbarProps {
+  editor: Editor | null;
+  onImageSelect?: () => void;
+  disabled?: boolean;
+}
+
+interface ToolbarButtonProps {
+  onClick: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  title: string;
+  children: React.ReactNode;
+}
+
+function ToolbarButton({
+  onClick,
+  isActive,
+  disabled,
+  title,
+  children,
+}: ToolbarButtonProps) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={cn(
+        'h-8 w-8 p-0',
+        isActive && 'bg-accent text-accent-foreground'
+      )}
+    >
+      {children}
+    </Button>
+  );
+}
+
+function ToolbarDivider() {
+  return <div className="w-px h-6 bg-border mx-1" />;
+}
+
+export function EditorToolbar({
+  editor,
+  onImageSelect,
+  disabled = false,
+}: EditorToolbarProps) {
+  const [linkUrl, setLinkUrl] = React.useState('');
+  const [linkPopoverOpen, setLinkPopoverOpen] = React.useState(false);
+
+  if (!editor) {
+    return null;
+  }
+
+  const handleSetLink = () => {
+    if (linkUrl) {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: linkUrl })
+        .run();
+    }
+    setLinkUrl('');
+    setLinkPopoverOpen(false);
+  };
+
+  const handleRemoveLink = () => {
+    editor.chain().focus().unsetLink().run();
+    setLinkPopoverOpen(false);
+  };
+
+  const openLinkPopover = () => {
+    const previousUrl = editor.getAttributes('link').href || '';
+    setLinkUrl(previousUrl);
+    setLinkPopoverOpen(true);
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-0.5 border-b bg-muted/30 p-1">
+      {/* Text formatting */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        isActive={editor.isActive('bold')}
+        disabled={disabled}
+        title="Bold"
+      >
+        <Bold className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        isActive={editor.isActive('italic')}
+        disabled={disabled}
+        title="Italic"
+      >
+        <Italic className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        isActive={editor.isActive('strike')}
+        disabled={disabled}
+        title="Strikethrough"
+      >
+        <Strikethrough className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Headings */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        isActive={editor.isActive('heading', { level: 1 })}
+        disabled={disabled}
+        title="Heading 1"
+      >
+        <Heading1 className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        isActive={editor.isActive('heading', { level: 2 })}
+        disabled={disabled}
+        title="Heading 2"
+      >
+        <Heading2 className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        isActive={editor.isActive('heading', { level: 3 })}
+        disabled={disabled}
+        title="Heading 3"
+      >
+        <Heading3 className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Lists */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        isActive={editor.isActive('bulletList')}
+        disabled={disabled}
+        title="Bullet List"
+      >
+        <List className="h-4 w-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        isActive={editor.isActive('orderedList')}
+        disabled={disabled}
+        title="Numbered List"
+      >
+        <ListOrdered className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Code */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        isActive={editor.isActive('codeBlock')}
+        disabled={disabled}
+        title="Code Block"
+      >
+        <Code className="h-4 w-4" />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      {/* Link */}
+      <Popover open={linkPopoverOpen} onOpenChange={setLinkPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={disabled}
+            title="Insert Link"
+            onClick={openLinkPopover}
+            className={cn(
+              'h-8 w-8 p-0',
+              editor.isActive('link') && 'bg-accent text-accent-foreground'
+            )}
+          >
+            <Link className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80" align="start">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="link-url">URL</Label>
+              <Input
+                id="link-url"
+                placeholder="https://example.com"
+                value={linkUrl}
+                onChange={(e) => setLinkUrl(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    handleSetLink();
+                  }
+                }}
+              />
+            </div>
+            <div className="flex justify-between">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleRemoveLink}
+                disabled={!editor.isActive('link')}
+              >
+                <Unlink className="h-4 w-4 mr-2" />
+                Remove
+              </Button>
+              <Button type="button" size="sm" onClick={handleSetLink}>
+                Apply
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Image placeholder for Sprint 5 */}
+      <ToolbarButton
+        onClick={() => onImageSelect?.()}
+        disabled={disabled || !onImageSelect}
+        title="Insert Image"
+      >
+        <Image className="h-4 w-4" />
+      </ToolbarButton>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=toolbar.js.map

package/lib/templates/editor/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../src/templates/editor/toolbar.ts"],"names":[],"mappings":";;AAKA,4DAsQC;AA3QD;;;;GAIG;AACH,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQR,CAAC;AACF,CAAC"}

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

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

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

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

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

@@ -0,0 +1,76 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getBooleanFieldTemplate = getBooleanFieldTemplate;
+/**
+ * Generates the boolean field component template.
+ *
+ * @returns Template string for app/components/form-fields/boolean-field.tsx
+ */
+function getBooleanFieldTemplate() {
+  return `import type { BooleanFieldDefinition } from '~/lib/content-types';
+import { Label } from '~/components/ui/label';
+import { cn } from '~/lib/utils';
+import type { FieldProps } from './index';
+
+/**
+ * Boolean toggle/checkbox field.
+ */
+export function BooleanField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<BooleanFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+  const isChecked = Boolean(value);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          role="switch"
+          id={id}
+          aria-checked={isChecked}
+          onClick={() => !disabled && onChange(!isChecked)}
+          disabled={disabled}
+          className={cn(
+            'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            isChecked ? 'bg-primary' : 'bg-input',
+            disabled && 'cursor-not-allowed opacity-50'
+          )}
+          aria-describedby={error ? \`\${id}-error\` : field.description ? \`\${id}-description\` : undefined}
+        >
+          <span
+            className={cn(
+              'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
+              isChecked ? 'translate-x-5' : 'translate-x-0'
+            )}
+          />
+        </button>
+        <input
+          type="hidden"
+          name={field.name}
+          value={isChecked ? 'true' : 'false'}
+        />
+        <Label htmlFor={id} className="cursor-pointer">
+          {field.label}
+        </Label>
+      </div>
+      {field.description && !error && (
+        <p id={\`\${id}-description\`} className="text-sm text-muted-foreground ml-14">
+          {field.description}
+        </p>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive ml-14">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=boolean-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-field.js","sourceRoot":"","sources":["../../../src/templates/form-fields/boolean-field.ts"],"names":[],"mappings":";;AAKA,0DAkEC;AAvED;;;;GAIG;AACH,SAAgB,uBAAuB;IACrC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgER,CAAC;AACF,CAAC"}

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

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

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

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

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

@@ -0,0 +1,61 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getDateFieldTemplate = getDateFieldTemplate;
+/**
+ * Generates the date field component template.
+ *
+ * @returns Template string for app/components/form-fields/date-field.tsx
+ */
+function getDateFieldTemplate() {
+  return `import type { DateFieldDefinition } 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';
+
+/**
+ * Date picker field.
+ */
+export function DateField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<DateFieldDefinition>) {
+  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>
+      <Input
+        id={id}
+        name={field.name}
+        type="date"
+        value={(value as string) ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        min={field.min}
+        max={field.max}
+        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>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=date-field.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,87 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getDatetimeFieldTemplate = getDatetimeFieldTemplate;
+/**
+ * Generates the datetime field component template.
+ *
+ * @returns Template string for app/components/form-fields/datetime-field.tsx
+ */
+function getDatetimeFieldTemplate() {
+  return `import type { DatetimeFieldDefinition } 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';
+
+/**
+ * Date and time picker field.
+ */
+export function DatetimeField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: FieldProps<DatetimeFieldDefinition>) {
+  const id = \`field-\${field.name}\`;
+
+  // Convert ISO string to datetime-local format
+  const formatValue = (isoString: string | undefined): string => {
+    if (!isoString) return '';
+    try {
+      const date = new Date(isoString);
+      // Format as YYYY-MM-DDTHH:mm for datetime-local input
+      return date.toISOString().slice(0, 16);
+    } catch {
+      return '';
+    }
+  };
+
+  // Convert datetime-local format to ISO string
+  const handleChange = (localValue: string) => {
+    if (!localValue) {
+      onChange('');
+      return;
+    }
+    try {
+      const date = new Date(localValue);
+      onChange(date.toISOString());
+    } catch {
+      onChange(localValue);
+    }
+  };
+
+  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="datetime-local"
+        value={formatValue(value as string)}
+        onChange={(e) => handleChange(e.target.value)}
+        disabled={disabled}
+        min={field.min ? formatValue(field.min) : undefined}
+        max={field.max ? formatValue(field.max) : undefined}
+        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>
+      )}
+      {error && (
+        <p id={\`\${id}-error\`} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=datetime-field.js.map

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

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

package/lib/templates/form-fields/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Form field template exports and DynamicField renderer.
+ */
+export { getTextFieldTemplate } from './text-field';
+export { getTextareaFieldTemplate } from './textarea-field';
+export { getRichtextFieldTemplate } from './richtext-field';
+export { getSlugFieldTemplate } from './slug-field';
+export { getMediaFieldTemplate } from './media-field';
+export { getSelectFieldTemplate } from './select-field';
+export { getMultiselectFieldTemplate } from './multiselect-field';
+export { getDateFieldTemplate } from './date-field';
+export { getDatetimeFieldTemplate } from './datetime-field';
+export { getBooleanFieldTemplate } from './boolean-field';
+export { getNumberFieldTemplate } from './number-field';
+export { getTagsFieldTemplate } from './tags-field';
+export { getReferenceFieldTemplate } from './reference-field';
+/**
+ * Generates the form fields index with DynamicField component.
+ *
+ * @returns Template string for app/components/form-fields/index.ts
+ */
+export declare function getFormFieldsIndexTemplate(): string;
+//# sourceMappingURL=index.d.ts.map

package/lib/templates/form-fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/form-fields/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CA6JnD"}