@abstraks-dev/ui-library 1.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 (158) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +708 -0
  3. package/dist/__tests__/Anchor.test.js +145 -0
  4. package/dist/__tests__/ArrowRight.test.js +91 -0
  5. package/dist/__tests__/Avatar.test.js +123 -0
  6. package/dist/__tests__/Button.test.js +82 -0
  7. package/dist/__tests__/Card.test.js +198 -0
  8. package/dist/__tests__/CheckCircle.test.js +98 -0
  9. package/dist/__tests__/Checkbox.test.js +161 -0
  10. package/dist/__tests__/ChevronDown.test.js +73 -0
  11. package/dist/__tests__/Close.test.js +98 -0
  12. package/dist/__tests__/EditSquare.test.js +99 -0
  13. package/dist/__tests__/Error.test.js +74 -0
  14. package/dist/__tests__/Footer.test.js +66 -0
  15. package/dist/__tests__/Heading.test.js +227 -0
  16. package/dist/__tests__/Hero.test.js +74 -0
  17. package/dist/__tests__/Label.test.js +123 -0
  18. package/dist/__tests__/Loader.test.js +115 -0
  19. package/dist/__tests__/MenuHover.test.js +137 -0
  20. package/dist/__tests__/Paragraph.test.js +93 -0
  21. package/dist/__tests__/PlusCircle.test.js +99 -0
  22. package/dist/__tests__/Radio.test.js +153 -0
  23. package/dist/__tests__/Select.test.js +187 -0
  24. package/dist/__tests__/Tabs.test.js +162 -0
  25. package/dist/__tests__/TextArea.test.js +127 -0
  26. package/dist/__tests__/TextInput.test.js +181 -0
  27. package/dist/__tests__/Toggle.test.js +120 -0
  28. package/dist/__tests__/TrashX.test.js +99 -0
  29. package/dist/__tests__/useHeadingAccessibility.test.js +144 -0
  30. package/dist/components/Anchor.js +131 -0
  31. package/dist/components/Animation.js +129 -0
  32. package/dist/components/AnimationGroup.js +207 -0
  33. package/dist/components/AnimationToggle.js +216 -0
  34. package/dist/components/Avatar.js +153 -0
  35. package/dist/components/Button.js +218 -0
  36. package/dist/components/Card.js +222 -0
  37. package/dist/components/Checkbox.js +305 -0
  38. package/dist/components/Crud.js +564 -0
  39. package/dist/components/DragAndDrop.js +337 -0
  40. package/dist/components/Error.js +206 -0
  41. package/dist/components/Footer.js +99 -0
  42. package/dist/components/Form.js +412 -0
  43. package/dist/components/Header.js +372 -0
  44. package/dist/components/Heading.js +134 -0
  45. package/dist/components/Hero.js +181 -0
  46. package/dist/components/Label.js +256 -0
  47. package/dist/components/Loader.js +302 -0
  48. package/dist/components/MenuHover.js +114 -0
  49. package/dist/components/Paragraph.js +128 -0
  50. package/dist/components/Prompt.js +61 -0
  51. package/dist/components/Radio.js +254 -0
  52. package/dist/components/Select.js +422 -0
  53. package/dist/components/SideMenu.js +313 -0
  54. package/dist/components/Tabs.js +297 -0
  55. package/dist/components/TextArea.js +370 -0
  56. package/dist/components/TextInput.js +286 -0
  57. package/dist/components/Toggle.js +186 -0
  58. package/dist/components/crudFiles/CrudEditBase.js +150 -0
  59. package/dist/components/crudFiles/CrudViewBase.js +39 -0
  60. package/dist/components/crudFiles/crudDevelopment.js +118 -0
  61. package/dist/components/crudFiles/crudEditHandlers.js +50 -0
  62. package/dist/constants/animation.js +30 -0
  63. package/dist/icons/ArrowIcon.js +32 -0
  64. package/dist/icons/ArrowRight.js +33 -0
  65. package/dist/icons/CheckCircle.js +33 -0
  66. package/dist/icons/ChevronDown.js +28 -0
  67. package/dist/icons/Close.js +33 -0
  68. package/dist/icons/EditSquare.js +33 -0
  69. package/dist/icons/Ellipses.js +34 -0
  70. package/dist/icons/Hamburger.js +39 -0
  71. package/dist/icons/LoadingSpinner.js +42 -0
  72. package/dist/icons/PlusCircle.js +33 -0
  73. package/dist/icons/SaveIcon.js +32 -0
  74. package/dist/icons/TrashX.js +33 -0
  75. package/dist/icons/__tests__/CheckCircle.test.js +9 -0
  76. package/dist/icons/__tests__/ChevronDown.test.js +9 -0
  77. package/dist/icons/__tests__/Close.test.js +9 -0
  78. package/dist/icons/__tests__/EditSquare.test.js +9 -0
  79. package/dist/icons/__tests__/PlusCircle.test.js +9 -0
  80. package/dist/icons/__tests__/TrashX.test.js +9 -0
  81. package/dist/icons/index.js +89 -0
  82. package/dist/index.js +332 -0
  83. package/dist/setupTests.js +3 -0
  84. package/dist/styles/_variables.scss +286 -0
  85. package/dist/styles/anchor.scss +40 -0
  86. package/dist/styles/animation-accessibility.scss +96 -0
  87. package/dist/styles/animation-toggle.scss +233 -0
  88. package/dist/styles/animation.scss +3781 -0
  89. package/dist/styles/avatar.scss +285 -0
  90. package/dist/styles/button.scss +430 -0
  91. package/dist/styles/card.scss +210 -0
  92. package/dist/styles/checkbox.scss +160 -0
  93. package/dist/styles/crud.scss +474 -0
  94. package/dist/styles/dragAndDrop.scss +312 -0
  95. package/dist/styles/error.scss +232 -0
  96. package/dist/styles/footer.scss +58 -0
  97. package/dist/styles/form.scss +420 -0
  98. package/dist/styles/grid.scss +29 -0
  99. package/dist/styles/header.scss +276 -0
  100. package/dist/styles/heading.scss +118 -0
  101. package/dist/styles/hero.scss +185 -0
  102. package/dist/styles/htmlElements.scss +20 -0
  103. package/dist/styles/image.scss +9 -0
  104. package/dist/styles/label.scss +340 -0
  105. package/dist/styles/list-item.scss +5 -0
  106. package/dist/styles/loader.scss +354 -0
  107. package/dist/styles/logo.scss +19 -0
  108. package/dist/styles/main.css +9056 -0
  109. package/dist/styles/main.css.map +1 -0
  110. package/dist/styles/main.scss +0 -0
  111. package/dist/styles/menu-hover.scss +30 -0
  112. package/dist/styles/paragraph.scss +88 -0
  113. package/dist/styles/prompt.scss +51 -0
  114. package/dist/styles/radio.scss +202 -0
  115. package/dist/styles/select.scss +363 -0
  116. package/dist/styles/side-menu.scss +334 -0
  117. package/dist/styles/tabs.scss +540 -0
  118. package/dist/styles/text-area.scss +388 -0
  119. package/dist/styles/text-input.scss +171 -0
  120. package/dist/styles/toggle.scss +0 -0
  121. package/dist/styles/unordered-list.scss +8 -0
  122. package/dist/utils/ScrollHandler.js +30 -0
  123. package/dist/utils/accessibility.js +128 -0
  124. package/dist/utils/heroUtils.js +316 -0
  125. package/dist/utils/index.js +104 -0
  126. package/dist/utils/inputValidation.js +29 -0
  127. package/dist/utils/keyboardNavigation.js +536 -0
  128. package/dist/utils/labelUtils.js +708 -0
  129. package/dist/utils/loaderUtils.js +387 -0
  130. package/dist/utils/menuUtils.js +575 -0
  131. package/dist/utils/useHeadingAccessibility.js +298 -0
  132. package/dist/utils/useRadioGroup.js +260 -0
  133. package/dist/utils/useSelectAccessibility.js +426 -0
  134. package/dist/utils/useTabsAccessibility.js +278 -0
  135. package/dist/utils/useTextAreaAccessibility.js +255 -0
  136. package/dist/utils/useTextInputAccessibility.js +295 -0
  137. package/dist/utils/useTypographyAccessibility.js +168 -0
  138. package/dist/utils/useWindowSize.js +32 -0
  139. package/dist/utils/utils/ScrollHandler.js +26 -0
  140. package/dist/utils/utils/accessibility.js +133 -0
  141. package/dist/utils/utils/heroUtils.js +348 -0
  142. package/dist/utils/utils/index.js +9 -0
  143. package/dist/utils/utils/inputValidation.js +22 -0
  144. package/dist/utils/utils/keyboardNavigation.js +664 -0
  145. package/dist/utils/utils/labelUtils.js +772 -0
  146. package/dist/utils/utils/loaderUtils.js +436 -0
  147. package/dist/utils/utils/menuUtils.js +651 -0
  148. package/dist/utils/utils/useHeadingAccessibility.js +334 -0
  149. package/dist/utils/utils/useRadioGroup.js +311 -0
  150. package/dist/utils/utils/useSelectAccessibility.js +498 -0
  151. package/dist/utils/utils/useTabsAccessibility.js +316 -0
  152. package/dist/utils/utils/useTextAreaAccessibility.js +303 -0
  153. package/dist/utils/utils/useTextInputAccessibility.js +338 -0
  154. package/dist/utils/utils/useTypographyAccessibility.js +180 -0
  155. package/dist/utils/utils/useWindowSize.js +26 -0
  156. package/dist/utils/utils/validation.js +131 -0
  157. package/dist/utils/validation.js +139 -0
  158. package/package.json +90 -0
@@ -0,0 +1,186 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Toggle = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
10
+ 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); }
11
+ /**
12
+ * Toggle - Interactive toggle component with controlled and uncontrolled modes
13
+ *
14
+ * Features:
15
+ * - Toggle between two different content states
16
+ * - Controlled and uncontrolled state management
17
+ * - Keyboard navigation support
18
+ * - Customizable styling and animations
19
+ * - Accessibility features with ARIA support
20
+ * - Click and keyboard interaction handling
21
+ *
22
+ * Accessibility:
23
+ * - Uses button semantics for keyboard navigation
24
+ * - ARIA expanded state for screen readers
25
+ * - Focus management and keyboard support
26
+ * - Proper semantic markup for toggle behavior
27
+ * - Screen reader announcements for state changes
28
+ *
29
+ * @component
30
+ * @example
31
+ * // Basic toggle with different content for each state
32
+ * <Toggle
33
+ * isClosedChildren={<span>Show Details</span>}
34
+ * isOpenChildren={<span>Hide Details</span>}
35
+ * />
36
+ *
37
+ * @example
38
+ * // Controlled toggle with custom handler
39
+ * <Toggle
40
+ * isOpen={isExpanded}
41
+ * onToggle={(newState) => setIsExpanded(newState)}
42
+ * isClosedChildren={<button>Expand Section</button>}
43
+ * isOpenChildren={<button>Collapse Section</button>}
44
+ * />
45
+ *
46
+ * @example
47
+ * // Toggle with custom styling and accessibility
48
+ * <Toggle
49
+ * className="custom-toggle"
50
+ * aria-label="Toggle navigation menu"
51
+ * isClosedChildren={<span>☰ Menu</span>}
52
+ * isOpenChildren={<span>✕ Close</span>}
53
+ * />
54
+ */
55
+ const Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(({
56
+ // Core props
57
+ id,
58
+ className = '',
59
+ // Content props
60
+ isClosedChildren,
61
+ isOpenChildren,
62
+ // State props
63
+ isOpen,
64
+ onToggle,
65
+ // Accessibility props
66
+ 'aria-label': ariaLabel,
67
+ role = 'button',
68
+ // Legacy props (for backward compatibility - internal use only)
69
+ componentName = 'toggle',
70
+ additionalClassName = '',
71
+ ...restProps
72
+ }, ref) => {
73
+ // Handle legacy prop mapping
74
+ const finalId = id || `toggle-${Math.random().toString(36).substr(2, 9)}`;
75
+ const finalClassName = className || additionalClassName;
76
+
77
+ // Internal state for uncontrolled mode
78
+ const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(false);
79
+
80
+ // Determine if component is controlled or uncontrolled
81
+ const isControlled = isOpen !== undefined;
82
+ const currentIsOpen = isControlled ? isOpen : internalIsOpen;
83
+
84
+ // Handle toggle action
85
+ const handleToggle = () => {
86
+ const newState = !currentIsOpen;
87
+ if (isControlled && onToggle) {
88
+ onToggle(newState);
89
+ } else if (!isControlled) {
90
+ setInternalIsOpen(newState);
91
+ }
92
+ };
93
+
94
+ // Handle keyboard interaction
95
+ const handleKeyDown = event => {
96
+ if (event.key === 'Enter' || event.key === ' ') {
97
+ event.preventDefault();
98
+ handleToggle();
99
+ }
100
+ };
101
+
102
+ // Build CSS classes
103
+ const toggleClasses = ['toggle', currentIsOpen && 'toggle--open', finalClassName].filter(Boolean).join(' ').trim();
104
+ return /*#__PURE__*/_react.default.createElement("div", _extends({
105
+ ref: ref,
106
+ id: finalId,
107
+ className: toggleClasses,
108
+ "data-testid": `${componentName || 'toggle'}-wrapper`,
109
+ onClick: handleToggle,
110
+ onKeyDown: handleKeyDown,
111
+ role: role,
112
+ tabIndex: 0,
113
+ "aria-expanded": currentIsOpen,
114
+ "aria-label": ariaLabel
115
+ }, restProps), currentIsOpen ? isOpenChildren : isClosedChildren);
116
+ });
117
+ Toggle.propTypes = {
118
+ // ============================================================================
119
+ // CORE PROPS
120
+ // ============================================================================
121
+
122
+ /**
123
+ * Unique identifier for the component
124
+ */
125
+ id: _propTypes.string,
126
+ /**
127
+ * Additional CSS classes to apply to the component
128
+ */
129
+ className: _propTypes.string,
130
+ // ============================================================================
131
+ // CONTENT PROPS
132
+ // ============================================================================
133
+
134
+ /**
135
+ * Content to display when toggle is in the closed state (required)
136
+ */
137
+ isClosedChildren: _propTypes.node.isRequired,
138
+ /**
139
+ * Content to display when toggle is in the open state (required)
140
+ */
141
+ isOpenChildren: _propTypes.node.isRequired,
142
+ // ============================================================================
143
+ // BEHAVIOR PROPS
144
+ // ============================================================================
145
+
146
+ /**
147
+ * Controlled state - whether the toggle is open (for controlled mode)
148
+ */
149
+ isOpen: _propTypes.bool,
150
+ // ============================================================================
151
+ // EVENT PROPS
152
+ // ============================================================================
153
+
154
+ /**
155
+ * Callback function called when toggle state changes (for controlled mode)
156
+ * @param {boolean} newState - The new toggle state
157
+ */
158
+ onToggle: _propTypes.func,
159
+ // ============================================================================
160
+ // ACCESSIBILITY PROPS
161
+ // ============================================================================
162
+
163
+ /**
164
+ * ARIA label for accessibility
165
+ */
166
+ 'aria-label': _propTypes.string,
167
+ /**
168
+ * ARIA role for the toggle element
169
+ */
170
+ role: _propTypes.string,
171
+ /**
172
+ *Use 'className' instead. Additional CSS classes to apply
173
+ */
174
+ additionalClassName: _propTypes.string,
175
+ /**
176
+ *Use 'id' instead. Base CSS class name for the component
177
+ */
178
+ componentName: _propTypes.string
179
+
180
+ /**
181
+ *Use 'aria-label' instead. ARIA label for accessibility
182
+ */
183
+ // aria-label is used as a prop, not ariaLabel
184
+ };
185
+ Toggle.displayName = 'Toggle';
186
+ var _default = exports.default = Toggle;
@@ -0,0 +1,150 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ var _Trash = _interopRequireDefault(require("../assets/icons/Trash"));
10
+ var _CheckWCircle = _interopRequireDefault(require("../assets/icons/CheckWCircle"));
11
+ var _Edit = _interopRequireDefault(require("../assets/icons/Edit"));
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 (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 (const 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
+ /**
15
+ * File to contain CrudMenuEdit component
16
+ * @function
17
+ */
18
+
19
+ const CrudMenuEdit = ({
20
+ componentName = 'crud-edit menu',
21
+ handleAddClick,
22
+ listData,
23
+ handleEditClick,
24
+ changeHandler,
25
+ handleDelete,
26
+ handleDeleteClick,
27
+ addBtnText,
28
+ element,
29
+ optionValue,
30
+ selectOptions = [],
31
+ renderItems
32
+ }) => {
33
+ return /*#__PURE__*/_react.default.createElement("div", {
34
+ className: componentName,
35
+ "data-testid": componentName
36
+ }, /*#__PURE__*/_react.default.createElement("div", {
37
+ className: "list"
38
+ }, listData.map(item => /*#__PURE__*/_react.default.createElement("div", {
39
+ key: item.id,
40
+ className: "item"
41
+ }, /*#__PURE__*/_react.default.createElement("div", {
42
+ className: "input-container"
43
+ }, item.editable ? /*#__PURE__*/_react.default.createElement("div", {
44
+ className: "editable"
45
+ }, element === 'input' && /*#__PURE__*/_react.default.createElement("input", {
46
+ className: "input-text",
47
+ name: "content",
48
+ "aria-label": "Content",
49
+ type: "text",
50
+ onChange: e => changeHandler(e, item),
51
+ value: !item.content ? '' : item.content,
52
+ disabled: !item.editable,
53
+ placeholder: "Editing..."
54
+ }), element === 'select' && /*#__PURE__*/_react.default.createElement("select", {
55
+ className: "select",
56
+ name: "content",
57
+ "aria-label": "Content",
58
+ onChange: e => changeHandler(e, item),
59
+ value: !item.content ? item.name : item.content,
60
+ disabled: !item.editable,
61
+ "data-testid": "crud-select"
62
+ }, /*#__PURE__*/_react.default.createElement("option", {
63
+ className: "option",
64
+ value: ""
65
+ }, optionValue), selectOptions)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.content === '' && handleDelete(item.id), renderItems(item))), /*#__PURE__*/_react.default.createElement("div", {
66
+ className: "inside-btns"
67
+ }, item.editable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("button", {
68
+ className: "button",
69
+ "data-testid": "crud-save-btn",
70
+ onClick: () => handleEditClick(item, false)
71
+ }, /*#__PURE__*/_react.default.createElement(_CheckWCircle.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
72
+ className: "paragraph"
73
+ }, "Save")), /*#__PURE__*/_react.default.createElement("button", {
74
+ className: "button",
75
+ "data-testid": "crud-save-btn",
76
+ onClick: () => handleDelete(item.id)
77
+ }, /*#__PURE__*/_react.default.createElement(_Trash.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
78
+ className: "paragraph"
79
+ }, "Delete"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
80
+ className: "button",
81
+ "data-testid": "crud-edit-btn",
82
+ onClick: () => handleEditClick(item, true)
83
+ }, /*#__PURE__*/_react.default.createElement(_Edit.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
84
+ className: "paragraph"
85
+ }, "Edit")), /*#__PURE__*/_react.default.createElement("button", {
86
+ className: "button",
87
+ onClick: e => handleDeleteClick(e, item),
88
+ "data-testid": "delete-btn"
89
+ }, /*#__PURE__*/_react.default.createElement(_Trash.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
90
+ className: "paragraph"
91
+ }, "Delete"))))))), /*#__PURE__*/_react.default.createElement("div", {
92
+ className: "wrapper-btn"
93
+ }, /*#__PURE__*/_react.default.createElement("button", {
94
+ className: "button submit add-btn",
95
+ "data-testid": "crud-add-btn",
96
+ onClick: handleAddClick
97
+ }, addBtnText)));
98
+ };
99
+ CrudMenuEdit.propTypes = {
100
+ /**
101
+ * Define component name
102
+ */
103
+ componentName: _propTypes.string,
104
+ /**
105
+ * Invoke add functionality
106
+ */
107
+ handleAddClick: _propTypes.func.isRequired,
108
+ /**
109
+ * Display data
110
+ */
111
+ listData: _propTypes.array.isRequired,
112
+ /**
113
+ * Invoke edit functionality
114
+ */
115
+ handleEditClick: _propTypes.func.isRequired,
116
+ /**
117
+ * Handle onChange functionality
118
+ */
119
+ changeHandler: _propTypes.func.isRequired,
120
+ /**
121
+ * Handle delete functionality out of focus
122
+ */
123
+ handleDelete: _propTypes.func.isRequired,
124
+ /**
125
+ * Invoke delete functionality
126
+ */
127
+ handleDeleteClick: _propTypes.func.isRequired,
128
+ /**
129
+ * Edit button text
130
+ */
131
+ addBtnText: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.bool]).isRequired,
132
+ /**
133
+ * Choose HTML element
134
+ * options: input or select
135
+ */
136
+ element: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.bool]).isRequired,
137
+ /**
138
+ * Specific value for option
139
+ */
140
+ optionValue: _propTypes.string,
141
+ /**
142
+ * Define data to iterate over
143
+ */
144
+ selectOptions: _propTypes.array.isRequired,
145
+ /**
146
+ * Define UI element to render data for each item
147
+ */
148
+ renderItems: _propTypes.func.isRequired
149
+ };
150
+ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CrudMenuEdit);
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
10
+ /**
11
+ * File to contain CRUDView component
12
+ * @function
13
+ */
14
+
15
+ const CrudView = ({
16
+ componentName = 'crud-default',
17
+ additionalClass,
18
+ listDataProfile
19
+ }) => {
20
+ return /*#__PURE__*/_react.default.createElement("div", {
21
+ className: `${componentName} ${additionalClass}`,
22
+ "data-testid": componentName
23
+ }, listDataProfile);
24
+ };
25
+ CrudView.propTypes = {
26
+ /**
27
+ * Define component name
28
+ */
29
+ componentName: _propTypes.string,
30
+ /**
31
+ * Add an additional class for modifiers based on parents component
32
+ */
33
+ additionalClass: _propTypes.string,
34
+ /**
35
+ * Display data
36
+ */
37
+ listDataProfile: _propTypes.array.isRequired
38
+ };
39
+ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CrudView);
@@ -0,0 +1,118 @@
1
+ "use strict";
2
+
3
+ // local state for modal and crud
4
+ const [visible, setVisible] = useState(false);
5
+ const [menuList, setMenuList] = useState([]);
6
+ const [menuPreviousItems, setMenuPreviousItems] = useState([]);
7
+ const [isDeleting, setIsDeleting] = useState('');
8
+
9
+ // container
10
+ // This code creates a constant named menuLastIdGen which stores the result of the lastIdGen function. The lastIdGen function takes two arguments, menuList and menuPreviousItems, and returns a value. The value is the last id number in the menuList array or the last id number in the menuPreviousItems array, whichever is greater. The menuLastIdGen constant is used in the handleAddClick function below.
11
+ const menuLastIdGen = lastIdGen(menuList, menuPreviousItems);
12
+
13
+ //This is a function that handles the click event when a user wants to add a language. It takes in the last item ID from the menuLastIdGen, creates a new item with an empty string, true boolean and false boolean. It then pushes the new item to the menuList array and sets both menuList and menuPreviousItems arrays with the spread operator. The menuLastIdGen constant is used in the handleAddClick function below.
14
+ const handleAddClick = useCallback(() => {
15
+ const lastItemId = menuLastIdGen;
16
+ const newItem = createNewItem(lastItemId, '', true, false);
17
+ menuList.push(newItem);
18
+ setMenuList([...menuList]);
19
+ setMenuPreviousItems([...menuPreviousItems]);
20
+ }, [menuLastIdGen, menuPreviousItems, menuList]);
21
+ const handleAddPreviousItems = useCallback(() => {
22
+ addPreviousItems([], menuPreviousItems);
23
+ });
24
+ const handleItemDelete = useCallback(() => {
25
+ handleDelete(0, menuList, setMenuList, handleAddPreviousItems);
26
+ setVisible(false);
27
+ });
28
+ const handleChange = useCallback((e, item) => {
29
+ const {
30
+ name,
31
+ value
32
+ } = e.target;
33
+ item[name] = value;
34
+ handleList(menuList, setMenuList);
35
+ }, [menuList]);
36
+ const handleEdit = useCallback((item, editable) => {
37
+ item.editable = editable;
38
+ handleList(menuList, setMenuList);
39
+ }, [menuList]);
40
+ const handleDeletePrompt = useCallback((e, item) => {
41
+ const {
42
+ name,
43
+ value
44
+ } = e.target;
45
+ item[name] = value;
46
+ setVisible(true);
47
+ setIsDeleting(item.content);
48
+ }, []);
49
+ const handleSubmitDelete = async () => {
50
+ // Implementation for submit delete
51
+ };
52
+ const handleSubmit = async () => {
53
+ // Implementation for submit
54
+ };
55
+ const crudView = () => /*#__PURE__*/React.createElement(CrudDefault, {
56
+ listDataProfile: languagesList.map(item => {
57
+ const handleRender = item.content;
58
+ return /*#__PURE__*/React.createElement("p", {
59
+ key: item.id
60
+ }, handleRender);
61
+ }),
62
+ additionalClass: "td not-full"
63
+ });
64
+ const renderItems = item => {
65
+ const handleRender = item.content;
66
+ return /*#__PURE__*/React.createElement("p", {
67
+ className: handleRender
68
+ }, handleRender);
69
+ };
70
+ const renderPrompt = () => /*#__PURE__*/React.createElement(Modal, {
71
+ content: /*#__PURE__*/React.createElement("div", {
72
+ className: "form",
73
+ style: {
74
+ backgroundColor: 'rgba(255,255,255,0.9)',
75
+ width: '50%',
76
+ height: '50%',
77
+ display: 'flex',
78
+ flexDirection: 'column',
79
+ justifyContent: 'center',
80
+ alignItems: 'center'
81
+ }
82
+ }, /*#__PURE__*/React.createElement("h5", {
83
+ className: "headder-five"
84
+ }, "Are you sure you want to delete ", isDeleting, "?"), /*#__PURE__*/React.createElement("button", {
85
+ className: "button submit",
86
+ onClick: handleItemDelete
87
+ }, "Yes"), /*#__PURE__*/React.createElement("button", {
88
+ className: "button submit",
89
+ onClick: () => setVisible(false)
90
+ }, "No")),
91
+ isVisible: visible,
92
+ setIsVisible: setVisible
93
+ });
94
+ const crudEdit = () => /*#__PURE__*/React.createElement(CrudMenuEdit, {
95
+ handleAddClick: handleAddClick,
96
+ listData: menuList,
97
+ handleEditClick: handleEdit,
98
+ changeHandler: handleChange,
99
+ handlePrompt: handleDeletePrompt,
100
+ handleDelete: handleItemDelete,
101
+ handleDeleteClick: handleDeletePrompt,
102
+ addBtnText: 'Add ',
103
+ element: "input",
104
+ renderItems: renderItems
105
+ // selectOptions={languagesArr.map((option) => (
106
+ // <option key={randomId(10)} className='option' value={option.id}>
107
+ // {option.id}
108
+ // </option>
109
+ // ))}
110
+ ,
111
+ optionValue: "Select"
112
+ });
113
+
114
+ // render component
115
+ /*#__PURE__*/React.createElement(Component, {
116
+ languagesView: crudView(),
117
+ languagesCrud: languagesCrud()
118
+ });
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.lastIdGen = exports.handleList = exports.handleDelete = exports.createNewItem = exports.addPreviousItems = void 0;
7
+ // crudEditHandlers
8
+ const lastIdGen = (itemsList, previousItems) => {
9
+ if (!itemsList || !itemsList.length && !previousItems.length) return 0;
10
+ const currentItemIds = itemsList.length ? itemsList.map(item => item.id) : [];
11
+ const previousItemsIds = previousItems.length ? previousItems.map(item => item.id) : [];
12
+ return Math.max(...currentItemIds, ...previousItemsIds);
13
+ };
14
+ exports.lastIdGen = lastIdGen;
15
+ const createNewItem = (id, content, editable, checked) => {
16
+ return {
17
+ id: id + 1,
18
+ content: content,
19
+ editable: editable,
20
+ checked: checked
21
+ };
22
+ };
23
+ exports.createNewItem = createNewItem;
24
+ const addPreviousItems = (removedItem, previousItems) => {
25
+ previousItems.push(removedItem);
26
+ if (previousItems.length > 19) {
27
+ previousItems.shift();
28
+ }
29
+ };
30
+ exports.addPreviousItems = addPreviousItems;
31
+ const handleDelete = (id, list, setList, addPreviousItems) => {
32
+ if (typeof list[0] === 'number') {
33
+ // for when user data is an array of integers/ids (EX: insurance_list: [2,3,4,13])
34
+ const idx = list.indexOf(id);
35
+ let removedItem = list.splice(idx, 1)[0];
36
+ addPreviousItems(removedItem);
37
+ setList([...list]);
38
+ } else {
39
+ const idx = list.findIndex(i => i.id === id);
40
+ let removedItem = list.splice(idx, 1)[0];
41
+ removedItem.index = idx;
42
+ addPreviousItems(removedItem);
43
+ setList([...list]);
44
+ }
45
+ };
46
+ exports.handleDelete = handleDelete;
47
+ const handleList = (list, setList) => {
48
+ setList([...list]);
49
+ };
50
+ exports.handleList = handleList;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TRANSITION_DURATION_SLOW = exports.TRANSITION_DURATION_FAST = exports.TRANSITION_DURATION = exports.FOCUS_DELAY = exports.EASING = exports.DEBOUNCE_DELAY = exports.ANNOUNCEMENT_CLEANUP_DELAY = void 0;
7
+ /**
8
+ * Animation and timing constants for the UI library
9
+ *
10
+ * These constants ensure consistency across components and their stories.
11
+ * When updating these values, make sure to also update corresponding CSS transition durations.
12
+ */
13
+
14
+ // Animation transition durations (in milliseconds)
15
+ const TRANSITION_DURATION = exports.TRANSITION_DURATION = 300; // Should match CSS transition duration
16
+ const TRANSITION_DURATION_SLOW = exports.TRANSITION_DURATION_SLOW = 500; // For slower animations
17
+ const TRANSITION_DURATION_FAST = exports.TRANSITION_DURATION_FAST = 150; // For quick animations
18
+
19
+ // Screen reader and accessibility timings
20
+ const ANNOUNCEMENT_CLEANUP_DELAY = exports.ANNOUNCEMENT_CLEANUP_DELAY = 1000; // Time to keep screen reader announcements
21
+ const FOCUS_DELAY = exports.FOCUS_DELAY = 50; // Small delay before focusing elements
22
+ const DEBOUNCE_DELAY = exports.DEBOUNCE_DELAY = 300; // For input debouncing
23
+
24
+ // Animation easing curves (for CSS-in-JS or programmatic animations)
25
+ const EASING = exports.EASING = {
26
+ easeOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
27
+ easeIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
28
+ easeInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
29
+ easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
30
+ };
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ArrowIcon = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const ArrowIcon = ({
11
+ componentName = 'arrow-icon',
12
+ additionalClassName = '',
13
+ dimensions = 24,
14
+ viewBox = '0 0 24 24',
15
+ fill = 'currentColor'
16
+ }) => /*#__PURE__*/_react.default.createElement("svg", {
17
+ className: `icon ${componentName} ${additionalClassName}`,
18
+ width: dimensions,
19
+ height: dimensions,
20
+ viewBox: viewBox,
21
+ fill: fill
22
+ }, /*#__PURE__*/_react.default.createElement("path", {
23
+ d: "M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
24
+ }));
25
+ exports.ArrowIcon = ArrowIcon;
26
+ ArrowIcon.propTypes = {
27
+ componentName: _propTypes.string,
28
+ additionalClassName: _propTypes.string,
29
+ dimensions: _propTypes.number,
30
+ viewBox: _propTypes.string,
31
+ fill: _propTypes.string
32
+ };
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ArrowRight = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
+ const ArrowRight = ({
10
+ className = '',
11
+ size = 24,
12
+ color = 'currentColor'
13
+ }) => /*#__PURE__*/_react.default.createElement("svg", {
14
+ width: size,
15
+ height: size,
16
+ viewBox: "0 0 24 24",
17
+ fill: "none",
18
+ xmlns: "http://www.w3.org/2000/svg",
19
+ className: className
20
+ }, /*#__PURE__*/_react.default.createElement("path", {
21
+ d: "M5 12H19",
22
+ stroke: color,
23
+ strokeWidth: "2",
24
+ strokeLinecap: "round",
25
+ strokeLinejoin: "round"
26
+ }), /*#__PURE__*/_react.default.createElement("path", {
27
+ d: "M12 5L19 12L12 19",
28
+ stroke: color,
29
+ strokeWidth: "2",
30
+ strokeLinecap: "round",
31
+ strokeLinejoin: "round"
32
+ }));
33
+ exports.ArrowRight = ArrowRight;
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.CheckCircle = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const CheckCircle = ({
11
+ componentName = 'check-close',
12
+ additionalClassName = '',
13
+ dimensions = 24,
14
+ viewBox = '0 -960 960 960',
15
+ fill = '#adb5bd'
16
+ }) => /*#__PURE__*/_react.default.createElement("svg", {
17
+ className: `icon ${componentName} ${additionalClassName}`,
18
+ width: dimensions,
19
+ height: dimensions,
20
+ viewBox: viewBox,
21
+ fill: fill
22
+ }, /*#__PURE__*/_react.default.createElement("path", {
23
+ d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
24
+ }));
25
+ exports.CheckCircle = CheckCircle;
26
+ CheckCircle.propTypes = {
27
+ componentName: _propTypes.string,
28
+ additionalClassName: _propTypes.string,
29
+ dimensions: _propTypes.number,
30
+ viewBox: _propTypes.string,
31
+ fill: _propTypes.string
32
+ };
33
+ var _default = exports.default = CheckCircle;