@webstudio-is/react-sdk 0.7.1 → 0.7.3

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,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,KACvB,QAkBF,CAAC;AAOF,eAAO,MAAM,iBAAiB,aAAc,QAAQ;;;;;;;;;;;oBA6DnD,CAAC"}
+{"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,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapControlForType = exports.propsToArgTypes = void 0;
 const validAttributes = (prop) => {
     if (prop.parent) {
         // Pass *HTML (both ButtonHTMLAttributes and HTMLAttributes), Aria, and SVG attributes through
@@ -11,7 +8,7 @@ const validAttributes = (prop) => {
     // Always allow component's own props
     return true;
 };
-const propsToArgTypes = (props, filter) => {
+export const propsToArgTypes = (props, filter) => {
     const filterFn = filter ?? validAttributes;
     const entries = Object.entries(props);
     return entries.reduce((result, current) => {
@@ -22,71 +19,65 @@ const propsToArgTypes = (props, filter) => {
         if (!filterFn(prop)) {
             return result;
         }
-        const control = (0, exports.mapControlForType)(prop);
-        result[propName] = { ...prop, ...control };
+        const argType = 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$/,
 };
-const mapControlForType = (propItem) => {
+// 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 };
+    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 {
-                control: { type: "color" },
-                ...overrides,
-            };
+            return { ...overrides, type: "color" };
         }
     }
     // args that end with date e.g. purchaseDate
     if (matchers.date && matchers.date.test(name)) {
-        return {
-            control: { type: "date" },
-            ...overrides,
-        };
+        return { ...overrides, type: "date" };
     }
     switch (type?.name) {
         case "array":
-            return {
-                control: { type: "object" },
-                ...overrides,
-            };
+            return { ...overrides, type: "object" };
         case "boolean":
         case "Booleanish":
-            return {
-                control: { type: "boolean" },
-                ...overrides,
-            };
+            return { ...overrides, type: "boolean" };
         case "string":
-            return { control: { type: "text" }, ...overrides };
+            return { ...overrides, type: "text" };
         case "number":
-            return { control: { type: "number" }, ...overrides };
+            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 {
-                control: { type: values?.length <= 5 ? "radio" : "select" },
-                options: values,
                 ...overrides,
+                type: values?.length <= 5 ? "radio" : "select",
+                options: values,
             };
         }
         case "function":
         case "symbol":
             return null;
         default:
-            return { control: { type: "text" }, ...overrides };
+            return { ...overrides, type: "text" };
     }
 };
-exports.mapControlForType = mapControlForType;

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

@@ -0,0 +1,88 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1 @@
+{"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/components/body.cjs

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

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

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

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

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