@webstudio-is/react-sdk 0.7.2 → 0.7.3

package/lib/cjs/components/image.props.json

@@ -0,0 +1,575 @@
+{
+    "slot": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "style": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "title": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "alt": {
+        "defaultValue": "",
+        "required": false,
+        "type": "text"
+    },
+    "crossOrigin": {
+        "defaultValue": null,
+        "options": ["\"\"", "anonymous", "use-credentials"],
+        "required": false,
+        "type": "radio"
+    },
+    "decoding": {
+        "defaultValue": null,
+        "options": ["async", "auto", "sync"],
+        "required": false,
+        "type": "radio"
+    },
+    "height": {
+        "defaultValue": "",
+        "required": false,
+        "type": "text"
+    },
+    "loading": {
+        "defaultValue": "lazy",
+        "options": ["eager", "lazy"],
+        "required": false,
+        "type": "radio"
+    },
+    "referrerPolicy": {
+        "defaultValue": null,
+        "options": [
+            "\"\"",
+            "no-referrer",
+            "no-referrer-when-downgrade",
+            "origin",
+            "origin-when-cross-origin",
+            "same-origin",
+            "strict-origin",
+            "strict-origin-when-cross-origin",
+            "unsafe-url"
+        ],
+        "required": false,
+        "type": "select"
+    },
+    "sizes": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "src": {
+        "defaultValue": "",
+        "required": false,
+        "type": "text"
+    },
+    "srcSet": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "useMap": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "width": {
+        "defaultValue": "",
+        "required": false,
+        "type": "text"
+    },
+    "defaultChecked": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "defaultValue": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "suppressContentEditableWarning": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "suppressHydrationWarning": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "accessKey": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "className": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "contentEditable": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "contextMenu": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "dir": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "draggable": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "hidden": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "id": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "lang": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "placeholder": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "spellCheck": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "tabIndex": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "translate": {
+        "defaultValue": null,
+        "options": ["yes", "no"],
+        "required": false,
+        "type": "radio"
+    },
+    "radioGroup": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "role": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "about": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "datatype": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "inlist": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "prefix": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "property": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "resource": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "typeof": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "vocab": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "autoCapitalize": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "autoCorrect": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "autoSave": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "color": {
+        "defaultValue": null,
+        "required": false,
+        "type": "color"
+    },
+    "itemProp": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "itemScope": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "itemType": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "itemID": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "itemRef": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "results": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "security": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "unselectable": {
+        "defaultValue": null,
+        "options": ["on", "off"],
+        "required": false,
+        "type": "radio"
+    },
+    "inputMode": {
+        "defaultValue": null,
+        "options": [
+            "text",
+            "none",
+            "search",
+            "tel",
+            "url",
+            "email",
+            "numeric",
+            "decimal"
+        ],
+        "required": false,
+        "type": "select"
+    },
+    "is": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-activedescendant": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-atomic": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-autocomplete": {
+        "defaultValue": null,
+        "options": ["list", "none", "inline", "both"],
+        "required": false,
+        "type": "radio"
+    },
+    "aria-busy": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-checked": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-colcount": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-colindex": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-colspan": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-controls": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-current": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-describedby": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-details": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-disabled": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-dropeffect": {
+        "defaultValue": null,
+        "options": ["link", "none", "copy", "execute", "move", "popup"],
+        "required": false,
+        "type": "select"
+    },
+    "aria-errormessage": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-expanded": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-flowto": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-grabbed": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-haspopup": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-hidden": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-invalid": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-keyshortcuts": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-label": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-labelledby": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-level": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-live": {
+        "defaultValue": null,
+        "options": ["off", "assertive", "polite"],
+        "required": false,
+        "type": "radio"
+    },
+    "aria-modal": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-multiline": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-multiselectable": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-orientation": {
+        "defaultValue": null,
+        "options": ["horizontal", "vertical"],
+        "required": false,
+        "type": "radio"
+    },
+    "aria-owns": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-placeholder": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-posinset": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-pressed": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-readonly": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-relevant": {
+        "defaultValue": null,
+        "options": [
+            "text",
+            "additions",
+            "additions removals",
+            "additions text",
+            "all",
+            "removals",
+            "removals additions",
+            "removals text",
+            "text additions",
+            "text removals"
+        ],
+        "required": false,
+        "type": "select"
+    },
+    "aria-required": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-roledescription": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "aria-rowcount": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-rowindex": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-rowspan": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-selected": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "aria-setsize": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-sort": {
+        "defaultValue": null,
+        "options": ["none", "ascending", "descending", "other"],
+        "required": false,
+        "type": "radio"
+    },
+    "aria-valuemax": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-valuemin": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-valuenow": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "aria-valuetext": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "quality": {
+        "defaultValue": null,
+        "required": false,
+        "type": "number"
+    },
+    "loader": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "optimize": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    }
+}

package/lib/cjs/components/image.stories.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("./image");
+exports.default = {
+    title: "Components/Image",
+    component: image_1.Image,
+};
+const Template = (args) => ((0, jsx_runtime_1.jsx)(image_1.Image, { ...args }));
+exports.Image = Template.bind({});
+exports.Image.args = {};

package/lib/cjs/components/image.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement>> & import("react").RefAttributes<HTMLImageElement>>>;
+export default _default;
+export declare const Image: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement>> & import("react").RefAttributes<HTMLImageElement>>>;
+//# sourceMappingURL=image.stories.d.ts.map

package/lib/cjs/components/image.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.stories.d.ts","sourceRoot":"","sources":["../../../src/components/image.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAGtE,wBAG0C;AAM1C,eAAO,MAAM,KAAK,gSAAoB,CAAC"}

package/lib/cjs/components/image.ws.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const icons_1 = require("@webstudio-is/icons");
+const image_1 = require("./image");
+const defaultStyle = {
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    maxWidth: {
+        type: "unit",
+        unit: "%",
+        value: 100,
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    display: {
+        type: "keyword",
+        value: "block",
+    },
+};
+const meta = {
+    Icon: icons_1.ImageIcon,
+    Component: image_1.Image,
+    canAcceptChildren: false,
+    defaultStyle,
+    isContentEditable: false,
+    isInlineOnly: false,
+    isListed: true,
+    label: "Image",
+};
+exports.default = meta;

package/lib/cjs/components/image.ws.d.ts

@@ -0,0 +1,5 @@
+import type { WsComponentMeta } from "./component-type";
+import { Image } from "./image";
+declare const meta: WsComponentMeta<typeof Image>;
+export default meta;
+//# sourceMappingURL=image.ws.d.ts.map

package/lib/cjs/components/image.ws.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.ws.d.ts","sourceRoot":"","sources":["../../../src/components/image.ws.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAiBhC,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,OAAO,KAAK,CASvC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/cjs/components/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = exports.Form = exports.Input = exports.Button = exports.Subscript = exports.Superscript = exports.Italic = exports.Bold = exports.Span = exports.Link = exports.Paragraph = exports.Heading = exports.TextBlock = exports.Box = exports.Body = void 0;
+var body_ws_1 = require("./body.ws");
+Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(body_ws_1).default; } });
+var box_ws_1 = require("./box.ws");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(box_ws_1).default; } });
+var text_block_ws_1 = require("./text-block.ws");
+Object.defineProperty(exports, "TextBlock", { enumerable: true, get: function () { return __importDefault(text_block_ws_1).default; } });
+var heading_ws_1 = require("./heading.ws");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(heading_ws_1).default; } });
+var paragraph_ws_1 = require("./paragraph.ws");
+Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return __importDefault(paragraph_ws_1).default; } });
+var link_ws_1 = require("./link.ws");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(link_ws_1).default; } });
+var span_ws_1 = require("./span.ws");
+Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return __importDefault(span_ws_1).default; } });
+var bold_ws_1 = require("./bold.ws");
+Object.defineProperty(exports, "Bold", { enumerable: true, get: function () { return __importDefault(bold_ws_1).default; } });
+var italic_ws_1 = require("./italic.ws");
+Object.defineProperty(exports, "Italic", { enumerable: true, get: function () { return __importDefault(italic_ws_1).default; } });
+var superscript_ws_1 = require("./superscript.ws");
+Object.defineProperty(exports, "Superscript", { enumerable: true, get: function () { return __importDefault(superscript_ws_1).default; } });
+var subscript_ws_1 = require("./subscript.ws");
+Object.defineProperty(exports, "Subscript", { enumerable: true, get: function () { return __importDefault(subscript_ws_1).default; } });
+var button_ws_1 = require("./button.ws");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_ws_1).default; } });
+var input_ws_1 = require("./input.ws");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_ws_1).default; } });
+var form_ws_1 = require("./form.ws");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return __importDefault(form_ws_1).default; } });
+var image_ws_1 = require("./image.ws");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(image_ws_1).default; } });

package/lib/cjs/components/index.d.ts

@@ -0,0 +1,16 @@
+export { default as Body } from "./body.ws";
+export { default as Box } from "./box.ws";
+export { default as TextBlock } from "./text-block.ws";
+export { default as Heading } from "./heading.ws";
+export { default as Paragraph } from "./paragraph.ws";
+export { default as Link } from "./link.ws";
+export { default as Span } from "./span.ws";
+export { default as Bold } from "./bold.ws";
+export { default as Italic } from "./italic.ws";
+export { default as Superscript } from "./superscript.ws";
+export { default as Subscript } from "./subscript.ws";
+export { default as Button } from "./button.ws";
+export { default as Input } from "./input.ws";
+export { default as Form } from "./form.ws";
+export { default as Image } from "./image.ws";
+//# sourceMappingURL=index.d.ts.map