eddev 0.2.2-beta.5 → 0.2.2-beta.8

package/blocks/ContentBlocks.js

@@ -48,7 +48,7 @@ function ContentBlocks(props) {
                 var Component = blocks_1.default[block.blockName];
                 if (!Component)
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {}, void 0);
-                blockNode = ((0, jsx_runtime_1.jsx)(blockAttributes_1.InlineEditingContextProvider, __assign({ values: block.inline, innerBlocks: block.innerBlocks }, { children: (0, jsx_runtime_1.jsx)(Component, __assign({}, block.props, { innerHTML: block.innerHTML, 
+                blockNode = ((0, jsx_runtime_1.jsx)(blockAttributes_1.InlineEditingContextProvider, __assign({ block: [block.blockName, block.props], values: block.inline, innerBlocks: block.innerBlocks }, { children: (0, jsx_runtime_1.jsx)(Component, __assign({}, block.props, { innerHTML: block.innerHTML, 
                         // innerBlocks={block.innerBlocks}
                         children: Array.isArray(block.innerBlocks) && block.innerBlocks.length ? ((0, jsx_runtime_1.jsx)(ContentBlocks, { blocks: block.innerBlocks }, void 0)) : null }), void 0) }), void 0));
             }

package/blocks/blockAttributes.d.ts

@@ -6,6 +6,7 @@ interface Attributes {
 declare type ProviderProps = PropsWithChildren<{
     values: Attributes;
     innerBlocks: ContentBlock[];
+    block: [string, Attributes];
     onChange?: (attrs: Attributes) => void;
     insertBlocksAfter?: (block: any) => void;
 }>;
@@ -13,4 +14,5 @@ export declare function InlineEditingContextProvider(props: ProviderProps): JSX.
 export declare function useInlineEditableValue<T>(key: string, defaultValue?: T): [T, (value: T) => void];
 export declare function useBlockAppender(): ((block: any) => void) | undefined;
 export declare function useInnerBlocks(): ContentBlock[];
+export declare function useBlockParents(): [string, Attributes][];
 export {};

package/blocks/blockAttributes.js

@@ -10,15 +10,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInnerBlocks = exports.useBlockAppender = exports.useInlineEditableValue = exports.InlineEditingContextProvider = void 0;
+exports.useBlockParents = exports.useInnerBlocks = exports.useBlockAppender = exports.useInlineEditableValue = exports.InlineEditingContextProvider = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var InlineEditingContext = (0, react_1.createContext)(undefined);
 function InlineEditingContextProvider(props) {
+    var parentContext = (0, react_1.useContext)(InlineEditingContext);
     return ((0, jsx_runtime_1.jsx)(InlineEditingContext.Provider, __assign({ value: {
             values: props.values,
             innerBlocks: props.innerBlocks,
+            parents: __spreadArray(__spreadArray([], ((parentContext === null || parentContext === void 0 ? void 0 : parentContext.parents) || []), true), [props.block], false).filter(Boolean),
             getValue: function (key) {
                 var _a;
                 return (_a = props.values) === null || _a === void 0 ? void 0 : _a[key];
@@ -52,11 +63,10 @@ exports.useBlockAppender = useBlockAppender;
 function useInnerBlocks() {
     var ctx = (0, react_1.useContext)(InlineEditingContext);
     return (ctx === null || ctx === void 0 ? void 0 : ctx.innerBlocks) || [];
-    // return [
-    //   attrs?.getValue(key),
-    //   (value: any) => {
-    //     attrs?.setValue(key, value)
-    //   },
-    // ] as [T, (value: T) => void]
 }
 exports.useInnerBlocks = useInnerBlocks;
+function useBlockParents() {
+    var ctx = (0, react_1.useContext)(InlineEditingContext);
+    return (ctx === null || ctx === void 0 ? void 0 : ctx.parents) || [];
+}
+exports.useBlockParents = useBlockParents;

package/blocks/inlineEditing.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from "react";
+import { ElementType, FunctionComponent } from "react";
 import { ContentBlocksSettings } from ".";
 declare type PropTypes<T extends ElementType> = {
     /** The 'key' of this editable text value */
@@ -16,7 +16,8 @@ declare type PropTypes<T extends ElementType> = {
 } & React.ComponentPropsWithoutRef<T>;
 export declare function EditableText<T extends ElementType>({ id, as, appendOnEnter, ...props }: PropTypes<T>): JSX.Element | null;
 declare type AppenderConfig = {
-    button?: boolean;
+    type: "default" | "button" | FunctionComponent<any>;
+    block?: boolean;
 };
 declare type InnerBlocksProps = {
     allowedBlocks?: string[];

package/blocks/inlineEditing.js

@@ -24,7 +24,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InnerBlocks = exports.EditableText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore
 var block_editor_1 = require("@wordpress/block-editor");
 // @ts-ignore
 var blocks_1 = require("@wordpress/blocks");
@@ -75,11 +74,22 @@ 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({});
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(block_editor_1.DefaultBlockAppender, {}, 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={ButtonBlockAppender}
+                // renderAppender={() => <Appender {...props.appender} />}
                 templateLock: props.templateLock, template: props.template }, void 0) }), void 0));
     }
     else {
@@ -97,6 +107,9 @@ var InnerBlocksAdminWrapper = (0, react_2.styled)("div", {
         // marginRight: "auto",
         maxWidth: "var(--grid-inner-width)",
     },
+    ".block-editor-block-list__block .block-list-appender:only-child": {
+        alignSelf: "auto !important",
+    },
     variants: {
         orientation: {
             vertical: {

package/blocks/installGutenbergHooks.js

@@ -97,7 +97,7 @@ function installEDGutenbergHooks() {
                     });
                     return children;
                 }, []);
-                return ((0, jsx_runtime_1.jsx)(BlockContext.Provider, __assign({ value: { name: name, props: props } }, { children: (0, jsx_runtime_1.jsx)(blockAttributes_1.InlineEditingContextProvider, __assign({ values: props.attributes.inline || {}, innerBlocks: children, onChange: function (attrs) {
+                return ((0, jsx_runtime_1.jsx)(BlockContext.Provider, __assign({ value: { name: name, props: props } }, { children: (0, jsx_runtime_1.jsx)(blockAttributes_1.InlineEditingContextProvider, __assign({ values: props.attributes.inline || {}, innerBlocks: children, block: [name, props], onChange: function (attrs) {
                             props.setAttributes(__assign(__assign({}, props.attributes), { inline: attrs }));
                         }, insertBlocksAfter: props.insertBlocksAfter }, { children: edit_1.call(self, props) }), void 0) }), void 0));
             };

package/cli/preinstall.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.main = void 0;
-var fs_1 = require("fs");
-var path_1 = require("path");
+var child_process_1 = require("child_process");
 function main() {
+    var _a, _b;
     if (process.env.VERCEL) {
-        var pkgFile = (0, path_1.join)(process.cwd(), "package.json");
-        var pkg = JSON.parse((0, fs_1.readFileSync)(pkgFile).toString());
-        pkg.devDependencies["next"] = "^12.1.0";
-        (0, fs_1.writeFile)(pkgFile, JSON.stringify(pkg, null, "  "), function () { });
+        // const pkgFile = join(process.cwd(), "package.json")
+        // const pkg = JSON.parse(readFileSync(pkgFile).toString()) as any
+        // pkg.devDependencies["next"] = "^12.1.0"
+        // writeFile(pkgFile, JSON.stringify(pkg, null, "  "), () => {})
+        var proc = (0, child_process_1.spawn)("yarn", ["add", "--dev", "next@^12.1.0"], {
+            cwd: process.cwd(),
+        });
+        (_a = proc.stdout) === null || _a === void 0 ? void 0 : _a.pipe(process.stdout);
+        (_b = proc.stderr) === null || _b === void 0 ? void 0 : _b.pipe(process.stderr);
     }
 }
 exports.main = main;

package/dev-ui/components/ResponsiveScaleEditor.js

@@ -69,7 +69,6 @@ function ResponsiveScaleEditor(props) {
                 var nextValue;
                 if (item.type === "px" && nextType === "multiplier") {
                     if (base) {
-                        console.log(item.value, base.concreteValue);
                         nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
                     }
                 }
@@ -112,8 +111,9 @@ function ResponsiveScaleEditor(props) {
         }
         else {
             props.onChange((0, immer_1.default)(values, function (values) {
+                var _a;
                 for (var token in values) {
-                    var original = _theme_1.originalConfig.responsive.space[token]["@" + breakpoint];
+                    var original = (_a = _theme_1.originalConfig.responsive.space[token]) === null || _a === void 0 ? void 0 : _a["@" + breakpoint];
                     var value = original;
                     if (!value) {
                         value = values[token]["@" + item.baseBreakpoint];
@@ -125,7 +125,7 @@ function ResponsiveScaleEditor(props) {
             }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.data.length, $$labelWidth: props.labelWidth } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: rows[0].row.map(function (item, i) {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ css: { $$total: props.breakpoints.length, $$labelWidth: props.labelWidth } }, { children: [props.showBreakpointName && ((0, jsx_runtime_1.jsx)(Row, __assign({ heading: true }, { children: rows[0].row.map(function (item, i) {
                     var bp = props.breakpoints[i];
                     return ((0, jsx_runtime_1.jsx)(Col, __assign({ css: { textAlign: "center" } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ label: "".concat(bp.min, " to ").concat(bp.max || "∞"), mono: true, nowrap: true }, { children: (0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { checked: item.defined, onChange: function (checked) {
                                     onToggleBreakpoint === null || onToggleBreakpoint === void 0 ? void 0 : onToggleBreakpoint(item, checked);

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

@@ -24,6 +24,7 @@ var Button_1 = require("../atoms/Button");
 var Spacer_1 = require("../atoms/Spacer");
 var Text_1 = require("../atoms/Text");
 var PanelWrapper_1 = require("../PanelWrapper");
+var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
 function TypographyEditor() {
     var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
     var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
@@ -49,9 +50,15 @@ function TypographyEditor() {
                         // })
                     } }, { 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) {
                 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.jsx)(Details, { children: (0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: function (e) {
-                                    setPreviewText(e.currentTarget.value);
-                                } }, void 0) }, void 0)] }, index));
+                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);
+                                    } }, void 0), (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: {
+                                        fontSize: settings.fontSize,
+                                        lineHeight: settings.lineHeight,
+                                    }, showBreakpointName: true, showRange: true, showValues: true, labelWidth: "80px", onChange: function (data) {
+                                        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));
 }
 exports.TypographyEditor = TypographyEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.2-beta.5",
+  "version": "0.2.2-beta.8",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -48,8 +48,8 @@
     "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
-    "@stitches/core": "^1.2.6",
-    "@stitches/react": "^1.2.6",
+    "@stitches/core": "^1.2.7",
+    "@stitches/react": "^1.2.7",
     "@trpc/client": "^9.19.0",
     "@trpc/next": "^9.19.0",
     "@trpc/react": "^9.19.0",

package/style/createStitches.js

@@ -78,11 +78,11 @@ function parseTypography(theme, breakpoints, typography) {
             return value;
         }
     };
-    var _loop_1 = function (name_1) {
+    for (var name_1 in typography) {
         var style = typography[name_1];
         var variant = {};
         typeVariants[name_1] = variant;
-        var _loop_2 = function (key) {
+        for (var key in style) {
             var value = style[key];
             var varName = "--type-".concat(name_1, "-").concat(key);
             variant[key] = "var(".concat(varName, ")");
@@ -93,36 +93,37 @@ function parseTypography(theme, breakpoints, typography) {
             }
             else if (value && typeof value === "object") {
                 // A responsive object value
-                var entries_1 = Object.entries(value);
-                entries_1.forEach(function (_a, i) {
-                    var _b;
-                    var bpName = _a[0], responsiveValue = _a[1];
-                    if (Array.isArray(responsiveValue)) {
-                        responsiveValue = responsiveValue[0];
-                        // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
-                        var minSize = (_b = breakpoints.find(function (bp) { return "@" + bp.key === bpName; })) === null || _b === void 0 ? void 0 : _b.min;
-                        var nextBreakpoint = breakpoints.find(function (bp) { var _a; return "@" + bp.key === ((_a = entries_1[i + 1]) === null || _a === void 0 ? void 0 : _a[0]); });
-                        if (!nextBreakpoint)
-                            throw new Error("Cannot create responsive '".concat(key, "' for '").concat(name_1, "' at breakpoint '").concat(bpName, "', since it is the last-defined breakpoint. Your last size should be a string/number/token."));
-                        var maxSize = nextBreakpoint.min;
-                        var responsiveValue2 = value["@" + nextBreakpoint.key];
-                        if (Array.isArray(responsiveValue2))
-                            responsiveValue2 = responsiveValue2[0];
-                        var size1 = resolveValue(tokenPrefix, responsiveValue);
-                        var size2 = resolveValue(tokenPrefix, responsiveValue2);
-                        responsiveValue = "calc(".concat(size1, " + (100vw - ").concat(minSize, ") / (").concat(unitless(maxSize), " - ").concat(unitless(minSize), ") * (").concat(unitless(size2), " - ").concat(unitless(size1), "))");
-                    }
-                    globals[bpName][varName] = responsiveValue;
-                });
+                var unit = key === "lineHeight" ? "%" : "px";
+                var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit), tokenGlobals = _a[0], initial = _a[1];
+                for (var key_1 in tokenGlobals) {
+                    globals[key_1] = __assign(__assign({}, globals[key_1]), tokenGlobals[key_1]);
+                }
+                // const entries = Object.entries(value)
+                // entries.forEach(([bpName, responsiveValue], i) => {
+                //   if (Array.isArray(responsiveValue)) {
+                //     responsiveValue = responsiveValue[0]
+                //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
+                //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
+                //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
+                //     if (!nextBreakpoint)
+                //       throw new Error(
+                //         `Cannot create responsive '${key}' for '${name}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
+                //       )
+                //     const maxSize = nextBreakpoint.min
+                //     let responsiveValue2 = (value as any)["@" + nextBreakpoint.key]
+                //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
+                //     let size1 = resolveValue(tokenPrefix, responsiveValue)
+                //     let size2 = resolveValue(tokenPrefix, responsiveValue2)
+                //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
+                //       minSize
+                //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
+                //   }
+                //   globals[bpName][varName] = responsiveValue
+                // })
             }
-        };
-        for (var key in style) {
-            _loop_2(key);
         }
-    };
-    for (var name_1 in typography) {
-        _loop_1(name_1);
     }
+    // debugger
     return { globalTypography: globals, typeVariants: typeVariants };
 }
 function parseGrid(theme, media, grid) {