gdx-ui 1.15.3 → 2.0.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 (56) hide show
  1. package/base.css +1 -1
  2. package/components/autocomplete/Autocomplete.js +64 -53
  3. package/components/badge/Badge.js +2 -2
  4. package/components/box/Box.js +34 -31
  5. package/components/dialog/Dialog.js +15 -26
  6. package/components/editable/Editable.js +105 -95
  7. package/components/editable/EditableArea.js +3 -0
  8. package/components/flex/Flex.js +51 -22
  9. package/components/forms/LabelInput.js +13 -4
  10. package/components/forms/LabelValue.js +13 -4
  11. package/components/images/CarouselImages.js +11 -12
  12. package/components/images/Img.js +14 -26
  13. package/components/images/Thumb.js +16 -40
  14. package/components/images/{ImageZoom.js → ZoomImage.js} +74 -111
  15. package/components/images/{PictureZoomBtns.js → ZoomImageButtons.js} +50 -63
  16. package/components/images/{Picture.js → ZoomImageSquare.js} +3 -3
  17. package/components/images/index.js +33 -11
  18. package/components/images/useImageLoader.js +76 -0
  19. package/components/list/ScrollableList.js +1 -1
  20. package/components/snackbar/Snackbar.js +1 -1
  21. package/components/table/Table.js +14 -1
  22. package/components/util/Note.js +14 -5
  23. package/components/util/Text.js +41 -9
  24. package/components/util/Title.js +35 -8
  25. package/components/util/index.js +0 -11
  26. package/components/widget/Widget.js +16 -5
  27. package/hooks/index.js +11 -0
  28. package/hooks/useAutocomplete.js +103 -0
  29. package/package.json +1 -1
  30. package/stories/box/Box.stories.js +32 -0
  31. package/stories/editable/Editable.stories.js +26 -0
  32. package/stories/editable/Editor.stories.js +33 -0
  33. package/stories/forms/Autocomplete.stories.js +101 -0
  34. package/stories/images/CarouselImages.stories.js +31 -0
  35. package/stories/images/{images.stories.js → Images.stories.js} +1 -1
  36. package/stories/images/ZoomImage.stories.js +24 -0
  37. package/stories/images/ZoomImageButtons.stories.js +23 -0
  38. package/stories/images/ZoomImageSquare.stories.js +23 -0
  39. package/stories/layout/Flex.stories.js +180 -0
  40. package/stories/list/ScrollableList.stories.js +37 -8
  41. package/stories/utils/Badge.stories.js +29 -0
  42. package/stories/utils/Expanded.stories.js +18 -7
  43. package/stories/utils/Loader.stories.js +32 -0
  44. package/stories/utils/Note.stories.js +38 -0
  45. package/stories/utils/Snackbar.stories.js +46 -0
  46. package/stories/utils/Text.stories.js +40 -0
  47. package/stories/utils/Tooltip.stories.js +22 -0
  48. package/stories/widget/Widget.stories.js +59 -0
  49. package/components/images/PictureZoomSquare.js +0 -60
  50. package/components/list/SortableList.js +0 -138
  51. package/components/list/SortableListOLD.js +0 -121
  52. package/components/scroller/ListScroller.js +0 -113
  53. package/components/util/Anchor.js +0 -30
  54. package/stories/flex/Flex.stories.js +0 -35
  55. package/stories/list/SorteableList.stories.js +0 -45
  56. /package/stories/images/{thumb.stories.js → Thumb.stories.js} +0 -0
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Truncated = exports.Default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Table = require("../../components/table/Table");
9
+ var _Expandable = require("../../components/expandable/Expandable");
10
+ var _Separator = require("../../components/util/Separator");
11
+ var _components = require("../../components");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
+ var _default = exports["default"] = {
14
+ title: 'Utils/Text',
15
+ component: _components.Text,
16
+ tags: ['autodocs']
17
+ };
18
+ var Default = exports.Default = {
19
+ args: {
20
+ inline: false,
21
+ bold: true,
22
+ size: 'medium'
23
+ },
24
+ render: function render(args) {
25
+ return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."));
26
+ }
27
+ };
28
+ var Truncated = exports.Truncated = {
29
+ args: {
30
+ inline: false,
31
+ textWrap: true
32
+ },
33
+ render: function render(args) {
34
+ return /*#__PURE__*/_react["default"].createElement("div", {
35
+ style: {
36
+ width: '280px'
37
+ }
38
+ }, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."));
39
+ }
40
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Tooltip = _interopRequireDefault(require("../../components/util/Tooltip"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
+ var _default = exports["default"] = {
11
+ title: 'Utils/Tooltip',
12
+ component: _Tooltip["default"],
13
+ tags: ['autodocs']
14
+ };
15
+ var Default = exports.Default = {
16
+ args: {
17
+ text: 'Tooltip text goes here'
18
+ },
19
+ render: function render(args) {
20
+ return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], args, "Using tooltips can help provide additional information to users without cluttering the interface."));
21
+ }
22
+ };
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.WidgetWithContent = exports.WidgetDefault = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Widget = require("../../components/widget/Widget");
9
+ var _Img = require("../../components/images/Img");
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
11
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
12
+ var item = {
13
+ 'ID': '993440',
14
+ 'title': 'Puma Playera Con Logo Negro',
15
+ 'image': 'https://www.gadxe.com/files/imgs/i2601/t/1846puma3.jpg',
16
+ 'permalink': 'item/Puma-Playera-Con-Logo-Negro/993440',
17
+ 'price': '$499',
18
+ 'availables': '49'
19
+ };
20
+ var _default = exports["default"] = {
21
+ title: 'Layout/Widget',
22
+ component: _Widget.Widget,
23
+ parameters: {
24
+ layout: 'centered'
25
+ },
26
+ tags: ['autodocs']
27
+ };
28
+ var WidgetDefault = exports.WidgetDefault = {
29
+ args: {
30
+ spacing: true,
31
+ hover: false
32
+ },
33
+ render: function render(args) {
34
+ return /*#__PURE__*/_react["default"].createElement("div", {
35
+ style: {
36
+ width: '400px'
37
+ }
38
+ }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, args, "This is a container for any content, with some padding and a border. It can be used to group related content together and make it stand out from the rest of the page."));
39
+ }
40
+ };
41
+ var WidgetWithContent = exports.WidgetWithContent = {
42
+ args: {
43
+ spacing: false,
44
+ hover: false
45
+ },
46
+ render: function render(args) {
47
+ return /*#__PURE__*/_react["default"].createElement("div", {
48
+ style: {
49
+ width: '400px'
50
+ }
51
+ }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, _extends({}, args, {
52
+ spacing: true
53
+ }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Img.Img, {
54
+ src: item.image,
55
+ alt: item.title,
56
+ expanded: true
57
+ })), /*#__PURE__*/_react["default"].createElement("h3", null, item.title), /*#__PURE__*/_react["default"].createElement("div", null, item.price)));
58
+ }
59
+ };
@@ -1,60 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Picture = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _util = require("../util");
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
14
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
16
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
17
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
18
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
19
- var Picture = exports.Picture = function Picture(_ref) {
20
- var src = _ref.src,
21
- alt = _ref.alt,
22
- width = _ref.width,
23
- _ref$height = _ref.height,
24
- height = _ref$height === void 0 ? '100px' : _ref$height,
25
- _ref$bordered = _ref.bordered,
26
- bordered = _ref$bordered === void 0 ? false : _ref$bordered;
27
- var _useState = (0, _react.useState)(),
28
- _useState2 = _slicedToArray(_useState, 2),
29
- imageData = _useState2[0],
30
- setImageData = _useState2[1];
31
- (0, _react.useEffect)(function () {
32
- var image = new Image();
33
- image.src = src;
34
- image.onload = function () {
35
- var imageWidth = image.width,
36
- imageHeight = image.height;
37
- setImageData({
38
- imageWidth: imageWidth,
39
- imageHeight: imageHeight
40
- });
41
- };
42
- }, [src]);
43
- return imageData ? /*#__PURE__*/_react["default"].createElement("img", {
44
- src: src,
45
- className: "".concat(bordered ? 'bordered' : ''),
46
- alt: alt,
47
- width: width
48
- }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
49
- width: width,
50
- height: height
51
- });
52
- };
53
- Picture.propTypes = {
54
- src: _propTypes["default"].string.isRequired,
55
- alt: _propTypes["default"].string,
56
- width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
57
- height: _propTypes["default"].string,
58
- bordered: _propTypes["default"].bool,
59
- size: _propTypes["default"].oneOf(['smallest', 'small', 'default', 'large'])
60
- };
@@ -1,138 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SortableList = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _reactFontawesome = require("@fortawesome/react-fontawesome");
10
- var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
11
- var _core = require("@dnd-kit/core");
12
- var _sortable = require("@dnd-kit/sortable");
13
- var _utilities = require("@dnd-kit/utilities");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
16
- // Componente para cada item sortable
17
- var SortableItem = function SortableItem(_ref) {
18
- var id = _ref.id,
19
- children = _ref.children,
20
- dragHandle = _ref.dragHandle;
21
- var _useSortable = (0, _sortable.useSortable)({
22
- id: id
23
- }),
24
- attributes = _useSortable.attributes,
25
- listeners = _useSortable.listeners,
26
- setNodeRef = _useSortable.setNodeRef,
27
- transform = _useSortable.transform,
28
- transition = _useSortable.transition,
29
- isDragging = _useSortable.isDragging;
30
- var style = {
31
- transform: _utilities.CSS.Transform.toString(transform),
32
- transition: transition,
33
- opacity: isDragging ? 0.8 : 1,
34
- cursor: dragHandle ? 'default' : 'move',
35
- display: 'flex',
36
- alignItems: 'center'
37
- };
38
- return /*#__PURE__*/_react["default"].createElement("li", _extends({
39
- ref: setNodeRef,
40
- style: style,
41
- className: "list-item"
42
- }, attributes, !dragHandle ? listeners : {}), dragHandle && /*#__PURE__*/_react["default"].createElement("div", _extends({}, listeners, {
43
- style: {
44
- padding: '8px',
45
- cursor: 'grab',
46
- display: 'flex',
47
- alignItems: 'center',
48
- marginRight: '8px'
49
- }
50
- }), /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
51
- icon: _freeSolidSvgIcons.faGripVertical
52
- })), /*#__PURE__*/_react["default"].createElement("div", {
53
- style: {
54
- flex: 1
55
- }
56
- }, children));
57
- };
58
-
59
- /**
60
- * List that allows reordering of items via drag and drop
61
- */
62
- var SortableList = exports.SortableList = function SortableList(_ref2) {
63
- var _ref2$items = _ref2.items,
64
- items = _ref2$items === void 0 ? [] : _ref2$items,
65
- onReorder = _ref2.onReorder,
66
- renderItem = _ref2.renderItem,
67
- _ref2$inline = _ref2.inline,
68
- inline = _ref2$inline === void 0 ? false : _ref2$inline,
69
- _ref2$dragHandle = _ref2.dragHandle,
70
- dragHandle = _ref2$dragHandle === void 0 ? false : _ref2$dragHandle,
71
- className = _ref2.className;
72
- // Sensores para drag and drop
73
- var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
74
- coordinateGetter: _sortable.sortableKeyboardCoordinates
75
- }));
76
-
77
- // Maneja el final del drag
78
- var handleDragEnd = function handleDragEnd(event) {
79
- var active = event.active,
80
- over = event.over;
81
- if (active.id !== (over === null || over === void 0 ? void 0 : over.id) && onReorder) {
82
- var oldIndex = items.findIndex(function (item) {
83
- return (item.id || items.indexOf(item)) === active.id;
84
- });
85
- var newIndex = items.findIndex(function (item) {
86
- return (item.id || items.indexOf(item)) === over.id;
87
- });
88
- var newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
89
- onReorder(newItems);
90
- }
91
- };
92
-
93
- // Genera IDs únicos para cada item
94
- var itemsWithIds = items.map(function (item, index) {
95
- return {
96
- id: item.id || "item-".concat(index),
97
- data: item,
98
- index: index
99
- };
100
- });
101
- return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
102
- sensors: sensors,
103
- collisionDetection: _core.closestCenter,
104
- onDragEnd: handleDragEnd
105
- }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
106
- items: itemsWithIds.map(function (item) {
107
- return item.id;
108
- }),
109
- strategy: inline ? _sortable.horizontalListSortingStrategy : _sortable.verticalListSortingStrategy
110
- }, /*#__PURE__*/_react["default"].createElement("div", {
111
- className: "clear-list ".concat(inline ? 'inline-list' : '', " ").concat(className ? className : '')
112
- }, /*#__PURE__*/_react["default"].createElement("ul", null, itemsWithIds.map(function (itemWrapper) {
113
- return /*#__PURE__*/_react["default"].createElement(SortableItem, {
114
- key: itemWrapper.id,
115
- id: itemWrapper.id,
116
- dragHandle: dragHandle
117
- }, renderItem ? renderItem(itemWrapper.data, itemWrapper.index) : itemWrapper.data.toString());
118
- })))));
119
- };
120
- SortableList.propTypes = {
121
- /** Array of items to display in the list */
122
- items: _propTypes["default"].array.isRequired,
123
- /** Function that is called when the list is reordered. Receives the reordered array as a parameter */
124
- onReorder: _propTypes["default"].func.isRequired,
125
- /**
126
- * Renderer function for each item in the list
127
- * @param {any} item - The current item
128
- * @param {number} index - The index of the item
129
- * @returns {ReactNode} - JSX to render for the item
130
- */
131
- renderItem: _propTypes["default"].func,
132
- /** Show inline list if true */
133
- inline: _propTypes["default"].bool,
134
- /** Additional CSS classes */
135
- className: _propTypes["default"].string,
136
- /** If true, only the handle icon can be dragged */
137
- dragHandle: _propTypes["default"].bool
138
- };
@@ -1,121 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.SortableList = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _reactBeautifulDnd = require("react-beautiful-dnd");
11
- var _reactFontawesome = require("@fortawesome/react-fontawesome");
12
- var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
13
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
15
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
16
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
17
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
18
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
19
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
20
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
21
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
22
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
23
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
24
- function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
25
- function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
26
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
27
- function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
28
- function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
29
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
30
- /**
31
- * List that allows reordering of items via drag and drop
32
- */
33
- var SortableList = exports.SortableList = function SortableList(_ref) {
34
- var _ref$items = _ref.items,
35
- items = _ref$items === void 0 ? [] : _ref$items,
36
- onReorder = _ref.onReorder,
37
- renderItem = _ref.renderItem,
38
- _ref$inline = _ref.inline,
39
- inline = _ref$inline === void 0 ? false : _ref$inline,
40
- _ref$dragHandle = _ref.dragHandle,
41
- dragHandle = _ref$dragHandle === void 0 ? false : _ref$dragHandle,
42
- className = _ref.className;
43
- var handleOnDragEnd = function handleOnDragEnd(result) {
44
- if (!result.destination || !onReorder) return;
45
- var startIndex = result.source.index;
46
- var endIndex = result.destination.index;
47
- if (startIndex === endIndex) return;
48
- var newItems = _toConsumableArray(items);
49
- var _newItems$splice = newItems.splice(startIndex, 1),
50
- _newItems$splice2 = _slicedToArray(_newItems$splice, 1),
51
- moved = _newItems$splice2[0];
52
- newItems.splice(endIndex, 0, moved);
53
-
54
- // Pasar solo el array ya ordenado
55
- onReorder(newItems);
56
- };
57
- return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
58
- onDragEnd: handleOnDragEnd
59
- }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
60
- droppableId: "sortable-list",
61
- direction: inline ? 'horizontal' : 'vertical'
62
- }, function (provided) {
63
- return /*#__PURE__*/_react["default"].createElement("div", _extends({
64
- className: "clear-list ".concat(inline ? 'inline-list' : '', " ").concat(className ? className : '')
65
- }, provided.droppableProps, {
66
- ref: provided.innerRef
67
- }), /*#__PURE__*/_react["default"].createElement("ul", null, items.map(function (item, index) {
68
- var _item$id;
69
- return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
70
- key: item.id || index,
71
- draggableId: ((_item$id = item.id) === null || _item$id === void 0 ? void 0 : _item$id.toString()) || index.toString(),
72
- index: index
73
- }, function (provided, snapshot) {
74
- return /*#__PURE__*/_react["default"].createElement("li", _extends({
75
- ref: provided.innerRef
76
- }, provided.draggableProps, !dragHandle ? provided.dragHandleProps : {}, {
77
- style: _objectSpread(_objectSpread({}, provided.draggableProps.style), {}, {
78
- opacity: snapshot.isDragging ? 0.8 : 1,
79
- cursor: dragHandle ? 'default' : 'move',
80
- display: 'flex',
81
- alignItems: 'center'
82
- }),
83
- className: "list-item"
84
- }), dragHandle && /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.dragHandleProps, {
85
- style: {
86
- padding: '8px',
87
- cursor: 'grab',
88
- display: 'flex',
89
- alignItems: 'center',
90
- marginRight: '8px'
91
- }
92
- }), /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
93
- icon: _freeSolidSvgIcons.faGripVertical
94
- })), /*#__PURE__*/_react["default"].createElement("div", {
95
- style: {
96
- flex: 1
97
- }
98
- }, renderItem ? renderItem(item, index) : item.toString()));
99
- });
100
- }), provided.placeholder));
101
- }));
102
- };
103
- SortableList.propTypes = {
104
- /** Array of items to display in the list */
105
- items: _propTypes["default"].array.isRequired,
106
- /** Function that is called when the list is reordered. Receives the reordered array as a parameter */
107
- onReorder: _propTypes["default"].func.isRequired,
108
- /**
109
- * Renderer function for each item in the list
110
- * @param {any} item - The current item
111
- * @param {number} index - The index of the item
112
- * @returns {ReactNode} - JSX to render for the item
113
- */
114
- renderItem: _propTypes["default"].func,
115
- /** Show inline list if true */
116
- inline: _propTypes["default"].bool,
117
- /** Additional CSS classes */
118
- className: _propTypes["default"].string,
119
- /** If true, only the handle icon can be dragged */
120
- dragHandle: _propTypes["default"].bool
121
- };
@@ -1,113 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ListScroller = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
11
- var _button = require("../button");
12
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
14
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
15
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
16
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
17
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
18
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
19
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
20
- /**
21
- * @deprecated Use ScrollableList instead
22
- */
23
- var ListScroller = exports.ListScroller = function ListScroller(_ref) {
24
- var children = _ref.children,
25
- _ref$className = _ref.className,
26
- className = _ref$className === void 0 ? '' : _ref$className,
27
- _ref$itemWidth = _ref.itemWidth,
28
- itemWidth = _ref$itemWidth === void 0 ? 120 : _ref$itemWidth,
29
- _ref$gap = _ref.gap,
30
- gap = _ref$gap === void 0 ? 15 : _ref$gap;
31
- var containerRef = (0, _react.useRef)(null);
32
- var _useState = (0, _react.useState)(false),
33
- _useState2 = _slicedToArray(_useState, 2),
34
- canScrollLeft = _useState2[0],
35
- setCanScrollLeft = _useState2[1];
36
- var _useState3 = (0, _react.useState)(false),
37
- _useState4 = _slicedToArray(_useState3, 2),
38
- canScrollRight = _useState4[0],
39
- setCanScrollRight = _useState4[1];
40
-
41
- // Actualiza el estado de los botones según el scroll
42
- var updateScrollButtons = function updateScrollButtons() {
43
- var el = containerRef.current;
44
- if (!el) return;
45
- setCanScrollLeft(el.scrollLeft > 0);
46
- setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
47
- };
48
- (0, _react.useEffect)(function () {
49
- updateScrollButtons();
50
- var el = containerRef.current;
51
- if (!el) return;
52
- el.addEventListener('scroll', updateScrollButtons);
53
- window.addEventListener('resize', updateScrollButtons);
54
- return function () {
55
- el.removeEventListener('scroll', updateScrollButtons);
56
- window.removeEventListener('resize', updateScrollButtons);
57
- };
58
- }, [children]);
59
-
60
- // Scroll a la izquierda/derecha por el ancho de un item
61
- var scrollBy = function scrollBy(dir) {
62
- if (containerRef.current) {
63
- containerRef.current.scrollBy({
64
- left: dir * (itemWidth + gap),
65
- behavior: 'smooth'
66
- });
67
- }
68
- };
69
-
70
- // Touch/swipe para móviles
71
- var startX = 0;
72
- var scrollLeft = 0;
73
- var onTouchStart = function onTouchStart(e) {
74
- startX = e.touches[0].pageX;
75
- scrollLeft = containerRef.current.scrollLeft;
76
- };
77
- var onTouchMove = function onTouchMove(e) {
78
- if (!startX) return;
79
- var x = e.touches[0].pageX;
80
- containerRef.current.scrollLeft = scrollLeft - (x - startX);
81
- };
82
- return /*#__PURE__*/_react["default"].createElement("div", {
83
- className: "list-scroller-wrapper ".concat(className)
84
- }, canScrollLeft && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
85
- className: "list-scroller-btn list-scroller-btn-left",
86
- bg: "solid",
87
- icon: _freeSolidSvgIcons.faChevronLeft,
88
- onClick: function onClick() {
89
- return scrollBy(-1);
90
- }
91
- }), /*#__PURE__*/_react["default"].createElement("ul", {
92
- className: "list-scroller",
93
- ref: containerRef,
94
- style: {
95
- gap: gap
96
- },
97
- onTouchStart: onTouchStart,
98
- onTouchMove: onTouchMove
99
- }, children), canScrollRight && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
100
- className: "list-scroller-btn list-scroller-btn-right",
101
- bg: "solid",
102
- icon: _freeSolidSvgIcons.faChevronRight,
103
- onClick: function onClick() {
104
- return scrollBy(1);
105
- }
106
- }));
107
- };
108
- ListScroller.propTypes = {
109
- children: _propTypes["default"].node.isRequired,
110
- className: _propTypes["default"].string,
111
- itemWidth: _propTypes["default"].number,
112
- gap: _propTypes["default"].number
113
- };
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Anchor = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
- /**
11
- * @deprecated Use Link from react-router-dom instead
12
- */
13
- var Anchor = exports.Anchor = function Anchor(_ref) {
14
- var children = _ref.children,
15
- href = _ref.href,
16
- _ref$role = _ref.role,
17
- role = _ref$role === void 0 ? "link" : _ref$role,
18
- onClick = _ref.onClick;
19
- return /*#__PURE__*/_react["default"].createElement("a", {
20
- href: href,
21
- role: role,
22
- onClick: onClick
23
- }, children);
24
- };
25
- Anchor.propTypes = {
26
- children: _propTypes["default"].any,
27
- role: _propTypes["default"].oneOf(["link", "button"]),
28
- href: _propTypes["default"].oneOfType([_propTypes["default"].string]),
29
- onClick: _propTypes["default"].oneOfType([_propTypes["default"].func])
30
- };
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = exports.Default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Flex = require("../../components/flex/Flex");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
- var _default = exports["default"] = {
11
- title: 'Layout/Flex',
12
- component: _Flex.Flex,
13
- tags: ['autodocs']
14
- };
15
- var Content = function Content(_ref) {
16
- var children = _ref.children;
17
- return /*#__PURE__*/_react["default"].createElement("div", {
18
- className: "content bordered rounded",
19
- style: {
20
- backgroundColor: '#f0f0f0ff'
21
- }
22
- }, children);
23
- };
24
- var Default = exports.Default = {
25
- args: {
26
- align: 'center',
27
- valign: 'center',
28
- gap: 15,
29
- wrap: true,
30
- expand: false
31
- },
32
- render: function render(args) {
33
- return /*#__PURE__*/_react["default"].createElement(_Flex.Flex, args, /*#__PURE__*/_react["default"].createElement(_Flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(Content, null, "Item 1 Content ", /*#__PURE__*/_react["default"].createElement("br", null), "Item 1 Content")), /*#__PURE__*/_react["default"].createElement(_Flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(Content, null, "Item 2 Content")), /*#__PURE__*/_react["default"].createElement(_Flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(Content, null, "Item 3 Content")));
34
- }
35
- };