@webstudio-is/react-sdk 0.7.3 → 0.9.0

package/lib/user-props/use-user-props-asset.d.ts

@@ -0,0 +1,8 @@
+import { type Instance } from "../db";
+import { type UserProp } from "./schema";
+import type { Asset } from "@webstudio-is/asset-uploader";
+/**
+ * Get asset for prop, like src on the Image component
+ */
+export declare const useUserPropsAsset: (instanceId: Instance["id"], propName: UserProp["prop"]) => Asset | null;
+//# sourceMappingURL=use-user-props-asset.d.ts.map

package/lib/user-props/use-user-props-asset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-user-props-asset.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props-asset.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,iBAAiB,eAChB,QAAQ,CAAC,IAAI,CAAC,YAChB,QAAQ,CAAC,MAAM,CAAC,KACzB,KAAK,GAAG,IAaV,CAAC"}

package/lib/user-props/use-user-props-asset.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { useAllUserProps } from "./all-user-props";
+/**
+ * Get asset for prop, like src on the Image component
+ */
+export const useUserPropsAsset = (instanceId, propName) => {
+    const [allUserProps] = useAllUserProps();
+    const propsData = allUserProps[instanceId];
+    const asset = useMemo(() => {
+        if (propsData == null)
+            return null;
+        const prop = propsData.props.find((prop) => prop.prop === propName);
+        if (prop == null)
+            return null;
+        return prop.asset ?? null;
+    }, [propName, propsData]);
+    return asset;
+};

package/lib/user-props/use-user-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAwBtD,CAAC"}
+{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAatD,CAAC"}

package/lib/user-props/use-user-props.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
 /**
  * User props mapped in prop:value format,
@@ -7,23 +7,13 @@ import { useAllUserProps } from "./all-user-props";
 export const useUserProps = (instanceId) => {
     const [allUserProps] = useAllUserProps();
     const propsData = allUserProps[instanceId];
-    const initialUserProps = useMemo(() => {
-        if (propsData === undefined)
+    const props = useMemo(() => {
+        if (propsData == null)
             return {};
         return propsData.props.reduce((props, { prop, value }) => {
             props[prop] = value;
             return props;
         }, {});
     }, [propsData]);
-    const [props, setProps] = useState(initialUserProps);
-    useEffect(() => {
-        if (propsData == undefined)
-            return;
-        const nextProps = {};
-        for (const prop of propsData.props) {
-            nextProps[prop.prop] = prop.value;
-        }
-        setProps(nextProps);
-    }, [propsData]);
     return props;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.7.3",
+  "version": "0.9.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "tsup --watch",
     "build": "yarn build:lib",
-    "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
+    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
     "typecheck": "tsc --noEmit",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
     "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
@@ -17,7 +17,8 @@
     "checks": "yarn typecheck && yarn lint && yarn test",
     "prepublishOnly": "yarn checks && yarn build:lib",
     "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "storybook:build": "build-storybook",
+    "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -32,15 +33,13 @@
     "@storybook/manager-webpack4": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.11",
-    "@types/fs-extra": "^9.0.13",
     "@types/node": "^17.0.21",
     "@webstudio-is/jest-config": "*",
-    "@webstudio-is/prisma-client": "*",
+    "@webstudio-is/generate-arg-types": "*",
     "babel-loader": "^8.2.5",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
     "react": "^17.0.2",
-    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
     "tsup": "^6.1.3",
@@ -61,9 +60,9 @@
     "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
     "@webstudio-is/css-data": "*",
-    "@webstudio-is/fonts": "*",
     "@webstudio-is/icons": "*",
-    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/image": "*",
+    "@webstudio-is/prisma-client": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",

package/lib/arg-types/utils.d.ts

@@ -1,10 +0,0 @@
-import { PropItem } from "react-docgen-typescript";
-export declare type FilterPredicate = (prop: PropItem) => boolean;
-export declare const propsToArgTypes: (props: Record<string, PropItem>, filter?: FilterPredicate) => Record<string, any>;
-export declare const getArgType: (propItem: any) => {
-    type: string;
-    defaultValue: any;
-    options: any;
-    required: any;
-} | null | undefined;
-//# sourceMappingURL=utils.d.ts.map

package/lib/arg-types/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;AAa1D,eAAO,MAAM,eAAe,UACnB,OAAO,MAAM,EAAE,QAAQ,CAAC,WACtB,eAAe,wBAqBzB,CAAC;AAQF,eAAO,MAAM,UAAU,aAAc,GAAG;;;;;oBAqDvC,CAAC"}

package/lib/arg-types/utils.js

@@ -1,83 +0,0 @@
-const validAttributes = (prop) => {
-    if (prop.parent) {
-        // Pass *HTML (both ButtonHTMLAttributes and HTMLAttributes), Aria, and SVG attributes through
-        const matcher = /.?(HTML|SVG|Aria)Attributes/;
-        // TODO: Add a test for this
-        return prop.parent.name.match(matcher);
-    }
-    // Always allow component's own props
-    return true;
-};
-export const propsToArgTypes = (props, filter) => {
-    const filterFn = filter ?? validAttributes;
-    const entries = Object.entries(props);
-    return entries.reduce((result, current) => {
-        // @todo need halp
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const [propName, prop] = current;
-        // Filter out props
-        if (!filterFn(prop)) {
-            return result;
-        }
-        const argType = getArgType(prop);
-        if (argType != null) {
-            result[propName] = argType;
-        }
-        return result;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    }, {});
-};
-const matchers = {
-    color: new RegExp("(background|color)", "i"),
-    date: /Date$/,
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getArgType = (propItem) => {
-    const { type, name } = propItem;
-    if (!type) {
-        return undefined;
-    }
-    const overrides = {
-        defaultValue: propItem.defaultValue?.value ?? null,
-        options: propItem.options,
-        required: propItem.required,
-    };
-    // args that end with background or color e.g. iconColor
-    if (matchers.color && matchers.color.test(name)) {
-        const controlType = propItem.type.name;
-        if (controlType === "string") {
-            return { ...overrides, type: "color" };
-        }
-    }
-    // args that end with date e.g. purchaseDate
-    if (matchers.date && matchers.date.test(name)) {
-        return { ...overrides, type: "date" };
-    }
-    switch (type?.name) {
-        case "array":
-            return { ...overrides, type: "object" };
-        case "boolean":
-        case "Booleanish":
-            return { ...overrides, type: "boolean" };
-        case "string":
-            return { ...overrides, type: "text" };
-        case "number":
-            return { ...overrides, type: "number" };
-        case "enum": {
-            const { value } = type;
-            // Remove additional quotes from enum values
-            // @ts-expect-error Original type has `any` type
-            const values = value.map((val) => val.value.replace(/^"(.+)"$/, "$1"));
-            return {
-                ...overrides,
-                type: values?.length <= 5 ? "radio" : "select",
-                options: values,
-            };
-        }
-        case "function":
-        case "symbol":
-            return null;
-        default:
-            return { ...overrides, type: "text" };
-    }
-};

package/lib/cjs/arg-types/utils.cjs

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArgType = exports.propsToArgTypes = void 0;
-const validAttributes = (prop) => {
-    if (prop.parent) {
-        // Pass *HTML (both ButtonHTMLAttributes and HTMLAttributes), Aria, and SVG attributes through
-        const matcher = /.?(HTML|SVG|Aria)Attributes/;
-        // TODO: Add a test for this
-        return prop.parent.name.match(matcher);
-    }
-    // Always allow component's own props
-    return true;
-};
-const propsToArgTypes = (props, filter) => {
-    const filterFn = filter ?? validAttributes;
-    const entries = Object.entries(props);
-    return entries.reduce((result, current) => {
-        // @todo need halp
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const [propName, prop] = current;
-        // Filter out props
-        if (!filterFn(prop)) {
-            return result;
-        }
-        const argType = (0, exports.getArgType)(prop);
-        if (argType != null) {
-            result[propName] = argType;
-        }
-        return result;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    }, {});
-};
-exports.propsToArgTypes = propsToArgTypes;
-const matchers = {
-    color: new RegExp("(background|color)", "i"),
-    date: /Date$/,
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getArgType = (propItem) => {
-    const { type, name } = propItem;
-    if (!type) {
-        return undefined;
-    }
-    const overrides = {
-        defaultValue: propItem.defaultValue?.value ?? null,
-        options: propItem.options,
-        required: propItem.required,
-    };
-    // args that end with background or color e.g. iconColor
-    if (matchers.color && matchers.color.test(name)) {
-        const controlType = propItem.type.name;
-        if (controlType === "string") {
-            return { ...overrides, type: "color" };
-        }
-    }
-    // args that end with date e.g. purchaseDate
-    if (matchers.date && matchers.date.test(name)) {
-        return { ...overrides, type: "date" };
-    }
-    switch (type?.name) {
-        case "array":
-            return { ...overrides, type: "object" };
-        case "boolean":
-        case "Booleanish":
-            return { ...overrides, type: "boolean" };
-        case "string":
-            return { ...overrides, type: "text" };
-        case "number":
-            return { ...overrides, type: "number" };
-        case "enum": {
-            const { value } = type;
-            // Remove additional quotes from enum values
-            // @ts-expect-error Original type has `any` type
-            const values = value.map((val) => val.value.replace(/^"(.+)"$/, "$1"));
-            return {
-                ...overrides,
-                type: values?.length <= 5 ? "radio" : "select",
-                options: values,
-            };
-        }
-        case "function":
-        case "symbol":
-            return null;
-        default:
-            return { ...overrides, type: "text" };
-    }
-};
-exports.getArgType = getArgType;

package/lib/cjs/arg-types/utils.d.ts

@@ -1,10 +0,0 @@
-import { PropItem } from "react-docgen-typescript";
-export declare type FilterPredicate = (prop: PropItem) => boolean;
-export declare const propsToArgTypes: (props: Record<string, PropItem>, filter?: FilterPredicate) => Record<string, any>;
-export declare const getArgType: (propItem: any) => {
-    type: string;
-    defaultValue: any;
-    options: any;
-    required: any;
-} | null | undefined;
-//# sourceMappingURL=utils.d.ts.map

package/lib/cjs/arg-types/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;AAa1D,eAAO,MAAM,eAAe,UACnB,OAAO,MAAM,EAAE,QAAQ,CAAC,WACtB,eAAe,wBAqBzB,CAAC;AAQF,eAAO,MAAM,UAAU,aAAc,GAAG;;;;;oBAqDvC,CAAC"}

package/lib/cjs/remix/handle-request.server.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../../src/remix/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

package/lib/cjs/remix/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/remix/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC"}

package/lib/cjs/remix/root.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/remix/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAiB7B,CAAC"}

package/lib/remix/handle-request.server.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../src/remix/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/remix/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC"}

package/lib/remix/root.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/remix/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAiB7B,CAAC"}