@weaverse/react 0.3.6 → 0.4.1

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 (3) hide show
  1. package/dist/index.js +66 -15
  2. package/dist/index.mjs +66 -15
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -77,50 +77,91 @@ var base_default = BaseElement;
77
77
  // src/elements/button.tsx
78
78
  var React2 = __toESM(require("react"));
79
79
  var Button = React2.forwardRef((props, ref) => {
80
+ const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
80
81
  return /* @__PURE__ */ React2.createElement("button", __spreadValues({
81
- ref
82
- }, props), props.value);
82
+ ref,
83
+ style
84
+ }, rest), props.value);
83
85
  });
84
86
  Button.defaultProps = {
85
- value: "Click me",
86
- style: {
87
- borderRadius: "9999px",
88
- fontSize: "13px",
89
- padding: "10px 15px"
90
- }
87
+ value: "Click me"
91
88
  };
92
89
  var schema2 = {
93
90
  title: "Button",
94
91
  type: "button",
95
92
  settings: [
96
93
  {
97
- tab: "header",
94
+ tab: "Settings",
95
+ label: "Alignment",
96
+ inspectors: [
97
+ {
98
+ binding: "style",
99
+ type: "alignment"
100
+ }
101
+ ]
102
+ },
103
+ {
104
+ tab: "Settings",
105
+ label: "Overlay",
106
+ inspectors: [
107
+ {
108
+ binding: "data",
109
+ key: "applyOverlay",
110
+ label: "Apply Overlay",
111
+ type: "switch"
112
+ },
113
+ {
114
+ binding: "data",
115
+ key: "buttonType",
116
+ label: "Button Type",
117
+ type: "select",
118
+ options: [
119
+ { value: 1, label: "One" },
120
+ { value: 2, label: "Two" }
121
+ ]
122
+ }
123
+ ]
124
+ },
125
+ {
126
+ tab: "Settings",
98
127
  label: "Group 1",
99
128
  inspectors: [
100
129
  {
101
130
  binding: "data",
102
131
  key: "value",
103
- componentType: "textarea"
132
+ type: "textarea",
133
+ label: "",
134
+ default: ""
104
135
  },
105
136
  {
106
137
  binding: "style",
107
138
  key: "backgroundColor",
108
- componentType: "color"
139
+ type: "color"
109
140
  }
110
141
  ]
111
142
  },
112
143
  {
113
- tab: "header",
144
+ tab: "Settings",
114
145
  label: "Group 2",
115
146
  inspectors: [
116
147
  {
117
148
  binding: "style",
118
149
  key: "color",
119
- componentType: "color"
150
+ type: "color"
120
151
  }
121
152
  ]
122
153
  }
123
- ]
154
+ ],
155
+ toolbar: [],
156
+ data: {
157
+ css: {
158
+ "@desktop": {
159
+ borderRadius: "9999px",
160
+ fontSize: "13px",
161
+ padding: "10px 15px"
162
+ }
163
+ }
164
+ }
124
165
  };
125
166
  var button_default = Button;
126
167
 
@@ -173,6 +214,15 @@ var elements = {
173
214
  };
174
215
  var elements_default = elements;
175
216
 
217
+ // src/utils/css.ts
218
+ var shortCssObject = (css) => {
219
+ return {
220
+ "@desktop": css[`@desktop`],
221
+ "@tablet": css[`@tablet`],
222
+ "@mobile": css[`@mobile`]
223
+ };
224
+ };
225
+
176
226
  // src/renderer.tsx
177
227
  var import_core = require("@weaverse/core");
178
228
  var React4 = __toESM(require("react"));
@@ -231,7 +281,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
231
281
  }, []);
232
282
  let realClassName = className;
233
283
  if (css) {
234
- let selector = context.stitchesInstance.css(css)().className;
284
+ let formattedCss = shortCssObject(css);
285
+ let selector = context.stitchesInstance.css(formattedCss)().className;
235
286
  realClassName = realClassName ? `${selector} ${realClassName}` : selector;
236
287
  }
237
288
  let element = elementInstances.get(type) || elementInstances.get("base");
package/dist/index.mjs CHANGED
@@ -50,50 +50,91 @@ var base_default = BaseElement;
50
50
  // src/elements/button.tsx
51
51
  import * as React2 from "react";
52
52
  var Button = React2.forwardRef((props, ref) => {
53
+ const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
53
54
  return /* @__PURE__ */ React2.createElement("button", __spreadValues({
54
- ref
55
- }, props), props.value);
55
+ ref,
56
+ style
57
+ }, rest), props.value);
56
58
  });
57
59
  Button.defaultProps = {
58
- value: "Click me",
59
- style: {
60
- borderRadius: "9999px",
61
- fontSize: "13px",
62
- padding: "10px 15px"
63
- }
60
+ value: "Click me"
64
61
  };
65
62
  var schema2 = {
66
63
  title: "Button",
67
64
  type: "button",
68
65
  settings: [
69
66
  {
70
- tab: "header",
67
+ tab: "Settings",
68
+ label: "Alignment",
69
+ inspectors: [
70
+ {
71
+ binding: "style",
72
+ type: "alignment"
73
+ }
74
+ ]
75
+ },
76
+ {
77
+ tab: "Settings",
78
+ label: "Overlay",
79
+ inspectors: [
80
+ {
81
+ binding: "data",
82
+ key: "applyOverlay",
83
+ label: "Apply Overlay",
84
+ type: "switch"
85
+ },
86
+ {
87
+ binding: "data",
88
+ key: "buttonType",
89
+ label: "Button Type",
90
+ type: "select",
91
+ options: [
92
+ { value: 1, label: "One" },
93
+ { value: 2, label: "Two" }
94
+ ]
95
+ }
96
+ ]
97
+ },
98
+ {
99
+ tab: "Settings",
71
100
  label: "Group 1",
72
101
  inspectors: [
73
102
  {
74
103
  binding: "data",
75
104
  key: "value",
76
- componentType: "textarea"
105
+ type: "textarea",
106
+ label: "",
107
+ default: ""
77
108
  },
78
109
  {
79
110
  binding: "style",
80
111
  key: "backgroundColor",
81
- componentType: "color"
112
+ type: "color"
82
113
  }
83
114
  ]
84
115
  },
85
116
  {
86
- tab: "header",
117
+ tab: "Settings",
87
118
  label: "Group 2",
88
119
  inspectors: [
89
120
  {
90
121
  binding: "style",
91
122
  key: "color",
92
- componentType: "color"
123
+ type: "color"
93
124
  }
94
125
  ]
95
126
  }
96
- ]
127
+ ],
128
+ toolbar: [],
129
+ data: {
130
+ css: {
131
+ "@desktop": {
132
+ borderRadius: "9999px",
133
+ fontSize: "13px",
134
+ padding: "10px 15px"
135
+ }
136
+ }
137
+ }
97
138
  };
98
139
  var button_default = Button;
99
140
 
@@ -146,6 +187,15 @@ var elements = {
146
187
  };
147
188
  var elements_default = elements;
148
189
 
190
+ // src/utils/css.ts
191
+ var shortCssObject = (css) => {
192
+ return {
193
+ "@desktop": css[`@desktop`],
194
+ "@tablet": css[`@tablet`],
195
+ "@mobile": css[`@mobile`]
196
+ };
197
+ };
198
+
149
199
  // src/renderer.tsx
150
200
  import {
151
201
  isBrowser,
@@ -207,7 +257,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
207
257
  }, []);
208
258
  let realClassName = className;
209
259
  if (css) {
210
- let selector = context.stitchesInstance.css(css)().className;
260
+ let formattedCss = shortCssObject(css);
261
+ let selector = context.stitchesInstance.css(formattedCss)().className;
211
262
  realClassName = realClassName ? `${selector} ${realClassName}` : selector;
212
263
  }
213
264
  let element = elementInstances.get(type) || elementInstances.get("base");
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.3.6",
2
+ "version": "0.4.1",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
31
31
  "name": "@weaverse/react",
32
32
  "author": "Weaverse Team",
33
33
  "dependencies": {
34
- "@weaverse/core": "^0.3.5"
34
+ "@weaverse/core": "^0.4.1"
35
35
  }
36
36
  }