@webstudio-is/react-sdk 0.5.0

package/lib/css/categories.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.propertyCategoryMap = exports.categories = void 0;
+const layout = [
+    "display",
+    // Flex
+    "flexDirection",
+    "flexWrap",
+    // Flex or grid
+    "alignItems",
+    "justifyContent",
+    // Grid
+    "placeContent",
+    "justifyItems",
+    "alignContent",
+    "rowGap",
+    "columnGap",
+    "gridAutoFlow",
+    "gridAutoRows",
+    "gridAutoColumns",
+    "gridTemplateColumns",
+    "gridTemplateRows",
+    "gridTemplateAreas",
+];
+const flexChild = [
+    "flexShrink",
+    "flexGrow",
+    "flexBasis",
+    "alignSelf",
+    "order",
+];
+const gridChild = [
+    "gridRowEnd",
+    "gridRowStart",
+    "gridColumnStart",
+    "gridColumnEnd",
+    "alignSelf",
+    "justifySelf",
+    "order",
+];
+const spacing = [
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+];
+const size = [
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "overflow",
+    "objectFit",
+];
+const position = [
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "zIndex",
+    "float",
+    "clear",
+];
+const typography = [
+    "fontFamily",
+    "fontWeight",
+    "fontSize",
+    "lineHeight",
+    "color",
+    "textAlign",
+    "fontStyle",
+    "textDecorationColor",
+    "textDecorationLine",
+    "textDecorationStyle",
+    "letterSpacing",
+    "textIndent",
+    "columnCount",
+    "columnGap",
+    "columnRuleStyle",
+    "columnRuleWidth",
+    "columnRuleColor",
+    "textTransform",
+    "direction",
+    "whiteSpace",
+    "textShadow",
+    // More
+    "fontSizeAdjust",
+    "fontStretch",
+    "fontVariant",
+    "textAlignLast",
+    "textJustify",
+    "textOverflow",
+    "textSizeAdjust",
+    "verticalAlign",
+    "wordSpacing",
+    "wordBreak",
+    "wordWrap",
+];
+const backgrounds = [
+    "backgroundAttachment",
+    "backgroundClip",
+    "backgroundColor",
+    "backgroundImage",
+    "backgroundOrigin",
+    "backgroundPositionX",
+    "backgroundPositionY",
+    "backgroundRepeat",
+    "backgroundSize",
+];
+const borders = [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "borderTopStyle",
+    "borderRightStyle",
+    "borderBottomStyle",
+    "borderLeftStyle",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    // More
+    "borderImageSlice",
+    "borderImageWidth",
+    "borderImageOutset",
+    "borderImageRepeat",
+    "borderImageSource",
+];
+const effects = [
+    "mixBlendMode",
+    "opacity",
+    "outlineColor",
+    "outlineOffset",
+    "outlineStyle",
+    "outlineWidth",
+    "boxShadow",
+    "transform",
+    "filter",
+    "backdropFilter",
+    "cursor",
+    // More
+    "animationDelay",
+    "animationDirection",
+    "animationDuration",
+    "animationFillMode",
+    "animationIterationCount",
+    "animationName",
+    "animationPlayState",
+    "animationTimingFunction",
+    "transitionDelay",
+    "transitionDuration",
+    "transitionProperty",
+    "transitionTimingFunction",
+];
+const other = [
+    "resize",
+    "clip",
+    "visibility",
+    "boxSizing",
+    "content",
+    "quotes",
+    "counterReset",
+    "counterIncrement",
+    "inlineSize",
+    "blockSize",
+    "minInlineSize",
+    "minBlockSize",
+    "maxInlineSize",
+    "maxBlockSize",
+    "userSelect",
+    "pointerEvents",
+];
+exports.categories = {
+    layout: {
+        label: "Layout",
+        properties: layout,
+        moreFrom: "",
+    },
+    flexChild: {
+        label: "Flex Child",
+        properties: flexChild,
+        moreFrom: "",
+    },
+    gridChild: {
+        label: "Grid Child",
+        properties: gridChild,
+        moreFrom: "",
+    },
+    spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+    size: { label: "Size", properties: size, moreFrom: "" },
+    position: { label: "Position", properties: position, moreFrom: "" },
+    typography: {
+        label: "Typography",
+        properties: typography,
+        moreFrom: "fontSizeAdjust",
+    },
+    backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
+    borders: {
+        label: "Borders",
+        properties: borders,
+        moreFrom: "borderImageSlice",
+    },
+    effects: {
+        label: "Effects",
+        properties: effects,
+        moreFrom: "animationDelay",
+    },
+    other: { label: "Other", properties: other, moreFrom: "" },
+};
+exports.propertyCategoryMap = {};
+let category;
+for (category in exports.categories) {
+    for (const property of exports.categories[category].properties) {
+        // We are widening the type here
+        exports.propertyCategoryMap[property] = category;
+    }
+}

package/lib/css/get-browser-style.d.ts

@@ -0,0 +1,3 @@
+import type { Style } from "./types";
+export declare const getBrowserStyle: (element?: Element) => Style;
+//# sourceMappingURL=get-browser-style.d.ts.map

package/lib/css/get-browser-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-browser-style.d.ts","sourceRoot":"","sources":["../../src/css/get-browser-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC;AA6BtE,eAAO,MAAM,eAAe,aAAc,OAAO,KAAG,KAYnD,CAAC"}

package/lib/css/get-browser-style.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrowserStyle = void 0;
+const properties_1 = require("./properties");
+const units_1 = require("./units");
+const unitRegex = new RegExp(`${units_1.units.join("|")}`);
+// @todo use a parser
+const parseValue = (property, value) => {
+    const number = parseFloat(value);
+    const parsedUnit = unitRegex.exec(value);
+    if (value === "rgba(0, 0, 0, 0)")
+        value = "transparent";
+    if (isNaN(number) || parsedUnit === null) {
+        return {
+            type: "keyword",
+            value,
+        };
+    }
+    if (number === 0) {
+        return properties_1.properties[property].initial;
+    }
+    return {
+        type: "unit",
+        unit: parsedUnit[0],
+        value: number,
+    };
+};
+const getBrowserStyle = (element) => {
+    const browserStyle = {};
+    if (element === undefined)
+        return browserStyle;
+    let knownProperty;
+    const computedStyle = getComputedStyle(element);
+    for (knownProperty in properties_1.properties) {
+        if (knownProperty in computedStyle === false)
+            continue;
+        // @ts-ignore Typescript doesn't know we can access CSSStyleDeclaration properties by keys
+        const computedValue = computedStyle[knownProperty];
+        browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
+    }
+    return browserStyle;
+};
+exports.getBrowserStyle = getBrowserStyle;

package/lib/css/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./properties";
+export * from "./units";
+export * from "./types";
+export * from "./get-browser-style";
+export * from "./categories";
+export * from "./keyword-values";
+export * from "./breakpoints";
+export * from "./schema";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/lib/css/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./properties"), exports);
+__exportStar(require("./units"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./get-browser-style"), exports);
+__exportStar(require("./categories"), exports);
+__exportStar(require("./keyword-values"), exports);
+__exportStar(require("./breakpoints"), exports);
+__exportStar(require("./schema"), exports);