eddev 0.2.67-beta1 → 0.3.0-beta1

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

@@ -1,16 +1,27 @@
 "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.ColorEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-const _theme_1 = require("@theme");
-const react_1 = require("react");
-const PanelWrapper_1 = require("../PanelWrapper");
-const useStylesheet_1 = require("../../hooks/useStylesheet");
-const Button_1 = require("../atoms/Button");
-const icons_1 = require("../../icons");
-const Spacer_1 = require("../atoms/Spacer");
-const theme_1 = require("../../theme");
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var PanelWrapper_1 = require("../PanelWrapper");
+var useStylesheet_1 = require("../../hooks/useStylesheet");
+var Button_1 = require("../atoms/Button");
+var icons_1 = require("../../icons");
+var Spacer_1 = require("../atoms/Spacer");
+var theme_1 = require("../../theme");
 function colorsToJSON(values) {
     return JSON.stringify(values, null, 2);
     // return (
@@ -29,15 +40,12 @@ function colorsToJSON(values) {
     // )
 }
 function colorsToCSS(values) {
-    return `
-    body {
-      ${Object.entries(values)
-        .map(([token, value]) => {
-        return `--colors-${token}: ${value};`;
+    return "\n    body {\n      ".concat(Object.entries(values)
+        .map(function (_a) {
+        var token = _a[0], value = _a[1];
+        return "--colors-".concat(token, ": ").concat(value, ";");
     })
-        .join("\n")}
-    }
-  `;
+        .join("\n"), "\n    }\n  ");
     // const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
     // const { globalResponsive } = parseResponsiveTokens(
     //   {
@@ -62,41 +70,40 @@ function colorsToCSS(values) {
     // return rules.join("\n")
 }
 function ColorEditor() {
-    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.theme.colors);
+    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.theme.colors; }), values = _a[0], setValues = _a[1];
     console.log("COLOR", values, _theme_1.originalConfig);
-    const stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
-    (0, react_1.useEffect)(() => {
+    var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
+    (0, react_1.useEffect)(function () {
         stylesheet.set(colorsToCSS(values));
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Colour Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+    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 () {
                             navigator.clipboard.writeText(colorsToJSON(values));
-                        }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
-                            navigator.clipboard.readText().then((text) => {
+                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                            navigator.clipboard.readText().then(function (text) {
                                 try {
-                                    const data = JSON.parse(text);
+                                    var data = JSON.parse(text);
                                     setValues(data);
                                 }
                                 catch (err) {
                                     alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
                                 }
                             });
-                        }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+                        } }, { 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: function () {
                             setValues(_theme_1.originalConfig.theme.colors);
-                        }, children: [icons_1.trash, " Reset"] })] }), children: Object.entries(values).map(([token, value]) => {
-                return ((0, jsx_runtime_1.jsxs)(ColorRow, { children: [(0, jsx_runtime_1.jsxs)(Cell, { mono: true, children: ["$", token] }), (0, jsx_runtime_1.jsx)(Cell, { mono: true, small: true, children: value }), (0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: (e) => {
-                                    setValues({
-                                        ...values,
-                                        [token]: e.target.value,
-                                    });
-                                } }) })] }));
-            }) }) }));
+                        } }, { 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) {
+                                    var _a;
+                                    setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
+                                } }, void 0) }, void 0)] }, void 0));
+            }) }), void 0) }, void 0));
 }
 exports.ColorEditor = ColorEditor;
-const ColorRow = (0, theme_1.styled)("div", {
+var ColorRow = (0, theme_1.styled)("div", {
     display: "flex",
     borderBottom: "1px solid $$lineColor",
 });
-const Cell = (0, theme_1.styled)("div", {
+var Cell = (0, theme_1.styled)("div", {
     flex: "0 0 150px",
     variants: {
         mono: {

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

@@ -1 +1 @@
-export declare function PageDataDebugger(): import("react/jsx-runtime").JSX.Element;
+export declare function PageDataDebugger(): JSX.Element;

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

@@ -1,17 +1,29 @@
 "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.PageDataDebugger = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_inspector_1 = require("react-inspector");
-const routing_1 = require("../../../routing");
-const theme_1 = require("../../theme");
-const PanelWrapper_1 = require("../PanelWrapper");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_inspector_1 = require("react-inspector");
+var routing_1 = require("../../../routing");
+var theme_1 = require("../../theme");
+var PanelWrapper_1 = require("../PanelWrapper");
 function PageDataDebugger() {
-    const route = (0, routing_1.useRoute)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Page Data", children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: route.data?.viewData?.data, expandLevel: 3 }) }) }));
+    var _a;
+    var route = (0, routing_1.useRoute)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Page Data" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { theme: "chromeDark", data: (_a = route.data) === null || _a === void 0 ? void 0 : _a.viewData.data, expandLevel: 3 }, void 0) }, void 0) }), void 0));
 }
 exports.PageDataDebugger = PageDataDebugger;
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     width: "500px",
     maxHeight: "calc(100vh - 100px)",
     overflowY: "auto",

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

@@ -1 +1 @@
-export declare function QueryDebugger(): import("react/jsx-runtime").JSX.Element;
+export declare function QueryDebugger(): JSX.Element;

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

@@ -1,21 +1,33 @@
 "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.QueryDebugger = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@stitches/react");
-const react_2 = require("react");
-const useQueryDebug_1 = require("../../../hooks/useQueryDebug");
-const PanelWrapper_1 = require("../PanelWrapper");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@stitches/react");
+var react_2 = require("react");
+var useQueryDebug_1 = require("../../../hooks/useQueryDebug");
+var PanelWrapper_1 = require("../PanelWrapper");
 function QueryDebugger() {
-    const data = (0, useQueryDebug_1.useQueryDebugData)();
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Query Debugger", children: (0, jsx_runtime_1.jsx)(Wrapper, { children: data ? (0, jsx_runtime_1.jsx)(Item, { item: data, depth: 0 }) : (0, jsx_runtime_1.jsx)("div", { children: "No data" }) }) }));
+    var data = (0, useQueryDebug_1.useQueryDebugData)();
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Query Debugger" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, { children: data ? (0, jsx_runtime_1.jsx)(Item, { item: data, depth: 0 }, void 0) : (0, jsx_runtime_1.jsx)("div", { children: "No data" }, void 0) }, void 0) }), void 0));
 }
 exports.QueryDebugger = QueryDebugger;
-const Item = ({ item, depth }) => {
-    const [expanded, setExpanded] = (0, react_2.useState)(depth < 3);
-    return ((0, jsx_runtime_1.jsxs)(ItemStyle, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "query-item-heading", children: ["\u2022 ", (0, jsx_runtime_1.jsx)("strong", { children: item.label }), " ", (0, jsx_runtime_1.jsx)("code", { children: item.file }), " (", Number(item.duration).toFixed(1), "s)"] }), item.errors && item.errors.length ? ((0, jsx_runtime_1.jsx)("div", { className: "query-errors", children: item.errors.map((err, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "query-error-item", children: ["\u2022 ", err] }, i))) })) : null, item.children && item.children.length ? ((0, jsx_runtime_1.jsx)("div", { className: "query-children", children: item.children.map((child, i) => ((0, jsx_runtime_1.jsx)(Item, { item: child, depth: depth + 1 }, i))) })) : null] }));
+var Item = function (_a) {
+    var item = _a.item, depth = _a.depth;
+    var _b = (0, react_2.useState)(depth < 3), expanded = _b[0], setExpanded = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(ItemStyle, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-item-heading" }, { children: ["\u2022 ", (0, jsx_runtime_1.jsx)("strong", { children: item.label }, void 0), " ", (0, jsx_runtime_1.jsx)("code", { children: item.file }, void 0), " (", Number(item.duration).toFixed(1), "s)"] }), void 0), item.errors && item.errors.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-errors" }, { children: item.errors.map(function (err, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "query-error-item" }, { children: ["\u2022 ", err] }), i)); }) }), void 0)) : null, item.children && item.children.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "query-children" }, { children: item.children.map(function (child, i) { return ((0, jsx_runtime_1.jsx)(Item, { item: child, depth: depth + 1 }, i)); }) }), void 0)) : null] }, void 0));
 };
-const ItemStyle = (0, react_1.styled)("div", {
+var ItemStyle = (0, react_1.styled)("div", {
     fontSize: "12px",
     ".query-children": {
         paddingLeft: "30px",
@@ -28,7 +40,7 @@ const ItemStyle = (0, react_1.styled)("div", {
         },
     },
 });
-const Wrapper = (0, react_1.styled)("div", {
+var Wrapper = (0, react_1.styled)("div", {
     maxHeight: 500,
     overflowY: "auto",
 });

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

@@ -1 +1 @@
-export declare function SpacingEditor(): import("react/jsx-runtime").JSX.Element;
+export declare function SpacingEditor(): JSX.Element;

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

@@ -1,42 +1,56 @@
 "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.SpacingEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-const _theme_1 = require("@theme");
-const react_1 = require("react");
-const style_1 = require("../../../style");
-const PanelWrapper_1 = require("../PanelWrapper");
-const ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
-const useStylesheet_1 = require("../../hooks/useStylesheet");
-const Button_1 = require("../atoms/Button");
-const icons_1 = require("../../icons");
-const Spacer_1 = require("../atoms/Spacer");
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var style_1 = require("../../../style");
+var PanelWrapper_1 = require("../PanelWrapper");
+var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
+var useStylesheet_1 = require("../../hooks/useStylesheet");
+var Button_1 = require("../atoms/Button");
+var icons_1 = require("../../icons");
+var Spacer_1 = require("../atoms/Spacer");
 function spaceToJSON(space) {
     return ("{\n" +
         Object.entries(space)
-            .map(([token, values]) => {
-            const tokenStr = Object.entries(values)
-                .map(([breakpoint, value]) => {
-                return `\"${breakpoint}\": ${JSON.stringify(value)}`;
+            .map(function (_a) {
+            var token = _a[0], values = _a[1];
+            var tokenStr = Object.entries(values)
+                .map(function (_a) {
+                var breakpoint = _a[0], value = _a[1];
+                return "\"".concat(breakpoint, "\": ").concat(JSON.stringify(value));
             })
                 .join(", ");
-            return `  \"${token}\": { ${tokenStr} }`;
+            return "  \"".concat(token, "\": { ").concat(tokenStr, " }");
         })
             .join(",\n") +
         "\n}");
 }
 function spaceToCSS(space) {
-    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    const { globalResponsive } = (0, style_1.parseResponsiveTokens)({
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var globalResponsive = (0, style_1.parseResponsiveTokens)({
         space: space,
-    }, parsedBreakpoints);
-    const rules = [];
-    Object.entries(globalResponsive).forEach(([breakpoint, values]) => {
-        let rule = "";
-        let media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
-        let variables = [];
-        for (let key in values) {
+    }, parsedBreakpoints).globalResponsive;
+    var rules = [];
+    Object.entries(globalResponsive).forEach(function (_a) {
+        var breakpoint = _a[0], values = _a[1];
+        var rule = "";
+        var media = _theme_1.originalConfig.media[breakpoint.replace("@", "")];
+        var variables = [];
+        for (var key in values) {
             variables.push(key + ": " + values[key]);
         }
         if (media) {
@@ -49,26 +63,26 @@ function spaceToCSS(space) {
     return rules.join("\n");
 }
 function SpacingEditor() {
-    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.responsive.space);
-    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    const stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
-    (0, react_1.useEffect)(() => {
+    var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.responsive.space; }), values = _a[0], setValues = _a[1];
+    var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
+    var stylesheet = (0, useStylesheet_1.useStylesheet)("spacing");
+    (0, react_1.useEffect)(function () {
         stylesheet.set(spaceToCSS(values));
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Spacing Tokens", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
                             navigator.clipboard.writeText(spaceToJSON(values));
-                        }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
-                            navigator.clipboard.readText().then((text) => {
+                        } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
+                            navigator.clipboard.readText().then(function (text) {
                                 try {
-                                    const data = JSON.parse(text);
+                                    var data = JSON.parse(text);
                                     setValues(data);
                                 }
                                 catch (err) {
                                     alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
                                 }
                             });
-                        }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+                        } }, { 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: function () {
                             setValues(_theme_1.originalConfig.responsive.space);
-                        }, children: [icons_1.trash, " Reset"] })] }), children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }) }) }));
+                        } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: values, showBreakpointName: true, showRange: true, showValues: true, related: true, labelWidth: "30px", onChange: setValues, modes: ["px", "multiplier"] }, void 0) }), void 0) }, void 0));
 }
 exports.SpacingEditor = SpacingEditor;

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

@@ -1 +1 @@
-export declare function TypographyEditor(): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyEditor(): JSX.Element;

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

@@ -1,24 +1,35 @@
 "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.TypographyEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+var jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
-const _theme_1 = require("@theme");
-const react_1 = require("react");
-const style_1 = require("../../../style");
-const usePersistState_1 = require("../../hooks/usePersistState");
-const icons_1 = require("../../icons");
-const theme_1 = require("../../theme");
-const Button_1 = require("../atoms/Button");
-const Spacer_1 = require("../atoms/Spacer");
-const Text_1 = require("../atoms/Text");
-const PanelWrapper_1 = require("../PanelWrapper");
-const ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
+var _theme_1 = require("@theme");
+var react_1 = require("react");
+var style_1 = require("../../../style");
+var usePersistState_1 = require("../../hooks/usePersistState");
+var icons_1 = require("../../icons");
+var theme_1 = require("../../theme");
+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() {
-    const [values, setValues] = (0, react_1.useState)(() => _theme_1.originalConfig.typography);
-    const parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
-    const [previewText, setPreviewText] = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog");
-    const reset = () => {
+    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);
+    var _b = (0, usePersistState_1.usePersistState)("preview_text", "The quick brown fox jumps over the lazy dog"), previewText = _b[0], setPreviewText = _b[1];
+    var reset = function () {
         setValues(_theme_1.originalConfig.typography);
         setPreviewText("The quick brown fox jumps over the lazy dog");
     };
@@ -26,9 +37,9 @@ function TypographyEditor() {
     // useEffect(() => {
     //   stylesheet.set(spaceToCSS(values))
     // }, [values])
-    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, { title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(PanelWrapper_1.PanelWrapper, __assign({ title: "Typography", buttons: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
                         // navigator.clipboard.writeText(spaceToJSON(values))
-                    }, children: [icons_1.copy, "Copy"] }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: () => {
+                    } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
                         // navigator.clipboard.readText().then((text) => {
                         //   try {
                         //     const data = JSON.parse(text)
@@ -37,41 +48,38 @@ function TypographyEditor() {
                         //     alert("Error decoding pasted content: " + (err as any).message + ". You pasted:\n" + text)
                         //   }
                         // })
-                    }, children: [icons_1.paste, "Paste"] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(Button_1.Button, { small: true, onClick: reset, children: [icons_1.trash, " Reset"] })] }), children: (0, jsx_runtime_1.jsx)(Wrapper, { children: Object.entries(values).map(([name, settings], index) => ((0, jsx_runtime_1.jsxs)(TypographyItem, { children: [(0, jsx_runtime_1.jsx)(Meta, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "monoBold", children: name }) }), (0, jsx_runtime_1.jsxs)(Details, { children: [(0, jsx_runtime_1.jsx)(Preview, { css: { typography: name }, value: previewText, onChange: (e) => {
-                                    setPreviewText(e.currentTarget.value);
-                                } }), (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: (data) => {
-                                    setValues({
-                                        ...values,
-                                        [name]: {
-                                            ...settings,
-                                            fontSize: data.fontSize,
-                                            lineHeight: data.lineHeight,
-                                        },
-                                    });
-                                }, modes: ["px", "multiplier"] })] })] }, 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, { 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);
+                                    } }, 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;
-const TypographyItem = (0, theme_1.styled)("div", {
+var TypographyItem = (0, theme_1.styled)("div", {
     borderBottom: "1px solid $colors$bgLineStrong",
     display: "flex",
     paddingTop: "4px",
     paddingBottom: "4px",
 });
-const Meta = (0, theme_1.styled)("div", {
+var Meta = (0, theme_1.styled)("div", {
     width: "200px",
     flex: "0 0 auto",
 });
-const Wrapper = (0, theme_1.styled)("div", {
+var Wrapper = (0, theme_1.styled)("div", {
     maxHeight: "500px",
     overflowY: "auto",
 });
-const Details = (0, theme_1.styled)("div", {
+var Details = (0, theme_1.styled)("div", {
     flex: "1 1 auto",
 });
-const Preview = (0, _theme_1.styled)("input", {
+var Preview = (0, _theme_1.styled)("input", {
     appearance: "none",
     backgroundColor: "transparent",
     borderLeft: 0,

package/dev-ui/hooks/useBreakpoint.d.ts

@@ -1,4 +1,4 @@
-type Result = {
+declare type Result = {
     name: string;
     index: number;
     progress: number;

package/dev-ui/hooks/useBreakpoint.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBreakpoint = void 0;
 // @ts-ignore
-const _theme_1 = require("@theme");
-const react_1 = require("react");
+var _theme_1 = require("@theme");
+var react_1 = require("react");
 function useBreakpoint() {
     // const [value, setValue] = useState(["initial", -1, 0] as [string, number, number])
-    const [value, setValue] = (0, react_1.useState)({
+    var _a = (0, react_1.useState)({
         name: "initial",
         index: -1,
         progress: 0,
@@ -14,11 +14,11 @@ function useBreakpoint() {
         width: 0,
         bpMin: 0,
         bpMax: 0,
-    });
-    (0, react_1.useEffect)(() => {
-        const handle = () => {
-            const width = window.innerWidth;
-            const result = {
+    }), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handle = function () {
+            var width = window.innerWidth;
+            var result = {
                 name: "initial",
                 index: 0,
                 offset: window.innerWidth,
@@ -27,10 +27,10 @@ function useBreakpoint() {
                 bpMin: 0,
                 bpMax: _theme_1.breakpoints[0].max,
             };
-            for (let index in _theme_1.breakpoints) {
-                const bp = _theme_1.breakpoints[index];
-                const key = bp.key;
-                const media = _theme_1.config.media[key];
+            for (var index in _theme_1.breakpoints) {
+                var bp = _theme_1.breakpoints[index];
+                var key = bp.key;
+                var media = _theme_1.config.media[key];
                 if (!media.includes("min-width") || !media)
                     continue;
                 if (window.matchMedia(media).matches) {
@@ -52,7 +52,7 @@ function useBreakpoint() {
         };
         handle();
         window.addEventListener("resize", handle);
-        return () => window.removeEventListener("resize", handle);
+        return function () { return window.removeEventListener("resize", handle); };
     }, []);
     return value;
 }

package/dev-ui/hooks/usePersistState.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePersistState = void 0;
-const react_1 = require("react");
-const get = (id, fallback = undefined) => {
+var react_1 = require("react");
+var get = function (id, fallback) {
+    if (fallback === void 0) { fallback = undefined; }
     if (typeof localStorage === "undefined") {
         return fallback;
     }
-    const value = localStorage.getItem("devui_" + id);
+    var value = localStorage.getItem("devui_" + id);
     if (value !== null) {
         try {
             return JSON.parse(value);
@@ -19,14 +20,14 @@ const get = (id, fallback = undefined) => {
         return fallback;
     }
 };
-const set = (id, value) => {
+var set = function (id, value) {
     localStorage.setItem("devui_" + id, JSON.stringify(value));
 };
 function usePersistState(id, initial) {
-    const [value, setValue] = (0, react_1.useState)(() => get(id, initial));
+    var _a = (0, react_1.useState)(function () { return get(id, initial); }), value = _a[0], setValue = _a[1];
     return [
         value,
-        (value) => {
+        function (value) {
             set(id, value);
             setValue(value);
         },

package/dev-ui/hooks/useStylesheet.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStylesheet = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 function useStylesheet(id) {
-    const [element, setElement] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+    var _a = (0, react_1.useState)(null), element = _a[0], setElement = _a[1];
+    (0, react_1.useEffect)(function () {
         if (!element) {
-            let style = document.getElementById("devui-" + id);
+            var style = document.getElementById("devui-" + id);
             if (!style) {
                 style = document.createElement("style");
                 style.id = "devui-" + id;
@@ -16,12 +16,12 @@ function useStylesheet(id) {
         }
     }, [element]);
     return {
-        clear() {
+        clear: function () {
             if (element) {
                 element.innerHTML = "";
             }
         },
-        set(value) {
+        set: function (value) {
             if (element) {
                 element.innerHTML = value;
             }