@abstraks-dev/ui-library 2.3.0 → 2.4.0

package/README.md

@@ -19,6 +19,7 @@ import {
 	Hero,
 	Alert,
 	Modal,
+	Prompt,
 } from '@abstraks-dev/ui-library';
 import '@abstraks-dev/ui-library/dist/styles/main.css';
 
@@ -232,6 +233,51 @@ Props:
 - `showCloseButton` - Show X close button in header (default: `true`)
 - `preventBodyScroll` - Lock body scroll when open (default: `true`)
 
+#### Prompt
+
+Lightweight confirmation dialog for user actions like deletes or destructive operations.
+
+```jsx
+import { useState } from 'react';
+import { Prompt, Button } from '@abstraks-dev/ui-library';
+
+function MyComponent() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const handleDelete = () => {
+		// Perform delete action
+		console.log('Item deleted');
+		setIsOpen(false);
+	};
+
+	return (
+		<>
+			<Button variant='error' onClick={() => setIsOpen(true)}>
+				Delete Item
+			</Button>
+			<Prompt
+				message='Are you sure you want to delete this item? This action cannot be undone.'
+				open={isOpen}
+				onConfirm={handleDelete}
+				onCancel={() => setIsOpen(false)}
+				confirmText='Delete'
+				cancelText='Cancel'
+			/>
+		</>
+	);
+}
+```
+
+Props:
+
+- `message` **(required)** - The confirmation message to display
+- `open` - Controls prompt visibility (default: `false`)
+- `onConfirm` - Callback when user clicks confirm button
+- `onCancel` - Callback when user clicks cancel button
+- `confirmText` - Text for confirm button (default: `'Yes'`)
+- `cancelText` - Text for cancel button (default: `'Cancel'`)
+- `showCancel` - Whether to show cancel button (default: `true`)
+
 #### Error
 
 Error message component.

package/dist/__tests__/Footer.test.js

@@ -35,7 +35,7 @@ describe('Footer', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
       hasAuth: false
     }));
-    expect(_react2.screen.getByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
+    expect(_react2.screen.getByText(/© 2026 Abstraks. All rights reserved./)).toBeInTheDocument();
   });
   it('renders auth menu when hasAuth is true on mobile', () => {
     // Mock mobile screen size so auth menu shows
@@ -110,7 +110,7 @@ describe('Footer', () => {
       hasAuth: true,
       authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu")
     }));
-    expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).not.toBeInTheDocument();
+    expect(_react2.screen.queryByText(/© 2026 Abstraks. All rights reserved./)).not.toBeInTheDocument();
   });
   it('renders with copyright when hasAuth is true but navigation props are provided', () => {
     // Mock desktop screen size to test desktop behavior with navigation props
@@ -122,7 +122,7 @@ describe('Footer', () => {
       authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu"),
       navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav One")
     }));
-    expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
+    expect(_react2.screen.queryByText(/© 2026 Abstraks. All rights reserved./)).toBeInTheDocument();
   });
   it('renders with custom className', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {

package/dist/__tests__/Prompt.test.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Prompt = require("../components/Prompt");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+describe('Prompt Component', () => {
+  const defaultProps = {
+    message: 'Are you sure you want to proceed?',
+    onConfirm: jest.fn(),
+    onCancel: jest.fn(),
+    open: true
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Rendering', () => {
+    test('renders prompt when open is true', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Are you sure you want to proceed?')).toBeInTheDocument();
+    });
+    test('does not render when open is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    test('renders with default confirm button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+    });
+    test('renders with custom confirm button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        confirmText: "Delete"
+      })));
+      expect(_react2.screen.getByText('Delete')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+    });
+    test('renders with default cancel button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('renders with custom cancel button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        cancelText: "No"
+      })));
+      expect(_react2.screen.getByText('No')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Cancel')).not.toBeInTheDocument();
+    });
+    test('renders both confirm and cancel buttons by default', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('hides cancel button when showCancel is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        showCancel: false
+      })));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Cancel')).not.toBeInTheDocument();
+    });
+    test('renders without confirm button if onConfirm is not provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Information message",
+        onCancel: defaultProps.onCancel,
+        open: true
+      }));
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('has correct ARIA attributes', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const dialog = _react2.screen.getByRole('dialog');
+      expect(dialog).toHaveAttribute('aria-modal', 'true');
+      expect(dialog).toHaveAttribute('aria-label', 'Are you sure you want to proceed?');
+    });
+    test('confirm button receives focus when rendered', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      expect(confirmButton).toHaveFocus();
+    });
+  });
+  describe('User Interactions', () => {
+    test('calls onConfirm when confirm button is clicked', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      _react2.fireEvent.click(confirmButton);
+      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onCancel).not.toHaveBeenCalled();
+    });
+    test('calls onCancel when cancel button is clicked', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const cancelButton = _react2.screen.getByText('Cancel');
+      _react2.fireEvent.click(cancelButton);
+      expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onConfirm).not.toHaveBeenCalled();
+    });
+    test('does not call onConfirm if not provided', () => {
+      const mockOnCancel = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Test message",
+        onCancel: mockOnCancel,
+        open: true,
+        showCancel: true
+      }));
+
+      // Only cancel button should be present
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+    });
+    test('handles multiple clicks correctly', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      _react2.fireEvent.click(confirmButton);
+      _react2.fireEvent.click(confirmButton);
+      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(2);
+    });
+  });
+  describe('PropTypes Validation', () => {
+    test('renders with required props only', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Required message",
+        open: true
+      }));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Required message')).toBeInTheDocument();
+    });
+    test('renders with all optional props', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "All props message",
+        onConfirm: jest.fn(),
+        onCancel: jest.fn(),
+        confirmText: "Confirm",
+        cancelText: "Dismiss",
+        showCancel: true,
+        open: true
+      }));
+      expect(_react2.screen.getByText('All props message')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Confirm')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Dismiss')).toBeInTheDocument();
+    });
+  });
+  describe('CSS Classes', () => {
+    test('applies correct CSS classes', () => {
+      const {
+        container
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(container.querySelector('.prompt-overlay')).toBeInTheDocument();
+      expect(container.querySelector('.prompt-box')).toBeInTheDocument();
+      expect(container.querySelector('.prompt-actions')).toBeInTheDocument();
+    });
+    test('confirm button has correct class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      expect(confirmButton).toHaveClass('prompt-confirm');
+    });
+    test('cancel button has correct class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const cancelButton = _react2.screen.getByText('Cancel');
+      expect(cancelButton).toHaveClass('prompt-cancel');
+    });
+  });
+  describe('Edge Cases', () => {
+    test('renders with empty message string', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        message: ""
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    test('renders with very long message', () => {
+      const longMessage = 'This is a very long message that might wrap to multiple lines in the prompt dialog and should still render correctly without breaking the layout or causing any issues';
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        message: longMessage
+      })));
+      expect(_react2.screen.getByText(longMessage)).toBeInTheDocument();
+    });
+    test('renders when both onConfirm and onCancel are undefined', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Message",
+        open: true
+      }));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Message')).toBeInTheDocument();
+    });
+    test('transitions from closed to open', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    test('transitions from open to closed', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});

package/dist/index.js

@@ -26,6 +26,7 @@ var _exportNames = {
   Loader: true,
   Modal: true,
   Paragraph: true,
+  Prompt: true,
   Radio: true,
   Search: true,
   Select: true,
@@ -380,6 +381,12 @@ Object.defineProperty(exports, "PlusCircle", {
     return _PlusCircle.PlusCircle;
   }
 });
+Object.defineProperty(exports, "Prompt", {
+  enumerable: true,
+  get: function () {
+    return _Prompt.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -492,6 +499,7 @@ var _Label = _interopRequireDefault(require("./components/Label"));
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 var _Modal = _interopRequireDefault(require("./components/Modal"));
 var _Paragraph = _interopRequireDefault(require("./components/Paragraph"));
+var _Prompt = _interopRequireDefault(require("./components/Prompt"));
 var _Radio = require("./components/Radio");
 var _Search = require("./components/Search");
 var _Select = require("./components/Select");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraks-dev/ui-library",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "User Interface library",
   "main": "dist/index.js",
   "files": [