@weaverse/react 0.3.5 → 0.4.0

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 +84 -29
  2. package/dist/index.mjs +84 -29
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -77,14 +77,14 @@ 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
- let [count, setCount] = React2.useState(0);
81
- return /* @__PURE__ */ React2.createElement("button", __spreadProps(__spreadValues({
82
- ref
83
- }, props), {
84
- onClick: () => setCount(count + 1)
85
- }), "Test Button ", count);
80
+ const _a = props, { style } = _a, rest = __objRest(_a, ["style"]);
81
+ return /* @__PURE__ */ React2.createElement("button", __spreadValues({
82
+ ref,
83
+ style
84
+ }, rest), props.value);
86
85
  });
87
86
  Button.defaultProps = {
87
+ value: "Click me",
88
88
  style: {
89
89
  borderRadius: "9999px",
90
90
  fontSize: "13px",
@@ -94,47 +94,92 @@ Button.defaultProps = {
94
94
  var schema2 = {
95
95
  title: "Button",
96
96
  type: "button",
97
- properties: {
98
- label: {
99
- type: "string",
100
- title: "Label",
101
- default: "Button"
97
+ settings: [
98
+ {
99
+ tab: "Settings",
100
+ label: "Alignment",
101
+ inspectors: [
102
+ {
103
+ binding: "style",
104
+ type: "alignment"
105
+ }
106
+ ]
107
+ },
108
+ {
109
+ tab: "Settings",
110
+ label: "Overlay",
111
+ inspectors: [
112
+ {
113
+ binding: "data",
114
+ key: "applyOverlay",
115
+ label: "Apply Overlay",
116
+ type: "switch"
117
+ }
118
+ ]
102
119
  },
103
- onClick: {
104
- type: "string",
105
- title: "On Click",
106
- default: "() => {}"
120
+ {
121
+ tab: "Settings",
122
+ label: "Group 1",
123
+ inspectors: [
124
+ {
125
+ binding: "data",
126
+ key: "value",
127
+ type: "textarea",
128
+ label: "",
129
+ default: ""
130
+ },
131
+ {
132
+ binding: "style",
133
+ key: "backgroundColor",
134
+ type: "color"
135
+ }
136
+ ]
107
137
  },
108
- style: {
109
- type: "object",
110
- title: "Style",
111
- default: {
112
- borderRadius: "9999px",
113
- fontSize: "13px",
114
- padding: "10px 15px"
115
- }
138
+ {
139
+ tab: "Settings",
140
+ label: "Group 2",
141
+ inspectors: [
142
+ {
143
+ binding: "style",
144
+ key: "color",
145
+ type: "color"
146
+ }
147
+ ]
116
148
  }
117
- }
149
+ ],
150
+ toolbar: []
118
151
  };
119
152
  var button_default = Button;
120
153
 
121
154
  // src/elements/text.tsx
122
155
  var React3 = __toESM(require("react"));
123
156
  var Text = React3.forwardRef((props, ref) => {
124
- let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
157
+ let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
125
158
  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
126
159
  ref
127
160
  }, rest), {
128
161
  contentEditable: true,
129
- dangerouslySetInnerHTML: { __html: "123123" }
162
+ dangerouslySetInnerHTML: { __html: value }
130
163
  }));
131
164
  });
132
165
  Text.defaultProps = {
133
- style: {},
166
+ value: "sample text",
134
167
  tag: "span"
135
168
  };
136
169
  var schema3 = {
137
- type: "text"
170
+ type: "text",
171
+ inspectors: [
172
+ {
173
+ binding: "data",
174
+ key: "value",
175
+ componentType: "textarea"
176
+ },
177
+ {
178
+ binding: "style",
179
+ key: "color",
180
+ componentType: "color"
181
+ }
182
+ ]
138
183
  };
139
184
  var text_default = Text;
140
185
 
@@ -155,6 +200,15 @@ var elements = {
155
200
  };
156
201
  var elements_default = elements;
157
202
 
203
+ // src/utils/css.ts
204
+ var shortCssObject = (css) => {
205
+ return {
206
+ "@desktop": css[`@desktop`],
207
+ "@tablet": css[`@tablet`],
208
+ "@mobile": css[`@mobile`]
209
+ };
210
+ };
211
+
158
212
  // src/renderer.tsx
159
213
  var import_core = require("@weaverse/core");
160
214
  var React4 = __toESM(require("react"));
@@ -213,7 +267,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
213
267
  }, []);
214
268
  let realClassName = className;
215
269
  if (css) {
216
- let selector = context.stitchesInstance.css(css)().className;
270
+ let formattedCss = shortCssObject(css);
271
+ let selector = context.stitchesInstance.css(formattedCss)().className;
217
272
  realClassName = realClassName ? `${selector} ${realClassName}` : selector;
218
273
  }
219
274
  let element = elementInstances.get(type) || elementInstances.get("base");
package/dist/index.mjs CHANGED
@@ -50,14 +50,14 @@ 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
- let [count, setCount] = React2.useState(0);
54
- return /* @__PURE__ */ React2.createElement("button", __spreadProps(__spreadValues({
55
- ref
56
- }, props), {
57
- onClick: () => setCount(count + 1)
58
- }), "Test Button ", count);
53
+ const _a = props, { style } = _a, rest = __objRest(_a, ["style"]);
54
+ return /* @__PURE__ */ React2.createElement("button", __spreadValues({
55
+ ref,
56
+ style
57
+ }, rest), props.value);
59
58
  });
60
59
  Button.defaultProps = {
60
+ value: "Click me",
61
61
  style: {
62
62
  borderRadius: "9999px",
63
63
  fontSize: "13px",
@@ -67,47 +67,92 @@ Button.defaultProps = {
67
67
  var schema2 = {
68
68
  title: "Button",
69
69
  type: "button",
70
- properties: {
71
- label: {
72
- type: "string",
73
- title: "Label",
74
- default: "Button"
70
+ settings: [
71
+ {
72
+ tab: "Settings",
73
+ label: "Alignment",
74
+ inspectors: [
75
+ {
76
+ binding: "style",
77
+ type: "alignment"
78
+ }
79
+ ]
80
+ },
81
+ {
82
+ tab: "Settings",
83
+ label: "Overlay",
84
+ inspectors: [
85
+ {
86
+ binding: "data",
87
+ key: "applyOverlay",
88
+ label: "Apply Overlay",
89
+ type: "switch"
90
+ }
91
+ ]
75
92
  },
76
- onClick: {
77
- type: "string",
78
- title: "On Click",
79
- default: "() => {}"
93
+ {
94
+ tab: "Settings",
95
+ label: "Group 1",
96
+ inspectors: [
97
+ {
98
+ binding: "data",
99
+ key: "value",
100
+ type: "textarea",
101
+ label: "",
102
+ default: ""
103
+ },
104
+ {
105
+ binding: "style",
106
+ key: "backgroundColor",
107
+ type: "color"
108
+ }
109
+ ]
80
110
  },
81
- style: {
82
- type: "object",
83
- title: "Style",
84
- default: {
85
- borderRadius: "9999px",
86
- fontSize: "13px",
87
- padding: "10px 15px"
88
- }
111
+ {
112
+ tab: "Settings",
113
+ label: "Group 2",
114
+ inspectors: [
115
+ {
116
+ binding: "style",
117
+ key: "color",
118
+ type: "color"
119
+ }
120
+ ]
89
121
  }
90
- }
122
+ ],
123
+ toolbar: []
91
124
  };
92
125
  var button_default = Button;
93
126
 
94
127
  // src/elements/text.tsx
95
128
  import * as React3 from "react";
96
129
  var Text = React3.forwardRef((props, ref) => {
97
- let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
130
+ let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
98
131
  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
99
132
  ref
100
133
  }, rest), {
101
134
  contentEditable: true,
102
- dangerouslySetInnerHTML: { __html: "123123" }
135
+ dangerouslySetInnerHTML: { __html: value }
103
136
  }));
104
137
  });
105
138
  Text.defaultProps = {
106
- style: {},
139
+ value: "sample text",
107
140
  tag: "span"
108
141
  };
109
142
  var schema3 = {
110
- type: "text"
143
+ type: "text",
144
+ inspectors: [
145
+ {
146
+ binding: "data",
147
+ key: "value",
148
+ componentType: "textarea"
149
+ },
150
+ {
151
+ binding: "style",
152
+ key: "color",
153
+ componentType: "color"
154
+ }
155
+ ]
111
156
  };
112
157
  var text_default = Text;
113
158
 
@@ -128,6 +173,15 @@ var elements = {
128
173
  };
129
174
  var elements_default = elements;
130
175
 
176
+ // src/utils/css.ts
177
+ var shortCssObject = (css) => {
178
+ return {
179
+ "@desktop": css[`@desktop`],
180
+ "@tablet": css[`@tablet`],
181
+ "@mobile": css[`@mobile`]
182
+ };
183
+ };
184
+
131
185
  // src/renderer.tsx
132
186
  import {
133
187
  isBrowser,
@@ -189,7 +243,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
189
243
  }, []);
190
244
  let realClassName = className;
191
245
  if (css) {
192
- let selector = context.stitchesInstance.css(css)().className;
246
+ let formattedCss = shortCssObject(css);
247
+ let selector = context.stitchesInstance.css(formattedCss)().className;
193
248
  realClassName = realClassName ? `${selector} ${realClassName}` : selector;
194
249
  }
195
250
  let element = elementInstances.get(type) || elementInstances.get("base");
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.3.5",
2
+ "version": "0.4.0",
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.4"
34
+ "@weaverse/core": "^0.4.0"
35
35
  }
36
36
  }