@webstudio-is/react-sdk 0.7.2 → 0.8.0

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

@@ -0,0 +1,547 @@
+{
+    "form": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "slot": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "style": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "title": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "autoFocus": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "disabled": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "formAction": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "formEncType": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "formMethod": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "formNoValidate": {
+        "defaultValue": null,
+        "required": false,
+        "type": "boolean"
+    },
+    "formTarget": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "name": {
+        "defaultValue": null,
+        "required": false,
+        "type": "text"
+    },
+    "type": {
+        "defaultValue": "submit",
+        "options": ["button", "submit", "reset"],
+        "required": false,
+        "type": "radio"
+    },
+    "value": {
+        "defaultValue": null,
+        "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"
+    }
+}

package/lib/cjs/components/button.stories.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("./button");
+exports.default = {
+    title: "Components/Button",
+    component: button_1.Button,
+};
+const Template = (args) => ((0, jsx_runtime_1.jsx)(button_1.Button, { ...args }));
+exports.Button = Template.bind({});
+exports.Button.args = {
+    children: "Test",
+};

package/lib/cjs/components/button.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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>>;
+export default _default;
+export declare const Button: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>>;
+//# sourceMappingURL=button.stories.d.ts.map

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

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

package/lib/cjs/components/button.ws.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const icons_1 = require("@webstudio-is/icons");
+const button_1 = require("./button");
+const meta = {
+    Icon: icons_1.ButtonIcon,
+    Component: button_1.Button,
+    canAcceptChildren: false,
+    isContentEditable: true,
+    isInlineOnly: false,
+    isListed: true,
+    label: "Button",
+    children: ["Button text you can edit"],
+};
+exports.default = meta;

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

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

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

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

package/lib/cjs/components/component-type.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WsComponentMeta = void 0;
+const zod_1 = require("zod");
+exports.WsComponentMeta = zod_1.z.lazy(() => zod_1.z
+    .object({
+    Component: zod_1.z.any(),
+    Icon: zod_1.z.any(),
+    defaultStyle: zod_1.z.optional(zod_1.z.any()),
+    canAcceptChildren: zod_1.z.boolean(),
+    isContentEditable: zod_1.z.boolean(),
+    isInlineOnly: zod_1.z.boolean(),
+    isListed: zod_1.z.boolean(),
+    label: zod_1.z.string(),
+    children: zod_1.z.optional(zod_1.z.array(zod_1.z.string())),
+})
+    // We need these restrictions because of the limitation of the current drag&drop implementation.
+    // Its position detection logic will be confused if drop target has `string` children.
+    .refine((val) => val.isContentEditable === false || val.canAcceptChildren === false, {
+    message: "Content editable componetns are not allowed to accept children via drag&drop, because they may have `string` children",
+    path: ["canAcceptChildren"],
+})
+    .refine((val) => val.canAcceptChildren === false ||
+    val.children === undefined ||
+    val.children.every((child) => typeof child !== "string"), {
+    message: "Components that can accept children via drag&drop are not allowed to have `string` children",
+    path: ["children"],
+}));

package/lib/cjs/components/component-type.d.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import React from "react";
+import { IconProps } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+export declare type WsComponentMeta<ComponentType> = {
+    Component: ComponentType;
+    Icon: React.FunctionComponent<IconProps>;
+    defaultStyle?: Style;
+    canAcceptChildren: boolean;
+    isContentEditable: boolean;
+    isInlineOnly: boolean;
+    isListed: boolean;
+    label: string;
+    children?: Array<string>;
+};
+export declare const WsComponentMeta: z.ZodType<WsComponentMeta<unknown>, z.ZodTypeDef, WsComponentMeta<unknown>>;
+//# sourceMappingURL=component-type.d.ts.map

package/lib/cjs/components/component-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-type.d.ts","sourceRoot":"","sources":["../../../src/components/component-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD,oBAAY,eAAe,CAAC,aAAa,IAAI;IAC3C,SAAS,EAAE,aAAa,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAG3B,iBAAiB,EAAE,OAAO,CAAC;IAE3B,YAAY,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,6EAoCY,CAAC"}

package/lib/cjs/components/form.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const defaultTag = "form";
+exports.Form = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("form", { ...props, ref: ref }));
+exports.Form.displayName = "Form";

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Form: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>> & import("react").RefAttributes<HTMLFormElement>>;
+//# sourceMappingURL=form.d.ts.map

package/lib/cjs/components/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,IAAI,8QAG+B,CAAC"}