@fnd-platform/cms 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 fnd-platform contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,283 @@
+# @fnd-platform/cms
+
+Projen project class for generating headless CMS admin interfaces with Remix, shadcn/ui, content modeling, and media management in fnd-platform monorepos.
+
+## Installation
+
+```bash
+npm install -D @fnd-platform/cms
+# or
+pnpm add -D @fnd-platform/cms
+```
+
+## Quick Start
+
+Add a CMS package to your monorepo in `.projenrc.ts`:
+
+```typescript
+import { FndMonorepoProject } from '@fnd-platform/core';
+import { FndApiProject } from '@fnd-platform/api';
+import { FndCmsProject } from '@fnd-platform/cms';
+
+const monorepo = new FndMonorepoProject({
+  name: 'my-app',
+  defaultReleaseBranch: 'main',
+});
+
+const api = new FndApiProject({
+  parent: monorepo,
+  name: 'api',
+  outdir: 'packages/api',
+});
+
+const cms = new FndCmsProject({
+  parent: monorepo,
+  name: 'cms',
+  outdir: 'packages/cms',
+  api: api, // Link to API for content operations
+  port: 3001,
+  mediaUpload: true,
+  richTextEditor: 'tiptap',
+});
+
+monorepo.synth();
+```
+
+## Configuration Options
+
+| Option           | Type                      | Default           | Description                  |
+| ---------------- | ------------------------- | ----------------- | ---------------------------- |
+| `parent`         | `FndMonorepoProject`      | **required**      | Parent monorepo              |
+| `name`           | `string`                  | **required**      | Package name                 |
+| `api`            | `FndApiProject`           | **required**      | Linked API project           |
+| `outdir`         | `string`                  | `packages/{name}` | Output directory             |
+| `port`           | `number`                  | `3001`            | Development server port      |
+| `mediaUpload`    | `boolean`                 | `true`            | Enable media upload features |
+| `richTextEditor` | `'tiptap'` \| `'lexical'` | `'tiptap'`        | Rich text editor library     |
+| `shadcnTheme`    | `ShadcnTheme`             | `'zinc'`          | Theme color                  |
+
+## What Gets Generated
+
+```
+packages/cms/
+├── app/
+│   ├── routes/
+│   │   ├── _admin.tsx                  # Admin layout (protected)
+│   │   ├── _admin._index.tsx           # Dashboard
+│   │   ├── _admin.content.tsx          # Content list
+│   │   ├── _admin.content.$type.tsx    # Content by type
+│   │   ├── _admin.content.$type.$id.tsx # Content editor
+│   │   ├── _admin.content.$type.new.tsx # New content
+│   │   ├── _admin.media.tsx            # Media library
+│   │   ├── _admin.settings.tsx         # Settings
+│   │   └── login.tsx                   # Admin login
+│   ├── components/
+│   │   ├── admin/                      # Admin UI components
+│   │   ├── editor/                     # Rich text editor
+│   │   └── ui/                         # shadcn/ui components
+│   ├── lib/
+│   │   ├── api.server.ts               # API client
+│   │   ├── auth.server.ts              # Auth utilities
+│   │   └── content-types.ts            # Content type definitions
+│   └── content-types/                  # Content type definitions
+├── package.json
+├── tailwind.config.js
+├── vite.config.ts
+└── tsconfig.json
+```
+
+## Features
+
+- **Admin Interface** - Clean, modern admin UI built with shadcn/ui
+- **Content Modeling** - Define flexible content types with various field types
+- **Draft/Publish Workflow** - Content review and publishing workflow
+- **Media Library** - Upload and manage images, videos, and files
+- **Rich Text Editor** - Tiptap or Lexical-based content editing
+- **Role-Based Access** - Admin, editor, and viewer roles
+
+## Examples
+
+### Content Type Definition
+
+```typescript
+// app/content-types/blog-post.ts
+import { defineContentType } from '~/lib/content-types';
+
+export const blogPost = defineContentType({
+  name: 'blog-post',
+  label: 'Blog Post',
+  icon: 'FileText',
+
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      label: 'Title',
+      required: true,
+      maxLength: 200,
+    },
+    {
+      name: 'slug',
+      type: 'slug',
+      label: 'URL Slug',
+      required: true,
+      source: 'title',
+    },
+    {
+      name: 'content',
+      type: 'richtext',
+      label: 'Content',
+      required: true,
+    },
+    {
+      name: 'featuredImage',
+      type: 'media',
+      label: 'Featured Image',
+      accept: ['image/*'],
+    },
+    {
+      name: 'publishedAt',
+      type: 'datetime',
+      label: 'Publish Date',
+    },
+  ],
+});
+```
+
+### Admin Dashboard Route
+
+```typescript
+// app/routes/_admin._index.tsx
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import { requireAdmin } from '~/lib/auth.server';
+import { contentApi } from '~/lib/api.server';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  await requireAdmin(request);
+
+  const [stats, recentContent] = await Promise.all([
+    contentApi.getStats(),
+    contentApi.list({ limit: 10, sort: '-updatedAt' }),
+  ]);
+
+  return json({ stats, recentContent });
+};
+
+export default function Dashboard() {
+  const { stats, recentContent } = useLoaderData<typeof loader>();
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      {/* Dashboard content */}
+    </div>
+  );
+}
+```
+
+### Content Editor Route
+
+```typescript
+// app/routes/_admin.content.$type.$id.tsx
+import { json, redirect, type ActionFunctionArgs } from '@remix-run/node';
+import { requireAdmin } from '~/lib/auth.server';
+import { contentApi } from '~/lib/api.server';
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+  await requireAdmin(request);
+
+  const formData = await request.formData();
+  const intent = formData.get('intent');
+
+  if (intent === 'save') {
+    const data = Object.fromEntries(formData);
+    await contentApi.update(params.id!, data);
+    return json({ success: true });
+  }
+
+  if (intent === 'publish') {
+    await contentApi.publish(params.id!);
+    return json({ success: true });
+  }
+
+  if (intent === 'delete') {
+    await contentApi.delete(params.id!);
+    return redirect(`/admin/content/${params.type}`);
+  }
+
+  return json({ error: 'Invalid action' }, { status: 400 });
+};
+```
+
+## Field Types
+
+| Type        | Description       | Options                |
+| ----------- | ----------------- | ---------------------- |
+| `text`      | Single line text  | `maxLength`, `pattern` |
+| `textarea`  | Multi-line text   | `maxLength`, `rows`    |
+| `richtext`  | Rich text editor  | `toolbar`, `formats`   |
+| `number`    | Numeric input     | `min`, `max`, `step`   |
+| `boolean`   | Toggle/checkbox   | `default`              |
+| `select`    | Dropdown select   | `options`              |
+| `date`      | Date picker       | `min`, `max`           |
+| `datetime`  | Date and time     | `min`, `max`           |
+| `slug`      | URL slug          | `source`               |
+| `media`     | Media picker      | `accept`, `multiple`   |
+| `reference` | Content reference | `referenceType`        |
+| `tags`      | Tag input         | `suggestions`          |
+
+## Content Status
+
+| Status      | Description              |
+| ----------- | ------------------------ |
+| `draft`     | Being edited, not public |
+| `published` | Live and visible         |
+| `scheduled` | Will publish at set time |
+| `archived`  | Hidden but preserved     |
+
+## Development
+
+```bash
+# Start development server
+cd packages/cms
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## API Reference
+
+See the [full API documentation](../../docs/api/modules/cms_src.html) for detailed type definitions and examples.
+
+### Project Class
+
+- `FndCmsProject` - Projen project class for CMS packages
+
+### Types
+
+```typescript
+import type { FndCmsProjectOptions } from '@fnd-platform/cms';
+```
+
+## Requirements
+
+- Node.js 20+
+- pnpm 8+
+- @fnd-platform/core
+- @fnd-platform/api (for API linking)
+
+## Related
+
+- [@fnd-platform/core](../core/README.md) - Core Projen project classes
+- [@fnd-platform/api](../api/README.md) - API package for backend
+- [@fnd-platform/frontend](../frontend/README.md) - Public-facing frontend
+- [@fnd-platform/cognito-auth](../cognito-auth/README.md) - Authentication
+
+## License
+
+MIT

package/lib/cms-project.d.ts

@@ -0,0 +1,127 @@
+import { FndFrontendProject } from '@fnd-platform/frontend';
+import type { FndCmsProjectOptions } from './options';
+/**
+ * Creates a CMS admin package within an fnd-platform monorepo.
+ *
+ * This class generates a complete CMS admin interface scaffold with:
+ * - Remix app structure (inherited from FndFrontendProject)
+ * - Protected admin routes with authentication
+ * - Admin layout and dashboard
+ * - shadcn/ui components for admin UI
+ *
+ * The CMS extends the frontend project and adds admin-specific functionality.
+ * Authentication is always enabled for CMS (admin access required).
+ *
+ * @example
+ * ```typescript
+ * import { FndMonorepoProject } from '@fnd-platform/core';
+ * import { FndApiProject } from '@fnd-platform/api';
+ * import { FndCmsProject } from '@fnd-platform/cms';
+ *
+ * const monorepo = new FndMonorepoProject({
+ *   name: 'my-app',
+ *   defaultReleaseBranch: 'main',
+ * });
+ *
+ * const api = new FndApiProject({
+ *   parent: monorepo,
+ *   name: 'api',
+ * });
+ *
+ * const cms = new FndCmsProject({
+ *   parent: monorepo,
+ *   name: 'cms',
+ *   api: api,
+ * });
+ *
+ * monorepo.synth();
+ * ```
+ */
+export declare class FndCmsProject extends FndFrontendProject {
+  /**
+   * Whether media upload functionality is enabled.
+   */
+  readonly mediaUpload: boolean;
+  /**
+   * Rich text editor to use for content editing.
+   */
+  readonly richTextEditor: 'tiptap' | 'lexical';
+  /**
+   * Creates a new FndCmsProject.
+   *
+   * @param options - Configuration options for the CMS project
+   * @throws {Error} If required options are missing
+   */
+  constructor(options: FndCmsProjectOptions);
+  /**
+   * Generates additional shadcn/ui components for the CMS.
+   *
+   * Creates:
+   * - badge.tsx - Status badge component
+   * - avatar.tsx - User avatar component
+   * - dropdown-menu.tsx - Dropdown menu component
+   * - table.tsx - Table component
+   * - popover.tsx - Popover component for link dialogs
+   */
+  private generateUiComponents;
+  /**
+   * Generates the admin components for the CMS.
+   *
+   * Creates:
+   * - sidebar.tsx - Admin sidebar navigation
+   * - header.tsx - Admin header with user menu
+   * - breadcrumbs.tsx - Breadcrumb navigation
+   * - dashboard-stats.tsx - Dashboard statistics cards
+   * - recent-content.tsx - Recent content list
+   * - content-table.tsx - Content list table
+   */
+  private generateAdminComponents;
+  /**
+   * Generates the admin routes for the CMS.
+   *
+   * Creates:
+   * - _admin.tsx - Admin layout with sidebar and header
+   * - _admin._index.tsx - Admin dashboard with stats
+   * - _admin.content.tsx - Content section layout
+   * - _admin.content._index.tsx - Content overview
+   * - _admin.content.$type.tsx - Content type list
+   */
+  private generateAdminRoutes;
+  /**
+   * Generates the content type definition system.
+   *
+   * Creates:
+   * - app/lib/content-types.ts - Content type definitions and interfaces
+   * - app/lib/content-schema.ts - Zod schema generation utilities
+   * - app/lib/slug-utils.ts - Slug generation utilities
+   * - app/content-types/index.ts - Content type registry
+   * - app/content-types/blog-post.ts - Example blog post content type
+   * - app/content-types/page.ts - Example page content type
+   * - app/components/form-fields/* - All form field components
+   * - app/components/admin/content-editor.tsx - Dynamic content editor
+   */
+  private generateContentTypeSystem;
+  /**
+   * Generates the editor components for rich text editing.
+   *
+   * Creates:
+   * - app/components/editor/toolbar.tsx - Editor toolbar with formatting buttons
+   * - app/components/editor/rich-text-editor.tsx - Tiptap-based rich text editor
+   */
+  private generateEditorComponents;
+  /**
+   * Generates the media library components.
+   *
+   * Creates:
+   * - app/lib/media-api.ts - Client-side API helpers for presigned URL uploads
+   * - app/components/media/media-uploader.tsx - Drag-drop upload with progress
+   * - app/components/media/media-grid.tsx - Grid display with selection
+   * - app/components/media/media-picker.tsx - Dialog for field integration
+   * - app/routes/_admin.media.tsx - Media library route
+   * - app/components/ui/progress.tsx - Progress bar component
+   * - app/components/ui/dialog.tsx - Dialog component
+   * - app/components/ui/tabs.tsx - Tabs component
+   */
+  private generateMediaComponents;
+}
+//# sourceMappingURL=cms-project.d.ts.map

package/lib/cms-project.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cms-project.d.ts","sourceRoot":"","sources":["../src/cms-project.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAwDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,aAAc,SAAQ,kBAAkB;IACnD;;OAEG;IACH,SAAgB,WAAW,EAAE,OAAO,CAAC;IAErC;;OAEG;IACH,SAAgB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;IAErD;;;;;OAKG;gBACS,OAAO,EAAE,oBAAoB;IA6DzC;;;;;;;;;OASG;IACH,OAAO,CAAC,oBAAoB;IAsB5B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,uBAAuB;IA0B/B;;;;;;;;;OASG;IACH,OAAO,CAAC,mBAAmB;IA2B3B;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,yBAAyB;IA0FjC;;;;;;OAMG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,uBAAuB;CAqChC"}