@fnd-platform/cms 1.0.0-alpha.1

package/lib/templates/content-table.js

@@ -0,0 +1,177 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getContentTableTemplate = getContentTableTemplate;
+/**
+ * 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
+ */
+function getContentTableTemplate() {
+  return `import { Link } from '@remix-run/react';
+import { Pencil, Trash2, MoreHorizontal, Plus } from 'lucide-react';
+import { Button } from '~/components/ui/button';
+import { Badge } from '~/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/components/ui/table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+
+export interface ContentItem {
+  id: string;
+  title: string;
+  status: 'draft' | 'published' | 'scheduled' | 'archived';
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ContentType {
+  name: string;
+  label: string;
+}
+
+interface ContentTableProps {
+  contentType: ContentType;
+  items: ContentItem[];
+  canEdit?: boolean;
+  canDelete?: boolean;
+}
+
+function getStatusBadgeVariant(
+  status: string
+): 'default' | 'secondary' | 'success' | 'warning' | 'outline' {
+  switch (status) {
+    case 'published':
+      return 'success';
+    case 'draft':
+      return 'secondary';
+    case 'scheduled':
+      return 'warning';
+    case 'archived':
+      return 'outline';
+    default:
+      return 'default';
+  }
+}
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export function ContentTable({
+  contentType,
+  items,
+  canEdit = true,
+  canDelete = true,
+}: ContentTableProps) {
+  if (items.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
+        <p className="text-sm text-muted-foreground">
+          No {contentType.label.toLowerCase()} found.
+        </p>
+        <Button asChild className="mt-4">
+          <Link to={\`/admin/content/\${contentType.name}/new\`}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create {contentType.label}
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[40%]">Title</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead>Updated</TableHead>
+            <TableHead className="w-[70px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={item.id}>
+              <TableCell className="font-medium">
+                <Link
+                  to={\`/admin/content/\${contentType.name}/\${item.id}\`}
+                  className="hover:underline"
+                >
+                  {item.title}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Badge
+                  variant={getStatusBadgeVariant(item.status)}
+                  className="capitalize"
+                >
+                  {item.status}
+                </Badge>
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {formatDate(item.createdAt)}
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {formatDate(item.updatedAt)}
+              </TableCell>
+              <TableCell>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <MoreHorizontal className="h-4 w-4" />
+                      <span className="sr-only">Open menu</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {canEdit && (
+                      <DropdownMenuItem asChild>
+                        <Link
+                          to={\`/admin/content/\${contentType.name}/\${item.id}\`}
+                          className="flex items-center"
+                        >
+                          <Pencil className="mr-2 h-4 w-4" />
+                          Edit
+                        </Link>
+                      </DropdownMenuItem>
+                    )}
+                    {canDelete && (
+                      <DropdownMenuItem className="text-destructive focus:text-destructive">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=content-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content-table.js","sourceRoot":"","sources":["../../src/templates/content-table.ts"],"names":[],"mappings":";;AAWA,0DAiKC;AA5KD;;;;;;;;;;GAUG;AACH,SAAgB,uBAAuB;IACrC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JR,CAAC;AACF,CAAC"}

package/lib/templates/content-types-examples.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Generates example content type definition templates.
+ *
+ * These templates provide example content types (blog-post, page)
+ * that demonstrate how to use the content type system.
+ */
+/**
+ * Generates the blog post content type template.
+ *
+ * @returns Template string for app/content-types/blog-post.ts
+ */
+export declare function getBlogPostContentTypeTemplate(): string;
+/**
+ * Generates the page content type template.
+ *
+ * @returns Template string for app/content-types/page.ts
+ */
+export declare function getPageContentTypeTemplate(): string;
+//# sourceMappingURL=content-types-examples.d.ts.map

package/lib/templates/content-types-examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-types-examples.d.ts","sourceRoot":"","sources":["../../src/templates/content-types-examples.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,wBAAgB,8BAA8B,IAAI,MAAM,CAmIvD;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyHnD"}

package/lib/templates/content-types-examples.js

@@ -0,0 +1,275 @@
+'use strict';
+/**
+ * Generates example content type definition templates.
+ *
+ * These templates provide example content types (blog-post, page)
+ * that demonstrate how to use the content type system.
+ */
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getBlogPostContentTypeTemplate = getBlogPostContentTypeTemplate;
+exports.getPageContentTypeTemplate = getPageContentTypeTemplate;
+/**
+ * Generates the blog post content type template.
+ *
+ * @returns Template string for app/content-types/blog-post.ts
+ */
+function getBlogPostContentTypeTemplate() {
+  return `/**
+ * Blog Post Content Type
+ *
+ * Defines the structure for blog posts in the CMS.
+ */
+
+import { defineContentType } from '~/lib/content-types';
+
+/**
+ * Blog post content type definition.
+ *
+ * Fields:
+ * - title: Post title (required)
+ * - slug: URL-friendly identifier (auto-generated from title)
+ * - excerpt: Short summary for listings
+ * - content: Main post content (rich text)
+ * - featuredImage: Hero image for the post
+ * - category: Post category
+ * - tags: Post tags for organization
+ * - author: Post author reference
+ * - publishedAt: Publication date
+ * - featured: Whether to feature on homepage
+ */
+export const blogPost = defineContentType({
+  name: 'blog-post',
+  label: 'Blog Posts',
+  singularLabel: 'Blog Post',
+  description: 'Blog articles and news posts',
+  icon: 'FileText',
+  titleField: 'title',
+  subtitleField: 'excerpt',
+  fields: [
+    {
+      type: 'text',
+      name: 'title',
+      label: 'Title',
+      description: 'The title of your blog post',
+      required: true,
+      placeholder: 'Enter post title...',
+      minLength: 3,
+      maxLength: 200,
+    },
+    {
+      type: 'slug',
+      name: 'slug',
+      label: 'URL Slug',
+      description: 'URL-friendly identifier (auto-generated from title)',
+      required: true,
+      sourceField: 'title',
+      prefix: '/blog/',
+    },
+    {
+      type: 'textarea',
+      name: 'excerpt',
+      label: 'Excerpt',
+      description: 'A short summary shown in post listings',
+      placeholder: 'Write a brief summary...',
+      rows: 3,
+      maxLength: 300,
+    },
+    {
+      type: 'richtext',
+      name: 'content',
+      label: 'Content',
+      description: 'The main content of your blog post',
+      required: true,
+    },
+    {
+      type: 'media',
+      name: 'featuredImage',
+      label: 'Featured Image',
+      description: 'Hero image displayed at the top of the post',
+      accept: ['image/*'],
+      maxSize: 5 * 1024 * 1024, // 5MB
+    },
+    {
+      type: 'select',
+      name: 'category',
+      label: 'Category',
+      description: 'Select a category for this post',
+      placeholder: 'Choose category...',
+      options: [
+        { value: 'news', label: 'News' },
+        { value: 'tutorials', label: 'Tutorials' },
+        { value: 'announcements', label: 'Announcements' },
+        { value: 'case-studies', label: 'Case Studies' },
+        { value: 'other', label: 'Other' },
+      ],
+    },
+    {
+      type: 'tags',
+      name: 'tags',
+      label: 'Tags',
+      description: 'Add tags to help organize your content',
+      placeholder: 'Add a tag...',
+      suggestions: ['javascript', 'typescript', 'react', 'aws', 'serverless', 'tutorial'],
+      max: 10,
+    },
+    {
+      type: 'datetime',
+      name: 'publishedAt',
+      label: 'Publish Date',
+      description: 'When should this post be published?',
+    },
+    {
+      type: 'boolean',
+      name: 'featured',
+      label: 'Featured Post',
+      description: 'Feature this post on the homepage',
+      defaultValue: false,
+    },
+  ] as const,
+});
+
+export type BlogPostData = {
+  id: string;
+  status: string;
+  title: string;
+  slug: string;
+  excerpt?: string;
+  content: string;
+  featuredImage?: string;
+  category?: string;
+  tags?: string[];
+  publishedAt?: string;
+  featured: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+`;
+}
+/**
+ * Generates the page content type template.
+ *
+ * @returns Template string for app/content-types/page.ts
+ */
+function getPageContentTypeTemplate() {
+  return `/**
+ * Page Content Type
+ *
+ * Defines the structure for static pages in the CMS.
+ */
+
+import { defineContentType } from '~/lib/content-types';
+
+/**
+ * Page content type definition.
+ *
+ * Fields:
+ * - title: Page title (required)
+ * - slug: URL path (auto-generated from title)
+ * - description: SEO description
+ * - content: Main page content (rich text)
+ * - featuredImage: OG image for social sharing
+ * - template: Page template/layout
+ * - showInNav: Whether to show in navigation
+ * - navOrder: Order in navigation
+ */
+export const page = defineContentType({
+  name: 'page',
+  label: 'Pages',
+  singularLabel: 'Page',
+  description: 'Static pages like About, Contact, etc.',
+  icon: 'File',
+  titleField: 'title',
+  fields: [
+    {
+      type: 'text',
+      name: 'title',
+      label: 'Title',
+      description: 'The page title (shown in browser tab and header)',
+      required: true,
+      placeholder: 'Enter page title...',
+      minLength: 2,
+      maxLength: 100,
+    },
+    {
+      type: 'slug',
+      name: 'slug',
+      label: 'URL Path',
+      description: 'The URL path for this page (e.g., "about" for /about)',
+      required: true,
+      sourceField: 'title',
+      prefix: '/',
+    },
+    {
+      type: 'textarea',
+      name: 'description',
+      label: 'Meta Description',
+      description: 'SEO description shown in search results',
+      placeholder: 'Write a description for search engines...',
+      rows: 2,
+      maxLength: 160,
+    },
+    {
+      type: 'richtext',
+      name: 'content',
+      label: 'Content',
+      description: 'The main content of the page',
+      required: true,
+    },
+    {
+      type: 'media',
+      name: 'featuredImage',
+      label: 'Social Image',
+      description: 'Image shown when page is shared on social media',
+      accept: ['image/*'],
+      maxSize: 2 * 1024 * 1024, // 2MB
+    },
+    {
+      type: 'select',
+      name: 'template',
+      label: 'Page Template',
+      description: 'Select a layout template for this page',
+      placeholder: 'Choose template...',
+      options: [
+        { value: 'default', label: 'Default' },
+        { value: 'full-width', label: 'Full Width' },
+        { value: 'sidebar', label: 'With Sidebar' },
+        { value: 'landing', label: 'Landing Page' },
+      ],
+      defaultValue: 'default',
+    },
+    {
+      type: 'boolean',
+      name: 'showInNav',
+      label: 'Show in Navigation',
+      description: 'Include this page in the main navigation menu',
+      defaultValue: false,
+    },
+    {
+      type: 'number',
+      name: 'navOrder',
+      label: 'Navigation Order',
+      description: 'Order in the navigation menu (lower = earlier)',
+      min: 0,
+      max: 100,
+      defaultValue: 50,
+    },
+  ] as const,
+});
+
+export type PageData = {
+  id: string;
+  status: string;
+  title: string;
+  slug: string;
+  description?: string;
+  content: string;
+  featuredImage?: string;
+  template?: string;
+  showInNav: boolean;
+  navOrder: number;
+  createdAt: string;
+  updatedAt: string;
+};
+`;
+}
+//# sourceMappingURL=content-types-examples.js.map

package/lib/templates/content-types-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-types-examples.js","sourceRoot":"","sources":["../../src/templates/content-types-examples.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;AAOH,wEAmIC;AAOD,gEAyHC;AAxQD;;;;GAIG;AACH,SAAgB,8BAA8B;IAC5C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIR,CAAC;AACF,CAAC;AAED;;;;GAIG;AACH,SAAgB,0BAA0B;IACxC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHR,CAAC;AACF,CAAC"}

package/lib/templates/content-types-registry.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generates the content types registry template.
+ *
+ * This template provides a registry for managing content types
+ * and provides functions to access them.
+ *
+ * @returns Template string for app/content-types/index.ts
+ */
+export declare function getContentTypesRegistryTemplate(): string;
+//# sourceMappingURL=content-types-registry.d.ts.map

package/lib/templates/content-types-registry.d.ts.map

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

package/lib/templates/content-types-registry.js

@@ -0,0 +1,87 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.getContentTypesRegistryTemplate = getContentTypesRegistryTemplate;
+/**
+ * Generates the content types registry template.
+ *
+ * This template provides a registry for managing content types
+ * and provides functions to access them.
+ *
+ * @returns Template string for app/content-types/index.ts
+ */
+function getContentTypesRegistryTemplate() {
+  return `/**
+ * Content Types Registry
+ *
+ * This module provides a central registry for all content types
+ * and utilities for accessing them.
+ */
+
+import type { ContentType } from '~/lib/content-types';
+import { blogPost } from './blog-post';
+import { page } from './page';
+
+// ============================================================================
+// Registry
+// ============================================================================
+
+/**
+ * Registry of all content types.
+ */
+const contentTypeRegistry = new Map<string, ContentType>();
+
+/**
+ * Register a content type in the registry.
+ */
+export function registerContentType(contentType: ContentType): void {
+  if (contentTypeRegistry.has(contentType.name)) {
+    console.warn(\`Content type "\${contentType.name}" is already registered. Overwriting.\`);
+  }
+  contentTypeRegistry.set(contentType.name, contentType);
+}
+
+/**
+ * Get a content type by name.
+ */
+export function getContentType(name: string): ContentType | undefined {
+  return contentTypeRegistry.get(name);
+}
+
+/**
+ * Get all registered content types.
+ */
+export function getAllContentTypes(): ContentType[] {
+  return Array.from(contentTypeRegistry.values());
+}
+
+/**
+ * Check if a content type exists.
+ */
+export function hasContentType(name: string): boolean {
+  return contentTypeRegistry.has(name);
+}
+
+/**
+ * Get content type names.
+ */
+export function getContentTypeNames(): string[] {
+  return Array.from(contentTypeRegistry.keys());
+}
+
+// ============================================================================
+// Register Default Content Types
+// ============================================================================
+
+// Register the built-in content types
+registerContentType(blogPost);
+registerContentType(page);
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export { blogPost } from './blog-post';
+export { page } from './page';
+`;
+}
+//# sourceMappingURL=content-types-registry.js.map

package/lib/templates/content-types-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-types-registry.js","sourceRoot":"","sources":["../../src/templates/content-types-registry.ts"],"names":[],"mappings":";;AAQA,0EA0EC;AAlFD;;;;;;;GAOG;AACH,SAAgB,+BAA+B;IAC7C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwER,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Generates the content types definition template.
+ *
+ * This template provides the `defineContentType()` helper function and
+ * TypeScript interfaces for defining custom content structures.
+ *
+ * @returns Template string for app/lib/content-types.ts
+ */
+export declare function getContentTypesTemplate(): string;
+//# sourceMappingURL=content-types.d.ts.map

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

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