@webstudio-is/react-sdk 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Webstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+# Webstudio SDK
+
+Webstudio SDK is a TypeScript API that lets you use your Webstudio site or some components in your custom codebase or just render a complete Remix Document.
+It is currently under development, but feel free to play with the the current [landing site](https://github.com/webstudio-is/webstudio-landing)

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

@@ -0,0 +1,6 @@
+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) => any;
+//# sourceMappingURL=utils.d.ts.map

package/lib/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,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,QAeF,CAAC;AAOF,eAAO,MAAM,iBAAiB,aAAc,QAAQ,KAAG,GAiDtD,CAAC"}

package/lib/arg-types/utils.js

@@ -0,0 +1,80 @@
+"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
+        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 !== null && filter !== void 0 ? filter : validAttributes;
+    const entries = Object.entries(props);
+    return entries.reduce((result, current) => {
+        const [propName, prop] = current;
+        // Filter out props
+        if (!filterFn(prop)) {
+            return result;
+        }
+        const control = (0, exports.mapControlForType)(prop);
+        result[propName] = { ...prop, ...control };
+        return result;
+    }, {});
+};
+exports.propsToArgTypes = propsToArgTypes;
+const matchers = {
+    color: new RegExp("(background|color)", "i"),
+    date: /Date$/,
+};
+const mapControlForType = (propItem) => {
+    var _a;
+    const { type, name } = propItem;
+    if (!type) {
+        return undefined;
+    }
+    // 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" },
+                defaultValue: (_a = propItem.defaultValue) === null || _a === void 0 ? void 0 : _a.value,
+            };
+        }
+    }
+    // args that end with date e.g. purchaseDate
+    if (matchers.date && matchers.date.test(name)) {
+        return { control: { type: "date" } };
+    }
+    switch (type === null || type === void 0 ? void 0 : type.name) {
+        case "array":
+            return { control: { type: "object" } };
+        case "boolean":
+        case "Booleanish":
+            return { control: { type: "boolean" } };
+        case "string":
+            return { control: { type: "text" } };
+        case "number":
+            return { control: { 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 === null || values === void 0 ? void 0 : values.length) <= 5 ? "radio" : "select" },
+                options: values,
+            };
+        }
+        case "function":
+        case "symbol":
+            return null;
+        default:
+            return { control: { type: "text" } };
+    }
+};
+exports.mapControlForType = mapControlForType;

package/lib/components/bold.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const Bold: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=bold.d.ts.map

package/lib/components/bold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bold.d.ts","sourceRoot":"","sources":["../../src/components/bold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,eAAO,MAAM,IAAI,oMAG4B,CAAC"}

package/lib/components/bold.js

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