@pareto-engineering/design-system 2.0.0-alpha.43 → 2.0.0-alpha.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 (89) hide show
  1. package/.env.scripts.example +4 -0
  2. package/.eslintrc.js +25 -1
  3. package/babel.config.js +1 -0
  4. package/dist/cjs/f/FormInput/FormInput.js +13 -3
  5. package/dist/cjs/f/FormInput/styles.scss +11 -0
  6. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +214 -0
  7. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +194 -0
  8. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/index.js +15 -0
  9. package/dist/cjs/f/fields/QueryCombobox/common/Menu/Menu.js +103 -0
  10. package/dist/cjs/f/fields/QueryCombobox/common/Menu/index.js +15 -0
  11. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +281 -0
  12. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/index.js +15 -0
  13. package/dist/cjs/f/fields/QueryCombobox/common/index.js +21 -0
  14. package/dist/cjs/f/fields/QueryCombobox/index.js +15 -0
  15. package/dist/cjs/f/fields/QueryCombobox/styles.scss +84 -0
  16. package/dist/cjs/f/fields/SelectInput/SelectInput.js +0 -1
  17. package/dist/cjs/f/fields/SelectInput/styles.scss +8 -6
  18. package/dist/cjs/f/fields/index.js +9 -1
  19. package/dist/cjs/index.js +13 -0
  20. package/dist/cjs/test/QueryLoader/QueryLoader.js +41 -0
  21. package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
  22. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +49 -0
  23. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js +15 -0
  24. package/dist/cjs/test/QueryLoader/common/index.js +13 -0
  25. package/dist/cjs/test/QueryLoader/index.js +15 -0
  26. package/dist/cjs/test/QueryLoader/styles.scss +9 -0
  27. package/dist/cjs/test/index.js +13 -0
  28. package/dist/es/f/FormInput/FormInput.js +13 -3
  29. package/dist/es/f/FormInput/styles.scss +11 -0
  30. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +191 -0
  31. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +174 -0
  32. package/dist/es/f/fields/QueryCombobox/common/Combobox/index.js +2 -0
  33. package/dist/es/f/fields/QueryCombobox/common/Menu/Menu.js +77 -0
  34. package/dist/es/f/fields/QueryCombobox/common/Menu/index.js +2 -0
  35. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +253 -0
  36. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/index.js +2 -0
  37. package/dist/es/f/fields/QueryCombobox/common/index.js +2 -0
  38. package/dist/es/f/fields/QueryCombobox/index.js +2 -0
  39. package/dist/es/f/fields/QueryCombobox/styles.scss +84 -0
  40. package/dist/es/f/fields/SelectInput/SelectInput.js +0 -1
  41. package/dist/es/f/fields/SelectInput/styles.scss +8 -6
  42. package/dist/es/f/fields/index.js +2 -1
  43. package/dist/es/index.js +2 -1
  44. package/dist/es/test/QueryLoader/QueryLoader.js +29 -0
  45. package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
  46. package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +31 -0
  47. package/dist/es/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
  48. package/dist/es/test/QueryLoader/common/index.js +1 -0
  49. package/dist/es/test/QueryLoader/index.js +2 -0
  50. package/dist/es/test/QueryLoader/styles.scss +9 -0
  51. package/dist/es/test/index.js +1 -0
  52. package/package.json +16 -3
  53. package/relay.config.js +12 -0
  54. package/schema.graphql +4075 -0
  55. package/scripts/fetchSchema.js +74 -0
  56. package/src/__snapshots__/Storyshots.test.js.snap +323 -8
  57. package/src/stories/f/FormInput.stories.jsx +115 -0
  58. package/src/stories/f/QueryCombobox.stories.jsx +220 -0
  59. package/src/stories/f/__generated__/FormInputAllTeamsQuery.graphql.js +139 -0
  60. package/src/stories/f/__generated__/QueryComboboxAllTeamsQuery.graphql.js +139 -0
  61. package/src/stories/test/QueryLoader.stories.jsx +36 -0
  62. package/src/stories/utils/generateNodeId.js +12 -0
  63. package/src/stories/utils/relay/EnvironmentProvider.jsx +14 -0
  64. package/src/stories/utils/relay/environment.js +5 -0
  65. package/src/stories/utils/relay/index.js +4 -0
  66. package/src/stories/utils/relay/mockRelayOperation.js +14 -0
  67. package/src/stories/utils/relay/mockResolvers.js +299 -0
  68. package/src/stories/utils/testData.js +63 -0
  69. package/src/ui/f/FormInput/FormInput.jsx +16 -1
  70. package/src/ui/f/FormInput/styles.scss +11 -0
  71. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +207 -0
  72. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +214 -0
  73. package/src/ui/f/fields/QueryCombobox/common/Combobox/index.js +2 -0
  74. package/src/ui/f/fields/QueryCombobox/common/Menu/Menu.jsx +103 -0
  75. package/src/ui/f/fields/QueryCombobox/common/Menu/index.js +2 -0
  76. package/src/ui/f/fields/QueryCombobox/common/index.js +2 -0
  77. package/src/ui/f/fields/QueryCombobox/index.js +2 -0
  78. package/src/ui/f/fields/QueryCombobox/styles.scss +84 -0
  79. package/src/ui/f/fields/SelectInput/SelectInput.jsx +1 -1
  80. package/src/ui/f/fields/SelectInput/styles.scss +8 -6
  81. package/src/ui/f/fields/index.js +1 -0
  82. package/src/ui/index.js +1 -0
  83. package/src/ui/test/QueryLoader/QueryLoader.jsx +41 -0
  84. package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +68 -0
  85. package/src/ui/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.jsx +51 -0
  86. package/src/ui/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
  87. package/src/ui/test/QueryLoader/common/index.js +1 -0
  88. package/src/ui/test/QueryLoader/index.js +2 -0
  89. package/src/ui/test/index.js +1 -0
@@ -0,0 +1,281 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
13
+
14
+ var _downshift = require("downshift");
15
+
16
+ var _b = require("../../../../../b");
17
+
18
+ var _a = require("../../../../../a");
19
+
20
+ var _ = require("../../../..");
21
+
22
+ var _Menu = require("../Menu");
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ 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; }
29
+
30
+ function _extends() { _extends = Object.assign || 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); }
31
+
32
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
33
+
34
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
35
+
36
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
37
+
38
+ var baseClassName = _bem.default.base;
39
+ var componentClassName = 'multiple-combobox';
40
+ /**
41
+ * @param {Array[Object]} first - first array to check if it has an item not in the second array.
42
+ * @param {Array[Object]} second - second array to check against the first array.
43
+ *
44
+ * @returns {Boolean} - true if the first array has an item not in the second array.
45
+ */
46
+
47
+ var testIfArraysAreUnique = (first, second) => first.filter(objInFirstArray => !second.some(objInSecondArray => objInFirstArray.value === objInSecondArray.value)).length > 0;
48
+ /**
49
+ * This is the component description.
50
+ */
51
+
52
+
53
+ var MultipleCombobox = _ref => {
54
+ var {
55
+ id,
56
+ className: userClassName,
57
+ style,
58
+ label,
59
+ name,
60
+ options: items,
61
+ getOptions,
62
+ setValue,
63
+ error,
64
+ description,
65
+ value,
66
+ color,
67
+ isFetching,
68
+ loadingCircleColor // ...otherProps
69
+
70
+ } = _ref;
71
+ var [searchInputValue, setSearchInputValue] = (0, React.useState)('');
72
+ var {
73
+ getSelectedItemProps,
74
+ getDropdownProps,
75
+ addSelectedItem,
76
+ removeSelectedItem,
77
+ setSelectedItems,
78
+ selectedItems
79
+ } = (0, _downshift.useMultipleSelection)({
80
+ initialSelectedItems: value || []
81
+ });
82
+
83
+ var getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0 && item.label.toLowerCase().startsWith(searchInputValue.toLowerCase()));
84
+
85
+ var {
86
+ isOpen,
87
+ getLabelProps,
88
+ getMenuProps,
89
+ getInputProps,
90
+ getComboboxProps,
91
+ highlightedIndex,
92
+ getItemProps
93
+ } = (0, _downshift.useCombobox)({
94
+ searchInputValue,
95
+ defaultHighlightedIndex: 0,
96
+ // after selection, highlight the first item.
97
+ selectedItem: null,
98
+ items: getFilteredItems(),
99
+ circularNavigation: true,
100
+ stateReducer: (state, actionAndChanges) => {
101
+ var {
102
+ changes,
103
+ type
104
+ } = actionAndChanges;
105
+
106
+ switch (type) {
107
+ case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
108
+ case _downshift.useCombobox.stateChangeTypes.ItemClick:
109
+ return _objectSpread(_objectSpread({}, changes), {}, {
110
+ isOpen: true // keep the menu open after selection.
111
+
112
+ });
113
+
114
+ default:
115
+ break;
116
+ }
117
+
118
+ return changes;
119
+ },
120
+ onStateChange: _ref2 => {
121
+ var {
122
+ inputValue: newSearchInputValue,
123
+ type,
124
+ selectedItem
125
+ } = _ref2;
126
+
127
+ switch (type) {
128
+ case _downshift.useCombobox.stateChangeTypes.InputChange:
129
+ getOptions(newSearchInputValue);
130
+ setSearchInputValue(newSearchInputValue);
131
+ break;
132
+
133
+ case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
134
+ case _downshift.useCombobox.stateChangeTypes.ItemClick:
135
+ case _downshift.useCombobox.stateChangeTypes.InputBlur:
136
+ if (selectedItem) {
137
+ setSearchInputValue('');
138
+ addSelectedItem(selectedItem);
139
+ }
140
+
141
+ break;
142
+
143
+ default:
144
+ break;
145
+ }
146
+ }
147
+ });
148
+ (0, React.useEffect)(() => {
149
+ if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
150
+ setValue(selectedItems);
151
+ }
152
+ }, [selectedItems]);
153
+ (0, React.useEffect)(() => {
154
+ if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
155
+ setSelectedItems(value);
156
+ }
157
+ }, [value]);
158
+ var parentRef = (0, React.useRef)(null);
159
+ return /*#__PURE__*/React.createElement("div", {
160
+ id: id,
161
+ className: [baseClassName, componentClassName, userClassName, "y-".concat(color), "x-".concat(loadingCircleColor)].filter(e => e).join(' '),
162
+ style: style
163
+ }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
164
+ name: name
165
+ }), label), /*#__PURE__*/React.createElement("div", {
166
+ className: "selected-items"
167
+ }, selectedItems && selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
168
+ key: selectedItem.label
169
+ }, getSelectedItemProps({
170
+ selectedItem,
171
+ index
172
+ })), selectedItem.label, /*#__PURE__*/React.createElement(_b.Button, {
173
+ className: "f-icons",
174
+ onClick: e => {
175
+ e.stopPropagation();
176
+ removeSelectedItem(selectedItem);
177
+ },
178
+ isCompact: true,
179
+ isSimple: true,
180
+ color: "main2"
181
+ }, "X")))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
182
+ className: "input-wrapper"
183
+ }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
184
+ preventKeyAction: isOpen
185
+ })), {
186
+ className: "input"
187
+ })), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, null)), /*#__PURE__*/React.createElement(_a.Popover, {
188
+ isOpen: isOpen,
189
+ parentRef: parentRef
190
+ }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
191
+ isOpen: isOpen,
192
+ getItemProps: getItemProps,
193
+ highlightedIndex: highlightedIndex,
194
+ items: getFilteredItems()
195
+ }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
196
+ isError: !!error
197
+ }, error || description));
198
+ };
199
+
200
+ MultipleCombobox.propTypes = {
201
+ /**
202
+ * The HTML id for this element
203
+ */
204
+ id: _propTypes.default.string,
205
+
206
+ /**
207
+ * The HTML class names for this element
208
+ */
209
+ className: _propTypes.default.string,
210
+
211
+ /**
212
+ * The React-written, css properties for this element.
213
+ */
214
+ style: _propTypes.default.objectOf(_propTypes.default.string),
215
+
216
+ /**
217
+ * The label of the custom select input
218
+ */
219
+ label: _propTypes.default.string,
220
+
221
+ /**
222
+ * The custom select input options from the backend
223
+ */
224
+ options: _propTypes.default.arrayOf(_propTypes.default.shape({
225
+ value: _propTypes.default.string,
226
+ label: _propTypes.default.string
227
+ })),
228
+
229
+ /**
230
+ * The name of the custom select input
231
+ */
232
+ name: _propTypes.default.string,
233
+
234
+ /**
235
+ * The function to fetch the options from the backend
236
+ */
237
+ getOptions: _propTypes.default.func,
238
+
239
+ /**
240
+ * The function to set the value of the custom select input
241
+ */
242
+ setValue: _propTypes.default.func.isRequired,
243
+
244
+ /**
245
+ * The custom select input description
246
+ */
247
+ description: _propTypes.default.string,
248
+
249
+ /**
250
+ * The error object
251
+ */
252
+ error: _propTypes.default.objectOf(_propTypes.default.string),
253
+
254
+ /**
255
+ * The value of the custom select input
256
+ */
257
+ value: _propTypes.default.arrayOf(_propTypes.default.shape({
258
+ value: _propTypes.default.string,
259
+ label: _propTypes.default.string
260
+ })),
261
+
262
+ /**
263
+ * The base color of the custom select input
264
+ */
265
+ color: _propTypes.default.string,
266
+
267
+ /**
268
+ * Whether the query getting the combobox options is inFlight
269
+ */
270
+ isFetching: _propTypes.default.bool.isRequired,
271
+
272
+ /**
273
+ * The loading circle color
274
+ */
275
+ loadingCircleColor: _propTypes.default.string
276
+ };
277
+ MultipleCombobox.defaultProps = {
278
+ loadingCircleColor: 'main2'
279
+ };
280
+ var _default = MultipleCombobox;
281
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "MultipleCombobox", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _MultipleCombobox.default;
10
+ }
11
+ });
12
+
13
+ var _MultipleCombobox = _interopRequireDefault(require("./MultipleCombobox"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Menu", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Menu.Menu;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "Combobox", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Combobox.Combobox;
16
+ }
17
+ });
18
+
19
+ var _Menu = require("./Menu");
20
+
21
+ var _Combobox = require("./Combobox");
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "QueryCombobox", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _QueryCombobox.default;
10
+ }
11
+ });
12
+
13
+ var _QueryCombobox = _interopRequireDefault(require("./QueryCombobox"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,84 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+
5
+ $default-input-padding: .75em .75em .55em;
6
+ $default-padding: 1em;
7
+ $default-margin: 1em;
8
+ $default-loading-circle-displacement: 1em;
9
+
10
+ .#{bem.$base}.combobox,
11
+ .#{bem.$base}.multiple-combobox {
12
+ position: relative;
13
+
14
+ .#{bem.$base}.label {
15
+ margin-bottom: $default-margin
16
+ }
17
+
18
+ .#{bem.$base}.popover {
19
+ width: 100%;
20
+
21
+ >.menu {
22
+ list-style: none;
23
+ margin: 0;
24
+ outline: 0;
25
+ padding: 0;
26
+
27
+ >.item {
28
+ padding: $default-padding / 2;
29
+
30
+ &.#{bem.$modifier-active} {
31
+ background-color: var(--background2);
32
+ }
33
+ }
34
+ }
35
+ }
36
+
37
+ >.input-wrapper {
38
+ position: relative;
39
+
40
+ >.#{bem.$base}.loading-circle {
41
+ position: absolute;
42
+ top: $default-loading-circle-displacement;
43
+ right: $default-loading-circle-displacement;
44
+ }
45
+
46
+ >.input {
47
+ background: var(--light-y);
48
+ border: var(--theme-border-style) var(--dark-y);
49
+ color: var(--on-y);
50
+ padding: $default-input-padding;
51
+ width: 100%;
52
+
53
+ &::placeholder {
54
+ color: var(--metadata);
55
+ }
56
+
57
+ &:not(:disabled):hover {
58
+ border: var(--theme-border-style) var(--light-background4);
59
+ }
60
+
61
+ &:disabled {
62
+ background-color: var(--dark-y);
63
+ }
64
+
65
+ &:focus {
66
+ background: var(--light-background4);
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+
73
+ .#{bem.$base}.multiple-combobox {
74
+ >.selected-items {
75
+ display: flex;
76
+
77
+ /* stylelint-disable selector-max-universal -- Allow */
78
+ >*:not(:first-child) {
79
+ margin-left: $default-margin;
80
+ }
81
+
82
+ /* stylelint-enable selector-max-universal */
83
+ }
84
+ }
@@ -57,7 +57,6 @@ var SelectInput = _ref => {
57
57
  style: style // {...otherProps}
58
58
 
59
59
  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
60
- className: "input-label",
61
60
  name: name
62
61
  }, label), /*#__PURE__*/React.createElement("select", _extends({
63
62
  className: "input"
@@ -6,24 +6,27 @@
6
6
 
7
7
 
8
8
  $default-padding: 0.75em;
9
-
9
+ $default-margin: 1em;
10
10
 
11
11
  .#{bem.$base}.select-input {
12
12
  display: flex;
13
13
  flex-direction: column;
14
14
 
15
+ .#{bem.$base}.label {
16
+ margin-bottom: $default-margin
17
+ }
15
18
 
16
19
  .input {
17
20
  border: var(--theme-border-style) var(--dark-y);
18
21
  background: var(--light-y);
19
- color:var(--on-y);
22
+ color: var(--on-y);
20
23
  padding: $default-padding;
21
24
 
22
- &:not(:disabled):hover{
25
+ &:not(:disabled):hover {
23
26
  border: var(--theme-border-style) var(--light-background4);
24
27
  }
25
28
 
26
- &:disabled {
29
+ &:disabled {
27
30
  background-color: var(--dark-y);
28
31
  }
29
32
 
@@ -31,5 +34,4 @@ $default-padding: 0.75em;
31
34
  background: var(--y);
32
35
  }
33
36
  }
34
- }
35
-
37
+ }
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "RatingsInput", {
33
33
  return _RatingsInput.RatingsInput;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "QueryCombobox", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _QueryCombobox.QueryCombobox;
40
+ }
41
+ });
36
42
 
37
43
  var _TextInput = require("./TextInput");
38
44
 
@@ -42,4 +48,6 @@ var _ChoicesInput = require("./ChoicesInput");
42
48
 
43
49
  var _TextareaInput = require("./TextareaInput");
44
50
 
45
- var _RatingsInput = require("./RatingsInput");
51
+ var _RatingsInput = require("./RatingsInput");
52
+
53
+ var _QueryCombobox = require("./QueryCombobox");
package/dist/cjs/index.js CHANGED
@@ -93,4 +93,17 @@ Object.keys(_utils).forEach(function (key) {
93
93
  return _utils[key];
94
94
  }
95
95
  });
96
+ });
97
+
98
+ var _test = require("./test");
99
+
100
+ Object.keys(_test).forEach(function (key) {
101
+ if (key === "default" || key === "__esModule") return;
102
+ if (key in exports && exports[key] === _test[key]) return;
103
+ Object.defineProperty(exports, key, {
104
+ enumerable: true,
105
+ get: function get() {
106
+ return _test[key];
107
+ }
108
+ });
96
109
  });
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _reactRelay = require("react-relay");
11
+
12
+ var _common = require("./common");
13
+
14
+ var _QueryLoaderHelloQuery;
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
+
18
+ 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; }
19
+
20
+ var testQuery = _QueryLoaderHelloQuery !== void 0 ? _QueryLoaderHelloQuery : (_QueryLoaderHelloQuery = require("./__generated__/QueryLoaderHelloQuery.graphql"), _QueryLoaderHelloQuery.hash && _QueryLoaderHelloQuery.hash !== "b92d001ab0208bd484a99f77c274d5ef" && console.error("The definition of 'QueryLoaderHelloQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _QueryLoaderHelloQuery);
21
+ /**
22
+ * This is the component description.
23
+ */
24
+
25
+ var QueryLoader = () => {
26
+ var [queryReference, loadQuery] = (0, _reactRelay.useQueryLoader)(testQuery);
27
+ (0, React.useEffect)(() => {
28
+ loadQuery({});
29
+ }, []);
30
+ return /*#__PURE__*/React.createElement(React.Suspense, {
31
+ fallback: "loading"
32
+ }, queryReference ? /*#__PURE__*/React.createElement(_common.PreloadedTestData, {
33
+ queryReference: queryReference,
34
+ query: testQuery
35
+ }) : null);
36
+ };
37
+
38
+ QueryLoader.defaultProps = {// someProp:false
39
+ };
40
+ var _default = QueryLoader;
41
+ exports.default = _default;
@@ -0,0 +1,71 @@
1
+ /**
2
+ * @flow
3
+ */
4
+
5
+ /* eslint-disable */
6
+ 'use strict';
7
+ /*::
8
+ import type { ConcreteRequest } from 'relay-runtime';
9
+ export type QueryLoaderHelloQueryVariables = {||};
10
+ export type QueryLoaderHelloQueryResponse = {|
11
+ +hello: ?string
12
+ |};
13
+ export type QueryLoaderHelloQuery = {|
14
+ variables: QueryLoaderHelloQueryVariables,
15
+ response: QueryLoaderHelloQueryResponse,
16
+ |};
17
+ */
18
+
19
+ /*
20
+ query QueryLoaderHelloQuery {
21
+ hello
22
+ }
23
+ */
24
+
25
+ var node
26
+ /*: ConcreteRequest*/
27
+ = function () {
28
+ var v0 = [{
29
+ "alias": null,
30
+ "args": null,
31
+ "kind": "ScalarField",
32
+ "name": "hello",
33
+ "storageKey": null
34
+ }];
35
+ return {
36
+ "fragment": {
37
+ "argumentDefinitions": [],
38
+ "kind": "Fragment",
39
+ "metadata": null,
40
+ "name": "QueryLoaderHelloQuery",
41
+ "selections": v0
42
+ /*: any*/
43
+ ,
44
+ "type": "Query",
45
+ "abstractKey": null
46
+ },
47
+ "kind": "Request",
48
+ "operation": {
49
+ "argumentDefinitions": [],
50
+ "kind": "Operation",
51
+ "name": "QueryLoaderHelloQuery",
52
+ "selections": v0
53
+ /*: any*/
54
+
55
+ },
56
+ "params": {
57
+ "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
58
+ "id": null,
59
+ "metadata": {},
60
+ "name": "QueryLoaderHelloQuery",
61
+ "operationKind": "query",
62
+ "text": "query QueryLoaderHelloQuery {\n hello\n}\n"
63
+ }
64
+ };
65
+ }(); // prettier-ignore
66
+
67
+
68
+ node
69
+ /*: any*/
70
+ .hash = 'b92d001ab0208bd484a99f77c274d5ef';
71
+ module.exports = node;
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _reactRelay = require("react-relay");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
+
18
+ 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; }
19
+
20
+ /* @pareto-engineering/generator-front 1.0.12 */
21
+
22
+ /**
23
+ * This is the component description.
24
+ */
25
+ var PreloadedTestData = _ref => {
26
+ var {
27
+ query,
28
+ queryReference // ...otherProps
29
+
30
+ } = _ref;
31
+ var data = (0, _reactRelay.usePreloadedQuery)(query, queryReference);
32
+ return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
33
+ };
34
+
35
+ PreloadedTestData.propTypes = {
36
+ /**
37
+ * The query to be used to query the test data
38
+ */
39
+ query: _propTypes.default.objectOf(_propTypes.default.PropTypes.oneOfType([_propTypes.default.string, _propTypes.default.object])),
40
+
41
+ /**
42
+ * The query reference to be used to access the preloaded data
43
+ */
44
+ queryReference: _propTypes.default.objectOf(_propTypes.default.PropTypes.oneOfType([_propTypes.default.string, _propTypes.default.object]))
45
+ };
46
+ PreloadedTestData.defaultProps = {// someProp:false
47
+ };
48
+ var _default = PreloadedTestData;
49
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "PreloadedTestData", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _PreloadedTestData.default;
10
+ }
11
+ });
12
+
13
+ var _PreloadedTestData = _interopRequireDefault(require("./PreloadedTestData"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }