Feature: website builder

e2e/tests/plugin-builder-website.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test'
+
+// Smoke test for the drag-and-drop website builder plugin. Loads the seeded
+// example page, verifies the editor mounts, then switches to Preview and
+// verifies the published site renders without the editing chrome.
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    'http://localhost:3000/view/?documentId=dmss://DemoDataSource/$builderPageExample'
+  )
+})
+
+test('mounts the builder editor with its toolbar and palette', async ({
+  page,
+}) => {
+  await expect(page.getByText('Website builder')).toBeVisible()
+  // The widget palette is only present in edit mode.
+  await expect(page.getByText('Widgets')).toBeVisible()
+  // The pages sidebar is present with an add-page affordance.
+  await expect(page.getByRole('button', { name: 'Add page' })).toBeVisible()
+})
+
+test('switches to the read-only preview and hides the editing chrome', async ({
+  page,
+}) => {
+  await expect(page.getByText('Widgets')).toBeVisible()
+
+  await page.getByRole('button', { name: 'Preview', exact: true }).click()
+
+  // Palette and page-editing affordances disappear in preview.
+  await expect(page.getByText('Widgets')).toBeHidden()
+  await expect(page.getByRole('button', { name: 'Add page' })).toBeHidden()
+  // The published navigation menu renders instead.
+  await expect(page.getByText('Menu')).toBeVisible()
+
+  // Returning to edit restores the palette.
+  await page.getByRole('button', { name: 'Edit', exact: true }).click()
+  await expect(page.getByText('Widgets')).toBeVisible()
+})

e2e/tests/plugin-form-dimensional_scalar.spec.ts

@@ -63,7 +63,7 @@ test('Dimensional scalar', async ({ page }) => {
       .getByLabel('label (optional)')
       .fill('Should not show as config overrides')
     await page.getByRole('button', { name: 'Submit' }).click()
-    await expect(page.getByRole('alert')).not.toBeVisible()
+    await expect(page.locator('.Toastify__toast--error')).not.toBeVisible()
     await page.getByRole('button', { name: 'waveForm' }).click()
     await expect(page.getByText('significantWaveHeight (config)')).toBeVisible()
     await expect(
@@ -87,8 +87,8 @@ test('Dimensional scalar', async ({ page }) => {
     await page.getByLabel('label (optional)').fill('New Maximum')
     await page.getByLabel('unit (optional)').fill('€')
     await page.getByRole('button', { name: 'Submit' }).click()
-    await expect(page.getByRole('alert')).not.toBeVisible()
-    await page.getByRole('button', { name: 'waveForm' }).click()
+    await expect(page.locator('.Toastify__toast--error')).not.toBeVisible()
+    await navigate()
     await expect(
       page.getByTestId('maximumWaveHeight').getByRole('spinbutton')
     ).toHaveValue('88888')

example/app/data/DemoDataSource/plugins/builder/example/blueprints/Member.blueprint.json

@@ -0,0 +1,22 @@
+{
+  "name": "Member",
+  "type": "dmss://system/SIMOS/Blueprint",
+  "attributes": [
+    {
+      "name": "type",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "name",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "role",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string",
+      "optional": true
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/builder/example/blueprints/Page.blueprint.json

@@ -0,0 +1,48 @@
+{
+  "name": "Page",
+  "type": "dmss://system/SIMOS/Blueprint",
+  "attributes": [
+    {
+      "name": "type",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "name",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "title",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string",
+      "optional": true
+    },
+    {
+      "name": "layout",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "object",
+      "optional": true
+    },
+    {
+      "name": "cover",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "CORE:File",
+      "contained": false,
+      "optional": true
+    },
+    {
+      "name": "contact",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "./Member",
+      "optional": true
+    },
+    {
+      "name": "team",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "./Member",
+      "dimensions": "*",
+      "optional": true
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/builder/example/pageExample.entity.json

@@ -0,0 +1,28 @@
+{
+  "_id": "builderPageExample",
+  "name": "BuilderPageExample",
+  "type": "./blueprints/Page",
+  "title": "My first page",
+  "cover": {
+    "type": "dmss://system/SIMOS/Reference",
+    "address": "../../media_viewer/assets/beauty",
+    "referenceType": "link"
+  },
+  "contact": {
+    "type": "./blueprints/Member",
+    "name": "Ada Lovelace",
+    "role": "Owner"
+  },
+  "team": [
+    {
+      "type": "./blueprints/Member",
+      "name": "Ada Lovelace",
+      "role": "Owner"
+    },
+    {
+      "type": "./blueprints/Member",
+      "name": "Alan Turing",
+      "role": "Engineer"
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/builder/sites/blueprints/SiteDirectory.blueprint.json

@@ -0,0 +1,7 @@
+{
+  "name": "SiteDirectory",
+  "type": "dmss://system/SIMOS/Blueprint",
+  "description": "A landing entity whose recipe mounts the Site directory plugin: a gallery of saved websites.",
+  "extends": ["CORE:NamedEntity"],
+  "attributes": []
+}

example/app/data/DemoDataSource/plugins/builder/sites/blueprints/Website.blueprint.json

@@ -0,0 +1,15 @@
+{
+  "name": "Website",
+  "type": "dmss://system/SIMOS/Blueprint",
+  "description": "A saved website built with the drag-and-drop builder. Extends the builder Site (navbar + pages) and adds a human-friendly name shown in the site directory.",
+  "extends": ["PLUGINS:dm-core-plugins/builder/Site"],
+  "attributes": [
+    {
+      "name": "name",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string",
+      "description": "Display name of the website, shown as the card title in the directory.",
+      "optional": true
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/builder/sites/siteDirectory.entity.json

@@ -0,0 +1,5 @@
+{
+  "_id": "siteDirectory",
+  "name": "SiteDirectory",
+  "type": "./blueprints/SiteDirectory"
+}

example/app/data/DemoDataSource/recipes/plugins/builder/example/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "example",
+  "type": "CORE:Package",
+  "isRoot": false,
+  "_meta_": {
+    "type": "CORE:Meta",
+    "version": "0.0.1"
+  }
+}

example/app/data/DemoDataSource/recipes/plugins/builder/example/page.recipe.json

@@ -0,0 +1,118 @@
+{
+  "type": "CORE:RecipeLink",
+  "_blueprintPath_": "/plugins/builder/example/blueprints/Page",
+  "initialUiRecipe": {
+    "name": "Builder",
+    "type": "CORE:UiRecipe",
+    "plugin": "@development-framework/dm-core-plugins/builder",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/builder/BuilderPluginConfig",
+      "mode": "edit",
+      "initialConfig": {
+        "type": "PLUGINS:dm-core-plugins/grid/GridPluginConfig",
+        "size": {
+          "type": "PLUGINS:dm-core-plugins/grid/GridSize",
+          "columns": 12,
+          "rows": 8,
+          "rowGap": "16px",
+          "columnGap": "16px"
+        },
+        "items": [
+          {
+            "type": "PLUGINS:dm-core-plugins/grid/GridItem",
+            "title": "Heading",
+            "gridArea": {
+              "type": "PLUGINS:dm-core-plugins/grid/GridArea",
+              "rowStart": 1,
+              "columnStart": 1,
+              "rowEnd": 1,
+              "columnEnd": 12
+            },
+            "viewConfig": {
+              "type": "CORE:InlineRecipeViewConfig",
+              "recipe": {
+                "name": "form",
+                "type": "CORE:UiRecipe",
+                "plugin": "@development-framework/dm-core-plugins/form"
+              }
+            }
+          },
+          {
+            "type": "PLUGINS:dm-core-plugins/grid/GridItem",
+            "title": "Section",
+            "gridArea": {
+              "type": "PLUGINS:dm-core-plugins/grid/GridArea",
+              "rowStart": 2,
+              "columnStart": 1,
+              "rowEnd": 6,
+              "columnEnd": 6
+            },
+            "viewConfig": {
+              "type": "CORE:InlineRecipeViewConfig",
+              "recipe": {
+                "name": "Section",
+                "type": "CORE:UiRecipe",
+                "plugin": "@development-framework/dm-core-plugins/grid",
+                "config": {
+                  "type": "PLUGINS:dm-core-plugins/grid/GridPluginConfig",
+                  "size": {
+                    "type": "PLUGINS:dm-core-plugins/grid/GridSize",
+                    "columns": 6,
+                    "rows": 4,
+                    "rowGap": "16px",
+                    "columnGap": "16px"
+                  },
+                  "items": [
+                    {
+                      "type": "PLUGINS:dm-core-plugins/grid/GridItem",
+                      "title": "Edit page",
+                      "gridArea": {
+                        "type": "PLUGINS:dm-core-plugins/grid/GridArea",
+                        "rowStart": 1,
+                        "columnStart": 1,
+                        "rowEnd": 3,
+                        "columnEnd": 6
+                      },
+                      "viewConfig": {
+                        "type": "CORE:InlineRecipeViewConfig",
+                        "recipe": {
+                          "name": "form",
+                          "type": "CORE:UiRecipe",
+                          "plugin": "@development-framework/dm-core-plugins/form"
+                        }
+                      }
+                    }
+                  ],
+                  "itemBorder": {
+                    "type": "PLUGINS:dm-core-plugins/grid/GridBorder",
+                    "size": "1px",
+                    "style": "solid",
+                    "color": "#bbb",
+                    "radius": "5px"
+                  },
+                  "showItemBorders": false
+                }
+              }
+            }
+          }
+        ],
+        "itemBorder": {
+          "type": "PLUGINS:dm-core-plugins/grid/GridBorder",
+          "size": "1px",
+          "style": "solid",
+          "color": "#bbb",
+          "radius": "5px"
+        },
+        "showItemBorders": false
+      }
+    }
+  },
+  "uiRecipes": [
+    {
+      "name": "Edit",
+      "type": "CORE:UiRecipe",
+      "category": "edit",
+      "plugin": "@development-framework/dm-core-plugins/form"
+    }
+  ]
+}

example/app/data/DemoDataSource/recipes/plugins/builder/sites/directory.recipe.json

@@ -0,0 +1,20 @@
+{
+  "type": "CORE:RecipeLink",
+  "_blueprintPath_": "/plugins/builder/sites/blueprints/SiteDirectory",
+  "initialUiRecipe": {
+    "name": "Directory",
+    "type": "CORE:UiRecipe",
+    "plugin": "@development-framework/dm-core-plugins/builder/directory",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/builder/SiteDirectoryConfig",
+      "heading": "Websites",
+      "entityType": "dmss://DemoDataSource/plugins/builder/sites/blueprints/Website",
+      "dataSources": ["Sites"],
+      "targetDataSource": "Sites",
+      "viewUrlTemplate": "/view?documentId=dmss://{dataSource}/${id}",
+      "newSiteUrlTemplate": "/view?documentId=dmss://{dataSource}/${id}&recipe=Edit",
+      "newSiteName": "New_site",
+      "allowCreate": true
+    }
+  }
+}

example/app/data/DemoDataSource/recipes/plugins/builder/sites/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "sites",
+  "type": "CORE:Package",
+  "isRoot": false,
+  "_meta_": {
+    "type": "CORE:Meta",
+    "version": "0.0.1"
+  }
+}

example/app/data/DemoDataSource/recipes/plugins/builder/sites/website.recipe.json

@@ -0,0 +1,26 @@
+{
+  "type": "CORE:RecipeLink",
+  "_blueprintPath_": "/plugins/builder/sites/blueprints/Website",
+  "initialUiRecipe": {
+    "name": "View",
+    "type": "CORE:UiRecipe",
+    "plugin": "@development-framework/dm-core-plugins/builder",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/builder/BuilderPluginConfig",
+      "readOnly": true
+    }
+  },
+  "uiRecipes": [
+    {
+      "name": "Edit",
+      "type": "CORE:UiRecipe",
+      "category": "edit",
+      "plugin": "@development-framework/dm-core-plugins/builder",
+      "config": {
+        "type": "PLUGINS:dm-core-plugins/builder/BuilderPluginConfig",
+        "mode": "edit",
+        "directoryUrl": "/view?documentId=dmss://DemoDataSource/$siteDirectory"
+      }
+    }
+  ]
+}

example/app/data_source_templates/Sites.json

@@ -0,0 +1,16 @@
+{
+  "name": "Sites",
+  "repositories": {
+    "sitesRepo": {
+      "type": "mongo-db",
+      "collection": "default",
+      "data_types": ["blob"],
+      "database": "Sites",
+      "host": "db",
+      "password": "maf",
+      "port": 27017,
+      "tls": false,
+      "username": "maf"
+    }
+  }
+}