kwikid-components-react
Version:
KwikID's Component Library in React
461 lines (444 loc) • 16.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TimeOnly = exports.Sizes = exports.Shapes = exports.DocumentExpiryValidation = exports.Disabled = exports.Default = exports.DateOnly = exports.AgeVerification = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputDateTime = _interopRequireDefault(require("./InputDateTime"));
var _InputDateTime2 = require("./InputDateTime.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 _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); }
// Define constants for magic numbers
const MINIMUM_DOCUMENT_VALIDITY_MONTHS = 6;
const MINIMUM_AGE_REQUIREMENT = 18;
/**
* The InputDateTime component provides a specialized input field for selecting date and time values.
* It supports different variants (date, time, or datetime), validation, and custom styling.
*
* ## Usage
*
* ```jsx
* import { KwikUIInputDateTime } from 'react-kwikui';
*
* const [dateTime, setDateTime] = useState(new Date());
*
* const handleChange = (id, value) => {
* setDateTime(value);
* };
*
* <KwikUIInputDateTime
* id="appointment"
* label="Appointment Date & Time"
* value={dateTime}
* variant="datetime"
* onInput={handleChange}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Inputs/DateTime",
component: _InputDateTime.default,
parameters: {
docs: {
description: {
component: "The DateTime component provides a user-friendly interface for selecting date and time values. In the context of Indian FinTech and KYC processes, this component is essential for capturing critical date information such as date of birth verification, document expiry dates, scheduled VideoKYC appointments, and transaction timestamps. The component supports date-only, time-only, or combined datetime selection, making it versatile for various verification and compliance requirements under RBI guidelines and Indian regulatory frameworks."
}
},
a11y: {
config: {
rules: [{
id: "label",
enabled: false
}]
}
}
},
argTypes: {
shape: {
control: {
type: "select",
options: ["curved", "rectangle", "rounded"]
},
description: "The shape styling of the input",
defaultValue: "rounded"
},
size: {
control: {
type: "select",
options: ["s", "m", "l"]
},
description: "The size styling of the input",
defaultValue: "m"
},
updateOn: {
control: {
type: "select",
options: ["change", "blur"]
},
description: "When to trigger the onInput event",
defaultValue: "change"
},
variant: {
control: {
type: "select",
options: ["datetime", "date", "time"]
},
description: "The variant of the datetime input",
defaultValue: "datetime"
}
}
}; // Define the Template
const Template = args => {
const {
value: localValue,
onInput
} = args;
const [value, setValue] = _react.default.useState(localValue || "");
// Update local state when localValue changes
_react.default.useEffect(() => {
if (localValue !== undefined) {
setValue(localValue);
}
}, [localValue]);
const handleInput = (id, dateValue) => {
setValue(dateValue);
if (onInput) {
onInput(id, dateValue);
}
};
const handleValidate = (id, dateValue) => {
// Simple validation logic
if (!dateValue) return null;
return {
isValid: true
};
};
return /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
value: value,
onInput: handleInput,
onInputValidate: handleValidate
}));
};
/**
* Default InputDateTime example
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputDateTime2.KWIKUI_INPUT_DATETIME__DEFAULTS), {}, {
id: "default-datetime",
label: "Scheduled VideoKYC Appointment",
placeholder: "Select date and time for your VideoKYC session"
});
Default.parameters = {
docs: {
description: {
story: "Default datetime picker for scheduling VideoKYC appointments with customers. This allows support agents to set up convenient verification calls as part of the digital onboarding process."
}
}
};
/**
* Date-only input variant
*/
const DateOnly = exports.DateOnly = Template.bind({});
DateOnly.args = _objectSpread(_objectSpread({}, _InputDateTime2.KWIKUI_INPUT_DATETIME__DEFAULTS), {}, {
id: "dob-verification",
label: "Date of Birth (as per Aadhaar)",
variant: "date",
placeholder: "Select your date of birth"
});
DateOnly.parameters = {
docs: {
description: {
story: "Date-only picker configured for capturing customer date of birth during KYC verification. This information is matched against identity documents like Aadhaar, PAN, or other government IDs to verify customer identity as per RBI guidelines."
}
}
};
/**
* Time-only input variant
*/
const TimeOnly = exports.TimeOnly = Template.bind({});
TimeOnly.args = _objectSpread(_objectSpread({}, _InputDateTime2.KWIKUI_INPUT_DATETIME__DEFAULTS), {}, {
id: "preferred-call-time",
label: "Preferred VideoKYC Call Time",
variant: "time",
placeholder: "Select your preferred time"
});
TimeOnly.parameters = {
docs: {
description: {
story: "Time-only picker allowing customers to select their preferred time slot for VideoKYC verification calls, optimizing the scheduling process and improving customer experience during digital onboarding."
}
}
};
/**
* DateTime input with different shapes
*/
const Shapes = args => {
const {
value: localValue
} = args;
// Initialize state with values from args or defaults
const [values, setValues] = _react.default.useState({
curved: new Date("2018-05-12"),
rectangle: new Date("2016-11-08"),
rounded: new Date("2030-03-25")
});
// Update values when localValue changes
_react.default.useEffect(() => {
if (localValue) {
setValues({
curved: localValue,
rectangle: localValue,
rounded: localValue
});
}
}, [localValue]);
const handleInput = (id, newValue) => {
const shapeId = id.replace(/-.*$/, "");
setValues(prev => _objectSpread(_objectSpread({}, prev), {}, {
[shapeId]: newValue
}));
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "curved-issue-date",
label: "Aadhaar Issue Date",
shape: "curved",
variant: "date",
value: values.curved,
onInput: handleInput
})), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "rectangle-issue-date",
label: "PAN Card Issue Date",
shape: "rectangle",
variant: "date",
value: values.rectangle,
onInput: handleInput
})), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "rounded-expiry-date",
label: "Passport Expiry Date",
shape: "rounded",
variant: "date",
value: values.rounded,
onInput: handleInput
})));
};
exports.Shapes = Shapes;
Shapes.parameters = {
docs: {
description: {
story: "Date inputs with different shapes for capturing various identity document dates during KYC verification. Each shape can be used to visually differentiate between document types in multi-document verification workflows."
}
}
};
/**
* DateTime input with different sizes
*/
const Sizes = args => {
const {
value: localValue
} = args;
// Initialize state with values from args or defaults
const [values, setValues] = _react.default.useState({
s: new Date(),
m: new Date(),
l: new Date()
});
// Update values when localValue changes
_react.default.useEffect(() => {
if (localValue) {
setValues({
s: localValue,
m: localValue,
l: localValue
});
}
}, [localValue]);
const handleInput = (id, newValue) => {
const sizeId = id.replace(/-.*$/, "");
setValues(prev => _objectSpread(_objectSpread({}, prev), {}, {
[sizeId]: newValue
}));
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "s-completion-date",
size: "s",
label: "KYC Completion Date",
variant: "date",
value: values.s,
onInput: handleInput
})), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "m-verification",
size: "m",
label: "Scheduled Verification Call",
value: values.m,
onInput: handleInput
})), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "l-opening-date",
size: "l",
label: "Account Opening Date",
variant: "date",
value: values.l,
onInput: handleInput
})));
};
exports.Sizes = Sizes;
Sizes.parameters = {
docs: {
description: {
story: "Date inputs in different sizes for various KYC stages in the customer onboarding journey. Different sizes can be used based on the form context and importance of the date field."
}
}
};
/**
* Document Expiry Validation
*/
const DocumentExpiryValidation = args => {
const {
value: localValue,
onInput
} = args;
const [value, setValue] = _react.default.useState(localValue || new Date());
const [isValid, setIsValid] = _react.default.useState(null);
// Update value when localValue changes
_react.default.useEffect(() => {
if (localValue !== undefined) {
setValue(localValue);
}
}, [localValue]);
const handleInput = (id, dateValue) => {
setValue(dateValue);
if (onInput) {
onInput(id, dateValue);
}
};
const validateExpiryDate = (id, dateValue) => {
if (!dateValue) return null;
// Validate that the expiry date is at least 6 months in the future
const selectedDate = new Date(dateValue);
const sixMonthsFromNow = new Date();
sixMonthsFromNow.setMonth(sixMonthsFromNow.getMonth() + MINIMUM_DOCUMENT_VALIDITY_MONTHS);
const isValidDate = selectedDate >= sixMonthsFromNow;
setIsValid(isValidDate);
return {
isValid: isValidDate
};
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Identity document must be valid for at least", " ", MINIMUM_DOCUMENT_VALIDITY_MONTHS, " months as per RBI guidelines:"), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "id-expiry-date",
label: "Identity Document Expiry Date",
variant: "date",
value: value,
onInput: handleInput,
onInputValidate: validateExpiryDate,
messages: isValid === false ? [{
type: "error",
message: "Document must be valid for at least ".concat(MINIMUM_DOCUMENT_VALIDITY_MONTHS, " more months to complete KYC.")
}] : isValid === true ? [{
type: "success",
message: "Document validity meets RBI requirements."
}] : []
})));
};
exports.DocumentExpiryValidation = DocumentExpiryValidation;
DocumentExpiryValidation.parameters = {
docs: {
description: {
story: "Date input with validation to ensure identity documents meet the minimum validity period required by RBI guidelines for KYC verification. This example validates that documents are valid for at least ".concat(MINIMUM_DOCUMENT_VALIDITY_MONTHS, " months from the current date.")
}
}
};
/**
* Age Verification for Financial Products
*/
const AgeVerification = args => {
const {
value: localValue,
onInput
} = args;
const [value, setValue] = _react.default.useState(localValue || "");
const [isValid, setIsValid] = _react.default.useState(null);
// Update value when localValue changes
_react.default.useEffect(() => {
if (localValue !== undefined) {
setValue(localValue);
}
}, [localValue]);
const handleInput = (id, dateValue) => {
setValue(dateValue);
if (onInput) {
onInput(id, dateValue);
}
};
const validateAge = (id, dateValue) => {
if (!dateValue) return null;
// Validate that the person is at least 18 years old
const birthDate = new Date(dateValue);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || monthDiff === 0 && today.getDate() < birthDate.getDate()) {
age -= 1; // Using subtraction instead of decrement operator
}
const isValidAge = age >= MINIMUM_AGE_REQUIREMENT;
setIsValid(isValidAge);
return {
isValid: isValidAge
};
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Verify customer's age for financial product eligibility:"), /*#__PURE__*/_react.default.createElement(_InputDateTime.default, _extends({}, args, {
id: "customer-dob",
label: "Date of Birth",
variant: "date",
value: value,
onInput: handleInput,
onInputValidate: validateAge,
messages: isValid === false ? [{
type: "error",
message: "Customer must be at least ".concat(MINIMUM_AGE_REQUIREMENT, " years old to access financial products.")
}] : isValid === true ? [{
type: "success",
message: "Customer age verified successfully."
}] : []
})));
};
exports.AgeVerification = AgeVerification;
AgeVerification.parameters = {
docs: {
description: {
story: "Date input with validation to verify that customers meet the minimum age requirement (".concat(MINIMUM_AGE_REQUIREMENT, " years) for financial products as per Indian banking regulations. This helps ensure compliance with SEBI and RBI guidelines regarding minimum age for investment and banking services.")
}
}
};
/**
* Disabled DateTime input
*/
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _InputDateTime2.KWIKUI_INPUT_DATETIME__DEFAULTS), {}, {
id: "system-verification-date",
label: "System Verification Date (Auto-filled)",
disabled: true,
value: new Date()
});
Disabled.parameters = {
docs: {
description: {
story: "Disabled DateTime input for system-generated verification timestamps that cannot be modified by users. This ensures data integrity in the audit trail for regulatory compliance."
}
}
};