@webstudio-is/react-sdk 0.189.0 → 0.191.0

package/lib/index.js

@@ -82,9 +82,11 @@ import {
 
 // src/core-components.ts
 import {
+  EditIcon,
   ListViewIcon,
   PaintBrushIcon,
-  SettingsIcon
+  SettingsIcon,
+  AddTemplateInstanceIcon
 } from "@webstudio-is/icons/svg";
 import { html } from "@webstudio-is/sdk/normalize.css";
 var rootComponent = "ws:root";
@@ -192,17 +194,183 @@ var descendantPropsMeta = {
   },
   initialProps: ["selector"]
 };
+var blockTemplateComponent = "ws:block-template";
+var blockTemplateMeta = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false
+};
+var blockTemplatePropsMeta = {
+  props: {},
+  initialProps: []
+};
+var blockComponent = "ws:block";
+var blockMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Content Block",
+  icon: EditIcon,
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: collectionComponent }
+  },
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: blockComponent,
+      props: [],
+      children: [
+        {
+          type: "instance",
+          label: "Templates",
+          component: blockTemplateComponent,
+          children: [
+            {
+              type: "instance",
+              component: "Paragraph",
+              children: [
+                {
+                  type: "text",
+                  value: "Paragraph text you can edit",
+                  placeholder: true
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "List",
+              children: [
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "ListItem",
+                  children: [
+                    {
+                      type: "text",
+                      value: "List Item text you can edit",
+                      placeholder: true
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Paragraph",
+          children: [
+            {
+              type: "text",
+              value: "The Content Block component designates regions on the page where pre-styled instances can be inserted in "
+            },
+            {
+              type: "instance",
+              component: "RichTextLink",
+              children: [
+                {
+                  type: "text",
+                  value: "Content mode"
+                }
+              ],
+              props: [
+                {
+                  type: "string",
+                  name: "href",
+                  value: "https://wstd.us/content-block"
+                }
+              ]
+            },
+            {
+              type: "text",
+              value: "."
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "List",
+          children: [
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates."
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container."
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "ListItem",
+              children: [
+                {
+                  type: "text",
+                  value: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var blockPropsMeta = {
+  props: {},
+  initialProps: []
+};
 var coreMetas = {
   [rootComponent]: rootMeta,
   [collectionComponent]: collectionMeta,
-  [descendantComponent]: descendantMeta
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
   [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta
+  [descendantComponent]: descendantPropsMeta,
+  [blockComponent]: blockPropsMeta,
+  [blockTemplateComponent]: blockTemplatePropsMeta
 };
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent;
+var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 
 // src/css/css.ts
 import { kebabCase } from "change-case";
@@ -632,6 +800,7 @@ var PropMeta = z.union([
 
 // src/components/component-meta.ts
 import { z as z3 } from "zod";
+import { Matchers } from "@webstudio-is/sdk";
 
 // src/embed-template.ts
 import { z as z2 } from "zod";
@@ -985,6 +1154,26 @@ var namespaceEmbedTemplateComponents = (template, namespace, components) => {
     throw Error("Impossible case");
   });
 };
+var namespaceMatcher = (namespace, matcher) => {
+  const newMatcher = structuredClone(matcher);
+  if (newMatcher.component?.$eq) {
+    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
+  }
+  if (newMatcher.component?.$neq) {
+    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
+  }
+  if (newMatcher.component?.$in) {
+    newMatcher.component.$in = newMatcher.component.$in.map(
+      (component) => `${namespace}:${component}`
+    );
+  }
+  if (newMatcher.component?.$nin) {
+    newMatcher.component.$nin = newMatcher.component.$nin.map(
+      (component) => `${namespace}:${component}`
+    );
+  }
+  return newMatcher;
+};
 var namespaceMeta = (meta, namespace, components) => {
   const newMeta = { ...meta };
   if (newMeta.requiredAncestors) {
@@ -997,6 +1186,15 @@ var namespaceMeta = (meta, namespace, components) => {
       (component) => components.has(component) ? `${namespace}:${component}` : component
     );
   }
+  if (newMeta.constraints) {
+    if (Array.isArray(newMeta.constraints)) {
+      newMeta.constraints = newMeta.constraints.map(
+        (matcher) => namespaceMatcher(namespace, matcher)
+      );
+    } else {
+      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
+    }
+  }
   if (newMeta.indexWithinAncestor) {
     newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
   }
@@ -1053,6 +1251,7 @@ var WsComponentMeta = z3.object({
   type: z3.enum(["container", "control", "embed", "rich-text-child"]),
   requiredAncestors: z3.optional(z3.array(z3.string())),
   invalidAncestors: z3.optional(z3.array(z3.string())),
+  constraints: Matchers.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -1286,6 +1485,9 @@ ${prop.name}={${propValue}}`;
 className={${classes.join(` + " " + `)}}`;
   }
   let generatedElement = "";
+  if (instance.component === blockTemplateComponent) {
+    return "";
+  }
   if (instance.component === collectionComponent) {
     if (collectionDataValue === void 0 || collectionItemValue === void 0) {
       return "";
@@ -1300,6 +1502,8 @@ className={${classes.join(` + " " + `)}}`;
 `;
     generatedElement += `)}
 `;
+  } else if (instance.component === blockComponent) {
+    generatedElement += children;
   } else {
     const [_namespace, shortName] = parseComponentName2(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
@@ -1496,6 +1700,9 @@ export {
   WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
+  blockComponent,
+  blockTemplateComponent,
+  blockTemplateMeta,
   collapsedAttribute,
   collectionComponent,
   componentAttribute,

package/lib/runtime.js

@@ -1,6 +1,9 @@
 // src/context.tsx
 import { createContext, useContext, useMemo } from "react";
-import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
+import {
+  createJsonStringifyProxy,
+  isPlainObject
+} from "@webstudio-is/sdk/runtime";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
@@ -29,19 +32,13 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
     }
   }
 };
-var getInstanceSelectorById = (instanceSelector, instanceId) => {
-  const index = instanceSelector.findIndex(
-    (selector) => selector === instanceId
-  );
-  if (index === -1) {
-    return [];
-  }
-  return instanceSelector.slice(index);
-};
 
 // src/variable-state.tsx
-import { createJsonStringifyProxy as createJsonStringifyProxy2, isPlainObject as isPlainObject2 } from "@webstudio-is/sdk";
 import { useState, useMemo as useMemo2 } from "react";
+import {
+  createJsonStringifyProxy as createJsonStringifyProxy2,
+  isPlainObject as isPlainObject2
+} from "@webstudio-is/sdk/runtime";
 var useVariableState = (initialState) => {
   const [state, setState] = useState(initialState);
   const value = useMemo2(
@@ -59,7 +56,6 @@ export {
   ReactSdkContext,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
-  getInstanceSelectorById,
   useResource,
   useVariableState
 };