@webstudio-is/react-sdk 0.7.0 → 0.7.2

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

@@ -1,6 +1,14 @@
-import React from "react";
+/// <reference types="react" />
 import type { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
+    quality?: number | undefined;
+    loader?: import("../component-utils/image").ImageLoader | undefined;
+    optimize?: boolean | undefined;
+}, "key" | "quality" | "loader" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>>;
 export default _default;
-export declare const Image: ComponentStory<React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>>;
+export declare const Image: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
+    quality?: number | undefined;
+    loader?: import("../component-utils/image").ImageLoader | undefined;
+    optimize?: boolean | undefined;
+}, "key" | "quality" | "loader" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>>;
 //# sourceMappingURL=image.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.stories.d.ts","sourceRoot":"","sources":["../../src/components/image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAItE,wBAI0C;AAM1C,eAAO,MAAM,KAAK,8OAAoB,CAAC"}
+{"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;;;;6JAAoB,CAAC"}

package/lib/components/image.stories.js

@@ -1,16 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const image_1 = require("./image");
-const image_props_json_1 = __importDefault(require("./image.props.json"));
 exports.default = {
     title: "Components/Image",
     component: image_1.Image,
-    argTypes: image_props_json_1.default,
 };
 const Template = (args) => ((0, jsx_runtime_1.jsx)(image_1.Image, { ...args }));
 exports.Image = Template.bind({});

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

@@ -1 +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;AAEhC,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,OAAO,KAAK,CAQvC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"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/components/image.ws.js

@@ -2,10 +2,25 @@
 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,

package/lib/components/index.d.ts

@@ -4,8 +4,11 @@ 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";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/lib/components/index.js

@@ -3,7 +3,7 @@ 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.Italic = exports.Bold = exports.Link = exports.Paragraph = exports.Heading = exports.TextBlock = exports.Box = exports.Body = void 0;
+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");
@@ -16,10 +16,16 @@ 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");

package/lib/components/input.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+/// <reference types="react" />
+export declare const Input: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=input.d.ts.map

package/lib/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,eAAO,MAAM,KAAK,kOAI2D,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,KAAK,oRAI2D,CAAC"}