kwikid-components-react
Version:
KwikID's Component Library in React
435 lines (419 loc) • 15.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Sizes = exports.Shapes = exports.Required = exports.LongLabel = exports.Default = exports.ConsentGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../../button/Button"));
var _InputCheckbox = _interopRequireDefault(require("./InputCheckbox"));
var _InputCheckbox2 = require("./InputCheckbox.constants");
var _InputCheckbox3 = require("./InputCheckbox.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); }
/**
* KwikUI Input Checkbox Component
*
* The KwikUIInputCheckbox component represents a checkbox input for boolean selections.
* It is commonly used in VideoKYC journeys for regulatory compliance and customer consent.
*
* <KwikUIInputCheckbox
* id="consent-checkbox"
* placeholder="I agree to proceed with VideoKYC"
* value={false}
* onInput={(id, value) => console.log(id, value)}
* required
* />
*/
var _default = exports.default = {
title: "KwikUI/Inputs/Checkbox",
component: _InputCheckbox.default,
parameters: {
docs: {
description: {
component: "\n ## KwikUI Checkbox Input\n\n The checkbox input component is used for boolean selections, typically for obtaining customer consent during the VideoKYC process.\n It adheres to regulatory guidelines from RBI and UIDAI for digital consent capture.\n\n ### Use Cases\n - Capturing customer consent for terms and conditions\n - Confirming data accuracy in KYC forms\n - Obtaining consent for biometric verification\n - Regulatory compliance checkpoints in the VideoKYC journey\n "
}
}
},
argTypes: {
shape: {
control: {
type: "radio"
},
options: _InputCheckbox2.KWIKUI_INPUT_CHECKBOX__SHAPE__OPTIONS,
description: "Controls the visual shape of the checkbox"
},
size: {
control: {
type: "radio"
},
options: _InputCheckbox2.KWIKUI_INPUT_CHECKBOX__SIZE__OPTIONS,
description: "Controls the size of the checkbox"
},
value: {
control: {
type: "boolean"
},
description: "The checked state of the checkbox"
},
placeholder: {
control: {
type: "text"
},
description: "Text label displayed next to the checkbox"
},
disabled: {
control: {
type: "boolean"
},
description: "Whether the checkbox is disabled"
},
required: {
control: {
type: "boolean"
},
description: "Whether the checkbox is required"
}
}
};
const Template = args => {
const {
value: localValue,
onInput
} = args;
const [value, setValue] = _react.default.useState(localValue || false);
_react.default.useEffect(() => {
// Update local state when localValue changes
if (localValue !== undefined) {
setValue(localValue);
}
}, [localValue]);
const handleInput = (id, newValue) => {
setValue(newValue);
if (onInput) {
onInput(id, newValue);
}
};
return /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, _extends({}, args, {
value: value,
onInput: handleInput
}));
};
/**
* Default Checkbox
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
id: "default-checkbox",
placeholder: "I consent to digital verification of my identity for KYC",
required: false
});
Default.parameters = {
docs: {
description: {
story: "Default checkbox configuration, typically used for consent capture during VideoKYC."
}
}
};
/**
* Required checkbox
*/
const Required = args => {
const {
id: localId,
placeholder: localPlaceholder
} = args;
const [value, setValue] = _react.default.useState(false);
const [attemptedSubmit, setAttemptedSubmit] = _react.default.useState(false);
const handleInput = (id, newValue) => {
setValue(newValue);
};
// Merge incoming args with defaults
const mergedArgs = _objectSpread(_objectSpread({}, args), {}, {
id: localId || "checkbox-required",
placeholder: localPlaceholder || "I consent to digital KYC verification of my identity as per RBI guidelines",
value,
onInput: handleInput,
required: true,
messages: attemptedSubmit && !value ? [{
type: "error",
message: "This field is required for KYC"
}] : []
});
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Required checkboxes are used for mandatory consents in KYC:"), /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, mergedArgs), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "20px"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
onClick: () => setAttemptedSubmit(true),
customStyles: {
backgroundColor: "#1976D2",
color: "white"
}
}, "Submit")));
};
exports.Required = Required;
Required.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
shape: "curved",
size: "m"
});
Required.parameters = {
docs: {
description: {
story: "Required checkbox used for mandatory regulatory consents."
}
}
};
/**
* Checkbox with different shapes
*/
const Shapes = args => {
const {
placeholder: localPlaceholder,
value: localValue
} = args;
const [shapeValues, setShapeValues] = _react.default.useState({
rectangular: false,
curved: false,
rounded: false
});
// Add useEffect to update local state when localValue changes
_react.default.useEffect(() => {
if (localValue !== undefined) {
setShapeValues({
rectangular: localValue,
curved: localValue,
rounded: localValue
});
}
}, [localValue]);
const handleInput = (id, newValue) => {
setShapeValues(prev => _objectSpread(_objectSpread({}, prev), {}, {
[id.replace("checkbox-shape-", "")]: newValue
}));
};
// Get shape values, either from args or local state
const shapes = ["rectangular", "curved", "rounded"];
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, shapes.map(shape => {
// Merge incoming args with shape-specific settings
const checkboxArgs = _objectSpread(_objectSpread({}, args), {}, {
id: "checkbox-shape-".concat(shape),
placeholder: localPlaceholder || "".concat(shape.charAt(0).toUpperCase() + shape.slice(1), " checkbox for consent capture"),
shape: shape,
value: shapeValues[shape],
onInput: handleInput
});
return /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, _extends({
key: shape
}, checkboxArgs));
}));
};
exports.Shapes = Shapes;
Shapes.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
size: "m"
});
Shapes.parameters = {
docs: {
description: {
story: "Different shapes of checkboxes available in the KwikUI design system."
}
}
};
/**
* Checkbox with different sizes
*/
const Sizes = args => {
const {
placeholder: localPlaceholder,
value: localValue
} = args;
const [sizeValues, setSizeValues] = _react.default.useState({
s: false,
m: false,
l: false,
xl: false
});
// Add useEffect to update local state when localValue changes
_react.default.useEffect(() => {
if (localValue !== undefined) {
setSizeValues({
s: localValue,
m: localValue,
l: localValue,
xl: localValue
});
}
}, [localValue]);
const handleInput = (id, newValue) => {
setSizeValues(prev => _objectSpread(_objectSpread({}, prev), {}, {
[id.replace("checkbox-size-", "")]: newValue
}));
};
// Get size values, either from args or local state
const sizes = ["s", "m", "l", "xl"];
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, sizes.map(size => {
// Merge incoming args with size-specific settings
const checkboxArgs = _objectSpread(_objectSpread({}, args), {}, {
id: "checkbox-size-".concat(size),
placeholder: localPlaceholder || "Size ".concat(size.toUpperCase(), " checkbox for KYC consent"),
size: size,
value: sizeValues[size],
onInput: handleInput
});
return /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, _extends({
key: size
}, checkboxArgs));
}));
};
exports.Sizes = Sizes;
Sizes.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
shape: "curved"
});
Sizes.parameters = {
docs: {
description: {
story: "Different sizes of checkboxes available in the KwikUI design system for various user interface needs."
}
}
};
/**
* Checkbox with long label
*/
const LongLabel = args => {
const {
id: localId,
placeholder: localPlaceholder
} = args;
const [value, setValue] = _react.default.useState(false);
const handleInput = (id, newValue) => {
setValue(newValue);
};
// Merge incoming args with defaults
const mergedArgs = _objectSpread(_objectSpread({}, args), {}, {
id: localId || "checkbox-long-label",
placeholder: localPlaceholder || "I hereby acknowledge and accept that by proceeding with this VideoKYC process, my personal data including biometric information will be processed in accordance with the Think360.AI Privacy Policy and applicable RBI and UIDAI guidelines. This data may be shared with relevant financial institutions and government authorities as required by law for the purpose of identity verification and prevention of fraud. I understand that this consent is required to proceed with my application for financial services through KwikID.",
value,
onInput: handleInput
});
return /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, mergedArgs);
};
exports.LongLabel = LongLabel;
LongLabel.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
shape: "curved",
size: "m"
});
LongLabel.parameters = {
docs: {
description: {
story: "Checkbox with a long label, typically used for detailed regulatory consents or terms and conditions."
}
}
};
/**
* Group of related consents
*/
const ConsentGroup = args => {
// Define consent state object
const [consents, setConsents] = _react.default.useState({
dataProcessing: false,
marketing: false,
biometric: false,
communication: false
});
// Handle consent changes
const handleConsentChange = (id, value) => {
setConsents(prev => _objectSpread(_objectSpread({}, prev), {}, {
[id]: value
}));
};
// Define consent options
const CONSENT_OPTIONS = [{
id: "dataProcessing",
placeholder: "I consent to my data being processed for KYC verification purposes",
required: true
}, {
id: "biometric",
placeholder: "I consent to biometric verification of my identity through facial recognition",
required: true
}, {
id: "communication",
placeholder: "I agree to receive updates about my verification status via SMS and email",
required: false
}, {
id: "marketing",
placeholder: "I would like to receive information about other services from Think360.AI",
required: false
}];
const areRequiredConsentsChecked = Object.entries(consents).filter(_ref => {
let [key] = _ref;
const option = CONSENT_OPTIONS.find(opt => opt.id === key);
return option === null || option === void 0 ? void 0 : option.required;
}).every(_ref2 => {
let [, value] = _ref2;
return value;
});
// Merge incoming args with defaults
const mergedArgs = _objectSpread(_objectSpread({}, args), {}, {
onInput: handleConsentChange
});
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "Customer Consent Form"), /*#__PURE__*/_react.default.createElement("p", {
style: {
color: "#666",
marginBottom: "1rem"
}
}, "Please review and consent to the following terms to proceed with your KYC verification"), CONSENT_OPTIONS.map(option => /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, _extends({
key: option.id
}, mergedArgs, {
id: option.id,
placeholder: option.placeholder,
value: consents[option.id],
required: option.required
}))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "1.5rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
disabled: !areRequiredConsentsChecked,
customStyles: {
backgroundColor: areRequiredConsentsChecked ? "#4285F4" : "#cccccc",
color: "white",
cursor: areRequiredConsentsChecked ? "pointer" : "not-allowed"
},
appearance: "primary"
}, "Continue")));
};
exports.ConsentGroup = ConsentGroup;
ConsentGroup.args = _objectSpread(_objectSpread({}, _InputCheckbox3.KWIKUI_INPUT_CHECKBOX__DEFAULTS), {}, {
shape: "curved",
size: "m"
});
ConsentGroup.parameters = {
docs: {
description: {
story: "A group of related consent checkboxes that work together, commonly used in VideoKYC flows to capture various regulatory and optional consents."
}
}
};