Page Builder plugin

plugins/page-builder/.gitignore

@@ -0,0 +1,26 @@
+/dist
+.env
+.DS_Store
+/uploads
+/node_modules
+yarn-error.log
+
+.idea
+
+coverage
+
+!src/**
+
+./tsconfig.tsbuildinfo
+medusa-db.sql
+build
+.cache
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.medusa

plugins/page-builder/README.md

@@ -0,0 +1,176 @@
+# @lambdacurry/medusa-page-builder
+
+A plugin that adds visual page building capabilities to your Medusa application, with built-in components, layouts, and SEO management.
+
+> This plugin is part of the [Medusa Plugins Collection](https://github.com/lambda-curry/medusa-plugins).
+
+## Features
+> See a demo in our [Medusa Starter](https://github.com/lambda-curry/medusa2-starter)
+
+- Visual drag-and-drop page builder interface
+- Pre-built components library
+- Customizable layouts and templates
+- Dynamic content management
+- SEO optimization tools
+- Version control and publishing workflow
+- SDK for Store and Admin operations
+
+## Prerequisites
+
+- [Medusa >=2.5.0 backend](https://docs.medusajs.com/development/backend/install)
+- [PostgreSQL](https://docs.medusajs.com/development/backend/prepare-environment#postgresql)
+
+## Installation and Configuration
+
+1. Install the plugin:
+```bash
+yarn add @lambdacurry/medusa-page-builder
+
+# or, if you're using yarn workspaces
+yarn workspace my-app add @lambdacurry/medusa-page-builder
+```
+
+2. Add to `medusa-config.ts`:
+```js
+module.exports = defineConfig({
+  plugins: [
+    {
+      resolve: '@lambdacurry/medusa-page-builder',
+      options: {
+        defaultPageStatus: 'draft', // OPTIONAL, default is 'published'
+        components: {
+          // Define your custom components here
+        },
+      },
+    },
+  ],
+});
+```
+
+3. Run migrations:
+```bash
+yarn medusa db:migrate
+```
+
+## Using the Plugin SDK
+
+> For detailed SDK setup and configuration, refer to the [@lambdacurry/medusa-plugins-sdk README](../packages/plugins-sdk/README.md).
+
+### Store Operations
+
+```typescript
+// List pages
+const { pages, count } = await sdk.store.pages.list(
+  query: StoreListPagesQuery,
+  headers?: ClientHeaders
+);
+
+// Get a single page
+const page = await sdk.store.pages.retrieve(
+  pageId: string,
+  headers?: ClientHeaders
+);
+
+// Get page components
+const components = await sdk.store.pages.getComponents(
+  pageId: string,
+  headers?: ClientHeaders
+);
+```
+
+### Admin Operations
+
+```typescript
+// List pages
+const { pages, count } = await sdk.admin.pages.list(
+  query: AdminListPagesQuery
+);
+
+// Create/Update pages
+const page = await sdk.admin.pages.create(
+  data: AdminCreatePageDTO
+);
+
+const page = await sdk.admin.pages.update(
+  pageId: string,
+  data: AdminUpdatePageDTO
+);
+
+// Manage page status
+const page = await sdk.admin.pages.updateStatus(
+  pageId: string,
+  status: 'draft' | 'published' | 'archived'
+);
+
+// Manage components
+const page = await sdk.admin.pages.updateComponents(
+  pageId: string,
+  data: AdminUpdatePageComponentsDTO
+);
+```
+
+## Page Workflow
+
+1. **Creation**: Pages are set to:
+   - `published` status by default
+   - `draft` status if `defaultPageStatus: 'draft'` is set in plugin options
+
+2. **Management**: Admins can:
+   - Create and edit pages using the visual builder
+   - Manage page status (draft/published/archived)
+   - Configure SEO settings
+   - Manage component layouts and content
+
+## Available Endpoints
+
+### Admin Endpoints
+- `GET /admin/pages` - List all pages
+- `POST /admin/pages` - Create a page
+- `GET /admin/pages/:id` - Get a page
+- `PUT /admin/pages/:id` - Update a page
+- `PUT /admin/pages/:id/status` - Update status
+- `PUT /admin/pages/:id/components` - Update components
+
+### Store Endpoints
+- `GET /store/pages` - List published pages
+- `GET /store/pages/:id` - Get a published page
+- `GET /store/pages/:id/components` - Get page components
+
+## Local Development
+
+> **IMPORTANT**: A running PostgreSQL instance is required. The plugin expects `DB_USERNAME` and `DB_PASSWORD` environment variables to be set. If not provided, both default to "postgres".
+
+Available scripts:
+```bash
+# Build the plugin
+yarn build
+
+# Development mode with hot-reload
+yarn dev
+
+# Publish to local registry for testing
+yarn dev:publish
+
+# Generate database migrations
+yarn db:generate
+```
+
+### Installing the plugin in your Medusa project for local development
+After publishing the plugin locally by running yarn dev:publish, go to the root of your Medusa project and run the following commands:
+
+```bash
+cd path/to/your/medusa-application
+
+yarn medusa plugin:add @lambdacurry/medusa-page-builder
+
+# If you are using yarn with a monorepo, you may also need to run
+yarn install
+```
+
+## Compatibility
+
+This plugin is compatible with versions `>= 2.5.0` of `@medusajs/medusa`.
+
+## License
+
+MIT License 

plugins/page-builder/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@lambdacurry/medusa-page-builder",
+  "version": "0.0.1",
+  "description": "Page Builder Plugin for Medusa",
+  "author": "Lambda Curry (https://lambdacurry.dev)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lambda-curry/medusa-plugins"
+  },
+  "homepage": "https://github.com/lambda-curry/medusa-plugins/tree/main/plugins/page-builder",
+  "files": [
+    ".medusa/server"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./workflows": "./.medusa/server/src/workflows/index.js",
+    "./.medusa/server/src/modules/*": "./.medusa/server/src/modules/*/index.js",
+    "./providers/*": "./.medusa/server/src/providers/*/index.js",
+    "./*": "./.medusa/server/src/*.js"
+  },
+  "keywords": [
+    "medusa",
+    "plugin",
+    "page-builder",
+    "medusa-plugin-page-builder",
+    "medusa-plugin",
+    "medusa-v2",
+    "lambdacurry"
+  ],
+  "scripts": {
+    "build": "medusa plugin:build",
+    "dev": "medusa plugin:develop",
+    "dev:publish": "medusa plugin:publish",
+    "prepublishOnly": "medusa plugin:build",
+    "db:generate": "DB_USERNAME=${DB_USERNAME:-postgres} DB_PASSWORD=${DB_PASSWORD:-postgres} medusa plugin:db:generate"
+  },
+  "devDependencies": {
+    "@medusajs/admin-sdk": "2.5.1",
+    "@medusajs/cli": "2.5.1",
+    "@medusajs/framework": "2.5.1",
+    "@medusajs/icons": "2.5.1",
+    "@medusajs/medusa": "2.5.1",
+    "@medusajs/test-utils": "2.5.1",
+    "@mikro-orm/cli": "6.4.3",
+    "@mikro-orm/core": "6.4.3",
+    "@mikro-orm/knex": "6.4.3",
+    "@mikro-orm/migrations": "6.4.3",
+    "@mikro-orm/postgresql": "6.4.3",
+    "@swc/core": "1.5.7",
+    "@types/express": "4.17.13",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.2.25",
+    "awilix": "^8.0.1",
+    "pg": "^8.13.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2",
+    "vite": "^5.2.11"
+  },
+  "peerDependencies": {
+    "@medusajs/admin-sdk": "2.5.1",
+    "@medusajs/cli": "2.5.1",
+    "@medusajs/framework": "2.5.1",
+    "@medusajs/icons": "2.5.1",
+    "@medusajs/medusa": "2.5.1",
+    "@medusajs/test-utils": "2.5.1",
+    "@medusajs/ui": "4.0.3",
+    "@mikro-orm/cli": "6.4.3",
+    "@mikro-orm/core": "6.4.3",
+    "@mikro-orm/knex": "6.4.3",
+    "@mikro-orm/migrations": "6.4.3",
+    "@mikro-orm/postgresql": "6.4.3",
+    "awilix": "^8.0.1",
+    "pg": "^8.13.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "installConfig": {
+    "hoistingLimits": "workspaces"
+  },
+  "dependencies": {
+    "@lambdacurry/medusa-plugins-sdk": "latest",
+    "@medusajs/js-sdk": "^2.5.1",
+    "@medusajs/workflows-sdk": "^2.5.1"
+  }
+}

plugins/page-builder/src/admin/components/atoms/icon/icon.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react"
+
+type ItemType = "core" | "extension" | "setting"
+
+/**
+ * Icon component that handles different display styles based on item type
+ */
+export const Icon = ({ icon, type }: { icon?: ReactNode; type: ItemType }) => {
+  if (!icon) {
+    return null
+  }
+
+  return type === "extension" ? (
+    <div className="shadow-borders-base bg-ui-bg-base flex h-5 w-5 items-center justify-center rounded-[4px]">
+      <div className="h-[15px] w-[15px] overflow-hidden rounded-sm">{icon}</div>
+    </div>
+  ) : (
+    icon
+  )
+} 

plugins/page-builder/src/admin/components/atoms/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Atoms are the basic building blocks of the UI.
+ * They are the smallest, indivisible components that can be reused across the application.
+ */
+
+// Export atoms as they are created
+export * from './icon/icon'