kwikid-components-react
Version:
KwikID's Component Library in React
506 lines (495 loc) • 17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithValidation = exports.WithAffixes = exports.Uppercase = exports.Small = exports.Required = exports.Lowercase = exports.Large = exports.Disabled = exports.Default = exports.CopyPasteDisabled = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputText = _interopRequireDefault(require("./InputText"));
var _InputText2 = require("./InputText.constants");
var _InputText3 = require("./InputText.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); }
/**
* The InputText component is a form control that allows users to enter and edit text.
* It supports various customization options including different shapes, sizes, and text transformations.
* In the KwikID platform, InputText is frequently used for collecting customer information during identity
* verification and KYC processes, including Aadhaar numbers, PAN details, and contact information.
*
* ## Usage
*
* ```jsx
* import { KwikUIInputText } from 'react-kwikui';
*
* const [value, setValue] = React.useState('');
*
* const handleInput = (id, newValue) => {
* setValue(newValue);
* };
*
* <KwikUIInputText
* id="my-input"
* label="Username"
* value={value}
* onInput={handleInput}
* placeholder="Enter your username"
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Inputs/Text",
component: _InputText.default,
parameters: {
componentSubtitle: "A text input field for collecting user identity information",
docs: {
description: {
component: "The InputText component provides a customizable text input with support for validation and formatting, essential for capturing customer information during VideoKYC and identity verification processes in compliance with RBI and UIDAI guidelines. Used extensively throughout the KwikID platform for capturing identity details including Aadhaar, PAN, and address information."
}
},
a11y: {
config: {
rules: [{
id: "label",
enabled: true
}]
}
}
},
argTypes: {
textCase: {
control: "radio",
options: _InputText2.KWIKUI_INPUT_TEXT__TEXT_CASE__OPTIONS,
description: "Controls the text transformation (uppercase, lowercase, or default)",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.textCase
}
}
},
shape: {
control: "radio",
options: _InputText2.KWIKUI_INPUT_TEXT__SHAPE__OPTIONS,
description: "The shape of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _InputText2.KWIKUI_INPUT_TEXT__SIZE__OPTIONS,
description: "The size of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.size
}
}
},
updateOn: {
control: "radio",
options: _InputText2.KWIKUI_INPUT_TEXT__UPDATE_ON__OPTIONS,
description: "When to trigger the onInput callback (on change or on blur)",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.updateOn
}
}
},
value: {
control: "text",
description: "Current value of the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.value
}
}
},
label: {
control: "text",
description: "Label for the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.label
}
}
},
placeholder: {
control: "text",
description: "Placeholder text for the input field",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.placeholder
}
}
},
prefix: {
control: "text",
description: "Prefix to display before the input value",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.prefix
}
}
},
postfix: {
control: "text",
description: "Postfix to display after the input value",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.postfix
}
}
},
disabled: {
control: "boolean",
description: "Whether the input is disabled",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.disabled
}
}
},
required: {
control: "boolean",
description: "Whether the input is required",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.required
}
}
},
isInputCopyDisabled: {
control: "boolean",
description: "Disable copying from the input",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.isInputCopyDisabled
}
}
},
isInputPasteDisabled: {
control: "boolean",
description: "Disable pasting into the input",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS.isInputPasteDisabled
}
}
},
id: {
control: "text",
description: "The ID of the input component",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _InputText3.KWIKUI_INPUT_TEXT__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: {}, prefix: {}, postfix: {} }"
}
}
},
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: string) => void"
}
}
},
onInputValidate: {
description: "Function to validate input value",
table: {
type: {
summary: "(id: string, value: string) => { isValid: boolean } | undefined | null"
}
}
},
onInputCopyDisabled: {
description: "Function called when copy is attempted but disabled",
table: {
type: {
summary: "() => void"
}
}
},
onInputPasteDisabled: {
description: "Function called when paste is attempted but disabled",
table: {
type: {
summary: "() => void"
}
}
}
}
};
/**
* Template for the InputText component
*/
const Template = args => {
const [value, setValue] = _react.default.useState(args.value || "");
const onChangeInput = (id, inputValue) => {
setValue(inputValue);
};
return /*#__PURE__*/_react.default.createElement(_InputText.default, _extends({}, args, {
value: value,
onInput: onChangeInput
}));
};
/**
* Default text input for customer name entry
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "customer-name",
label: "Full Name (as per Aadhaar)",
placeholder: "Enter full name exactly as it appears on Aadhaar card",
value: ""
});
Default.parameters = {
docs: {
description: {
story: "Default text input used for capturing the customer's full name during KYC registration in the KwikID platform. The name must exactly match the customer's Aadhaar card as per UIDAI guidelines for successful verification."
}
}
};
/**
* Required input field for essential KYC information
*/
const Required = exports.Required = Template.bind({});
Required.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "email-input",
label: "Email Address",
placeholder: "name@gmail.com",
value: "",
required: true
});
Required.parameters = {
docs: {
description: {
story: "Required email field for KYC communication and profile creation in the Think360.AI KwikID platform. RBI guidelines mandate collecting a valid email for sending verification links and digital KYC completion certificates after successful VideoKYC."
}
}
};
/**
* Disabled input field for pre-verified information
*/
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "aadhaar-verified-name",
label: "Aadhaar Verified Name (Non-editable)",
placeholder: "Name will be auto-populated after verification",
value: "Baiju Dodhia",
disabled: true
});
Disabled.parameters = {
docs: {
description: {
story: "Disabled input field showing customer information that has been verified through Aadhaar and cannot be manually edited. This ensures the integrity of KYC data by preventing modifications to officially verified identity information retrieved through the UIDAI database."
}
}
};
/**
* Input with validation for government ID
*/
const WithValidation = exports.WithValidation = Template.bind({});
WithValidation.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "voter-id-input",
label: "Voter ID Number",
placeholder: "Enter 10-character Voter ID",
value: "",
onInputValidate: (id, value) => {
// Example validation for Voter ID format in India (begins with letters, followed by numbers)
const voterIdRegex = /^[A-Z]{3}[0-9]{7}$/;
return {
isValid: voterIdRegex.test(value)
};
},
messages: [{
type: "info",
message: "Voter ID should follow the format AAA1234567"
}]
});
WithValidation.parameters = {
docs: {
description: {
story: "Input with real-time validation for Voter ID format. The component validates the input against the standard format required by the Election Commission of India. Voter ID is an acceptable alternative identity document for VideoKYC as per RBI guidelines."
}
}
};
/**
* Input with prefix and postfix for Indian financial context
*/
const WithAffixes = exports.WithAffixes = Template.bind({});
WithAffixes.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "loan-amount-input",
label: "Loan Amount (in ₹)",
placeholder: "Enter loan amount",
value: "",
prefix: "₹",
postfix: "/-"
});
WithAffixes.parameters = {
docs: {
description: {
story: "Input with prefix and postfix elements for entering financial amounts in Indian Rupees. Used in KwikID's loan management module for capturing financial information during loan application KYC process. The Indian Rupee symbol (₹) prefix and /- postfix follow the standard notation for financial documents in India."
}
}
};
/**
* Uppercase input for various government IDs
*/
const Uppercase = exports.Uppercase = Template.bind({});
Uppercase.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "driving-license-input",
label: "Driving License Number",
placeholder: "e.g., MH0220210012345",
value: "",
textCase: "upper"
});
Uppercase.parameters = {
docs: {
description: {
story: "Input that automatically converts text to uppercase for consistent entry of government IDs like Driving Licenses. Driving License is an acceptable identity proof for VideoKYC as per RBI guidelines. The format shown is for Maharashtra (MH)."
}
}
};
/**
* Lowercase input for online identifiers
*/
const Lowercase = exports.Lowercase = Template.bind({});
Lowercase.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "upi-id-input",
label: "UPI ID",
placeholder: "yourname@upi",
value: "",
textCase: "lower"
});
Lowercase.parameters = {
docs: {
description: {
story: "Input that automatically converts text to lowercase for UPI ID entry. UPI ID is increasingly used for financial verification and payment linking during the KYC process with banks and payment platforms in India."
}
}
};
/**
* Small input size for compact forms
*/
const Small = exports.Small = Template.bind({});
Small.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "otp-reference-input",
label: "OTP Reference ID",
placeholder: "Enter reference ID from SMS",
value: "",
size: "s"
});
Small.parameters = {
docs: {
description: {
story: "Small input field for compact form elements such as reference IDs. This compact size is useful in mobile-responsive KYC forms where screen space is limited but verification data must still be collected."
}
}
};
/**
* Large input size for greater visibility
*/
const Large = exports.Large = Template.bind({});
Large.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "virtual-account-input",
label: "Virtual Account Number",
placeholder: "Enter 16-digit virtual account number",
value: "",
size: "l"
});
Large.parameters = {
docs: {
description: {
story: "Large input field for better visibility of important financial information like account numbers. Used in bank account verification steps of the KYC process, where visual clarity is important for both customers and KYC officers reviewing the information."
}
}
};
/**
* Input with copy/paste disabled for secure information
*/
const CopyPasteDisabled = exports.CopyPasteDisabled = Template.bind({});
CopyPasteDisabled.args = _objectSpread(_objectSpread({}, _InputText3.KWIKUI_INPUT_TEXT__DEFAULTS), {}, {
id: "secure-input",
label: "Biometric Reference Number (BRN)",
placeholder: "Enter BRN provided during Aadhaar enrollment",
value: "92314765X0",
isInputCopyDisabled: true,
isInputPasteDisabled: true
});
CopyPasteDisabled.parameters = {
docs: {
description: {
story: "Input with copy and paste functionality disabled for sensitive biometric reference information. As per UIDAI security guidelines, certain sensitive information should be protected against copy/paste to prevent data leakage during the KYC process."
}
}
};