@webstudio-is/react-sdk 0.9.0 → 0.10.1

package/lib/css/categories.js

@@ -1,226 +1,224 @@
 const layout = [
-    "display",
-    // Flex
-    "flexDirection",
-    "flexWrap",
-    // Flex or grid
-    "alignItems",
-    "justifyContent",
-    "alignContent",
-    // Grid
-    "placeContent",
-    "justifyItems",
-    "rowGap",
-    "columnGap",
-    "gridAutoFlow",
-    "gridAutoRows",
-    "gridAutoColumns",
-    "gridTemplateColumns",
-    "gridTemplateRows",
-    "gridTemplateAreas",
+  "display",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "justifyContent",
+  "alignContent",
+  "placeContent",
+  "justifyItems",
+  "rowGap",
+  "columnGap",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas"
 ];
 const flexChild = [
-    "flexShrink",
-    "flexGrow",
-    "flexBasis",
-    "alignSelf",
-    "order",
+  "flexShrink",
+  "flexGrow",
+  "flexBasis",
+  "alignSelf",
+  "order"
 ];
 const gridChild = [
-    "gridRowEnd",
-    "gridRowStart",
-    "gridColumnStart",
-    "gridColumnEnd",
-    "alignSelf",
-    "justifySelf",
-    "order",
+  "gridRowEnd",
+  "gridRowStart",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "alignSelf",
+  "justifySelf",
+  "order"
 ];
 const spacing = [
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft"
 ];
 const size = [
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "overflow",
-    "objectFit",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "overflow",
+  "objectFit",
+  "aspectRatio"
 ];
 const position = [
-    "position",
-    "top",
-    "right",
-    "bottom",
-    "left",
-    "zIndex",
-    "float",
-    "clear",
+  "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",
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "color",
+  "textAlign",
+  "fontStyle",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "letterSpacing",
+  "textIndent",
+  "columnCount",
+  "columnGap",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnRuleColor",
+  "textTransform",
+  "direction",
+  "whiteSpace",
+  "textShadow",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontVariant",
+  "textAlignLast",
+  "textJustify",
+  "textOverflow",
+  "textSizeAdjust",
+  "verticalAlign",
+  "wordSpacing",
+  "wordBreak",
+  "wordWrap"
 ];
 const backgrounds = [
-    "backgroundAttachment",
-    "backgroundClip",
-    "backgroundColor",
-    "backgroundImage",
-    "backgroundOrigin",
-    "backgroundPositionX",
-    "backgroundPositionY",
-    "backgroundRepeat",
-    "backgroundSize",
+  "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",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "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",
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "boxShadow",
+  "transform",
+  "filter",
+  "backdropFilter",
+  "cursor",
+  "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",
+  "resize",
+  "clip",
+  "visibility",
+  "boxSizing",
+  "content",
+  "quotes",
+  "counterReset",
+  "counterIncrement",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "minBlockSize",
+  "maxInlineSize",
+  "maxBlockSize",
+  "userSelect",
+  "pointerEvents"
 ];
-export const 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: "" },
+const 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: "" }
 };
-export const propertyCategoryMap = {};
+const propertyCategoryMap = {};
 let category;
 for (category in categories) {
-    for (const property of categories[category].properties) {
-        // We are widening the type here
-        propertyCategoryMap[property] = category;
-    }
+  for (const property of categories[category].properties) {
+    propertyCategoryMap[property] = category;
+  }
 }
+export {
+  categories,
+  propertyCategoryMap
+};

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

@@ -1,45 +1,47 @@
 import { detectFont } from "detect-font";
 import { properties, units } from "@webstudio-is/css-data";
 const unitRegex = new RegExp(`${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 && property in properties) {
-        // @todo
-        return properties[property].initial;
-    }
+  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: "unit",
-        unit: parsedUnit[0],
-        value: number,
+      type: "keyword",
+      value
     };
+  }
+  if (number === 0 && property in properties) {
+    return properties[property].initial;
+  }
+  return {
+    type: "unit",
+    unit: parsedUnit[0],
+    value: number
+  };
 };
-export const getBrowserStyle = (element) => {
-    const browserStyle = {};
-    if (element === undefined)
-        return browserStyle;
-    let knownProperty;
-    const computedStyle = getComputedStyle(element);
-    for (knownProperty in properties) {
-        if (knownProperty in computedStyle === false)
-            continue;
-        // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
-        const computedValue = computedStyle[knownProperty];
-        browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-    }
-    // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
-    browserStyle.fontFamily = {
-        type: "fontFamily",
-        value: [detectFont(element)],
-    };
+const getBrowserStyle = (element) => {
+  const browserStyle = {};
+  if (element === void 0) {
     return browserStyle;
+  }
+  let knownProperty;
+  const computedStyle = getComputedStyle(element);
+  for (knownProperty in properties) {
+    if (knownProperty in computedStyle === false) {
+      continue;
+    }
+    const computedValue = computedStyle[knownProperty];
+    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
+  }
+  browserStyle.fontFamily = {
+    type: "fontFamily",
+    value: [detectFont(element)]
+  };
+  return browserStyle;
+};
+export {
+  getBrowserStyle
 };

package/lib/db/instance.js

@@ -1,17 +1,21 @@
 import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
-export const toBaseInstance = (instance) => {
-    return {
-        id: instance.id,
-        component: instance.component,
-        cssRules: instance.cssRules,
-    };
+const toBaseInstance = (instance) => {
+  return {
+    id: instance.id,
+    component: instance.component,
+    cssRules: instance.cssRules
+  };
 };
-export const Instance = z.lazy(() => z.object({
+const Instance = z.lazy(
+  () => z.object({
     id: z.string(),
     component: z.string(),
     children: z.array(z.union([Instance, z.string()])),
-    cssRules: z.array(CssRule),
-})
-// @todo can't figure out how to make component to be z.enum(Object.keys(components))
+    cssRules: z.array(CssRule)
+  })
 );
+export {
+  Instance,
+  toBaseInstance
+};

package/lib/db/types.js

@@ -1 +0,0 @@
-export {};

package/lib/index.js

@@ -1,9 +1,15 @@
 export * from "./css";
 export * from "./tree";
 export * from "./components";
-export * from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
 export * from "./app";
-export * as customComponents from "./app/custom-components";
+import {
+  customComponents,
+  customComponentsMeta
+} from "./app/custom-components";
+export {
+  customComponents,
+  customComponentsMeta
+};