kwikid-components-react
Version:
KwikID's Component Library in React
717 lines (694 loc) • 22.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithValidation = exports.Sizes = exports.Shapes = exports.DifferentLengths = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputOtp = _interopRequireDefault(require("./InputOtp"));
var _InputOtp2 = require("./InputOtp.constants");
var _InputOtp3 = require("./InputOtp.defaults");
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); } // InputOtp.stories.tsx
/**
* The InputOtp component is used for One-Time Password (OTP) inputs, commonly used in
* authentication flows that require verification codes sent via SMS or email.
*
* ## Usage
*
* ```jsx
* import { KwikUIInputOtp } from 'react-kwikui';
*
* const [otpValue, setOtpValue] = useState('');
*
* const handleOtpChange = (id, value) => {
* setOtpValue(value);
* };
*
* <KwikUIInputOtp
* id="verification-code"
* label="Enter OTP"
* length={6}
* value={otpValue}
* onInput={handleOtpChange}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Inputs/OTP Input",
component: _InputOtp.default,
parameters: {
componentSubtitle: "Input field for one-time passwords and verification codes",
docs: {
description: {
component: "The OTP Input component provides a specialized input for verification codes, with separate fields for each character and support for different input modes. In Indian FinTech applications, OTP inputs are crucial for Aadhaar verification (as per UIDAI guidelines), mobile number verification (as per RBI guidelines), and secure banking transactions. Think360.AI's KwikID platform uses OTP verification at multiple stages of the KYC process."
}
},
a11y: {
config: {
rules: [{
id: "label-content",
enabled: true
}]
}
}
},
argTypes: {
otpLength: {
control: {
type: "number",
min: 1,
max: 12
},
description: "Length of the OTP code",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.otpLength
}
}
},
shape: {
control: "radio",
options: _InputOtp2.KWIKUI_INPUT_OTP__SHAPE__OPTIONS,
description: "Shape of the input fields",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _InputOtp2.KWIKUI_INPUT_OTP__SIZE__OPTIONS,
description: "Size of the input fields",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.size
}
}
},
updateOn: {
control: "radio",
options: _InputOtp2.KWIKUI_INPUT_OTP__UPDATE_ON__OPTIONS,
description: "When to trigger the input event",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.updateOn
}
}
},
mode: {
control: "radio",
options: _InputOtp2.KWIKUI_INPUT_OTP__MODE__OPTIONS,
description: "Input mode (single input or multiple fields)",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.mode
}
}
},
value: {
control: "text",
description: "Current value of the OTP input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.value
}
}
},
label: {
control: "text",
description: "Label text for the input",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.label
}
}
},
placeholder: {
control: "text",
description: "Placeholder text for the input fields",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.placeholder
}
}
},
disabled: {
control: "boolean",
description: "Whether the input is disabled",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.disabled
}
}
},
required: {
control: "boolean",
description: "Whether the input is required",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.required
}
}
},
isInputCopyDisabled: {
control: "boolean",
description: "Disable copying from the input",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.isInputCopyDisabled
}
}
},
isInputPasteDisabled: {
control: "boolean",
description: "Disable pasting into the input",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.isInputPasteDisabled
}
}
},
id: {
control: "text",
description: "The ID of the input component",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS.id
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to different parts of the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ wrapper: {}, container: {}, label: {}, input: {} }"
}
}
},
messages: {
description: "Array of message objects to display (error, info, etc.)",
table: {
type: {
summary: "Array<IKwikUIMessage>"
},
defaultValue: {
summary: "[]"
}
}
},
onInput: {
description: "Function called when input value changes",
table: {
type: {
summary: "(id: string, value: any) => void"
}
}
},
onInputValidate: {
description: "Function to validate input value",
table: {
type: {
summary: "(id: string, value: any) => { isValid: boolean } | undefined | null"
}
}
},
onInputCopyDisabled: {
description: "Function called when copy is attempted on a disabled input",
table: {
type: {
summary: "() => void"
}
}
},
onInputPasteDisabled: {
description: "Function called when paste is attempted on a disabled input",
table: {
type: {
summary: "() => void"
}
}
}
}
};
const Template = args => {
// Destructure necessary props
const {
value: initialValue
} = args;
const [localValue, setLocalValue] = _react.default.useState(initialValue || "");
// Handle input change
const onChangeInput = (id, value) => {
setLocalValue(value);
};
// Validate OTP
const onChangeInputValidate = (id, value) => {
// Define constant for expected OTP length
const EXPECTED_OTP_LENGTH = 6;
return {
isValid: value.length === EXPECTED_OTP_LENGTH
};
};
// Handle copy/paste disabled events
const onCopyDisabled = () => {
console.log("Copy is disabled for security purposes");
};
const onPasteDisabled = () => {
console.log("Paste is disabled for security purposes");
};
return /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
onInput: onChangeInput,
onInputValidate: onChangeInputValidate,
value: localValue,
onInputCopyDisabled: onCopyDisabled,
onInputPasteDisabled: onPasteDisabled
}));
};
/**
* Default implementation
*/
const Default = exports.Default = Template.bind({});
Default.args = {
..._InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS,
label: "Enter the 6-digit OTP sent to your registered mobile number +91 98765-43210",
placeholder: "*"
};
Default.parameters = {
docs: {
description: {
story: "Default OTP input for mobile verification during KwikID customer onboarding. Shows a 6-digit OTP input commonly used for verifying mobile numbers in Indian FinTech applications as required by RBI guidelines for VideoKYC process. The 6-digit format follows telecom regulatory standards in India."
}
}
};
/**
* Example showing OTP inputs with different lengths
*/
const DifferentLengths = args => {
// Destructure args for eslint
const {
value: initialValue,
label: commonLabel,
placeholder: commonPlaceholder,
onInput
} = args;
// Independent state for each OTP length to prevent focus issues
const [aadhaarOtpValue, setAadhaarOtpValue] = _react.default.useState(initialValue || "");
const [mobileOtpValue, setMobileOtpValue] = _react.default.useState(initialValue || "");
const [transactionOtpValue, setTransactionOtpValue] = _react.default.useState(initialValue || "");
// Independent handlers for each OTP field
const handleAadhaarOtpChange = (id, value) => {
setAadhaarOtpValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleMobileOtpChange = (id, value) => {
setMobileOtpValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleTransactionOtpChange = (id, value) => {
setTransactionOtpValue(value);
if (onInput) {
onInput(id, value);
}
};
// Define constants for magic numbers
const AADHAAR_OTP_LENGTH = 4;
const MOBILE_OTP_LENGTH = 6;
const TRANSACTION_OTP_LENGTH = 8;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("div", {
key: "aadhaar-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "aadhaar-otp",
id: "aadhaarOtp",
label: commonLabel || "Enter 4-digit Aadhaar OTP sent to your registered mobile number",
otpLength: AADHAAR_OTP_LENGTH,
value: aadhaarOtpValue,
onInput: handleAadhaarOtpChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "mobile-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "mobile-otp",
id: "mobileOtp",
label: commonLabel || "Enter 6-digit Mobile Verification OTP for VideoKYC",
otpLength: MOBILE_OTP_LENGTH,
value: mobileOtpValue,
onInput: handleMobileOtpChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "transaction-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "transaction-otp",
id: "transactionOtp",
label: commonLabel || "Enter 8-digit High-Security Transaction OTP for bank account linking",
otpLength: TRANSACTION_OTP_LENGTH,
value: transactionOtpValue,
onInput: handleTransactionOtpChange,
placeholder: commonPlaceholder || "*"
}))));
};
exports.DifferentLengths = DifferentLengths;
DifferentLengths.args = {
..._InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS,
value: "",
placeholder: "*"
};
DifferentLengths.parameters = {
docs: {
description: {
story: "Different OTP lengths used in the KwikID FinTech ecosystem: 4-digit for Aadhaar verification (as per UIDAI specifications), 6-digit for standard mobile verification (RBI compliant), and 8-digit for high-security financial transactions like bank account linking. Each format follows specific regulatory requirements in the Indian financial ecosystem."
}
}
};
/**
* Example showing OTP inputs with different shapes
*/
const Shapes = args => {
// Destructure args for eslint
const {
value: initialValue,
otpLength: initialOtpLength,
label: commonLabel,
placeholder: commonPlaceholder,
onInput
} = args;
// Local state for multiple OTP inputs with different shapes - each fully independent
const [defaultShapeValue, setDefaultShapeValue] = _react.default.useState(initialValue || "");
const [roundedShapeValue, setRoundedShapeValue] = _react.default.useState(initialValue || "");
const [circularShapeValue, setCircularShapeValue] = _react.default.useState(initialValue || "");
// Independent handler for each shape type to prevent focus issues
const handleDefaultShapeChange = (id, value) => {
setDefaultShapeValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleRoundedShapeChange = (id, value) => {
setRoundedShapeValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleCircularShapeChange = (id, value) => {
setCircularShapeValue(value);
if (onInput) {
onInput(id, value);
}
};
// Define constants for magic numbers
const DEFAULT_OTP_LENGTH = 6;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("div", {
key: "rectangle-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "rectangle-otp",
id: "defaultShape",
label: commonLabel || "PAN Verification OTP (Default Shape)",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
shape: "rectangle" // Using valid shape value from TKwikUIInputOtpShape
,
value: defaultShapeValue,
onInput: handleDefaultShapeChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "rounded-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "rounded-otp",
id: "roundedShape",
label: commonLabel || "Aadhaar Verification OTP (Rounded Shape)",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
shape: "rounded",
value: roundedShapeValue,
onInput: handleRoundedShapeChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "curved-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "curved-otp",
id: "curvedShape" // Changed from circularShape
,
label: commonLabel || "UPI Transaction OTP (Curved Shape)",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
shape: "curved" // Using valid shape value from TKwikUIInputOtpShape
,
value: circularShapeValue,
onInput: handleCircularShapeChange,
placeholder: commonPlaceholder || "*"
}))));
};
exports.Shapes = Shapes;
Shapes.args = {
..._InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS,
value: "",
otpLength: 6,
placeholder: "*"
};
Shapes.parameters = {
docs: {
description: {
story: "Different OTP input shapes designed for Think360.AI's KwikID platform, showing various styles used across different verification workflows in the VideoKYC process. Different shapes can help users distinguish between critical security verifications (like Aadhaar) and standard verifications in the user journey."
}
}
};
/**
* Example showing OTP inputs with different sizes
*/
const Sizes = args => {
// Destructure args for eslint
const {
value: initialValue,
otpLength: initialOtpLength,
label: commonLabel,
placeholder: commonPlaceholder,
onInput
} = args;
// Independent state for each size to prevent focus issues
const [smallSizeValue, setSmallSizeValue] = _react.default.useState(initialValue || "");
const [mediumSizeValue, setMediumSizeValue] = _react.default.useState(initialValue || "");
const [largeSizeValue, setLargeSizeValue] = _react.default.useState(initialValue || "");
const [xlargeSizeValue, setXlargeSizeValue] = _react.default.useState(initialValue || "");
// Independent handlers for each size
const handleSmallSizeChange = (id, value) => {
setSmallSizeValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleMediumSizeChange = (id, value) => {
setMediumSizeValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleLargeSizeChange = (id, value) => {
setLargeSizeValue(value);
if (onInput) {
onInput(id, value);
}
};
const handleXlargeSizeChange = (id, value) => {
setXlargeSizeValue(value);
if (onInput) {
onInput(id, value);
}
};
// Define constants for magic numbers
const DEFAULT_OTP_LENGTH = 6;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement("div", {
key: "small-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "small-size-otp",
id: "small-size-otp",
label: commonLabel || "Small OTP Input for KwikID Mobile App View",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
size: "s",
value: smallSizeValue,
onInput: handleSmallSizeChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "medium-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "medium-size-otp",
id: "medium-size-otp",
label: commonLabel || "Medium OTP Input for Standard Web KYC Portal",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
size: "m",
value: mediumSizeValue,
onInput: handleMediumSizeChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "large-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "large-size-otp",
id: "largeSize",
label: commonLabel || "Large OTP Input for Bank Branch Tablet Applications",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
size: "l",
value: largeSizeValue,
onInput: handleLargeSizeChange,
placeholder: commonPlaceholder || "*"
}))), /*#__PURE__*/_react.default.createElement("div", {
key: "xlarge-container"
}, /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
key: "xlarge-size-otp",
id: "xlargeSize",
label: commonLabel || "Extra Large OTP Input for Bank Branch Kiosk Verification",
otpLength: initialOtpLength || DEFAULT_OTP_LENGTH,
size: "xl",
value: xlargeSizeValue,
onInput: handleXlargeSizeChange,
placeholder: commonPlaceholder || "*"
}))));
};
exports.Sizes = Sizes;
Sizes.args = {
..._InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS,
value: "",
otpLength: 6,
placeholder: "*"
};
Sizes.parameters = {
docs: {
description: {
story: "Different OTP input sizes used across various devices in the KwikID VideoKYC platform. The size variants support responsive design for mobile apps (used by field agents), standard web interfaces (customer portal), tablet optimized views (used by bank officers), and public kiosk interfaces used in bank branches across Mumbai and other Indian metro cities."
}
}
};
/**
* Example with validation for Aadhaar OTP
*/
const WithValidation = args => {
// Destructure args for eslint
const {
value: initialValue,
otpLength: initialOtpLength,
label: commonLabel,
placeholder: commonPlaceholder,
onInput,
required: isRequired
} = args;
// State for OTP value and validation messages
const [otpValue, setOtpValue] = _react.default.useState(initialValue || "");
const [messages, setMessages] = _react.default.useState([]);
// Define constants for magic numbers
const VALID_OTP_LENGTH = 6;
const DEMO_VALID_OTP = "123456";
// OTP validation function
const validateOtp = (id, inputValue) => {
setOtpValue(inputValue);
if (inputValue.length < VALID_OTP_LENGTH) {
setMessages([]);
return;
}
// For demo purposes - in a real app this would validate against actual Aadhaar OTP requirements
if (inputValue === DEMO_VALID_OTP) {
setMessages([{
id: "otp-success",
type: "success",
message: "Aadhaar verification successful. Proceeding to VideoKYC session setup."
}]);
} else {
setMessages([{
id: "otp-error",
type: "error",
message: "Invalid OTP. Please check the OTP sent by UIDAI to your registered mobile and try again. You have 2 attempts remaining."
}]);
}
// Call original onInput if provided
if (onInput) {
onInput(id, inputValue);
}
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
style: {
marginBottom: "1rem",
color: "#666"
}
}, "Enter \"", DEMO_VALID_OTP, "\" to see a successful validation message."), /*#__PURE__*/_react.default.createElement(_InputOtp.default, _extends({}, args, {
id: "aadhaar-validation-otp",
label: commonLabel || "Enter the 6-digit OTP sent by UIDAI to your registered mobile number for Aadhaar verification",
otpLength: initialOtpLength || VALID_OTP_LENGTH,
value: otpValue,
onInput: validateOtp,
messages: messages,
placeholder: commonPlaceholder || "*",
required: isRequired !== undefined ? isRequired : true
})));
};
exports.WithValidation = WithValidation;
WithValidation.args = {
..._InputOtp3.KWIKUI_INPUT_OTP__DEFAULTS,
value: "",
otpLength: 6,
placeholder: "*"
};
WithValidation.parameters = {
docs: {
description: {
story: "Validation example showing OTP verification for Aadhaar authentication in the KwikID VideoKYC flow. The component validates the OTP against UIDAI requirements and displays appropriate success or error messages. This complies with UIDAI guidelines for Aadhaar authentication in the KYC process. For demonstration, enter '123456' to see a successful validation."
}
}
};