@draftbit/core 46.8.2-088bf8.2 → 46.8.2-af4b7d.2

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 (11) hide show
  1. package/lib/commonjs/components/RadioButton/context.js +1 -1
  2. package/lib/commonjs/components/ToggleButton.js +2 -15
  3. package/lib/commonjs/hooks.js +2 -1
  4. package/lib/commonjs/mappings/HtmlElements.js +79 -96
  5. package/lib/module/components/Picker/PickerComponent.android.js +11 -8
  6. package/lib/module/mappings/HtmlElements.js +80 -97
  7. package/lib/typescript/src/mappings/HtmlElements.d.ts +66 -34
  8. package/lib/typescript/src/mappings/HtmlElements.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/src/mappings/HtmlElements.js +85 -98
  11. package/src/mappings/HtmlElements.ts +87 -100
package/lib/commonjs/components/RadioButton/context.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.radioButtonGroupContext = exports.Direction = void 0;
7
7
  exports.useRadioButtonGroupContext = useRadioButtonGroupContext;
8
8
  var _react = require("react");
9
- var Direction;
9
+ let Direction;
10
10
  exports.Direction = Direction;
11
11
  (function (Direction) {
12
12
  Direction["Horizontal"] = "horizontal";
package/lib/commonjs/components/ToggleButton.js CHANGED
@@ -11,6 +11,7 @@ var _IconButton = _interopRequireDefault(require("./IconButton"));
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
15
  const ToggleButton = _ref => {
15
16
  let {
16
17
  Icon,
@@ -46,7 +47,7 @@ const ToggleButton = _ref => {
46
47
  setInternalValue(!internalValue);
47
48
  onPress(!internalValue);
48
49
  };
49
- return /*#__PURE__*/React.createElement(_IconButton.default, {
50
+ return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
50
51
  Icon: Icon,
51
52
  icon: icon,
52
53
  size: iconSize,
@@ -58,20 +59,6 @@ const ToggleButton = _ref => {
58
59
  height,
59
60
  backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
60
61
  borderColor: colors[borderColor]
61
- }, style],
62
- ...rest
63
- });
64
- };
65
- const styles = _reactNative.StyleSheet.create({
66
- mainContainer: {
67
- borderWidth: 1
68
- }
69
- });
70
- var _default = (0, _theming.withTheme)(ToggleButton);
71
- exports.default = _default;idth,
72
- height,
73
- backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
74
- borderColor: colors[borderColor]
75
62
  }, style]
76
63
  }, rest));
77
64
  };
package/lib/commonjs/hooks.js CHANGED
@@ -10,11 +10,12 @@ function usePrevious(value) {
10
10
  // The ref object is a generic container whose current property is mutable
11
11
  // and can hold any value, similar to an instance property on a class
12
12
  const ref = _react.default.useRef();
13
+
13
14
  // Store current value in ref
14
15
  _react.default.useEffect(() => {
15
16
  ref.current = value;
16
17
  }, [value]);
18
+
17
19
  // Return previous value (happens before update in useEffect above)
18
20
  return ref.current;
19
- }
20
21
  }
package/lib/commonjs/mappings/HtmlElements.js CHANGED
@@ -5,22 +5,31 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SEED_DATA = void 0;
7
7
  var _types = require("@draftbit/types");
8
- const SEED_DATA_TRIGGERS = [_types.Triggers.OnValueChange];
9
8
  const ELEMENT_SEED_DATA = {
10
9
  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
11
10
  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
12
11
  packageName: "@expo/html-elements",
13
- stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
14
- layout: {
15
- margin: 0
16
- },
17
- triggers: SEED_DATA_TRIGGERS,
12
+ stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
18
13
  category: _types.COMPONENT_TYPES.webelement
19
14
  };
20
- const HEADING_SEED_DATA = {
15
+ const TEXT_SEED_DATA = {
21
16
  ...ELEMENT_SEED_DATA,
22
17
  category: _types.COMPONENT_TYPES.text,
18
+ stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
19
+ layout: {
20
+ color: "strong"
21
+ },
23
22
  props: {
23
+ children: {
24
+ group: _types.GROUPS.data,
25
+ label: "Text",
26
+ description: "Text",
27
+ defaultValue: "Double click me to edit 👀",
28
+ editable: true,
29
+ required: true,
30
+ formType: _types.FORM_TYPES.string,
31
+ propType: _types.PROP_TYPES.STRING
32
+ },
24
33
  accessibilityLabel: {
25
34
  group: _types.GROUPS.accessibility,
26
35
  name: "accessibilityLabel",
@@ -41,108 +50,56 @@ const HEADING_SEED_DATA = {
41
50
  required: false,
42
51
  formType: _types.FORM_TYPES.boolean,
43
52
  propType: _types.PROP_TYPES.BOOLEAN,
44
- defaultValue: null
45
- },
46
- children: {
47
- group: _types.GROUPS.data,
48
- label: "Text",
49
- description: "Text",
50
- editable: true,
51
- required: true,
52
- formType: _types.FORM_TYPES.string,
53
- propType: _types.PROP_TYPES.STRING,
54
- defaultValue: "Your Headline Here"
55
- }
56
- }
57
- };
58
- const TEXT_SEED_DATA = {
59
- ...ELEMENT_SEED_DATA,
60
- category: _types.COMPONENT_TYPES.text,
61
- props: {
62
- children: {
63
- group: _types.GROUPS.data,
64
- label: "Text",
65
- description: "Text",
66
- defaultValue: "Your Text Here",
67
- editable: true,
68
- required: true,
69
- formType: _types.FORM_TYPES.string,
70
- propType: _types.PROP_TYPES.STRING
53
+ defaultValue: true
71
54
  }
72
55
  }
73
56
  };
74
57
  const SEED_DATA = [{
75
- name: "H1",
58
+ name: "Heading 1",
76
59
  tag: "H1",
77
- ...HEADING_SEED_DATA
60
+ ...TEXT_SEED_DATA
78
61
  }, {
79
- name: "H2",
62
+ name: "Heading 2",
80
63
  tag: "H2",
81
- ...HEADING_SEED_DATA
64
+ ...TEXT_SEED_DATA
82
65
  }, {
83
- name: "H3",
66
+ name: "Heading 3",
84
67
  tag: "H3",
85
- ...HEADING_SEED_DATA
68
+ ...TEXT_SEED_DATA
86
69
  }, {
87
- name: "H4",
70
+ name: "Heading 4",
88
71
  tag: "H4",
89
- ...HEADING_SEED_DATA
72
+ ...TEXT_SEED_DATA
90
73
  }, {
91
- name: "H5",
74
+ name: "Heading 5",
92
75
  tag: "H5",
93
- ...HEADING_SEED_DATA
76
+ ...TEXT_SEED_DATA
94
77
  }, {
95
- name: "H6",
78
+ name: "Heading 6",
96
79
  tag: "H6",
97
- ...HEADING_SEED_DATA
98
- }, {
99
- name: "Anchor",
100
- tag: "A",
101
- ...TEXT_SEED_DATA,
102
- props: {
103
- href: (0, _types.createTextProp)({
104
- label: "href",
105
- description: "Specify the URL",
106
- defaultValue: ""
107
- }),
108
- target: {
109
- group: _types.GROUPS.basic,
110
- label: "target",
111
- description: "decide where link should open",
112
- formType: _types.FORM_TYPES.flatArray,
113
- defaultValue: "_blank",
114
- options: ["_blank", "_self", "_parent", "_top"]
115
- }
116
- }
80
+ ...TEXT_SEED_DATA
117
81
  }, {
118
82
  name: "Paragraph",
119
83
  tag: "P",
120
- ...TEXT_SEED_DATA,
121
- props: {
122
- // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
123
- // strong: createBoolProp({
124
- // label: "Strong",
125
- // description: "Strong",
126
- // }),
127
- // strike: createBoolProp({
128
- // label: "Strike",
129
- // description: "Strike through",
130
- // }),
131
- // italic: createBoolProp({
132
- // label: "Italic",
133
- // description: "Italic Fonts",
134
- // }),
135
- // bold: createBoolProp({
136
- // label: "Bold",
137
- // description: "Bold",
138
- // }),
139
- }
84
+ ...TEXT_SEED_DATA
85
+ }, {
86
+ name: "Bold",
87
+ tag: "B",
88
+ ...TEXT_SEED_DATA
89
+ }, {
90
+ name: "Strikethrough",
91
+ tag: "S",
92
+ ...TEXT_SEED_DATA
93
+ }, {
94
+ name: "Italic",
95
+ tag: "I",
96
+ ...TEXT_SEED_DATA
140
97
  }, {
141
98
  name: "Code",
142
99
  tag: "Code",
143
100
  ...TEXT_SEED_DATA
144
101
  }, {
145
- name: "Pre",
102
+ name: "Preformatted",
146
103
  tag: "Pre",
147
104
  ...TEXT_SEED_DATA
148
105
  }, {
@@ -150,28 +107,54 @@ const SEED_DATA = [{
150
107
  tag: "Mark",
151
108
  ...TEXT_SEED_DATA
152
109
  }, {
153
- name: "BR",
154
- tag: "BR",
155
- ...TEXT_SEED_DATA
156
- }, {
157
- name: "BlockQuote",
110
+ name: "Block Quote",
158
111
  tag: "BlockQuote",
159
112
  ...TEXT_SEED_DATA
160
113
  }, {
161
- name: "HR",
162
- tag: "HR",
114
+ name: "Quoted",
115
+ tag: "Q",
163
116
  ...TEXT_SEED_DATA
164
117
  }, {
165
118
  name: "Time",
166
119
  tag: "Time",
167
- ...ELEMENT_SEED_DATA
120
+ ...TEXT_SEED_DATA
168
121
  }, {
169
- name: "UL",
122
+ name: "Unordered List",
170
123
  tag: "UL",
171
124
  ...ELEMENT_SEED_DATA
172
125
  }, {
173
- name: "LI",
126
+ name: "List Item",
174
127
  tag: "LI",
128
+ ...TEXT_SEED_DATA,
129
+ category: _types.COMPONENT_TYPES.webelement
130
+ }, {
131
+ name: "Line Break",
132
+ tag: "BR",
133
+ ...ELEMENT_SEED_DATA
134
+ }, {
135
+ name: "Horizontal Rule",
136
+ tag: "HR",
175
137
  ...ELEMENT_SEED_DATA
138
+ }, {
139
+ name: "Anchor",
140
+ tag: "A",
141
+ ...TEXT_SEED_DATA,
142
+ props: {
143
+ ...TEXT_SEED_DATA.props,
144
+ href: (0, _types.createTextProp)({
145
+ label: "href",
146
+ description: "Specify the URL",
147
+ defaultValue: ""
148
+ }),
149
+ target: {
150
+ group: _types.GROUPS.basic,
151
+ label: "target",
152
+ description: "decide where link should open",
153
+ formType: _types.FORM_TYPES.flatArray,
154
+ defaultValue: "_blank",
155
+ options: ["_blank", "_self", "_parent", "_top"]
156
+ }
157
+ },
158
+ category: _types.COMPONENT_TYPES.webelement
176
159
  }];
177
160
  exports.SEED_DATA = SEED_DATA;
package/lib/module/components/Picker/PickerComponent.android.js CHANGED
@@ -1,3 +1,4 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import * as React from "react";
2
3
  import { View, StyleSheet } from "react-native";
3
4
  import omit from "lodash.omit";
@@ -7,6 +8,7 @@ import { extractStyles } from "../../utilities";
7
8
  import TextField from "../TextField";
8
9
  import Touchable from "../Touchable";
9
10
  const Picker = _ref => {
11
+ var _options$find$label, _options$find;
10
12
  let {
11
13
  style,
12
14
  options,
@@ -16,7 +18,6 @@ const Picker = _ref => {
16
18
  onValueChange: onValueChangeOverride = () => {},
17
19
  ...props
18
20
  } = _ref;
19
- var _a, _b;
20
21
  const {
21
22
  viewStyles: {
22
23
  borderRadius,
@@ -61,7 +62,7 @@ const Picker = _ref => {
61
62
  };
62
63
 
63
64
  const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
64
- const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
65
+ const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
65
66
  return /*#__PURE__*/React.createElement(Touchable, {
66
67
  disabled: disabled,
67
68
  onPress: toggleFocus,
@@ -85,16 +86,18 @@ const Picker = _ref => {
85
86
  key: o.value
86
87
  }))), /*#__PURE__*/React.createElement(View, {
87
88
  pointerEvents: "none"
88
- }, /*#__PURE__*/React.createElement(TextField, {
89
- ...props,
89
+ }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
90
90
  value: selectedLabel,
91
- placeholder: placeholder,
91
+ placeholder: placeholder
92
92
  // @ts-ignore
93
- ref: textField,
94
- disabled: disabled,
93
+ ,
94
+ ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
95
+ ,
96
+ disabled: disabled
95
97
  // @ts-expect-error
98
+ ,
96
99
  style: stylesWithoutMargin
97
- }))));
100
+ })))));
98
101
  };
99
102
  const styles = StyleSheet.create({
100
103
  container: {
package/lib/module/mappings/HtmlElements.js CHANGED
@@ -1,20 +1,29 @@
1
- import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, Triggers } from "@draftbit/types";
2
- const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
1
+ import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
3
2
  const ELEMENT_SEED_DATA = {
4
3
  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
5
4
  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
6
5
  packageName: "@expo/html-elements",
7
- stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Effects],
8
- layout: {
9
- margin: 0
10
- },
11
- triggers: SEED_DATA_TRIGGERS,
6
+ stylesPanelSections: BLOCK_STYLES_SECTIONS,
12
7
  category: COMPONENT_TYPES.webelement
13
8
  };
14
- const HEADING_SEED_DATA = {
9
+ const TEXT_SEED_DATA = {
15
10
  ...ELEMENT_SEED_DATA,
16
11
  category: COMPONENT_TYPES.text,
12
+ stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Effects],
13
+ layout: {
14
+ color: "strong"
15
+ },
17
16
  props: {
17
+ children: {
18
+ group: GROUPS.data,
19
+ label: "Text",
20
+ description: "Text",
21
+ defaultValue: "Double click me to edit 👀",
22
+ editable: true,
23
+ required: true,
24
+ formType: FORM_TYPES.string,
25
+ propType: PROP_TYPES.STRING
26
+ },
18
27
  accessibilityLabel: {
19
28
  group: GROUPS.accessibility,
20
29
  name: "accessibilityLabel",
@@ -35,108 +44,56 @@ const HEADING_SEED_DATA = {
35
44
  required: false,
36
45
  formType: FORM_TYPES.boolean,
37
46
  propType: PROP_TYPES.BOOLEAN,
38
- defaultValue: null
39
- },
40
- children: {
41
- group: GROUPS.data,
42
- label: "Text",
43
- description: "Text",
44
- editable: true,
45
- required: true,
46
- formType: FORM_TYPES.string,
47
- propType: PROP_TYPES.STRING,
48
- defaultValue: "Your Headline Here"
49
- }
50
- }
51
- };
52
- const TEXT_SEED_DATA = {
53
- ...ELEMENT_SEED_DATA,
54
- category: COMPONENT_TYPES.text,
55
- props: {
56
- children: {
57
- group: GROUPS.data,
58
- label: "Text",
59
- description: "Text",
60
- defaultValue: "Your Text Here",
61
- editable: true,
62
- required: true,
63
- formType: FORM_TYPES.string,
64
- propType: PROP_TYPES.STRING
47
+ defaultValue: true
65
48
  }
66
49
  }
67
50
  };
68
51
  export const SEED_DATA = [{
69
- name: "H1",
52
+ name: "Heading 1",
70
53
  tag: "H1",
71
- ...HEADING_SEED_DATA
54
+ ...TEXT_SEED_DATA
72
55
  }, {
73
- name: "H2",
56
+ name: "Heading 2",
74
57
  tag: "H2",
75
- ...HEADING_SEED_DATA
58
+ ...TEXT_SEED_DATA
76
59
  }, {
77
- name: "H3",
60
+ name: "Heading 3",
78
61
  tag: "H3",
79
- ...HEADING_SEED_DATA
62
+ ...TEXT_SEED_DATA
80
63
  }, {
81
- name: "H4",
64
+ name: "Heading 4",
82
65
  tag: "H4",
83
- ...HEADING_SEED_DATA
66
+ ...TEXT_SEED_DATA
84
67
  }, {
85
- name: "H5",
68
+ name: "Heading 5",
86
69
  tag: "H5",
87
- ...HEADING_SEED_DATA
70
+ ...TEXT_SEED_DATA
88
71
  }, {
89
- name: "H6",
72
+ name: "Heading 6",
90
73
  tag: "H6",
91
- ...HEADING_SEED_DATA
92
- }, {
93
- name: "Anchor",
94
- tag: "A",
95
- ...TEXT_SEED_DATA,
96
- props: {
97
- href: createTextProp({
98
- label: "href",
99
- description: "Specify the URL",
100
- defaultValue: ""
101
- }),
102
- target: {
103
- group: GROUPS.basic,
104
- label: "target",
105
- description: "decide where link should open",
106
- formType: FORM_TYPES.flatArray,
107
- defaultValue: "_blank",
108
- options: ["_blank", "_self", "_parent", "_top"]
109
- }
110
- }
74
+ ...TEXT_SEED_DATA
111
75
  }, {
112
76
  name: "Paragraph",
113
77
  tag: "P",
114
- ...TEXT_SEED_DATA,
115
- props: {
116
- // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
117
- // strong: createBoolProp({
118
- // label: "Strong",
119
- // description: "Strong",
120
- // }),
121
- // strike: createBoolProp({
122
- // label: "Strike",
123
- // description: "Strike through",
124
- // }),
125
- // italic: createBoolProp({
126
- // label: "Italic",
127
- // description: "Italic Fonts",
128
- // }),
129
- // bold: createBoolProp({
130
- // label: "Bold",
131
- // description: "Bold",
132
- // }),
133
- }
78
+ ...TEXT_SEED_DATA
79
+ }, {
80
+ name: "Bold",
81
+ tag: "B",
82
+ ...TEXT_SEED_DATA
83
+ }, {
84
+ name: "Strikethrough",
85
+ tag: "S",
86
+ ...TEXT_SEED_DATA
87
+ }, {
88
+ name: "Italic",
89
+ tag: "I",
90
+ ...TEXT_SEED_DATA
134
91
  }, {
135
92
  name: "Code",
136
93
  tag: "Code",
137
94
  ...TEXT_SEED_DATA
138
95
  }, {
139
- name: "Pre",
96
+ name: "Preformatted",
140
97
  tag: "Pre",
141
98
  ...TEXT_SEED_DATA
142
99
  }, {
@@ -144,27 +101,53 @@ export const SEED_DATA = [{
144
101
  tag: "Mark",
145
102
  ...TEXT_SEED_DATA
146
103
  }, {
147
- name: "BR",
148
- tag: "BR",
149
- ...TEXT_SEED_DATA
150
- }, {
151
- name: "BlockQuote",
104
+ name: "Block Quote",
152
105
  tag: "BlockQuote",
153
106
  ...TEXT_SEED_DATA
154
107
  }, {
155
- name: "HR",
156
- tag: "HR",
108
+ name: "Quoted",
109
+ tag: "Q",
157
110
  ...TEXT_SEED_DATA
158
111
  }, {
159
112
  name: "Time",
160
113
  tag: "Time",
161
- ...ELEMENT_SEED_DATA
114
+ ...TEXT_SEED_DATA
162
115
  }, {
163
- name: "UL",
116
+ name: "Unordered List",
164
117
  tag: "UL",
165
118
  ...ELEMENT_SEED_DATA
166
119
  }, {
167
- name: "LI",
120
+ name: "List Item",
168
121
  tag: "LI",
122
+ ...TEXT_SEED_DATA,
123
+ category: COMPONENT_TYPES.webelement
124
+ }, {
125
+ name: "Line Break",
126
+ tag: "BR",
127
+ ...ELEMENT_SEED_DATA
128
+ }, {
129
+ name: "Horizontal Rule",
130
+ tag: "HR",
169
131
  ...ELEMENT_SEED_DATA
132
+ }, {
133
+ name: "Anchor",
134
+ tag: "A",
135
+ ...TEXT_SEED_DATA,
136
+ props: {
137
+ ...TEXT_SEED_DATA.props,
138
+ href: createTextProp({
139
+ label: "href",
140
+ description: "Specify the URL",
141
+ defaultValue: ""
142
+ }),
143
+ target: {
144
+ group: GROUPS.basic,
145
+ label: "target",
146
+ description: "decide where link should open",
147
+ formType: FORM_TYPES.flatArray,
148
+ defaultValue: "_blank",
149
+ options: ["_blank", "_self", "_parent", "_top"]
150
+ }
151
+ },
152
+ category: COMPONENT_TYPES.webelement
170
153
  }];
package/lib/typescript/src/mappings/HtmlElements.d.ts CHANGED
@@ -1,45 +1,67 @@
1
1
  export declare const SEED_DATA: ({
2
+ category: string;
3
+ stylesPanelSections: string[];
4
+ layout: {
5
+ color: string;
6
+ };
2
7
  props: {
3
- href: any;
4
- target: {
8
+ children: {
5
9
  group: string;
6
10
  label: string;
7
11
  description: string;
8
- formType: string;
9
12
  defaultValue: string;
10
- options: string[];
13
+ editable: boolean;
14
+ required: boolean;
15
+ formType: string;
16
+ propType: string;
17
+ };
18
+ accessibilityLabel: {
19
+ group: string;
20
+ name: string;
21
+ label: string;
22
+ description: string;
23
+ editable: boolean;
24
+ required: boolean;
25
+ formType: string;
26
+ propType: string;
27
+ defaultValue: null;
28
+ };
29
+ selectable: {
30
+ group: string;
31
+ name: string;
32
+ label: string;
33
+ description: string;
34
+ editable: boolean;
35
+ required: boolean;
36
+ formType: string;
37
+ propType: string;
38
+ defaultValue: boolean;
11
39
  };
12
40
  };
13
- category: string;
14
41
  doc_link: string;
15
42
  code_link: string;
16
43
  packageName: string;
17
- stylesPanelSections: string[];
18
- layout: {
19
- margin: number;
20
- };
21
- triggers: string[];
22
44
  name: string;
23
45
  tag: string;
24
46
  } | {
25
- props: {
26
- href?: undefined;
27
- target?: undefined;
28
- };
29
- category: string;
30
47
  doc_link: string;
31
48
  code_link: string;
32
49
  packageName: string;
33
50
  stylesPanelSections: string[];
34
- layout: {
35
- margin: number;
36
- };
37
- triggers: string[];
51
+ category: string;
38
52
  name: string;
39
53
  tag: string;
40
54
  } | {
41
- category: string;
42
55
  props: {
56
+ href: any;
57
+ target: {
58
+ group: string;
59
+ label: string;
60
+ description: string;
61
+ formType: string;
62
+ defaultValue: string;
63
+ options: string[];
64
+ };
43
65
  children: {
44
66
  group: string;
45
67
  label: string;
@@ -50,27 +72,37 @@ export declare const SEED_DATA: ({
50
72
  formType: string;
51
73
  propType: string;
52
74
  };
75
+ accessibilityLabel: {
76
+ group: string;
77
+ name: string;
78
+ label: string;
79
+ description: string;
80
+ editable: boolean;
81
+ required: boolean;
82
+ formType: string;
83
+ propType: string;
84
+ defaultValue: null;
85
+ };
86
+ selectable: {
87
+ group: string;
88
+ name: string;
89
+ label: string;
90
+ description: string;
91
+ editable: boolean;
92
+ required: boolean;
93
+ formType: string;
94
+ propType: string;
95
+ defaultValue: boolean;
96
+ };
53
97
  };
54
- doc_link: string;
55
- code_link: string;
56
- packageName: string;
98
+ category: string;
57
99
  stylesPanelSections: string[];
58
100
  layout: {
59
- margin: number;
101
+ color: string;
60
102
  };
61
- triggers: string[];
62
- name: string;
63
- tag: string;
64
- } | {
65
103
  doc_link: string;
66
104
  code_link: string;
67
105
  packageName: string;
68
- stylesPanelSections: string[];
69
- layout: {
70
- margin: number;
71
- };
72
- triggers: string[];
73
- category: string;
74
106
  name: string;
75
107
  tag: string;
76
108
  })[];
package/lib/typescript/src/mappings/HtmlElements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HtmlElements.d.ts","sourceRoot":"","sources":["../../../../src/mappings/HtmlElements.ts"],"names":[],"mappings":"AAsFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwHrB,CAAC"}
1
+ {"version":3,"file":"HtmlElements.d.ts","sourceRoot":"","sources":["../../../../src/mappings/HtmlElements.ts"],"names":[],"mappings":"AAoEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6HrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.2-088bf8.2+088bf87",
3
+ "version": "46.8.2-af4b7d.2+af4b7d0",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "^46.8.2-088bf8.2+088bf87",
44
+ "@draftbit/types": "^46.8.2-af4b7d.2+af4b7d0",
45
45
  "@expo/html-elements": "^0.3.1",
46
46
  "@material-ui/core": "^4.11.0",
47
47
  "@material-ui/pickers": "^3.2.10",
@@ -93,5 +93,5 @@
93
93
  ]
94
94
  ]
95
95
  },
96
- "gitHead": "088bf87109989ec13afa5a6b64d29314afdc8caa"
96
+ "gitHead": "af4b7d05423db7dbcc8d6ad29c655abae47ca702"
97
97
  }
package/src/mappings/HtmlElements.js CHANGED
@@ -1,9 +1,14 @@
1
- import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
2
- const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
1
+ import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
3
2
  const ELEMENT_SEED_DATA = {
4
3
  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
5
4
  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
6
5
  packageName: "@expo/html-elements",
6
+ stylesPanelSections: BLOCK_STYLES_SECTIONS,
7
+ category: COMPONENT_TYPES.webelement,
8
+ };
9
+ const TEXT_SEED_DATA = {
10
+ ...ELEMENT_SEED_DATA,
11
+ category: COMPONENT_TYPES.text,
7
12
  stylesPanelSections: [
8
13
  StylesPanelSections.Typography,
9
14
  StylesPanelSections.LayoutSelectedItem,
@@ -11,15 +16,19 @@ const ELEMENT_SEED_DATA = {
11
16
  StylesPanelSections.Effects,
12
17
  ],
13
18
  layout: {
14
- margin: 0,
19
+ color: "strong",
15
20
  },
16
- triggers: SEED_DATA_TRIGGERS,
17
- category: COMPONENT_TYPES.webelement,
18
- };
19
- const HEADING_SEED_DATA = {
20
- ...ELEMENT_SEED_DATA,
21
- category: COMPONENT_TYPES.text,
22
21
  props: {
22
+ children: {
23
+ group: GROUPS.data,
24
+ label: "Text",
25
+ description: "Text",
26
+ defaultValue: "Double click me to edit 👀",
27
+ editable: true,
28
+ required: true,
29
+ formType: FORM_TYPES.string,
30
+ propType: PROP_TYPES.STRING,
31
+ },
23
32
  accessibilityLabel: {
24
33
  group: GROUPS.accessibility,
25
34
  name: "accessibilityLabel",
@@ -40,110 +49,60 @@ const HEADING_SEED_DATA = {
40
49
  required: false,
41
50
  formType: FORM_TYPES.boolean,
42
51
  propType: PROP_TYPES.BOOLEAN,
43
- defaultValue: null,
44
- },
45
- children: {
46
- group: GROUPS.data,
47
- label: "Text",
48
- description: "Text",
49
- editable: true,
50
- required: true,
51
- formType: FORM_TYPES.string,
52
- propType: PROP_TYPES.STRING,
53
- defaultValue: "Your Headline Here",
54
- },
55
- },
56
- };
57
- const TEXT_SEED_DATA = {
58
- ...ELEMENT_SEED_DATA,
59
- category: COMPONENT_TYPES.text,
60
- props: {
61
- children: {
62
- group: GROUPS.data,
63
- label: "Text",
64
- description: "Text",
65
- defaultValue: "Your Text Here",
66
- editable: true,
67
- required: true,
68
- formType: FORM_TYPES.string,
69
- propType: PROP_TYPES.STRING,
52
+ defaultValue: true,
70
53
  },
71
54
  },
72
55
  };
73
56
  export const SEED_DATA = [
74
57
  {
75
- name: "H1",
58
+ name: "Heading 1",
76
59
  tag: "H1",
77
- ...HEADING_SEED_DATA,
60
+ ...TEXT_SEED_DATA,
78
61
  },
79
62
  {
80
- name: "H2",
63
+ name: "Heading 2",
81
64
  tag: "H2",
82
- ...HEADING_SEED_DATA,
65
+ ...TEXT_SEED_DATA,
83
66
  },
84
67
  {
85
- name: "H3",
68
+ name: "Heading 3",
86
69
  tag: "H3",
87
- ...HEADING_SEED_DATA,
70
+ ...TEXT_SEED_DATA,
88
71
  },
89
72
  {
90
- name: "H4",
73
+ name: "Heading 4",
91
74
  tag: "H4",
92
- ...HEADING_SEED_DATA,
75
+ ...TEXT_SEED_DATA,
93
76
  },
94
77
  {
95
- name: "H5",
78
+ name: "Heading 5",
96
79
  tag: "H5",
97
- ...HEADING_SEED_DATA,
80
+ ...TEXT_SEED_DATA,
98
81
  },
99
82
  {
100
- name: "H6",
83
+ name: "Heading 6",
101
84
  tag: "H6",
102
- ...HEADING_SEED_DATA,
103
- },
104
- {
105
- name: "Anchor",
106
- tag: "A",
107
85
  ...TEXT_SEED_DATA,
108
- props: {
109
- href: createTextProp({
110
- label: "href",
111
- description: "Specify the URL",
112
- defaultValue: "",
113
- }),
114
- target: {
115
- group: GROUPS.basic,
116
- label: "target",
117
- description: "decide where link should open",
118
- formType: FORM_TYPES.flatArray,
119
- defaultValue: "_blank",
120
- options: ["_blank", "_self", "_parent", "_top"],
121
- },
122
- },
123
86
  },
124
87
  {
125
88
  name: "Paragraph",
126
89
  tag: "P",
127
90
  ...TEXT_SEED_DATA,
128
- props: {
129
- // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
130
- // strong: createBoolProp({
131
- // label: "Strong",
132
- // description: "Strong",
133
- // }),
134
- // strike: createBoolProp({
135
- // label: "Strike",
136
- // description: "Strike through",
137
- // }),
138
- // italic: createBoolProp({
139
- // label: "Italic",
140
- // description: "Italic Fonts",
141
- // }),
142
- // bold: createBoolProp({
143
- // label: "Bold",
144
- // description: "Bold",
145
- // }),
146
- },
91
+ },
92
+ {
93
+ name: "Bold",
94
+ tag: "B",
95
+ ...TEXT_SEED_DATA,
96
+ },
97
+ {
98
+ name: "Strikethrough",
99
+ tag: "S",
100
+ ...TEXT_SEED_DATA,
101
+ },
102
+ {
103
+ name: "Italic",
104
+ tag: "I",
105
+ ...TEXT_SEED_DATA,
147
106
  },
148
107
  {
149
108
  name: "Code",
@@ -151,7 +110,7 @@ export const SEED_DATA = [
151
110
  ...TEXT_SEED_DATA,
152
111
  },
153
112
  {
154
- name: "Pre",
113
+ name: "Preformatted",
155
114
  tag: "Pre",
156
115
  ...TEXT_SEED_DATA,
157
116
  },
@@ -161,33 +120,61 @@ export const SEED_DATA = [
161
120
  ...TEXT_SEED_DATA,
162
121
  },
163
122
  {
164
- name: "BR",
165
- tag: "BR",
166
- ...TEXT_SEED_DATA,
167
- },
168
- {
169
- name: "BlockQuote",
123
+ name: "Block Quote",
170
124
  tag: "BlockQuote",
171
125
  ...TEXT_SEED_DATA,
172
126
  },
173
127
  {
174
- name: "HR",
175
- tag: "HR",
128
+ name: "Quoted",
129
+ tag: "Q",
176
130
  ...TEXT_SEED_DATA,
177
131
  },
178
132
  {
179
133
  name: "Time",
180
134
  tag: "Time",
181
- ...ELEMENT_SEED_DATA,
135
+ ...TEXT_SEED_DATA,
182
136
  },
183
137
  {
184
- name: "UL",
138
+ name: "Unordered List",
185
139
  tag: "UL",
186
140
  ...ELEMENT_SEED_DATA,
187
141
  },
188
142
  {
189
- name: "LI",
143
+ name: "List Item",
190
144
  tag: "LI",
145
+ ...TEXT_SEED_DATA,
146
+ category: COMPONENT_TYPES.webelement,
147
+ },
148
+ {
149
+ name: "Line Break",
150
+ tag: "BR",
151
+ ...ELEMENT_SEED_DATA,
152
+ },
153
+ {
154
+ name: "Horizontal Rule",
155
+ tag: "HR",
191
156
  ...ELEMENT_SEED_DATA,
192
157
  },
158
+ {
159
+ name: "Anchor",
160
+ tag: "A",
161
+ ...TEXT_SEED_DATA,
162
+ props: {
163
+ ...TEXT_SEED_DATA.props,
164
+ href: createTextProp({
165
+ label: "href",
166
+ description: "Specify the URL",
167
+ defaultValue: "",
168
+ }),
169
+ target: {
170
+ group: GROUPS.basic,
171
+ label: "target",
172
+ description: "decide where link should open",
173
+ formType: FORM_TYPES.flatArray,
174
+ defaultValue: "_blank",
175
+ options: ["_blank", "_self", "_parent", "_top"],
176
+ },
177
+ },
178
+ category: COMPONENT_TYPES.webelement,
179
+ },
193
180
  ];
package/src/mappings/HtmlElements.ts CHANGED
@@ -5,14 +5,20 @@ import {
5
5
  PROP_TYPES,
6
6
  GROUPS,
7
7
  StylesPanelSections,
8
- Triggers,
8
+ BLOCK_STYLES_SECTIONS,
9
9
  } from "@draftbit/types";
10
- const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
11
10
 
12
11
  const ELEMENT_SEED_DATA = {
13
12
  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
14
13
  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
15
14
  packageName: "@expo/html-elements",
15
+ stylesPanelSections: BLOCK_STYLES_SECTIONS,
16
+ category: COMPONENT_TYPES.webelement,
17
+ };
18
+
19
+ const TEXT_SEED_DATA = {
20
+ ...ELEMENT_SEED_DATA,
21
+ category: COMPONENT_TYPES.text,
16
22
  stylesPanelSections: [
17
23
  StylesPanelSections.Typography,
18
24
  StylesPanelSections.LayoutSelectedItem,
@@ -20,16 +26,19 @@ const ELEMENT_SEED_DATA = {
20
26
  StylesPanelSections.Effects,
21
27
  ],
22
28
  layout: {
23
- margin: 0,
29
+ color: "strong",
24
30
  },
25
- triggers: SEED_DATA_TRIGGERS,
26
- category: COMPONENT_TYPES.webelement,
27
- };
28
-
29
- const HEADING_SEED_DATA = {
30
- ...ELEMENT_SEED_DATA,
31
- category: COMPONENT_TYPES.text,
32
31
  props: {
32
+ children: {
33
+ group: GROUPS.data,
34
+ label: "Text",
35
+ description: "Text",
36
+ defaultValue: "Double click me to edit 👀",
37
+ editable: true,
38
+ required: true,
39
+ formType: FORM_TYPES.string,
40
+ propType: PROP_TYPES.STRING,
41
+ },
33
42
  accessibilityLabel: {
34
43
  group: GROUPS.accessibility,
35
44
  name: "accessibilityLabel",
@@ -52,112 +61,61 @@ const HEADING_SEED_DATA = {
52
61
  required: false,
53
62
  formType: FORM_TYPES.boolean,
54
63
  propType: PROP_TYPES.BOOLEAN,
55
- defaultValue: null,
56
- },
57
- children: {
58
- group: GROUPS.data,
59
- label: "Text",
60
- description: "Text",
61
- editable: true,
62
- required: true,
63
- formType: FORM_TYPES.string,
64
- propType: PROP_TYPES.STRING,
65
- defaultValue: "Your Headline Here",
66
- },
67
- },
68
- };
69
-
70
- const TEXT_SEED_DATA = {
71
- ...ELEMENT_SEED_DATA,
72
- category: COMPONENT_TYPES.text,
73
- props: {
74
- children: {
75
- group: GROUPS.data,
76
- label: "Text",
77
- description: "Text",
78
- defaultValue: "Your Text Here",
79
- editable: true,
80
- required: true,
81
- formType: FORM_TYPES.string,
82
- propType: PROP_TYPES.STRING,
64
+ defaultValue: true,
83
65
  },
84
66
  },
85
67
  };
86
68
 
87
69
  export const SEED_DATA = [
88
70
  {
89
- name: "H1",
71
+ name: "Heading 1",
90
72
  tag: "H1",
91
- ...HEADING_SEED_DATA,
73
+ ...TEXT_SEED_DATA,
92
74
  },
93
75
  {
94
- name: "H2",
76
+ name: "Heading 2",
95
77
  tag: "H2",
96
- ...HEADING_SEED_DATA,
78
+ ...TEXT_SEED_DATA,
97
79
  },
98
80
  {
99
- name: "H3",
81
+ name: "Heading 3",
100
82
  tag: "H3",
101
- ...HEADING_SEED_DATA,
83
+ ...TEXT_SEED_DATA,
102
84
  },
103
85
  {
104
- name: "H4",
86
+ name: "Heading 4",
105
87
  tag: "H4",
106
- ...HEADING_SEED_DATA,
88
+ ...TEXT_SEED_DATA,
107
89
  },
108
90
  {
109
- name: "H5",
91
+ name: "Heading 5",
110
92
  tag: "H5",
111
- ...HEADING_SEED_DATA,
93
+ ...TEXT_SEED_DATA,
112
94
  },
113
95
  {
114
- name: "H6",
96
+ name: "Heading 6",
115
97
  tag: "H6",
116
- ...HEADING_SEED_DATA,
117
- },
118
- {
119
- name: "Anchor",
120
- tag: "A",
121
98
  ...TEXT_SEED_DATA,
122
- props: {
123
- href: createTextProp({
124
- label: "href",
125
- description: "Specify the URL",
126
- defaultValue: "",
127
- }),
128
- target: {
129
- group: GROUPS.basic,
130
- label: "target",
131
- description: "decide where link should open",
132
- formType: FORM_TYPES.flatArray,
133
- defaultValue: "_blank",
134
- options: ["_blank", "_self", "_parent", "_top"],
135
- },
136
- },
137
99
  },
138
100
  {
139
101
  name: "Paragraph",
140
102
  tag: "P",
141
103
  ...TEXT_SEED_DATA,
142
- props: {
143
- // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
144
- // strong: createBoolProp({
145
- // label: "Strong",
146
- // description: "Strong",
147
- // }),
148
- // strike: createBoolProp({
149
- // label: "Strike",
150
- // description: "Strike through",
151
- // }),
152
- // italic: createBoolProp({
153
- // label: "Italic",
154
- // description: "Italic Fonts",
155
- // }),
156
- // bold: createBoolProp({
157
- // label: "Bold",
158
- // description: "Bold",
159
- // }),
160
- },
104
+ },
105
+ {
106
+ name: "Bold",
107
+ tag: "B",
108
+ ...TEXT_SEED_DATA,
109
+ },
110
+ {
111
+ name: "Strikethrough",
112
+ tag: "S",
113
+ ...TEXT_SEED_DATA,
114
+ },
115
+ {
116
+ name: "Italic",
117
+ tag: "I",
118
+ ...TEXT_SEED_DATA,
161
119
  },
162
120
  {
163
121
  name: "Code",
@@ -165,7 +123,7 @@ export const SEED_DATA = [
165
123
  ...TEXT_SEED_DATA,
166
124
  },
167
125
  {
168
- name: "Pre",
126
+ name: "Preformatted",
169
127
  tag: "Pre",
170
128
  ...TEXT_SEED_DATA,
171
129
  },
@@ -175,33 +133,62 @@ export const SEED_DATA = [
175
133
  ...TEXT_SEED_DATA,
176
134
  },
177
135
  {
178
- name: "BR",
179
- tag: "BR",
180
- ...TEXT_SEED_DATA,
181
- },
182
- {
183
- name: "BlockQuote",
136
+ name: "Block Quote",
184
137
  tag: "BlockQuote",
185
138
  ...TEXT_SEED_DATA,
186
139
  },
187
140
  {
188
- name: "HR",
189
- tag: "HR",
141
+ name: "Quoted",
142
+ tag: "Q",
190
143
  ...TEXT_SEED_DATA,
191
144
  },
145
+
192
146
  {
193
147
  name: "Time",
194
148
  tag: "Time",
195
- ...ELEMENT_SEED_DATA,
149
+ ...TEXT_SEED_DATA,
196
150
  },
197
151
  {
198
- name: "UL",
152
+ name: "Unordered List",
199
153
  tag: "UL",
200
154
  ...ELEMENT_SEED_DATA,
201
155
  },
202
156
  {
203
- name: "LI",
157
+ name: "List Item",
204
158
  tag: "LI",
159
+ ...TEXT_SEED_DATA,
160
+ category: COMPONENT_TYPES.webelement,
161
+ },
162
+ {
163
+ name: "Line Break",
164
+ tag: "BR",
205
165
  ...ELEMENT_SEED_DATA,
206
166
  },
167
+ {
168
+ name: "Horizontal Rule",
169
+ tag: "HR",
170
+ ...ELEMENT_SEED_DATA,
171
+ },
172
+ {
173
+ name: "Anchor",
174
+ tag: "A",
175
+ ...TEXT_SEED_DATA,
176
+ props: {
177
+ ...TEXT_SEED_DATA.props,
178
+ href: createTextProp({
179
+ label: "href",
180
+ description: "Specify the URL",
181
+ defaultValue: "",
182
+ }),
183
+ target: {
184
+ group: GROUPS.basic,
185
+ label: "target",
186
+ description: "decide where link should open",
187
+ formType: FORM_TYPES.flatArray,
188
+ defaultValue: "_blank",
189
+ options: ["_blank", "_self", "_parent", "_top"],
190
+ },
191
+ },
192
+ category: COMPONENT_TYPES.webelement,
193
+ },
207
194
  ];