eddev 0.2.2-beta.7 → 0.2.2-beta.8

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 (4) hide show
  1. package/dev-ui/components/ResponsiveScaleEditor.js +3 -3
  2. package/dev-ui/components/panels/TypographyEditor.js +10 -3
  3. package/package.json +1 -1
  4. package/style/createStitches.js +30 -29
package/dev-ui/components/ResponsiveScaleEditor.js CHANGED
@@ -69,7 +69,6 @@ function ResponsiveScaleEditor(props) {
69
69
  var nextValue;
70
70
  if (item.type === "px" && nextType === "multiplier") {
71
71
  if (base) {
72
- console.log(item.value, base.concreteValue);
73
72
  nextValue = "x" + item.value / (base === null || base === void 0 ? void 0 : base.concreteValue);
74
73
  }
75
74
  }
@@ -112,8 +111,9 @@ function ResponsiveScaleEditor(props) {
112
111
  }
113
112
  else {
114
113
  props.onChange((0, immer_1.default)(values, function (values) {
114
+ var _a;
115
115
  for (var token in values) {
116
- var original = _theme_1.originalConfig.responsive.space[token]["@" + breakpoint];
116
+ var original = (_a = _theme_1.originalConfig.responsive.space[token]) === null || _a === void 0 ? void 0 : _a["@" + breakpoint];
117
117
  var value = original;
118
118
  if (!value) {
119
119
  value = values[token]["@" + item.baseBreakpoint];
@@ -125,7 +125,7 @@ function ResponsiveScaleEditor(props) {
125
125
  }));
126
126
  }
127
127
  };
128
- 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) {
128
+ 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) {
129
129
  var bp = props.breakpoints[i];
130
130
  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) {
131
131
  onToggleBreakpoint === null || onToggleBreakpoint === void 0 ? void 0 : onToggleBreakpoint(item, checked);
package/dev-ui/components/panels/TypographyEditor.js CHANGED
@@ -24,6 +24,7 @@ var Button_1 = require("../atoms/Button");
24
24
  var Spacer_1 = require("../atoms/Spacer");
25
25
  var Text_1 = require("../atoms/Text");
26
26
  var PanelWrapper_1 = require("../PanelWrapper");
27
+ var ResponsiveScaleEditor_1 = require("../ResponsiveScaleEditor");
27
28
  function TypographyEditor() {
28
29
  var _a = (0, react_1.useState)(function () { return _theme_1.originalConfig.typography; }), values = _a[0], setValues = _a[1];
29
30
  var parsedBreakpoints = (0, style_1.parseBreakpoints)(_theme_1.originalConfig.breakpoints, _theme_1.originalConfig.media);
@@ -49,9 +50,15 @@ function TypographyEditor() {
49
50
  // })
50
51
  } }, { 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) {
51
52
  var name = _a[0], settings = _a[1];
52
- 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) {
53
- setPreviewText(e.currentTarget.value);
54
- } }, void 0) }, void 0)] }, index));
53
+ 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) {
54
+ setPreviewText(e.currentTarget.value);
55
+ } }, void 0), (0, jsx_runtime_1.jsx)(ResponsiveScaleEditor_1.ResponsiveScaleEditor, { editableRange: true, editableValues: true, breakpoints: parsedBreakpoints, data: {
56
+ fontSize: settings.fontSize,
57
+ lineHeight: settings.lineHeight,
58
+ }, showBreakpointName: true, showRange: true, showValues: true, labelWidth: "80px", onChange: function (data) {
59
+ var _a;
60
+ setValues(__assign(__assign({}, values), (_a = {}, _a[name] = __assign(__assign({}, settings), { fontSize: data.fontSize, lineHeight: data.lineHeight }), _a)));
61
+ }, modes: ["px", "multiplier"] }, void 0)] }, void 0)] }, index));
55
62
  }) }, void 0) }), void 0));
56
63
  }
57
64
  exports.TypographyEditor = TypographyEditor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eddev",
3
- "version": "0.2.2-beta.7",
3
+ "version": "0.2.2-beta.8",
4
4
  "main": "./index.js",
5
5
  "license": "MIT",
6
6
  "bin": {
package/style/createStitches.js CHANGED
@@ -78,11 +78,11 @@ function parseTypography(theme, breakpoints, typography) {
78
78
  return value;
79
79
  }
80
80
  };
81
- var _loop_1 = function (name_1) {
81
+ for (var name_1 in typography) {
82
82
  var style = typography[name_1];
83
83
  var variant = {};
84
84
  typeVariants[name_1] = variant;
85
- var _loop_2 = function (key) {
85
+ for (var key in style) {
86
86
  var value = style[key];
87
87
  var varName = "--type-".concat(name_1, "-").concat(key);
88
88
  variant[key] = "var(".concat(varName, ")");
@@ -93,36 +93,37 @@ function parseTypography(theme, breakpoints, typography) {
93
93
  }
94
94
  else if (value && typeof value === "object") {
95
95
  // A responsive object value
96
- var entries_1 = Object.entries(value);
97
- entries_1.forEach(function (_a, i) {
98
- var _b;
99
- var bpName = _a[0], responsiveValue = _a[1];
100
- if (Array.isArray(responsiveValue)) {
101
- responsiveValue = responsiveValue[0];
102
- // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
103
- var minSize = (_b = breakpoints.find(function (bp) { return "@" + bp.key === bpName; })) === null || _b === void 0 ? void 0 : _b.min;
104
- var nextBreakpoint = breakpoints.find(function (bp) { var _a; return "@" + bp.key === ((_a = entries_1[i + 1]) === null || _a === void 0 ? void 0 : _a[0]); });
105
- if (!nextBreakpoint)
106
- 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."));
107
- var maxSize = nextBreakpoint.min;
108
- var responsiveValue2 = value["@" + nextBreakpoint.key];
109
- if (Array.isArray(responsiveValue2))
110
- responsiveValue2 = responsiveValue2[0];
111
- var size1 = resolveValue(tokenPrefix, responsiveValue);
112
- var size2 = resolveValue(tokenPrefix, responsiveValue2);
113
- responsiveValue = "calc(".concat(size1, " + (100vw - ").concat(minSize, ") / (").concat(unitless(maxSize), " - ").concat(unitless(minSize), ") * (").concat(unitless(size2), " - ").concat(unitless(size1), "))");
114
- }
115
- globals[bpName][varName] = responsiveValue;
116
- });
96
+ var unit = key === "lineHeight" ? "%" : "px";
97
+ var _a = getResponsiveObjectStyles(breakpoints, value, varName, unit), tokenGlobals = _a[0], initial = _a[1];
98
+ for (var key_1 in tokenGlobals) {
99
+ globals[key_1] = __assign(__assign({}, globals[key_1]), tokenGlobals[key_1]);
100
+ }
101
+ // const entries = Object.entries(value)
102
+ // entries.forEach(([bpName, responsiveValue], i) => {
103
+ // if (Array.isArray(responsiveValue)) {
104
+ // responsiveValue = responsiveValue[0]
105
+ // // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
106
+ // const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
107
+ // const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
108
+ // if (!nextBreakpoint)
109
+ // throw new Error(
110
+ // `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.`
111
+ // )
112
+ // const maxSize = nextBreakpoint.min
113
+ // let responsiveValue2 = (value as any)["@" + nextBreakpoint.key]
114
+ // if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
115
+ // let size1 = resolveValue(tokenPrefix, responsiveValue)
116
+ // let size2 = resolveValue(tokenPrefix, responsiveValue2)
117
+ // responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
118
+ // minSize
119
+ // )}) * (${unitless(size2)} - ${unitless(size1)}))`
120
+ // }
121
+ // globals[bpName][varName] = responsiveValue
122
+ // })
117
123
  }
118
- };
119
- for (var key in style) {
120
- _loop_2(key);
121
124
  }
122
- };
123
- for (var name_1 in typography) {
124
- _loop_1(name_1);
125
125
  }
126
+ // debugger
126
127
  return { globalTypography: globals, typeVariants: typeVariants };
127
128
  }
128
129
  function parseGrid(theme, media, grid) {