@webstudio-is/react-sdk 0.18.0 → 0.20.0

package/lib/cjs/css/categories.cjs

@@ -29,7 +29,6 @@ const layout = [
   "alignItems",
   "justifyContent",
   "alignContent",
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -56,7 +55,7 @@ const gridChild = [
   "justifySelf",
   "order"
 ];
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -75,6 +74,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio"
 ];
 const position = [
@@ -214,7 +214,7 @@ const categories = {
     properties: gridChild,
     moreFrom: ""
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

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

@@ -23,14 +23,15 @@ __export(get_browser_style_exports, {
 module.exports = __toCommonJS(get_browser_style_exports);
 var import_detect_font = require("detect-font");
 var import_css_data = require("@webstudio-is/css-data");
-const unitRegex = new RegExp(`${import_css_data.units.join("|")}`);
+const unitsList = Object.values(import_css_data.units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 const parseValue = (property, value) => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value
@@ -39,6 +40,13 @@ const parseValue = (property, value) => {
   if (number === 0 && property in import_css_data.properties) {
     return import_css_data.properties[property].initial;
   }
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number
+    };
+  }
   return {
     type: "unit",
     unit: parsedUnit[0],

package/lib/cjs/db/index.cjs

@@ -17,3 +17,4 @@ var db_exports = {};
 module.exports = __toCommonJS(db_exports);
 __reExport(db_exports, require("./types"), module.exports);
 __reExport(db_exports, require("./instance"), module.exports);
+__reExport(db_exports, require("./style"), module.exports);

package/lib/cjs/db/instance.cjs

@@ -25,6 +25,7 @@ __export(instance_exports, {
 module.exports = __toCommonJS(instance_exports);
 var import_css_data = require("@webstudio-is/css-data");
 var import_zod = require("zod");
+var import_components = require("../components");
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
@@ -42,7 +43,7 @@ const Instance = import_zod.z.lazy(
   () => import_zod.z.object({
     type: import_zod.z.literal("instance"),
     id: import_zod.z.string(),
-    component: import_zod.z.string(),
+    component: import_zod.z.enum((0, import_components.getComponentNames)()),
     children: import_zod.z.array(import_zod.z.union([Instance, Text])),
     cssRules: import_zod.z.array(import_css_data.CssRule)
   })

package/lib/cjs/db/style.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_exports = {};
+__export(style_exports, {
+  PresetStyles: () => PresetStyles,
+  PresetStylesItem: () => PresetStylesItem,
+  Styles: () => Styles,
+  StylesItem: () => StylesItem,
+  findMissingPresetStyles: () => findMissingPresetStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_zod = require("zod");
+var import_css_data = require("@webstudio-is/css-data");
+var import_components = require("../components");
+const PresetStylesItem = import_zod.z.object({
+  component: import_zod.z.enum((0, import_components.getComponentNames)()),
+  property: import_zod.z.string(),
+  value: import_css_data.SharedStyleValue
+});
+const PresetStyles = import_zod.z.array(PresetStylesItem);
+const findMissingPresetStyles = (presetStyles, components) => {
+  const populatedComponents = /* @__PURE__ */ new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = (0, import_components.getComponentMeta)(component);
+    if (meta.presetStyle === void 0) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property,
+        value
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+const StylesItem = import_zod.z.object({
+  breakpointId: import_zod.z.string(),
+  instanceId: import_zod.z.string(),
+  property: import_zod.z.string(),
+  value: import_css_data.SharedStyleValue
+});
+const Styles = import_zod.z.array(StylesItem);

package/lib/cjs/tree/wrapper-component.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var wrapper_component_exports = {};
 __export(wrapper_component_exports, {
   WrapperComponent: () => WrapperComponent,
+  componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
   renderWrapperComponentChildren: () => renderWrapperComponentChildren
 });
@@ -52,10 +53,16 @@ const WrapperComponent = ({
 }) => {
   const Component = (0, import_components.getComponent)(instance.component);
   const userProps = (0, import_use_user_props.useUserProps)(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
+const componentAttribute = "data-ws-component";

package/lib/css/categories.js

@@ -5,7 +5,6 @@ const layout = [
   "alignItems",
   "justifyContent",
   "alignContent",
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -32,7 +31,7 @@ const gridChild = [
   "justifySelf",
   "order"
 ];
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -51,6 +50,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio"
 ];
 const position = [
@@ -190,7 +190,7 @@ const categories = {
     properties: gridChild,
     moreFrom: ""
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

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

@@ -1,13 +1,14 @@
 import { detectFont } from "detect-font";
 import { properties, units } from "@webstudio-is/css-data";
-const unitRegex = new RegExp(`${units.join("|")}`);
+const unitsList = Object.values(units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 const parseValue = (property, value) => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value
@@ -16,6 +17,13 @@ const parseValue = (property, value) => {
   if (number === 0 && property in properties) {
     return properties[property].initial;
   }
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number
+    };
+  }
   return {
     type: "unit",
     unit: parsedUnit[0],

package/lib/db/index.js

@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./instance";
+export * from "./style";

package/lib/db/instance.js

@@ -1,5 +1,6 @@
 import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
+import { getComponentNames } from "../components";
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
@@ -17,7 +18,7 @@ const Instance = z.lazy(
   () => z.object({
     type: z.literal("instance"),
     id: z.string(),
-    component: z.string(),
+    component: z.enum(getComponentNames()),
     children: z.array(z.union([Instance, Text])),
     cssRules: z.array(CssRule)
   })

package/lib/db/style.js

@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { SharedStyleValue } from "@webstudio-is/css-data";
+import {
+  getComponentMeta,
+  getComponentNames
+} from "../components";
+const PresetStylesItem = z.object({
+  component: z.enum(getComponentNames()),
+  property: z.string(),
+  value: SharedStyleValue
+});
+const PresetStyles = z.array(PresetStylesItem);
+const findMissingPresetStyles = (presetStyles, components) => {
+  const populatedComponents = /* @__PURE__ */ new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = getComponentMeta(component);
+    if (meta.presetStyle === void 0) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property,
+        value
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+const StylesItem = z.object({
+  breakpointId: z.string(),
+  instanceId: z.string(),
+  property: z.string(),
+  value: SharedStyleValue
+});
+const Styles = z.array(StylesItem);
+export {
+  PresetStyles,
+  PresetStylesItem,
+  Styles,
+  StylesItem,
+  findMissingPresetStyles
+};

package/lib/tree/wrapper-component.js

@@ -27,15 +27,22 @@ const WrapperComponent = ({
 }) => {
   const Component = getComponent(instance.component);
   const userProps = useUserProps(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component
+  };
   return /* @__PURE__ */ jsx(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
+const componentAttribute = "data-ws-component";
 export {
   WrapperComponent,
+  componentAttribute,
   idAttribute,
   renderWrapperComponentChildren
 };

package/package.json

@@ -1,40 +1,22 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
-  "scripts": {
-    "dev": "build-package --watch",
-    "build": "build-package",
-    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
-    "typecheck": "tsc --noEmit",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "yarn typecheck && yarn lint && yarn test",
-    "prepublishOnly": "yarn checks && yarn build",
-    "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
-  },
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "^1.6.4",
-    "@remix-run/react": "^1.2.3",
-    "@remix-run/server-runtime": "^1.2.3",
+    "@remix-run/node": "1.9.0",
+    "@remix-run/react": "1.9.0",
+    "@remix-run/server-runtime": "1.9.0",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "@webstudio-is/generate-arg-types": "*",
-    "@webstudio-is/jest-config": "*",
-    "@webstudio-is/scripts": "*",
-    "@webstudio-is/storybook-config": "*",
-    "@webstudio-is/tsconfig": "*",
     "babel-loader": "^8.2.5",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
@@ -44,28 +26,33 @@
     "remix-utils": "^4.1.0",
     "tsx": "^3.9.0",
     "typescript": "4.7.4",
-    "zod": "^3.19.1"
+    "zod": "^3.19.1",
+    "@webstudio-is/generate-arg-types": "^0.0.1",
+    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/scripts": "^0.0.0",
+    "@webstudio-is/storybook-config": "^0.0.0",
+    "@webstudio-is/tsconfig": "^1.0.1"
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.2.3",
-    "@remix-run/server-runtime": "^1.2.3",
+    "@remix-run/react": "1.9.0",
+    "@remix-run/server-runtime": "1.9.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "@webstudio-is/asset-uploader": "^*",
-    "@webstudio-is/css-data": "*",
-    "@webstudio-is/design-tokens": "*",
-    "@webstudio-is/icons": "*",
-    "@webstudio-is/image": "*",
-    "@webstudio-is/prisma-client": "*",
     "detect-font": "^0.1.5",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
-    "warn-once": "^0.1.1"
+    "warn-once": "^0.1.1",
+    "@webstudio-is/asset-uploader": "^0.20.0",
+    "@webstudio-is/css-data": "^0.20.0",
+    "@webstudio-is/design-tokens": "^0.20.0",
+    "@webstudio-is/icons": "^0.20.0",
+    "@webstudio-is/image": "^0.20.0",
+    "@webstudio-is/prisma-client": "^0.20.0"
   },
   "exports": {
     "import": "./lib/index.js",
@@ -79,5 +66,16 @@
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "scripts": {
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
+    "typecheck": "tsc --noEmit",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "checks": "pnpm typecheck && pnpm lint && pnpm test",
+    "storybook:run": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
+  }
+}

package/src/css/categories.ts

@@ -10,7 +10,6 @@ const layout = [
   "justifyContent",
   "alignContent",
   // Grid
-  "placeContent",
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -40,7 +39,7 @@ const gridChild = [
   "order",
 ] as const;
 
-const spacing = [
+const space = [
   "marginTop",
   "marginRight",
   "marginBottom",
@@ -60,6 +59,7 @@ const size = [
   "maxHeight",
   "overflow",
   "objectFit",
+  "objectPosition",
   "aspectRatio",
 ] as const;
 
@@ -217,7 +217,7 @@ export const categories = {
     properties: gridChild,
     moreFrom: "",
   },
-  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  space: { label: "Space", properties: space, moreFrom: "" },
   size: { label: "Size", properties: size, moreFrom: "" },
   position: { label: "Position", properties: position, moreFrom: "" },
   typography: {

package/src/css/get-browser-style.ts

@@ -2,19 +2,20 @@ import { detectFont } from "detect-font";
 import type { Style, StyleValue, Unit } from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 
-const unitRegex = new RegExp(`${units.join("|")}`);
+const unitsList = Object.values(units).flat();
+const unitRegex = new RegExp(`${unitsList.join("|")}`);
 
 // @todo use a parser
 const parseValue = (
   property: keyof typeof properties,
   value: string
 ): StyleValue => {
-  const number = parseFloat(value);
+  const number = Number.parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
   if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
   }
-  if (isNaN(number) || parsedUnit === null) {
+  if (Number.isNaN(number)) {
     return {
       type: "keyword",
       value,
@@ -25,6 +26,14 @@ const parseValue = (
     return properties[property].initial;
   }
 
+  if (parsedUnit === null) {
+    return {
+      type: "unit",
+      unit: "number",
+      value: number,
+    };
+  }
+
   return {
     type: "unit",
     unit: parsedUnit[0] as Unit,

package/src/db/index.ts

@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./instance";
+export * from "./style";

package/src/db/instance.ts

@@ -1,6 +1,6 @@
 import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
-import { ComponentName } from "../components";
+import { ComponentName, getComponentNames } from "../components";
 
 // This should be used when passing a lot of data is potentially costly.
 // For example, when passing data from an iframe.
@@ -35,14 +35,12 @@ export const Text = z.lazy(() =>
   })
 );
 
-export const Instance = z.lazy(
-  () =>
-    z.object({
-      type: z.literal("instance"),
-      id: z.string(),
-      component: z.string(),
-      children: z.array(z.union([Instance, Text])),
-      cssRules: z.array(CssRule),
-    })
-  // @todo can't figure out how to make component to be z.enum(Object.keys(components))
-) as z.ZodType<Instance>;
+export const Instance: z.ZodType<Instance> = z.lazy(() =>
+  z.object({
+    type: z.literal("instance"),
+    id: z.string(),
+    component: z.enum(getComponentNames() as [ComponentName]),
+    children: z.array(z.union([Instance, Text])),
+    cssRules: z.array(CssRule),
+  })
+);

package/src/db/style.ts

@@ -0,0 +1,72 @@
+import { z } from "zod";
+import type { StyleProperty, StyleValue } from "@webstudio-is/css-data";
+import { SharedStyleValue } from "@webstudio-is/css-data";
+import {
+  type ComponentName,
+  getComponentMeta,
+  getComponentNames,
+} from "../components";
+
+export type PresetStylesItem = {
+  component: ComponentName;
+  property: StyleProperty;
+  value: StyleValue;
+};
+
+// @todo can't figure out how to make property to be enum
+export const PresetStylesItem = z.object({
+  component: z.enum(getComponentNames() as [ComponentName]),
+  property: z.string(),
+  value: SharedStyleValue,
+}) as z.ZodType<PresetStylesItem>;
+
+export const PresetStyles = z.array(PresetStylesItem);
+
+export type PresetStyles = z.infer<typeof PresetStyles>;
+
+export const findMissingPresetStyles = (
+  presetStyles: PresetStyles,
+  components: ComponentName[]
+) => {
+  const populatedComponents = new Set();
+  for (const style of presetStyles) {
+    populatedComponents.add(style.component);
+  }
+  const missingPresetStyles: PresetStyles = [];
+  for (const component of components) {
+    if (populatedComponents.has(component)) {
+      continue;
+    }
+    const meta = getComponentMeta(component);
+    if (meta.presetStyle === undefined) {
+      continue;
+    }
+    for (const [property, value] of Object.entries(meta.presetStyle)) {
+      missingPresetStyles.push({
+        component,
+        property: property as StyleProperty,
+        value,
+      });
+    }
+  }
+  return missingPresetStyles;
+};
+
+export type StylesItem = {
+  breakpointId: string;
+  instanceId: string;
+  property: StyleProperty;
+  value: StyleValue;
+};
+
+// @todo can't figure out how to make property to be enum
+export const StylesItem = z.object({
+  breakpointId: z.string(),
+  instanceId: z.string(),
+  property: z.string(),
+  value: SharedStyleValue,
+}) as z.ZodType<StylesItem>;
+
+export const Styles = z.array(StylesItem);
+
+export type Styles = z.infer<typeof Styles>;

package/src/db/types.ts

@@ -1,10 +1,13 @@
 import type { InstanceProps as DbInstanceProps } from "@webstudio-is/prisma-client";
 import type { UserProp } from "../user-props";
 import type { Instance } from "./instance";
+import type { PresetStyles, Styles } from "./style";
 
 export type Tree = {
   id: string;
   root: Instance;
+  presetStyles: PresetStyles;
+  styles: Styles;
 };
 
 export type Props = {
@@ -13,6 +16,7 @@ export type Props = {
   instanceId: string;
   treeId: string;
 };
+
 export type InstanceProps = Omit<DbInstanceProps, "props"> & {
   props: Array<UserProp>;
 };

package/src/tree/wrapper-component.tsx

@@ -41,10 +41,16 @@ export const WrapperComponent = ({
 }: WrapperComponentProps) => {
   const Component = getComponent(instance.component);
   const userProps = useUserProps(instance.id);
-  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  const props = {
+    ...userProps,
+    ...rest,
+    [idAttribute]: instance.id,
+    [componentAttribute]: instance.component,
+  };
   return (
     <Component {...props}>{renderWrapperComponentChildren(children)}</Component>
   );
 };
 
 export const idAttribute = "data-ws-id";
+export const componentAttribute = "data-ws-component";