@webstudio-is/sdk-components-react 0.185.0 → 0.191.0

package/lib/link.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n((e, o) => {
+  const {
+    children: s,
+    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: i,
+    ...r
+  } = e;
+  return /* @__PURE__ */ t("a", { ...r, href: r.href ?? "#", ref: o, children: s });
+});
+a.displayName = "Link";
+export {
+  a as Link
+};

package/lib/link.ws.js

@@ -0,0 +1,68 @@
+import { LinkIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { a as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/link.props.js";
+const n = {
+  a: [
+    ...o,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    },
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
+    }
+  ]
+}, l = {
+  category: "general",
+  type: "container",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
+  icon: e,
+  invalidAncestors: ["Link", "Button"],
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  presetStyle: n,
+  order: 1,
+  states: [
+    ...t,
+    {
+      selector: ":visited",
+      label: "Visited"
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page"
+    }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [
+        {
+          type: "text",
+          value: "Link text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: {
+    ...r,
+    href: {
+      type: "string",
+      control: "url",
+      required: !1
+    }
+  },
+  initialProps: ["id", "className", "href", "target", "download"]
+};
+export {
+  l as meta,
+  c as propsMeta
+};

package/lib/list-item.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const i = e(
+  ({ children: r, ...t }, m) => /* @__PURE__ */ o("li", { ...t, ref: m, children: r })
+);
+i.displayName = "ListItem";
+export {
+  i as ListItem
+};

package/lib/list-item.ws.js

@@ -0,0 +1,40 @@
+import { ListItemIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { li as o } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/list-item.props.js";
+const r = {
+  li: o
+}, c = {
+  category: "general",
+  type: "container",
+  requiredAncestors: ["List"],
+  constraints: {
+    relation: "parent",
+    component: { $eq: "List" }
+  },
+  description: "Adds a new item to an existing list.",
+  icon: t,
+  states: e,
+  presetStyle: r,
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [
+        {
+          type: "text",
+          value: "List Item text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, m = {
+  props: i,
+  initialProps: ["id", "className"]
+};
+export {
+  c as meta,
+  m as propsMeta
+};

package/lib/list.js

@@ -0,0 +1,6 @@
+import { forwardRef as o, createElement as a } from "react";
+const s = "ul", n = "ol", d = o(({ ordered: e = !1, ...t }, r) => a(e ? n : s, { ...t, ref: r }));
+d.displayName = "List";
+export {
+  d as List
+};

package/lib/list.ws.js

@@ -0,0 +1,92 @@
+import { ListIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { ol as o, ul as r } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/list.props.js";
+const a = {
+  ol: [
+    ...o,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ],
+  ul: [
+    ...r,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ]
+}, y = {
+  category: "general",
+  type: "container",
+  description: "Groups content, like links in a menu or steps in a recipe.",
+  icon: e,
+  states: t,
+  presetStyle: a,
+  order: 3,
+  template: [
+    {
+      type: "instance",
+      component: "List",
+      children: [
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: p,
+  initialProps: ["id", "className", "ordered", "start", "reversed"]
+};
+export {
+  y as meta,
+  c as propsMeta
+};

package/lib/markdown-embed.js

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { micromark as s } from "micromark";
+import { forwardRef as c, useMemo as d } from "react";
+const u = /* @__PURE__ */ c((r, e) => {
+  const { code: o, children: l, ...t } = r, m = d(
+    // support data uri protocol in images
+    () => s(o ?? "", { allowDangerousProtocol: !0 }),
+    [o]
+  );
+  return /* @__PURE__ */ n("div", { ...t, ref: e, dangerouslySetInnerHTML: { __html: m } });
+});
+export {
+  u as MarkdownEmbed
+};

package/lib/markdown-embed.ws.js

@@ -0,0 +1,111 @@
+import { MarkdownEmbedIcon as n } from "@webstudio-is/icons/svg";
+import { imagePlaceholderDataUrl as a } from "@webstudio-is/image";
+import { descendantComponent as r } from "@webstudio-is/react-sdk";
+import { props as s } from "./__generated__/markdown-embed.props.js";
+const i = `
+# Styling Markdown with Markdown Embed
+
+Markdown Embed allows styling of Markdown, which primarily comes from external data.
+
+## How to Use Markdown Embed
+
+- Every element is shown in the Navigator.
+- Apply styles and Tokens to each element.
+- Adjustments to elements apply universally within this embed, ensuring consistency across your content.
+
+---
+
+## This sample text contains all the elements that can be styled.
+
+Any elements that were not used above are used below.
+
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+[Links](#) connect your content to relevant resources.
+
+**Bold text** makes your important points stand out.
+
+*Italic text* is great for emphasizing terms.
+
+1. First Step
+2. Second Step
+
+![Image placeholder](${a})
+
+> Capture attention with a powerful quote.
+
+Using \`console.log("Hello World");\` will log to the console.
+`.trim(), e = (t, o) => ({
+  type: "instance",
+  component: r,
+  label: t,
+  props: [{ type: "string", name: "selector", value: ` ${o}` }],
+  children: []
+}), m = {
+  category: "data",
+  type: "embed",
+  description: "Used to add markdown code to the page",
+  icon: n,
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "whiteSpaceCollapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "MarkdownEmbed",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          value: i
+        }
+      ],
+      children: [
+        e("Paragraph", "p"),
+        e("Heading 1", "h1"),
+        e("Heading 2", "h2"),
+        e("Heading 3", "h3"),
+        e("Heading 4", "h4"),
+        e("Heading 5", "h5"),
+        e("Heading 6", "h6"),
+        e("Bold", ":where(strong, b)"),
+        e("Italic", ":where(em, i)"),
+        e("Link", "a"),
+        e("Image", "img"),
+        e("Blockquote", "blockquote"),
+        e("Code Text", "code"),
+        e("List", ":where(ul, ol)"),
+        e("List Item", "li"),
+        e("Separator", "hr")
+      ]
+    }
+  ]
+}, g = {
+  props: {
+    ...s,
+    code: {
+      required: !0,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
+  },
+  initialProps: ["className"]
+};
+export {
+  m as meta,
+  g as propsMeta
+};