@webstudio-is/sdk-components-react 0.151.0 → 0.167.0

package/lib/metas.js

@@ -63,6 +63,113 @@ var propsMeta = {
   initialProps: ["clientOnly", "executeScriptOnCanvas"]
 };
 
+// src/content-embed.ws.ts
+import { ContentEmbedIcon } from "@webstudio-is/icons/svg";
+import {
+  descendantComponent
+} from "@webstudio-is/react-sdk";
+var imagePlaceholder = `
+<svg
+  width="140"
+  height="140"
+  viewBox="0 0 600 600"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <rect width="600" height="600" fill="#CCCCCC" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
+    fill="#A2A2A2"
+  />
+</svg>
+`.trim();
+var htmlSample = `
+<h1>Styling HTML with Content Embed</h1>
+<p>Content Embed allows styling of HTML, which primarily comes from external data.</p>
+<h2>How to Use Content Embed</h2>
+<ul>
+  <li>Every element is shown in the Navigator.</li>
+  <li>Apply styles and Tokens to each element.</li>
+  <li>Adjustments to elements apply universally within this embed, ensuring consistency across your content.</li>
+</ul>
+<hr>
+<h2>This sample text contains all the elements that can be styled.</h2>
+<p>Any elements that were not used above are used below.</p>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+<p><a href="#">Links</a> connect your content to relevant resources.</p>
+<p><strong>Bold text</strong> makes your important points stand out.</p>
+<p><em>Italic text</em> is great for emphasizing terms.</p>
+<ol>
+  <li>First Step</li>
+  <li>Second Step</li>
+</ol>
+<img src="data:image/svg+xml;base64,${btoa(imagePlaceholder)}">
+<blockquote>Capture attention with a powerful quote.</blockquote>
+<p>Using <code>console.log("Hello World");</code> will log to the console.</p>
+`.trimStart();
+var descendant = (label2, tag) => {
+  return {
+    type: "instance",
+    component: descendantComponent,
+    label: label2,
+    props: [{ type: "string", name: "selector", value: ` ${tag}` }],
+    children: []
+  };
+};
+var meta4 = {
+  category: "data",
+  type: "control",
+  label: "Content Embed",
+  description: "Content Embed allows styling of HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.",
+  icon: ContentEmbedIcon,
+  order: 3,
+  template: [
+    {
+      type: "instance",
+      component: "HtmlEmbed",
+      label: "Content Embed",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          value: htmlSample
+        }
+      ],
+      children: [
+        descendant("Paragraph", "p"),
+        descendant("Heading 1", "h1"),
+        descendant("Heading 2", "h2"),
+        descendant("Heading 3", "h3"),
+        descendant("Heading 4", "h4"),
+        descendant("Heading 5", "h5"),
+        descendant("Heading 6", "h6"),
+        descendant("Bold", ":where(strong, b)"),
+        descendant("Italic", ":where(em, i)"),
+        descendant("Link", "a"),
+        descendant("Image", "img"),
+        descendant("Blockquote", "blockquote"),
+        descendant("Code Text", "code"),
+        descendant("List", ":where(ul, ol)"),
+        descendant("List Item", "li"),
+        descendant("Separator", "hr")
+      ]
+    }
+  ]
+};
+
 // src/body.ws.ts
 import { BodyIcon } from "@webstudio-is/icons/svg";
 import {
@@ -82,7 +189,7 @@ var presetStyle = {
     }
   ]
 };
-var meta4 = {
+var meta5 = {
   type: "container",
   label: "Body",
   icon: BodyIcon,
@@ -119,7 +226,7 @@ var presetStyle2 = {
   nav,
   section
 };
-var meta5 = {
+var meta6 = {
   category: "general",
   type: "container",
   label: "Box",
@@ -145,7 +252,7 @@ var presetStyle3 = {
     }
   ]
 };
-var meta6 = {
+var meta7 = {
   category: "text",
   type: "container",
   label: "Text",
@@ -153,7 +260,20 @@ var meta6 = {
   icon: TextIcon,
   states: defaultStates3,
   presetStyle: presetStyle3,
-  order: 0
+  order: 0,
+  template: [
+    {
+      type: "instance",
+      component: "Text",
+      children: [
+        {
+          type: "text",
+          value: "The text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/heading.ws.ts
@@ -170,7 +290,7 @@ var presetStyle4 = {
   h5,
   h6
 };
-var meta7 = {
+var meta8 = {
   category: "text",
   type: "container",
   label: "Heading",
@@ -179,7 +299,20 @@ var meta7 = {
   invalidAncestors: ["Heading"],
   states: defaultStates4,
   presetStyle: presetStyle4,
-  order: 1
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Heading",
+      children: [
+        {
+          type: "text",
+          value: "Heading text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/paragraph.ws.ts
@@ -191,7 +324,7 @@ import { p } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle5 = {
   p
 };
-var meta8 = {
+var meta9 = {
   category: "text",
   type: "container",
   label: "Paragraph",
@@ -200,7 +333,20 @@ var meta8 = {
   invalidAncestors: ["Paragraph"],
   states: defaultStates5,
   presetStyle: presetStyle5,
-  order: 2
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [
+        {
+          type: "text",
+          value: "Paragraph text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/link.ws.ts
@@ -780,7 +926,7 @@ var presetStyle6 = {
     }
   ]
 };
-var meta9 = {
+var meta10 = {
   category: "general",
   type: "container",
   label: "Link",
@@ -800,6 +946,19 @@ var meta9 = {
       selector: "[aria-current=page]",
       label: "Current page"
     }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [
+        {
+          type: "text",
+          value: "Link text you can edit",
+          placeholder: true
+        }
+      ]
+    }
   ]
 };
 var propsMeta2 = {
@@ -815,8 +974,8 @@ var propsMeta2 = {
 };
 
 // src/rich-text-link.ws.ts
-var meta10 = {
-  ...meta9,
+var meta11 = {
+  ...meta10,
   category: "hidden",
   type: "rich-text-child",
   template: []
@@ -831,7 +990,7 @@ import { span } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle7 = {
   span
 };
-var meta11 = {
+var meta12 = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
@@ -848,7 +1007,7 @@ import { b } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle8 = {
   b
 };
-var meta12 = {
+var meta13 = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
@@ -871,7 +1030,7 @@ var presetStyle9 = {
     }
   ]
 };
-var meta13 = {
+var meta14 = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
@@ -888,7 +1047,7 @@ import { sup } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle10 = {
   sup
 };
-var meta14 = {
+var meta15 = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -905,7 +1064,7 @@ import { sub } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle11 = {
   sub
 };
-var meta15 = {
+var meta16 = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -922,7 +1081,7 @@ import { button } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle12 = {
   button
 };
-var meta16 = {
+var meta17 = {
   category: "forms",
   type: "container",
   invalidAncestors: ["Button", "Link"],
@@ -935,7 +1094,20 @@ var meta16 = {
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ],
-  order: 2
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Button",
+      children: [
+        {
+          type: "text",
+          value: "Button text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/input.ws.ts
@@ -953,7 +1125,7 @@ var presetStyle13 = {
     }
   ]
 };
-var meta17 = {
+var meta18 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -989,7 +1161,7 @@ var presetStyle14 = {
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-var meta18 = {
+var meta19 = {
   category: "forms",
   type: "container",
   invalidAncestors: ["Form", "Button", "Link"],
@@ -1613,7 +1785,7 @@ var presetStyle15 = {
     }
   ]
 };
-var meta19 = {
+var meta20 = {
   category: "media",
   type: "embed",
   label: "Image",
@@ -1692,7 +1864,7 @@ var presetStyle16 = {
     }
   ]
 };
-var meta20 = {
+var meta21 = {
   category: "text",
   type: "container",
   label: "Blockquote",
@@ -1700,7 +1872,20 @@ var meta20 = {
   icon: BlockquoteIcon,
   states: defaultStates16,
   presetStyle: presetStyle16,
-  order: 3
+  order: 3,
+  template: [
+    {
+      type: "instance",
+      component: "Blockquote",
+      children: [
+        {
+          type: "text",
+          value: "Blockquote text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/list.ws.ts
@@ -1741,7 +1926,7 @@ var presetStyle17 = {
     }
   ]
 };
-var meta21 = {
+var meta22 = {
   category: "general",
   type: "container",
   label: "List",
@@ -1758,17 +1943,35 @@ var meta21 = {
         {
           type: "instance",
           component: "ListItem",
-          children: []
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: true
+            }
+          ]
         },
         {
           type: "instance",
           component: "ListItem",
-          children: []
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: true
+            }
+          ]
         },
         {
           type: "instance",
           component: "ListItem",
-          children: []
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: true
+            }
+          ]
         }
       ]
     }
@@ -1784,7 +1987,7 @@ import { li } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle18 = {
   li
 };
-var meta22 = {
+var meta23 = {
   category: "general",
   type: "container",
   requiredAncestors: ["List"],
@@ -1793,7 +1996,20 @@ var meta22 = {
   icon: ListItemIcon,
   states: defaultStates18,
   presetStyle: presetStyle18,
-  order: 4
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [
+        {
+          type: "text",
+          value: "List Item text you can edit",
+          placeholder: true
+        }
+      ]
+    }
+  ]
 };
 
 // src/separator.ws.ts
@@ -1831,7 +2047,7 @@ var presetStyle19 = {
     }
   ]
 };
-var meta23 = {
+var meta24 = {
   category: "general",
   type: "embed",
   label: "Separator",
@@ -2378,7 +2594,7 @@ var presetStyle20 = {
     }
   ]
 };
-var meta24 = {
+var meta25 = {
   category: "general",
   type: "embed",
   label: "Code Text",
@@ -2929,7 +3145,7 @@ var presetStyle21 = {
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 };
-var meta25 = {
+var meta26 = {
   category: "forms",
   invalidAncestors: ["Button", "Label"],
   type: "container",
@@ -2942,7 +3158,7 @@ var meta25 = {
     {
       type: "instance",
       component: "Label",
-      children: [{ type: "text", value: "Form Label" }]
+      children: [{ type: "text", value: "Form Label", placeholder: true }]
     }
   ]
 };
@@ -2974,7 +3190,7 @@ var presetStyle22 = {
     }
   ]
 };
-var meta26 = {
+var meta27 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -3013,7 +3229,7 @@ var presetStyle23 = {
     }
   ]
 };
-var meta27 = {
+var meta28 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -3045,7 +3261,7 @@ var meta27 = {
           component: "Text",
           label: "Radio Label",
           props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Radio" }]
+          children: [{ type: "text", value: "Radio", placeholder: true }]
         }
       ]
     }
@@ -3067,7 +3283,7 @@ var presetStyle24 = {
     }
   ]
 };
-var meta28 = {
+var meta29 = {
   category: "forms",
   invalidAncestors: ["Button", "Link"],
   type: "control",
@@ -3098,7 +3314,7 @@ var meta28 = {
           component: "Text",
           label: "Checkbox Label",
           props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Checkbox" }]
+          children: [{ type: "text", value: "Checkbox", placeholder: true }]
         }
       ]
     }
@@ -3114,7 +3330,7 @@ import { div as div3 } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle25 = {
   div: div3
 };
-var meta29 = {
+var meta30 = {
   category: "media",
   type: "container",
   label: "Vimeo",
@@ -3996,8 +4212,8 @@ var props6 = {
 };
 
 // src/vimeo-preview-image.ws.ts
-var meta30 = {
-  ...meta19,
+var meta31 = {
+  ...meta20,
   category: "hidden",
   label: "Preview Image",
   requiredAncestors: ["Vimeo"]
@@ -4016,7 +4232,7 @@ import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
 var presetStyle26 = {
   button: button2
 };
-var meta31 = {
+var meta32 = {
   category: "hidden",
   type: "container",
   invalidAncestors: ["Button"],
@@ -4036,7 +4252,7 @@ import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
 var presetStyle27 = {
   div: div4
 };
-var meta32 = {
+var meta33 = {
   type: "container",
   icon: BoxIcon2,
   states: defaultStates27,
@@ -4049,7 +4265,7 @@ var meta32 = {
 // src/xml-node.ws.ts
 import { XmlIcon } from "@webstudio-is/icons/svg";
 import "@webstudio-is/react-sdk";
-var meta33 = {
+var meta34 = {
   category: "xml",
   order: 6,
   type: "container",
@@ -4057,38 +4273,59 @@ var meta33 = {
   stylable: false,
   description: "Xml Node"
 };
+
+// src/time.ws.ts
+import { CalendarIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates as defaultStates28
+} from "@webstudio-is/react-sdk";
+import { time } from "@webstudio-is/react-sdk/css-normalize";
+var presetStyle28 = {
+  time
+};
+var meta35 = {
+  category: "data",
+  type: "container",
+  description: "Converts machine-readable date and time to a human-readable format.",
+  icon: CalendarIcon,
+  states: defaultStates28,
+  presetStyle: presetStyle28,
+  order: 4
+};
 export {
-  meta20 as Blockquote,
-  meta4 as Body,
-  meta12 as Bold,
-  meta5 as Box,
-  meta16 as Button,
-  meta28 as Checkbox,
-  meta24 as CodeText,
-  meta18 as Form,
+  meta21 as Blockquote,
+  meta5 as Body,
+  meta13 as Bold,
+  meta6 as Box,
+  meta17 as Button,
+  meta29 as Checkbox,
+  meta25 as CodeText,
+  meta4 as ContentEmbed,
+  meta19 as Form,
   meta2 as Fragment,
-  meta7 as Heading,
+  meta8 as Heading,
   meta3 as HtmlEmbed,
-  meta19 as Image,
-  meta17 as Input,
-  meta13 as Italic,
-  meta25 as Label,
-  meta9 as Link,
-  meta21 as List,
-  meta22 as ListItem,
-  meta8 as Paragraph,
-  meta27 as RadioButton,
-  meta10 as RichTextLink,
-  meta23 as Separator,
+  meta20 as Image,
+  meta18 as Input,
+  meta14 as Italic,
+  meta26 as Label,
+  meta10 as Link,
+  meta22 as List,
+  meta23 as ListItem,
+  meta9 as Paragraph,
+  meta28 as RadioButton,
+  meta11 as RichTextLink,
+  meta24 as Separator,
   meta as Slot,
-  meta11 as Span,
-  meta15 as Subscript,
-  meta14 as Superscript,
-  meta6 as Text,
-  meta26 as Textarea,
-  meta29 as Vimeo,
-  meta31 as VimeoPlayButton,
-  meta30 as VimeoPreviewImage,
-  meta32 as VimeoSpinner,
-  meta33 as XmlNode
+  meta12 as Span,
+  meta16 as Subscript,
+  meta15 as Superscript,
+  meta7 as Text,
+  meta27 as Textarea,
+  meta35 as Time,
+  meta30 as Vimeo,
+  meta32 as VimeoPlayButton,
+  meta31 as VimeoPreviewImage,
+  meta33 as VimeoSpinner,
+  meta34 as XmlNode
 };