kwikid-components-react
Version:
KwikID's Component Library in React
455 lines (445 loc) • 15.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Warning = exports.Success = exports.Positions = exports.Info = exports.Error = exports.Basic = exports.AutoClose = exports.AlertDemo = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../button/Button"));
var _PortalAlert = _interopRequireDefault(require("../portals/portal-alert/PortalAlert"));
var _Alert = _interopRequireDefault(require("./Alert"));
var _Alert2 = require("./Alert.constants");
var _Alert3 = require("./Alert.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
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; }
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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
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); }
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
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); }
/**
* The Alert component is used to display important messages to the user.
* It can be used to provide feedback about an action, notify about system events,
* or display important information.
*
* ## Usage
*
* ```jsx
* import { KwikUIAlert } from 'react-kwikui';
*
* <KwikUIAlert
* id="success-alert"
* message="Operation completed successfully!"
* variant="success"
* position="top-right"
* autoCloseTime={5000}
* onClose={() => console.log('Alert closed')}
* />
* ```
*
* ## Portal Usage
*
* For better positioning and stacking of alerts, you can use the PortalAlert component:
*
* ```jsx
* import { KwikUIAlert, KwikUIPortalAlert } from 'react-kwikui';
*
* // First, add the portal container
* <KwikUIPortalAlert id="alerts-portal" />
*
* // Then reference it in your alerts
* <KwikUIAlert
* portalId="alerts-portal"
* id="success-alert"
* message="Operation completed successfully!"
* variant="success"
* position="top-right"
* autoCloseTime={5000}
* onClose={() => console.log('Alert closed')}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Feedback/Alert",
component: _Alert.default,
parameters: {
componentSubtitle: "A component for displaying important messages and notifications",
docs: {
description: {
component: "The Alert component provides feedback to users about operations or system events with different variants for different types of messages."
}
},
a11y: {
config: {
rules: [{
id: "alert",
enabled: true
}]
}
}
},
argTypes: {
variant: {
control: "radio",
options: _Alert2.KWIKUI_ALERT__VARIANT__OPTIONS,
description: "The visual style and semantic meaning of the alert",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Alert3.KWIKUI_ALERT_DEFAULTS.variant
}
}
},
position: {
control: "radio",
options: _Alert2.KWIKUI_ALERT__POSITION__OPTIONS,
description: "The position of the alert on the screen",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Alert3.KWIKUI_ALERT_DEFAULTS.position
}
}
},
id: {
control: "text",
description: "Unique identifier for the alert",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Alert3.KWIKUI_ALERT_DEFAULTS.id
}
}
},
message: {
control: "text",
description: "The message to display in the alert",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Alert3.KWIKUI_ALERT_DEFAULTS.message
}
}
},
portalId: {
control: "text",
description: "ID of the portal to render the alert into (optional)",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: "undefined"
}
}
},
autoCloseTime: {
control: "number",
description: "Time in milliseconds after which the alert will automatically close (0 to disable)",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _Alert2.KWIKUI_ALERT_AUTO_CLOSE_TIME
}
}
},
onClose: {
action: "closed",
description: "Function called when the alert is closed",
table: {
type: {
summary: "() => void"
},
defaultValue: {
summary: "() => {}"
}
}
}
}
};
/**
* Interactive demo that allows you to create different types of alerts
*/
const InteractiveTemplate = _ref => {
let args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
const [alerts, setAlerts] = _react.default.useState([]);
const alertCounter = _react.default.useRef(0);
const showAlert = (message, variant, position, autoCloseTime) => {
const currentAlertId = alertCounter.current;
alertCounter.current += 1;
const formattedMessage = "".concat(message, "-").concat(currentAlertId);
const newAlertData = {
id: currentAlertId,
message: formattedMessage,
variant,
position,
autoCloseTime
};
setAlerts(prevAlerts => [...prevAlerts, newAlertData]);
};
const closeAlert = alertId => {
setAlerts(prevAlerts => prevAlerts.filter(alert => alert.id !== alertId));
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "flex-start",
justifyContent: "flex-start",
alignContent: "flex-start",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
id: "info-button",
size: "m",
onClick: () => showAlert("KYC session expires in 10 minutes", "info", "top-right", 30000)
}, "Show Session Info Alert"), /*#__PURE__*/_react.default.createElement(_Button.default, {
id: "warn-button",
size: "s",
onClick: () => showAlert("Aadhaar details incomplete", "warn", "top-left", 50000)
}, "Show KYC Warning Alert"), /*#__PURE__*/_react.default.createElement(_Button.default, {
id: "success-button",
size: "m",
onClick: () => showAlert("Identity verification successful", "success", "bottom-left", 4000)
}, "Show Verification Success Alert"), /*#__PURE__*/_react.default.createElement(_Button.default, {
id: "error-button",
size: "l",
onClick: () => showAlert("PAN verification failed - Try again", "error", "bottom-right", 20000)
}, "Show PAN Error Alert")), /*#__PURE__*/_react.default.createElement(_PortalAlert.default, {
id: "portal1",
customStyles: {
position: "absolute",
top: 0,
right: 0,
width: "fit-content",
height: "fit-content",
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
gap: "1rem",
padding: "1rem"
}
}), /*#__PURE__*/_react.default.createElement("div", null, alerts.map(alert => /*#__PURE__*/_react.default.createElement(_Alert.default, {
key: alert.id,
portalId: "portal1",
id: String(alert.id),
message: alert.message,
variant: alert.variant,
position: alert.position,
autoCloseTime: alert.autoCloseTime,
onClose: () => closeAlert(alert.id)
}))), /*#__PURE__*/_react.default.createElement("div", null, alerts.map(alert => /*#__PURE__*/_react.default.createElement(_Alert.default, {
key: alert.id,
id: String(alert.id),
message: alert.message,
variant: alert.variant,
position: alert.position,
autoCloseTime: alert.autoCloseTime,
onClose: () => closeAlert(alert.id)
}))));
};
/**
* Template for basic alert rendering with controls support
*/
const Template = args => {
return /*#__PURE__*/_react.default.createElement(_Alert.default, _extends({}, args, {
onClose: args.onClose || (() => {})
}));
};
/**
* Interactive demo that allows you to create different types of alerts
*/
const AlertDemo = exports.AlertDemo = InteractiveTemplate.bind({});
AlertDemo.args = _objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS);
AlertDemo.parameters = {
docs: {
description: {
story: "Interactive demo simulating KwikID VideoKYC application alerts at Think360.AI. Click the buttons to display various alerts related to identity verification processes."
}
}
};
/**
* Basic example showing a single alert with configurable controls
*/
const Basic = exports.Basic = Template.bind({});
Basic.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "basic-alert",
message: "Welcome to KwikID VideoKYC by Think360.AI",
variant: "info",
position: "top-right",
autoCloseTime: 0
});
Basic.parameters = {
docs: {
description: {
story: "A basic KwikID welcome alert that can be configured using the controls panel."
}
}
};
/**
* Success variant
*/
const Success = exports.Success = Template.bind({});
Success.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "success-alert",
message: "Aadhaar verification completed successfully! Proceed to PAN verification.",
variant: "success",
position: "top-right",
autoCloseTime: 0
});
Success.parameters = {
docs: {
description: {
story: "Success alert displayed when a customer's Aadhaar verification is successful in the KwikID VideoKYC flow."
}
}
};
/**
* Error variant
*/
const Error = exports.Error = Template.bind({});
Error.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "error-alert",
message: "Face match failed: Please ensure proper lighting and position during VideoKYC.",
variant: "error",
position: "top-right",
autoCloseTime: 0
});
Error.parameters = {
docs: {
description: {
story: "Error alert shown when face matching fails during the VideoKYC process, providing guidance for customers to improve verification chances."
}
}
};
/**
* Warning variant
*/
const Warning = exports.Warning = Template.bind({});
Warning.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "warning-alert",
message: "Weak network detected - VideoKYC quality may be affected. Please check your internet connection.",
variant: "warn",
position: "top-right",
autoCloseTime: 0
});
Warning.parameters = {
docs: {
description: {
story: "Warning alert displayed when network quality issues are detected during the VideoKYC session at Think360.AI."
}
}
};
/**
* Info variant
*/
const Info = exports.Info = Template.bind({});
Info.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "info-alert",
message: "Your VideoKYC session with Agent Baiju Dodhia will begin in 2 minutes. Please keep your original documents ready.",
variant: "info",
position: "top-right",
autoCloseTime: 0
});
Info.parameters = {
docs: {
description: {
story: "Information alert displayed to customers waiting for their scheduled VideoKYC session with a verification agent."
}
}
};
/**
* Alert with auto-close
*/
const AutoClose = exports.AutoClose = Template.bind({});
AutoClose.args = _objectSpread(_objectSpread({}, _Alert3.KWIKUI_ALERT_DEFAULTS), {}, {
id: "auto-close-alert",
message: "OTP sent to your registered mobile number +91 98765-43210. Valid for 5 minutes.",
variant: "info",
position: "top-right",
autoCloseTime: 5000
});
AutoClose.parameters = {
docs: {
description: {
story: "Alert for OTP notification during the mobile verification step of KwikID onboarding process, which automatically closes after 5 seconds."
}
}
};
/**
* Example showing multiple alert positions
*/
const Positions = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "relative",
width: "100%",
height: "400px",
border: "1px dashed #ccc"
}
}, /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "top-left",
message: "PAN Verification Pending",
variant: "info",
position: "top-left",
autoCloseTime: 0,
onClose: () => {}
}), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "top-center",
message: "Aadhaar OTP Verification Required",
variant: "info",
position: "top-center",
autoCloseTime: 0,
onClose: () => {}
}), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "top-right",
message: "Face Matching Score: 98%",
variant: "success",
position: "top-right",
autoCloseTime: 0,
onClose: () => {}
}), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "bottom-left",
message: "Document Upload Complete",
variant: "success",
position: "bottom-left",
autoCloseTime: 0,
onClose: () => {}
}), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "bottom-center",
message: "Video Quality Check: Good",
variant: "info",
position: "bottom-center",
autoCloseTime: 0,
onClose: () => {}
}), /*#__PURE__*/_react.default.createElement(_Alert.default, {
id: "bottom-right",
message: "KwikID Verification Completed by Agent: Baiju Dodhia",
variant: "success",
position: "bottom-right",
autoCloseTime: 0,
onClose: () => {}
}));
};
exports.Positions = Positions;
Positions.parameters = {
docs: {
description: {
story: "Demonstrates different alert positions throughout the KwikID VideoKYC application interface from Think360.AI, showing various stages of the verification process."
},
controls: {
disable: true
} // Explicitly disable controls for this demo
}
};