eddev 0.3.8 → 0.3.10

package/admin/components/FileWell.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    value: number | null | undefined;
+    noBorder?: boolean;
+    mediaType?: string;
+    onChange: (value: number | null) => void;
+};
+export declare function FileWell(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/admin/components/FileWell.js

@@ -0,0 +1,189 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileWell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@stitches/react");
+var react_2 = require("react");
+var selectMedia_1 = require("../selectMedia");
+function FileWell(props) {
+    // @ts-ignore
+    var acf = window.acf;
+    var _a = (0, react_2.useState)(null), selectedFile = _a[0], setSelectedFile = _a[1];
+    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
+    (0, react_2.useEffect)(function () {
+        if (props.value) {
+            var cancelled_1 = false;
+            setImageIsLoading(true);
+            fetch("/wp-json/ed/v1/media/" + Number(props.value))
+                .then(function (response) { return response.json(); })
+                .then(function (image) {
+                if (cancelled_1)
+                    return;
+                setImageIsLoading(false);
+                setSelectedFile(image);
+            });
+            return function () {
+                cancelled_1 = true;
+            };
+        }
+        else {
+            setSelectedFile(null);
+            setImageIsLoading(false);
+        }
+    }, [props.value]);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ noBorder: props.noBorder }, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedFile ? ((0, jsx_runtime_1.jsxs)(FileInfo, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "name" }, { children: selectedFile.filename }), void 0), (0, jsx_runtime_1.jsx)("div", __assign({ className: "size" }, { children: selectedFile.filesize ? Math.round(selectedFile.filesize / 1024 / 1024).toFixed(2) + "mb" : "Unknown size" }), void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(NoSelection, { children: (0, jsx_runtime_1.jsx)(ChooseButton, __assign({ onClick: function (e) {
+                        e.preventDefault();
+                        (0, selectMedia_1.selectMedia)({
+                            mode: "select",
+                            type: props.mediaType,
+                            title: "Select a file",
+                            select: function (selected) {
+                                if (selected) {
+                                    props.onChange(selected.id);
+                                }
+                            },
+                        });
+                    } }, { children: "Choose a file" }), void 0) }, void 0)), selectedFile || imageIsLoading ? ((0, jsx_runtime_1.jsx)(Toolbar, { children: (0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                props.onChange(null);
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-trash" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                (0, selectMedia_1.selectMedia)({
+                                    mode: "edit",
+                                    type: props.mediaType,
+                                    attachment: Number(props.value),
+                                    title: "Edit Image",
+                                });
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-edit" }, void 0) }), void 0), selectedFile && ((0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                window.open(selectedFile.url);
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-external" }, void 0) }), void 0))] }, void 0) }, void 0)) : null] }), void 0));
+}
+exports.FileWell = FileWell;
+var Wrapper = (0, react_1.styled)("div", {
+    position: "relative",
+    display: "block",
+    width: "100%",
+    border: "1px solid #eeeeee",
+    borderRadius: "4px",
+    variants: {
+        noBorder: {
+            true: {
+                border: "0px",
+            },
+        },
+    },
+});
+var ImageContainer = (0, react_1.styled)("div", {
+    margin: "4px",
+    display: "block",
+    position: "relative",
+    img: {
+        maxWidth: "min(100%, 300px)",
+        display: "block",
+    },
+});
+var spin = (0, react_1.keyframes)({
+    from: {
+        transform: "rotate(0deg)",
+    },
+    to: {
+        transform: "rotate(360deg)",
+    },
+});
+var Spinner = (0, react_1.styled)("div", {
+    display: "block",
+    width: "16px",
+    height: "16px",
+    borderRadius: "100px",
+    border: "4px solid transparent",
+    borderTopColor: "currentColor",
+    animation: "".concat(spin, " 0.5s linear infinite"),
+});
+var Loading = (0, react_1.styled)("div", {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "10px",
+});
+var Toolbar = (0, react_1.styled)("div", {
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "$2",
+    padding: "$2",
+});
+var ToolbarButton = (0, react_1.styled)("button", {
+    width: "24px",
+    height: "24px",
+    fontSize: "12px",
+    borderRadius: "100px",
+    background: "white",
+    border: "none",
+    color: "black",
+    cursor: "pointer",
+    appearance: "none",
+    boxShadow: "rgba(0,0,0,0.2) 0px 1px 3px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+ToolbarButton.defaultProps = {
+    className: "dashicons",
+};
+var NoSelection = (0, react_1.styled)("div", {
+    display: "flex",
+    justifyContent: "center",
+    padding: "10px 0px",
+});
+var ChooseButton = (0, react_1.styled)("button", {
+    appearance: "none",
+    border: "0px",
+    background: "#f6f6f6",
+    color: "black",
+    padding: "10px 16px",
+    borderRadius: "100px",
+    cursor: "pointer",
+});
+var AspectWrapper = (0, react_1.styled)("div", {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0.3,
+    transition: "opacity 0.3s",
+    "&:hover": {
+        opacity: 1,
+    },
+});
+var AspectDisplay = (0, react_1.styled)("div", {
+    position: "absolute",
+    border: "1px solid white",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+});
+var FileInfo = (0, react_1.styled)("div", {
+    display: "block",
+    textAlign: "center",
+    pt: "$2",
+    px: "$2",
+    fontFamily: "monospace",
+    ".size": {
+        opacity: 0.5,
+    },
+});

package/admin/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./defineField";
 export * from "./defineWidget";
 export * from "./components/ImageWell";
+export * from "./components/FileWell";

package/admin/index.js

@@ -13,3 +13,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./defineField"), exports);
 __exportStar(require("./defineWidget"), exports);
 __exportStar(require("./components/ImageWell"), exports);
+__exportStar(require("./components/FileWell"), exports);

package/blocks/inlineEditing.js

@@ -76,21 +76,17 @@ function EditableText(_a) {
 exports.EditableText = EditableText;
 var Appender = function (props) {
     if (props.type === "button") {
-        return (0, jsx_runtime_1.jsx)(block_editor_1.ButtonBlockAppender, {}, void 0);
-    }
-    else if (typeof props.type === "function") {
-        return props.type({});
+        return (0, jsx_runtime_1.jsx)(block_editor_1.ButtonBlockAppender, { rootClientId: props.clientId }, void 0);
     }
     else {
-        return (0, jsx_runtime_1.jsx)(block_editor_1.DefaultBlockAppender, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(block_editor_1.DefaultBlockAppender, { rootClientId: props.clientId }, void 0);
     }
 };
 function InnerBlocks(props) {
     if (process.admin) {
         var allowedBlocks = props.allowedBlocks;
-        return ((0, jsx_runtime_1.jsx)(InnerBlocksAdminWrapper, __assign({ orientation: props.orientation || "vertical" }, { children: (0, jsx_runtime_1.jsx)(block_editor_1.InnerBlocks, { orientation: props.orientation, allowedBlocks: allowedBlocks, 
-                // renderAppender={() => <Appender {...props.appender} />}
-                templateLock: props.templateLock, template: props.template }, void 0) }), void 0));
+        var ctx_1 = (0, block_editor_1.useBlockEditContext)();
+        return ((0, jsx_runtime_1.jsx)(InnerBlocksAdminWrapper, __assign({ orientation: props.orientation || "vertical" }, { children: (0, jsx_runtime_1.jsx)(block_editor_1.InnerBlocks, { orientation: props.orientation, allowedBlocks: allowedBlocks, renderAppender: props.appender ? function () { return (0, jsx_runtime_1.jsx)(Appender, __assign({}, props.appender, { clientId: ctx_1.clientId }), void 0); } : undefined, templateLock: props.templateLock, template: props.template }, void 0) }), void 0));
     }
     else {
         var blocks = (0, blockAttributes_1.useInnerBlocks)();

package/dev-ui/components/BreakpointIndicator.js

@@ -48,6 +48,7 @@ var Expanded = (0, theme_1.styled)(Launcher_1.MenuItem, {
     inset: 0,
     $$bg: "black !important",
     $$bgHover: "black !important",
+    lineHeight: 1,
 });
 var Simple = (0, theme_1.styled)(Launcher_1.MenuItem, {
     $$bgHover: "$$bg !important",

package/dev-ui/components/ResponsiveLerpControl.js

@@ -66,7 +66,6 @@ function ResponsiveLerpControl(props) {
         });
         return points;
     }, [props.data, ranges]);
-    console.log("Ranges", ranges, lerpablePoints);
     return ((0, jsx_runtime_1.jsxs)(Outer, { children: [ranges.map(function (item, i) {
                 return ((0, jsx_runtime_1.jsx)(RangeItem, __assign({ css: { $$length: item.length } }, { children: (0, jsx_runtime_1.jsx)(RangeLine, { lerping: item.lerped, hasStart: !item.isStart, hasEnd: !item.isEnd }, void 0) }), i));
             }), props.onToggleLerping &&

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -34,6 +34,11 @@ function ResponsiveScaleEditor(props) {
     var rows = (0, react_1.useMemo)(function () {
         return Object.entries(props.data).map(function (_a) {
             var key = _a[0], row = _a[1];
+            if (!row || typeof row !== "object") {
+                row = {
+                    "@initial": row,
+                };
+            }
             var info = (0, style_1.parseResponsiveObject)(props.breakpoints, row);
             return {
                 token: key,

package/dev-ui/components/panels/ColorEditor.js

@@ -43,7 +43,7 @@ function colorsToCSS(values) {
     return "\n    body {\n      ".concat(Object.entries(values)
         .map(function (_a) {
         var token = _a[0], value = _a[1];
-        return "--colors-".concat(token, ": ").concat(value, ";");
+        return "--colors-".concat(token, ": ").concat(value.includes("$") ? "var(--colors-".concat(value.replace("$", ""), ")") : value, ";");
     })
         .join("\n"), "\n    }\n  ");
     // const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
@@ -74,6 +74,7 @@ function ColorEditor() {
     console.log("COLOR", values, _theme_1.originalConfig);
     var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
     (0, react_1.useEffect)(function () {
+        console.log("Result", colorsToCSS(values));
         stylesheet.set(colorsToCSS(values));
     }, [values]);
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
@@ -92,10 +93,10 @@ function ColorEditor() {
                             setValues(_theme_1.originalConfig.theme.colors);
                         } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: Object.entries(values).map(function (_a) {
                 var token = _a[0], value = _a[1];
-                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), (0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
+                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["$", token] }), void 0), (0, jsx_runtime_1.jsx)(Cell, __assign({ mono: true, small: true }, { children: value }), void 0), value.includes("$") ? ((0, jsx_runtime_1.jsxs)(Cell, __assign({ mono: true }, { children: ["\u21AA", value] }), void 0)) : ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
                                     var _a;
                                     setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
-                                } }, void 0) }, void 0)] }, void 0));
+                                } }, void 0) }, void 0))] }, token));
             }) }), void 0) }, void 0));
 }
 exports.ColorEditor = ColorEditor;

package/dev-ui/components/panels/TypographyEditor.js

@@ -48,7 +48,9 @@ function TypographyEditor() {
                         //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
                         //   }
                         // })
-                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(function (_a, index) {
+                    } }, { children: [icons_1.paste, "Paste"] }), void 0), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}, void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: reset }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(Wrapper, __assign({ onWheel: function (e) {
+                e.stopPropagation();
+            } }, { children: Object.entries(values).map(function (_a, index) {
                 var name = _a[0], settings = _a[1];
                 return ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "monoBold" }, { children: name }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
                                         setPreviewText(e.currentTarget.value);
@@ -59,7 +61,7 @@ function TypographyEditor() {
                                         var _a;
                                         setValues(__assign(__assign({}, values), (_a = {}, _a[name] = __assign(__assign({}, settings), { fontSize: data.fontSize, lineHeight: data.lineHeight }), _a)));
                                     }, modes: ["px", "multiplier"] }, void 0)] }, void 0)] }, index));
-            }) }, void 0) }), void 0));
+            }) }), void 0) }), void 0));
 }
 exports.TypographyEditor = TypographyEditor;
 var TypographyItem = (0, theme_1.styled)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "main": "./index.js",
   "license": "MIT",
   "bin": {

package/style/createStitches.d.ts

@@ -80,7 +80,7 @@ export declare type ResponsiveAtomCalc = ResponsiveAtom & {
     concreteValue: number | null;
 };
 export declare function parseResponsiveObject(breakpoints: ReturnType<typeof parseBreakpoints>, object: any): ResponsiveAtomCalc[];
-export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string): any[];
+export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string, unitlessUnit?: string): any[];
 export declare function parseResponsiveTokens(theme: any, breakpoints: any): {
     initialResponsive: any;
     globalResponsive: any;

package/style/createStitches.js

@@ -89,12 +89,21 @@ function parseTypography(theme, breakpoints, typography) {
             var tokenPrefix = typeKeyMap[key];
             if (typeof value === "string" || typeof value === "number") {
                 // A simple string or number value is used
-                globals["@initial"][varName] = resolveThemeVar(tokenPrefix, value);
+                var result = void 0;
+                if (key === "lineHeight" &&
+                    (typeof value === "number" || (typeof value === "string" && value.match(/^[0-9\.]+$/)))) {
+                    result = value + "em";
+                }
+                else {
+                    result = resolveThemeVar(tokenPrefix, value);
+                }
+                globals["@initial"][varName] = result;
             }
             else if (value && typeof value === "object") {
                 // A responsive object value
                 var unit = key === "lineHeight" ? "%" : "px";
-                var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit), tokenGlobals = _a[0], initial = _a[1];
+                var unitlessUnit = key === "lineHeight" ? "em" : unit;
+                var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit, unitlessUnit), tokenGlobals = _a[0], initial = _a[1];
                 for (var key_1 in tokenGlobals) {
                     globals[key_1] = __assign(__assign({}, globals[key_1]), tokenGlobals[key_1]);
                 }
@@ -273,12 +282,20 @@ function parseResponsiveObject(breakpoints, object) {
     return result;
 }
 exports.parseResponsiveObject = parseResponsiveObject;
-function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
+function getResponsiveObjectStyles(breakpoints, object, varName, unit, unitlessUnit) {
     var _a, _b, _c;
     var _d;
     if (unit === void 0) { unit = "px"; }
+    if (unitlessUnit === void 0) { unitlessUnit = unit; }
     // Prescale object
     object = __assign({}, object);
+    if (unitlessUnit) {
+        for (var key in object) {
+            if (typeof object[key] === "number") {
+                object[key] = object[key] + unitlessUnit;
+            }
+        }
+    }
     var parsed = parseResponsiveObject(breakpoints, object);
     var globals = {};
     for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {