eddev 0.2.44 → 0.2.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dev-ui/components/panels/ColorEditor.d.ts +2 -0
  2. package/dev-ui/components/panels/ColorEditor.js +127 -0
  3. package/dev-ui/icons.d.ts +1 -0
  4. package/dev-ui/icons.js +2 -1
  5. package/dev-ui/panels.js +6 -0
  6. package/package.json +1 -1
package/dev-ui/components/panels/ColorEditor.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare function ColorEditor(): JSX.Element;
package/dev-ui/components/panels/ColorEditor.js ADDED
@@ -0,0 +1,127 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.ColorEditor = void 0;
15
+ var jsx_runtime_1 = require("react/jsx-runtime");
16
+ // @ts-ignore
17
+ var _theme_1 = require("@theme");
18
+ var react_1 = require("react");
19
+ var PanelWrapper_1 = require("../PanelWrapper");
20
+ var useStylesheet_1 = require("../../hooks/useStylesheet");
21
+ var Button_1 = require("../atoms/Button");
22
+ var icons_1 = require("../../icons");
23
+ var Spacer_1 = require("../atoms/Spacer");
24
+ var theme_1 = require("../../theme");
25
+ function colorsToJSON(values) {
26
+ return JSON.stringify(values, null, 2);
27
+ // return (
28
+ // "{\n" +
29
+ // Object.entries(values)
30
+ // .map(([token, value]) => {
31
+ // const tokenStr = Object.entries(values)
32
+ // .map(([breakpoint, value]) => {
33
+ // return `\"${breakpoint}\": ${JSON.stringify(value)}`
34
+ // })
35
+ // .join(", ")
36
+ // return ` \"${token}\": { ${tokenStr} }`
37
+ // })
38
+ // .join(",\n") +
39
+ // "\n}"
40
+ // )
41
+ }
42
+ function colorsToCSS(values) {
43
+ return "\n body {\n ".concat(Object.entries(values)
44
+ .map(function (_a) {
45
+ var token = _a[0], value = _a[1];
46
+ return "--colors-".concat(token, ": ").concat(value, ";");
47
+ })
48
+ .join("\n"), "\n }\n ");
49
+ // const parsedBreakpoints = parseBreakpoints(originalConfig.breakpoints, originalConfig.media)
50
+ // const { globalResponsive } = parseResponsiveTokens(
51
+ // {
52
+ // space: space,
53
+ // },
54
+ // parsedBreakpoints
55
+ // )
56
+ // const rules: string[] = []
57
+ // Object.entries(globalResponsive).forEach(([breakpoint, values]: any) => {
58
+ // let rule = ""
59
+ // let media = originalConfig.media[breakpoint.replace("@", "")]
60
+ // let variables = []
61
+ // for (let key in values) {
62
+ // variables.push(key + ": " + values[key])
63
+ // }
64
+ // if (media) {
65
+ // rules.push("@media " + media + " {\n:root {" + variables.join(";\n") + "}\n}")
66
+ // } else {
67
+ // rules.push(":root {\n" + variables.join(";\n") + "\n}")
68
+ // }
69
+ // })
70
+ // return rules.join("\n")
71
+ }
72
+ function ColorEditor() {
73
+ var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.theme.colors; }), values = _a[0], setValues = _a[1];
74
+ console.log("COLOR", values, _theme_1.originalConfig);
75
+ var stylesheet = (0, useStylesheet_1.useStylesheet)("colors");
76
+ (0, react_1.useEffect)(function () {
77
+ stylesheet.set(colorsToCSS(values));
78
+ }, [values]);
79
+ 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 () {
80
+ navigator.clipboard.writeText(colorsToJSON(values));
81
+ } }, { children: [icons_1.copy, "Copy"] }), void 0), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ small: true, onClick: function () {
82
+ navigator.clipboard.readText().then(function (text) {
83
+ try {
84
+ var data = JSON.parse(text);
85
+ setValues(data);
86
+ }
87
+ catch (err) {
88
+ alert("Error decoding pasted content: " + err.message + ". You pasted:\n" + text);
89
+ }
90
+ });
91
+ } }, { 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 () {
92
+ setValues(_theme_1.originalConfig.theme.color);
93
+ } }, { children: [icons_1.trash, " Reset"] }), void 0)] }, void 0) }, { children: Object.entries(values).map(function (_a) {
94
+ var token = _a[0], value = _a[1];
95
+ 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) {
96
+ var _a;
97
+ setValues(__assign(__assign({}, values), (_a = {}, _a[token] = e.target.value, _a)));
98
+ } }, void 0) }, void 0)] }, void 0));
99
+ }) }), void 0) }, void 0));
100
+ }
101
+ exports.ColorEditor = ColorEditor;
102
+ var ColorRow = (0, theme_1.styled)("div", {
103
+ display: "flex",
104
+ borderBottom: "1px solid $$lineColor",
105
+ });
106
+ var Cell = (0, theme_1.styled)("div", {
107
+ flex: "0 0 150px",
108
+ variants: {
109
+ mono: {
110
+ true: {
111
+ fontFamily: "$mono",
112
+ fontSize: "12px",
113
+ fontWeight: "bold",
114
+ },
115
+ },
116
+ small: {
117
+ true: {
118
+ flexBasis: "100px",
119
+ },
120
+ },
121
+ rightAligned: {
122
+ true: {
123
+ textAlign: "right",
124
+ },
125
+ },
126
+ },
127
+ });
package/dev-ui/icons.d.ts CHANGED
@@ -13,3 +13,4 @@ export declare const line: JSX.Element;
13
13
  export declare const copy: JSX.Element;
14
14
  export declare const paste: JSX.Element;
15
15
  export declare const trash: JSX.Element;
16
+ export declare const color: JSX.Element;
package/dev-ui/icons.js CHANGED
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.trash = exports.paste = exports.copy = exports.line = exports.checkFilled = exports.checkEmpty = exports.check = exports.close = exports.share = exports.code = exports.structure = exports.ruler = exports.typography = exports.bolt = void 0;
14
+ exports.color = exports.trash = exports.paste = exports.copy = exports.line = exports.checkFilled = exports.checkEmpty = exports.check = exports.close = exports.share = exports.code = exports.structure = exports.ruler = exports.typography = exports.bolt = void 0;
15
15
  var jsx_runtime_1 = require("react/jsx-runtime");
16
16
  exports.bolt = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: "24", width: "24" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M11,21h-1l1-7H6.74c0,0,3.68-6.46,6.26-11h1l-1,7h4.28L11,21z" }, void 0) }, void 0)] }), void 0));
17
17
  exports.typography = ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z" }, void 0) }), void 0));
@@ -27,3 +27,4 @@ exports.line = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.
27
27
  exports.copy = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }, void 0)] }), void 0));
28
28
  exports.paste = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }, void 0)] }), void 0));
29
29
  exports.trash = ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6 21h12V7H6v14zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }, void 0)] }), void 0));
30
+ exports.color = ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", height: "48", width: "48", viewBox: "0 0 48 48" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.25 1.6-7.9 1.6-3.65 4.375-6.35 2.775-2.7 6.5-4.225Q20.2 4 24.45 4q3.95 0 7.5 1.325T38.175 9q2.675 2.35 4.25 5.575Q44 17.8 44 21.65q0 5.4-3.15 8.525T32.5 33.3h-3.75q-.9 0-1.55.7t-.65 1.55q0 1.35.725 2.3.725.95.725 2.2 0 1.9-1.05 2.925T24 44Zm0-20Zm-11.65 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.3-8.5q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm10.7 0q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.55 8.5q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75ZM24 41q.55 0 .775-.225.225-.225.225-.725 0-.7-.725-1.3-.725-.6-.725-2.65 0-2.3 1.5-4.05t3.8-1.75h3.65q3.8 0 6.15-2.225Q41 25.85 41 21.65q0-6.6-5-10.625T24.45 7q-7.3 0-12.375 4.925T7 24q0 7.05 4.975 12.025Q16.95 41 24 41Z" }, void 0) }), void 0));
package/dev-ui/panels.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.DEV_UI_PANELS = void 0;
4
4
  var jsx_runtime_1 = require("react/jsx-runtime");
5
5
  var AppDataDebugger_1 = require("./components/panels/AppDataDebugger");
6
+ var ColorEditor_1 = require("./components/panels/ColorEditor");
6
7
  var PageDataDebugger_1 = require("./components/panels/PageDataDebugger");
7
8
  var QueryDebugger_1 = require("./components/panels/QueryDebugger");
8
9
  var SpacingEditor_1 = require("./components/panels/SpacingEditor");
@@ -22,6 +23,11 @@ exports.DEV_UI_PANELS = {
22
23
  icon: icons_1.ruler,
23
24
  component: SpacingEditor_1.SpacingEditor,
24
25
  },
26
+ color: {
27
+ label: "Colours",
28
+ icon: icons_1.color,
29
+ component: ColorEditor_1.ColorEditor,
30
+ },
25
31
  page: {
26
32
  label: "Page Data",
27
33
  icon: icons_1.code,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eddev",
3
- "version": "0.2.44",
3
+ "version": "0.2.46",
4
4
  "main": "./index.js",
5
5
  "license": "MIT",
6
6
  "bin": {