@webstudio-is/sdk 0.198.0 → 0.199.0

package/lib/core-templates.js

@@ -0,0 +1,224 @@
+// src/core-templates.tsx
+import {
+  $,
+  css,
+  expression,
+  Parameter,
+  ws
+} from "@webstudio-is/template";
+
+// src/core-metas.ts
+import {
+  ContentBlockIcon,
+  ListViewIcon,
+  PaintBrushIcon,
+  SettingsIcon,
+  AddTemplateInstanceIcon
+} from "@webstudio-is/icons/svg";
+
+// src/__generated__/normalize.css.ts
+var html = [
+  { property: "display", value: { type: "keyword", value: "grid" } },
+  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "fontFamily",
+    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
+  },
+  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.2 }
+  },
+  {
+    property: "whiteSpaceCollapse",
+    value: { type: "keyword", value: "preserve" }
+  }
+];
+
+// src/core-metas.ts
+var rootComponent = "ws:root";
+var rootMeta = {
+  type: "container",
+  label: "Global Root",
+  icon: SettingsIcon,
+  presetStyle: {
+    html
+  }
+};
+var rootPropsMeta = {
+  props: {}
+};
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var descendantComponent = "ws:descendant";
+var descendantMeta = {
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  constraints: {
+    relation: "parent",
+    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
+  }
+};
+var descendantPropsMeta = {
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  },
+  initialProps: ["selector"]
+};
+var blockComponent = "ws:block";
+var blockTemplateComponent = "ws:block-template";
+var blockTemplateMeta = {
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: blockComponent }
+  }
+};
+var blockTemplatePropsMeta = {
+  props: {}
+};
+var blockMeta = {
+  type: "container",
+  label: "Content Block",
+  icon: ContentBlockIcon,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: [collectionComponent, blockComponent] }
+    },
+    {
+      relation: "child",
+      component: { $eq: blockTemplateComponent }
+    }
+  ],
+  stylable: false
+};
+var blockPropsMeta = {
+  props: {}
+};
+var coreMetas = {
+  [rootComponent]: rootMeta,
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
+};
+var corePropsMetas = {
+  [rootComponent]: rootPropsMeta,
+  [collectionComponent]: collectionPropsMeta,
+  [descendantComponent]: descendantPropsMeta,
+  [blockComponent]: blockPropsMeta,
+  [blockTemplateComponent]: blockTemplatePropsMeta
+};
+
+// src/core-templates.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var collectionItem = new Parameter("collectionItem");
+var collectionMeta2 = {
+  category: "data",
+  order: 2,
+  template: /* @__PURE__ */ jsx(
+    ws.collection,
+    {
+      data: ["Collection Item 1", "Collection Item 2", "Collection Item 3"],
+      item: collectionItem,
+      children: /* @__PURE__ */ jsx($.Box, { children: /* @__PURE__ */ jsx($.Text, { children: expression`${collectionItem}` }) })
+    }
+  )
+};
+var descendantMeta2 = {
+  category: "internal",
+  template: /* @__PURE__ */ jsx(ws.descendant, { selector: " p" })
+};
+var BlockTemplate = ws["block-template"];
+var blockMeta2 = {
+  category: "typography",
+  template: /* @__PURE__ */ jsxs(ws.block, { children: [
+    /* @__PURE__ */ jsxs(BlockTemplate, { "ws:label": "Templates", children: [
+      /* @__PURE__ */ jsx($.Paragraph, {}),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 1", tag: "h1" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 2", tag: "h2" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 3", tag: "h3" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 4", tag: "h4" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 5", tag: "h5" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 6", tag: "h6" }),
+      /* @__PURE__ */ jsx($.List, { "ws:label": "List (Unordered)", children: /* @__PURE__ */ jsx($.ListItem, {}) }),
+      /* @__PURE__ */ jsx($.List, { "ws:label": "List (Ordered)", ordered: true, children: /* @__PURE__ */ jsx($.ListItem, {}) }),
+      /* @__PURE__ */ jsx($.Link, {}),
+      /* @__PURE__ */ jsx(
+        $.Image,
+        {
+          "ws:style": css`
+            margin-right: auto;
+            margin-left: auto;
+            width: 100%;
+            height: auto;
+          `
+        }
+      ),
+      /* @__PURE__ */ jsx($.Separator, {}),
+      /* @__PURE__ */ jsx($.Blockquote, {}),
+      /* @__PURE__ */ jsx($.HtmlEmbed, {}),
+      /* @__PURE__ */ jsx($.CodeText, {})
+    ] }),
+    /* @__PURE__ */ jsxs($.Paragraph, { children: [
+      "The Content Block component designates regions on the page where pre-styled instances can be inserted in",
+      " ",
+      /* @__PURE__ */ jsx($.RichTextLink, { href: "https://wstd.us/content-block", children: "Content mode" }),
+      "."
+    ] }),
+    /* @__PURE__ */ jsxs($.List, { children: [
+      /* @__PURE__ */ jsx($.ListItem, { children: "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." }),
+      /* @__PURE__ */ jsx($.ListItem, { children: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container." }),
+      /* @__PURE__ */ jsx($.ListItem, { children: "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 coreTemplates = {
+  [collectionComponent]: collectionMeta2,
+  [descendantComponent]: descendantMeta2,
+  [blockComponent]: blockMeta2
+};
+export {
+  coreTemplates
+};

package/lib/index.js

@@ -775,6 +775,152 @@ var WsComponentMeta = z15.object({
   order: z15.number().optional()
 });
 
+// src/core-metas.ts
+import {
+  ContentBlockIcon,
+  ListViewIcon,
+  PaintBrushIcon,
+  SettingsIcon,
+  AddTemplateInstanceIcon
+} from "@webstudio-is/icons/svg";
+
+// src/__generated__/normalize.css.ts
+var html = [
+  { property: "display", value: { type: "keyword", value: "grid" } },
+  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "fontFamily",
+    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
+  },
+  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.2 }
+  },
+  {
+    property: "whiteSpaceCollapse",
+    value: { type: "keyword", value: "preserve" }
+  }
+];
+
+// src/core-metas.ts
+var rootComponent = "ws:root";
+var rootMeta = {
+  type: "container",
+  label: "Global Root",
+  icon: SettingsIcon,
+  presetStyle: {
+    html
+  }
+};
+var rootPropsMeta = {
+  props: {}
+};
+var portalComponent = "Slot";
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var descendantComponent = "ws:descendant";
+var descendantMeta = {
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  constraints: {
+    relation: "parent",
+    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
+  }
+};
+var descendantPropsMeta = {
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  },
+  initialProps: ["selector"]
+};
+var blockComponent = "ws:block";
+var blockTemplateComponent = "ws:block-template";
+var blockTemplateMeta = {
+  type: "container",
+  icon: AddTemplateInstanceIcon,
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: blockComponent }
+  }
+};
+var blockTemplatePropsMeta = {
+  props: {}
+};
+var blockMeta = {
+  type: "container",
+  label: "Content Block",
+  icon: ContentBlockIcon,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: [collectionComponent, blockComponent] }
+    },
+    {
+      relation: "child",
+      component: { $eq: blockTemplateComponent }
+    }
+  ],
+  stylable: false
+};
+var blockPropsMeta = {
+  props: {}
+};
+var coreMetas = {
+  [rootComponent]: rootMeta,
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta,
+  [blockComponent]: blockMeta,
+  [blockTemplateComponent]: blockTemplateMeta
+};
+var corePropsMetas = {
+  [rootComponent]: rootPropsMeta,
+  [collectionComponent]: collectionPropsMeta,
+  [descendantComponent]: descendantPropsMeta,
+  [blockComponent]: blockPropsMeta,
+  [blockTemplateComponent]: blockTemplatePropsMeta
+};
+var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+
 // src/instances-utils.ts
 var ROOT_INSTANCE_ID = ":root";
 var traverseInstances = (instances, instanceId, callback) => {
@@ -1583,10 +1729,17 @@ export {
   WebstudioFragment,
   WsComponentMeta,
   WsEmbedTemplate,
+  blockComponent,
+  blockTemplateComponent,
+  blockTemplateMeta,
+  collectionComponent,
   componentCategories,
+  coreMetas,
+  corePropsMetas,
   createScope,
   decodeDataSourceVariable,
   defaultStates,
+  descendantComponent,
   documentTypes,
   encodeDataSourceVariable,
   executeExpression,
@@ -1603,6 +1756,7 @@ export {
   getStaticSiteMapXml,
   getStyleDeclKey,
   initialBreakpoints,
+  isCoreComponent,
   isLiteralExpression,
   isPathnamePattern,
   isRootFolder,
@@ -1610,7 +1764,9 @@ export {
   matchPathnameParams,
   parseComponentName,
   parseObjectExpression,
+  portalComponent,
   replaceFormActionsWithResources,
+  rootComponent,
   stateCategories,
   transpileExpression
 };