eddev 0.2.1 → 0.2.2-beta.11

package/{fields → admin}/components/ImageWell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     previewSize: string;
     aspects: string[];

package/admin/defineWidget.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from "react";
+declare type WidgetProps = {
+    element: HTMLElement;
+    dataset: DOMStringMap;
+};
+export declare function defineWidget(name: string, component: ComponentType<WidgetProps>): {
+    name: string;
+    component: ComponentType<WidgetProps>;
+};
+export {};

package/admin/defineWidget.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineWidget = void 0;
+function defineWidget(name, component) {
+    return {
+        name: name,
+        component: component,
+    };
+}
+exports.defineWidget = defineWidget;

package/admin/index.d.ts

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

package/{fields → admin}/index.js

@@ -10,5 +10,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./defineFIeld"), exports);
+__exportStar(require("./defineField"), exports);
+__exportStar(require("./defineWidget"), exports);
 __exportStar(require("./components/ImageWell"), exports);

package/admin/runWidgets.d.ts

@@ -0,0 +1 @@
+export declare function runWidgets(): void;

package/admin/runWidgets.js

@@ -0,0 +1,40 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runWidgets = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var widgets_1 = __importDefault(require("@manifest/widgets"));
+var react_dom_1 = __importDefault(require("react-dom"));
+function runWidgets() {
+    var elements = document.querySelectorAll("[data-widget]");
+    console.log("Running widgets", elements, widgets_1.default);
+    elements.forEach(function (el) {
+        if (el instanceof HTMLElement) {
+            var data = el.dataset;
+            var name_1 = data["widget"];
+            var type = widgets_1.default.find(function (item) { return item.name === name_1; });
+            if (type) {
+                var props = {
+                    element: el,
+                    dataset: data,
+                };
+                react_dom_1.default.render((0, jsx_runtime_1.jsx)(type.component, __assign({}, props), void 0), el);
+            }
+        }
+    });
+}
+exports.runWidgets = runWidgets;

package/blocks/ContentBlocks.js

@@ -32,6 +32,9 @@ var react_1 = require("react");
 var ErrorBoundaryFrontend_1 = require("./ErrorBoundaryFrontend");
 exports.BlocksContext = (0, react_1.createContext)(undefined);
 function ContentBlocks(props) {
+    if (process.admin) {
+        throw new Error("ContentBlocks should only be used on the frontend.");
+    }
     if (!Array.isArray(props.blocks))
         return null;
     var parentContext = (0, react_1.useContext)(exports.BlocksContext);
@@ -45,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,9 +6,13 @@ interface Attributes {
 declare type ProviderProps = PropsWithChildren<{
     values: Attributes;
     innerBlocks: ContentBlock[];
+    block: [string, Attributes];
     onChange?: (attrs: Attributes) => void;
+    insertBlocksAfter?: (block: any) => void;
 }>;
 export declare function InlineEditingContextProvider(props: ProviderProps): JSX.Element;
 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.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];
@@ -29,6 +40,7 @@ function InlineEditingContextProvider(props) {
                     props.onChange(__assign(__assign({}, (props.values || {})), (_a = {}, _a[key] = value, _a)));
                 }
             },
+            insertBlocksAfter: props.insertBlocksAfter,
         } }, { children: props.children }), void 0));
 }
 exports.InlineEditingContextProvider = InlineEditingContextProvider;
@@ -43,14 +55,18 @@ function useInlineEditableValue(key, defaultValue) {
     ];
 }
 exports.useInlineEditableValue = useInlineEditableValue;
+function useBlockAppender() {
+    var ctx = (0, react_1.useContext)(InlineEditingContext);
+    return ctx === null || ctx === void 0 ? void 0 : ctx.insertBlocksAfter;
+}
+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 */
@@ -11,14 +11,20 @@ declare type PropTypes<T extends ElementType> = {
     inlineToolbar?: boolean;
     /** Specify default content to use on the frontend if nothing has been entered */
     defaultValue?: string;
+    /** Append a new block when the user hits 'Enter' */
+    appendOnEnter?: boolean;
 } & React.ComponentPropsWithoutRef<T>;
-export declare function EditableText<T extends ElementType>({ id, as, ...props }: PropTypes<T>): JSX.Element | null;
+export declare function EditableText<T extends ElementType>({ id, as, appendOnEnter, ...props }: PropTypes<T>): JSX.Element | null;
+declare type AppenderConfig = {
+    type: "default" | "button" | FunctionComponent<any>;
+    block?: boolean;
+};
 declare type InnerBlocksProps = {
     allowedBlocks?: string[];
     orientation?: "horizontal" | "vertical";
     templateLock?: any;
     template?: any;
-    renderAppender?: any;
+    appender?: AppenderConfig;
 } & ContentBlocksSettings;
 export declare function InnerBlocks(props: InnerBlocksProps): JSX.Element;
 export {};

package/blocks/inlineEditing.js

@@ -24,8 +24,9 @@ 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");
 var ContentBlocks_1 = require("./ContentBlocks");
 var react_1 = require("react");
 var blockAttributes_1 = require("./blockAttributes");
@@ -33,10 +34,17 @@ var react_2 = require("@stitches/react");
 var remoteProps_1 = require("../routing/remoteProps");
 var __1 = require("..");
 function EditableText(_a) {
-    var id = _a.id, as = _a.as, props = __rest(_a, ["id", "as"]);
+    var id = _a.id, as = _a.as, appendOnEnter = _a.appendOnEnter, props = __rest(_a, ["id", "as", "appendOnEnter"]);
     if (process.admin) {
         var _b = (0, blockAttributes_1.useInlineEditableValue)(id), value = _b[0], setValue = _b[1];
-        return ((0, jsx_runtime_1.jsx)(block_editor_1.RichText, __assign({}, props, { tagName: as, value: value || "", onChange: setValue, disableLineBreaks: props.disableLineBreaks }), void 0));
+        var appendBlocks_1 = (0, blockAttributes_1.useBlockAppender)();
+        return ((0, jsx_runtime_1.jsx)(block_editor_1.RichText, __assign({}, props, { tagName: as, value: value || "", onChange: setValue, disableLineBreaks: props.disableLineBreaks, onKeyDownCapture: function (e) {
+                if (e.key === "Enter" && appendOnEnter && appendBlocks_1) {
+                    appendBlocks_1([(0, blocks_1.createBlock)("core/paragraph")]);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            } }), void 0));
     }
     else {
         var value = (0, blockAttributes_1.useInlineEditableValue)(id)[0];
@@ -66,11 +74,23 @@ 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;
-        // console.log("ALLOWED BLOCKS", props.allowTaggedBlocks, 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: props.renderAppender, templateLock: props.templateLock, template: props.template }, void 0) }), void 0));
+        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));
     }
     else {
         var blocks = (0, blockAttributes_1.useInnerBlocks)();
@@ -87,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

@@ -27,6 +27,8 @@ exports.setBlockManifest = exports.installEDGutenbergHooks = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
 var hooks_1 = require("@wordpress/hooks");
+// @ts-ignore
+var data_1 = require("@wordpress/data");
 var react_1 = require("react");
 // @ts-ignore
 var blockAttributes_1 = require("./blockAttributes");
@@ -45,6 +47,11 @@ function installEDGutenbergHooks() {
     if (!window.wp.blockEditor)
         return;
     (0, react_2.globalCss)({
+        ".edit-post-visual-editor__post-title-wrapper": {
+            width: "var(--grid-inner-width)",
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
         ".block-editor-block-list__block:hover": {
             outline: "1px solid #e1e1e1",
         },
@@ -82,9 +89,17 @@ function installEDGutenbergHooks() {
                     // @ts-ignore
                     window.wp.data.dispatch("core/block-editor").setTemplateValidity(true);
                 }, []);
-                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: props.innerBlocks, onChange: function (attrs) {
+                var children = (0, data_1.useSelect)(function (select) {
+                    var _a = select("core/block-editor"), getBlock = _a.getBlock, getBlockOrder = _a.getBlockOrder;
+                    var innerBlockIDs = getBlockOrder(props.clientId);
+                    var children = innerBlockIDs.map(function (id) {
+                        return getBlock(id);
+                    });
+                    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, block: [name, props], onChange: function (attrs) {
                             props.setAttributes(__assign(__assign({}, props.attributes), { inline: attrs }));
-                        } }, { children: edit_1.call(self, props) }), void 0) }), void 0));
+                        }, insertBlocksAfter: props.insertBlocksAfter }, { children: edit_1.call(self, props) }), void 0) }), void 0));
             };
         }
         // Remember the block type name
@@ -154,7 +169,13 @@ function installEDGutenbergHooks() {
     var parseJSX = acf.parseJSX;
     // @ts-ignore
     acf.parseJSX = function (html) {
-        var payload = JSON.parse(html.replace(/(^[^>]+>|<[^>]+>$)/g, ""));
+        var payload;
+        try {
+            payload = JSON.parse(html.replace(/(^[^>]+>|<[^>]+>$)/g, ""));
+        }
+        catch (err) {
+            throw new Error("eddev: Error parsing block data from: \n" + html);
+        }
         return (0, jsx_runtime_1.jsx)(BlockRenderer, { payload: payload }, void 0);
     };
 }

package/build/get-webpack-config.js

@@ -79,6 +79,7 @@ var manifest_blocks_1 = require("./manifests/manifest-blocks");
 var manifest_fields_1 = require("./manifests/manifest-fields");
 var manifest_views_1 = require("./manifests/manifest-views");
 var get_config_1 = require("../config/get-config");
+var manifest_widgets_1 = require("./manifests/manifest-widgets");
 function getWebpackConfig(opts) {
     return __awaiter(this, void 0, void 0, function () {
         var compiling, config, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, rpcExists, buildID;
@@ -283,6 +284,23 @@ function getWebpackConfig(opts) {
                     else {
                         writeVirtualModule(ALIAS["@manifest/fields"], "\n        export default {}\n      ");
                     }
+                    // Field manifest
+                    ALIAS["@manifest/widgets"] = path_1.default.resolve(opts.baseDirectory, "_widgets_manifest.js");
+                    if (opts.isAdmin) {
+                        manifestLoaders.push((0, manifest_widgets_1.createWidgetManifestGenerator)({
+                            baseDirectory: opts.baseDirectory,
+                            isAdmin: true,
+                            isDev: isDev,
+                            isServerless: isServerless,
+                            watch: isDev,
+                            onGenerate: function (manifest) {
+                                writeVirtualModule(ALIAS["@manifest/widgets"], manifest);
+                            },
+                        }));
+                    }
+                    else {
+                        writeVirtualModule(ALIAS["@manifest/widgets"], "\n          export default {}\n        ");
+                    }
                     // Block manifest
                     ALIAS["@manifest/blocks"] = path_1.default.resolve(opts.baseDirectory, "_blocks_manifest.js");
                     manifestLoaders.push((0, manifest_blocks_1.createBlockManifestGenerator)({

package/build/graphql-codegen/graphql-codegen-blocks.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.plugin = void 0;
 function plugin(schema, documents, config) {
-    console.log(documents);
     process.exit();
 }
 exports.plugin = plugin;

package/build/manifests/manifest-widgets.d.ts

@@ -0,0 +1,12 @@
+declare type Options = {
+    baseDirectory: string;
+    isAdmin: boolean;
+    isDev: boolean;
+    isServerless: boolean;
+    onGenerate: (value: string) => void;
+    watch: boolean;
+};
+export declare function createWidgetManifestGenerator(opts: Options): Promise<{
+    close(): void;
+}>;
+export {};

package/build/manifests/manifest-widgets.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWidgetManifestGenerator = void 0;
+var manifest_1 = require("./manifest");
+var path_1 = __importDefault(require("path"));
+var change_case_1 = require("change-case");
+function createWidgetManifestGenerator(opts) {
+    return (0, manifest_1.createManifestGenerator)({
+        glob: path_1.default.join(opts.baseDirectory, "/backend/widgets/*.tsx"),
+        onGenerate: opts.onGenerate,
+        watch: opts.watch,
+        generate: function (fileNames) {
+            if (opts.isAdmin) {
+                var files = fileNames
+                    .filter(function (file) { return !file.includes("/_app"); })
+                    .map(function (file) {
+                    var relative = path_1.default.relative(opts.baseDirectory, file);
+                    var name = path_1.default.basename(file).replace(/\.(jsx|tsx|ts|js)$/i, "");
+                    var module = JSON.stringify("./" + relative);
+                    var componentName = "Widget" + (0, change_case_1.pascalCase)(name);
+                    return { relative: relative, name: name, module: module, componentName: componentName };
+                });
+                return "\n          ".concat(files.map(function (_a) {
+                    var componentName = _a.componentName, module = _a.module;
+                    return "import ".concat(componentName, " from ").concat(module);
+                }).join("\n"), "\n\n          export default [\n            ").concat(files
+                    .map(function (_a) {
+                    var relative = _a.relative, componentName = _a.componentName, module = _a.module, name = _a.name;
+                    return componentName;
+                })
+                    .join(",\n"), "\n          ]\n        ");
+            }
+            else {
+                return "export default {}";
+            }
+        },
+    });
+}
+exports.createWidgetManifestGenerator = createWidgetManifestGenerator;

package/build/serverless/create-next-app.js

@@ -185,10 +185,6 @@ function createNextApp(opts) {
                     // Write APIs proxy code
                     _b.sent();
                     // Remove pages/api/trpc directory if no _rpc is found
-                    console.log({
-                        index: (0, path_1.join)(opts.baseDirectory, "apis/_rpc/index.ts"),
-                        rpc: (0, path_1.join)(opts.baseDirectory, "apis/_rpc.ts"),
-                    });
                     if (!(0, fs_1.existsSync)((0, path_1.join)(opts.baseDirectory, "apis/_rpc/index.ts")) &&
                         !(0, fs_1.existsSync)((0, path_1.join)(opts.baseDirectory, "apis/_rpc.ts"))) {
                         // removeSync(join(serverlessDirectory, "pages/api/trpc"))

package/build/workers/codegen-worker-script.js

@@ -181,7 +181,9 @@ function beginWork(opts) {
                             if (!endpoint) {
                                 sendSignal({
                                     code: "error",
-                                    errors: ["Could not find DEBUG_GRAPHQL_URL value in .env"],
+                                    errors: [
+                                        "Could not find DEBUG_GRAPHQL_URL value in .env. This will be automatically populated once you visit WP Admin first the first time!",
+                                    ],
                                 });
                                 regenerating = false;
                                 return [2 /*return*/];

package/cli/display/components/BundleDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CompilerState } from "../../../build/state/compiler-state";
 import { Observable } from "../../../utils/Observable";
 export declare function BundleDisplay(props: {

package/cli/display/components/CodegenDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { Observable } from "../../../utils/Observable";
 export declare function CodegenDisplay(props: {

package/cli/display/components/DevCLIDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { CompilerState } from "../../../build/state/compiler-state";
 import { ServerlessState } from "../../../build/state/serverless-state";

package/cli/display/components/ServerlessDisplay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ServerlessState } from "../../../build/state/serverless-state";
 import { Observable } from "../../../utils/Observable";
 export declare function ServerlessDisplay(props: {

package/cli/display/components/StatusIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     icon: "loading" | "tick" | "error" | "none";
 };

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/components/AdminBar.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function AdminBar(): JSX.Element;

package/dev-ui/components/BreakpointColumnHeader.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     lerpStart?: boolean;
     lerps?: boolean;

package/dev-ui/components/BreakpointIndicator.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function BreakpointIndicator(): JSX.Element;

package/dev-ui/components/DevUI.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function DevUI(): JSX.Element;

package/dev-ui/components/ResponsiveLerpControl.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ResponsiveAtomCalc } from "../../style";
 declare type Props = {
     data: ResponsiveAtomCalc[];

package/dev-ui/components/ResponsiveScaleEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BreakpointArray } from "../../style";
 export declare const RESPONSIVE_COLUMN_WIDTH = "110px";
 export declare const RESPONSIVE_ROW_HEIGHT = "20px";

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/atoms/NumberField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     prefix?: string;
     suffix?: string;

package/dev-ui/components/panels/PageDataDebugger.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function PageDataDebugger(): JSX.Element;

package/dev-ui/components/panels/SpacingEditor.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function SpacingEditor(): JSX.Element;

package/dev-ui/components/panels/TypographyEditor.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function TypographyEditor(): JSX.Element;