kwikid-components-react
Version:
KwikID's Component Library in React
773 lines (763 loc) • 20.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithTooltips = exports.VideoKYCDashboard = exports.HorizontalOrientation = exports.FilteredDataTypes = exports.Default = exports.CustomTextCase = exports.CustomStyling = void 0;
var _react = _interopRequireDefault(require("react"));
var _LabelValuePairs = _interopRequireDefault(require("./LabelValuePairs"));
var _LabelValuePairs2 = require("./LabelValuePairs.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); }
var _default = exports.default = {
title: "KwikUI/Display/LabelValuePairs",
component: _LabelValuePairs.default,
parameters: {
componentSubtitle: "Display structured data in labeled pairs",
docs: {
description: {
component: "The Label-Value Pairs component provides a consistent way to display data as label-value combinations with various formatting options."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
data: {
control: "object",
description: "Array of data objects to display with key, label, value, and type properties",
table: {
type: {
summary: "Array<{key: string, label: string, value: any, type: string}>"
}
}
},
config: {
control: "object",
description: "Configuration for display options including text case, orientation, and tooltip settings",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ case: { label: 'default', value: 'default' }, orientation: 'vertical', tooltip: { show: false } }"
}
}
},
placeholder: {
description: "Content to display when no data is available or a particular value is empty",
table: {
type: {
summary: "ReactNode"
}
}
},
customStyles: {
control: "object",
description: "Custom styles for different parts of the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ label: {}, value: {}, placeholder: {}, container: {} }"
}
}
}
}
};
/**
* Template for rendering the LabelValuePairs component
*/
const Template = args => {
const {
placeholder: placeholderArg,
data: dataArg
} = args;
const defaultPlaceholder = /*#__PURE__*/_react.default.createElement("span", {
style: {
width: "100px",
height: "1rem",
backgroundColor: "#e7e7e7",
borderRadius: "0.25rem"
}
});
// JSON formatting space parameter
const JSON_INDENT_SPACES = 2;
// Comprehensive data set showing all possible data types and edge cases
const DATA = [
// Boolean Values
{
key: "boolean_falsy",
label: "Boolean False",
value: false,
type: "boolean"
}, {
key: "boolean_truthy",
label: "Boolean True",
value: true,
type: "boolean"
},
// Text Values
{
key: "text_char",
label: "Single Character",
value: "Y",
type: "text"
}, {
key: "text_date",
label: "Date String",
value: "2023-12-01T14:19:10.766+05:30",
type: "text"
}, {
key: "text_formatted",
label: "Formatted Text",
value: "<strong>Bold Text</strong> and <em>Italic Text</em>",
type: "text"
}, {
key: "text_large",
label: "Long Text",
value: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
type: "text"
}, {
key: "text_multiline",
label: "Multiline Text",
value: "First line\nSecond line\nThird line",
type: "text"
}, {
key: "text_number",
label: "Number",
value: 200,
type: "text"
}, {
key: "text_price",
label: "Price",
value: "$1,299.99",
type: "text"
}, {
key: "text_special_chars",
label: "Special Characters",
value: "!@#$%^&*()_+-=[]{}|;':\",./<>?",
type: "text"
}, {
key: "text_spaces",
label: "Whitespace",
value: " ",
type: "text"
}, {
key: "text_url",
label: "URL Text",
value: "https://www.example.com",
type: "text"
},
// Media Content
{
key: "image_base64",
label: "Image (Base64)",
value: "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=",
type: "image"
}, {
key: "image_url",
label: "Image URL",
value: "https://picsum.photos/200/200",
type: "image"
}, {
key: "incorrect_image_url",
label: "Broken Image URL",
value: "https://fastly.picsum.photos/id/433/200/200.jpg?hmac=dBn6DDBngO",
type: "image"
}, {
key: "video_url",
label: "Video URL",
value: "https://www.example.com/video.mp4",
type: "video"
},
// Document Types
{
key: "pdf_url",
label: "PDF Document",
value: "https://www.africau.edu/images/default/sample.pdf",
type: "pdf"
}, {
key: "doc_url",
label: "Word Document",
value: "https://file-examples.com/wp-content/storage/2017/02/file-sample_100kB.doc",
type: "doc"
}, {
key: "excel_url",
label: "Excel Spreadsheet",
value: "https://file-examples.com/wp-content/uploads/2017/02/file_example_XLS_10.xls",
type: "xls"
},
// Edge Cases
{
key: "empty_object",
label: "Empty Object",
value: {},
type: "text"
}, {
key: "empty_array",
label: "Empty Array",
value: [],
type: "text"
}, {
key: "null_value",
label: "Null Value",
value: null,
type: "text"
}, {
key: "placeholder_empty",
label: "Empty Value",
value: "",
type: "text"
}, {
key: "undefined_value",
label: "Undefined",
value: undefined,
type: "text"
}, {
key: "zero_value",
label: "Zero Value",
value: 0,
type: "text"
},
// Custom Types
{
key: "status_active",
label: "Account Status",
value: "Active",
type: "status"
}, {
key: "json_object",
label: "JSON Object",
value: JSON.stringify({
id: 1,
name: "John",
roles: ["admin", "user"]
}, null, JSON_INDENT_SPACES),
type: "code"
}, {
key: "rating",
label: "Rating",
value: "4.5/5",
type: "rating"
}];
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LabelValuePairs.default, _extends({}, args, {
placeholder: placeholderArg || defaultPlaceholder,
data: dataArg || DATA
})));
};
/**
* Default implementation of label-value pairs
*/
const Default = exports.Default = Template.bind({});
Default.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS
};
Default.parameters = {
docs: {
description: {
story: "Default implementation showing various data types in a vertical orientation."
}
}
};
/**
* Horizontal layout for label-value pairs
*/
const HorizontalOrientation = exports.HorizontalOrientation = Template.bind({});
HorizontalOrientation.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS,
config: {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS.config,
orientation: "horizontal"
},
data: [{
key: "name",
label: "Full Name",
value: "Baiju Dodhia",
type: "text"
}, {
key: "email",
label: "Email",
value: "baiju.dodhia@think360.ai",
type: "text"
}, {
key: "phone",
label: "Phone",
value: "+91 98765 43210",
type: "text"
}, {
key: "department",
label: "Department",
value: "KwikID",
type: "text"
}, {
key: "position",
label: "Position",
value: "Software Engineer",
type: "text"
}, {
key: "location",
label: "Office Location",
value: "Chandivali, Mumbai",
type: "text"
}]
};
HorizontalOrientation.parameters = {
docs: {
description: {
story: "Label-value pairs displayed in a horizontal orientation, suitable for employee profile information at Think360.AI."
}
}
};
/**
* Customized text case for labels and values
*/
const CustomTextCase = exports.CustomTextCase = Template.bind({});
CustomTextCase.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS,
config: {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS.config,
case: {
label: "upper",
value: "lower"
}
},
data: [{
key: "product",
label: "Product Name",
value: "KwikID VideoKYC Platform",
type: "text"
}, {
key: "category",
label: "Category",
value: "Identity Verification",
type: "text"
}, {
key: "price",
label: "Subscription",
value: "₹15,000/month",
type: "text"
}, {
key: "availability",
label: "Available",
value: true,
type: "boolean"
}, {
key: "compliance",
label: "RBI Compliant",
value: "Yes - KYC Master Direction Compliant",
type: "text"
}, {
key: "support",
label: "Customer Support",
value: "24x7 Hindi & English",
type: "text"
}]
};
CustomTextCase.parameters = {
docs: {
description: {
story: "Label-value pairs with uppercase labels and lowercase values, ideal for VideoKYC product documentation in the Indian FinTech sector."
}
}
};
/**
* Label-value pairs with tooltips enabled
*/
const WithTooltips = exports.WithTooltips = Template.bind({});
WithTooltips.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS,
config: {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS.config,
tooltip: {
show: true
}
},
data: [{
key: "verification_id",
label: "Verification ID",
value: "VKY-2023-78945",
type: "text"
}, {
key: "kyc_status",
label: "KYC Status",
value: "Verified",
type: "text"
}, {
key: "verification_mode",
label: "Verification Mode",
value: "Video KYC",
type: "text"
}, {
key: "pan",
label: "PAN",
value: "ABCDE1234F",
type: "text"
}, {
key: "aadhaar_verified",
label: "Aadhaar Verified",
value: true,
type: "boolean"
}, {
key: "verification_date",
label: "Verification Date",
value: "15 Aug 2023, 14:30 IST",
type: "text"
}]
};
WithTooltips.parameters = {
docs: {
description: {
story: "Label-value pairs with tooltips enabled, providing additional information on hover for customer verification and KYC details."
}
}
};
/**
* Label-value pairs with custom styling
*/
const CustomStyling = exports.CustomStyling = Template.bind({});
CustomStyling.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS,
customStyles: {
container: {
backgroundColor: "#f8f9fa",
padding: "16px",
borderRadius: "8px",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
},
label: {
fontWeight: "600",
color: "#495057",
marginRight: "12px"
},
value: {
color: "#212529",
fontFamily: "monospace"
},
placeholder: {
backgroundColor: "#dee2e6",
height: "1.2rem",
width: "120px",
borderRadius: "4px"
}
},
data: [{
key: "server",
label: "Server",
value: "kyc-prod-01",
type: "text"
}, {
key: "status",
label: "Status",
value: "Running",
type: "text"
}, {
key: "uptime",
label: "Uptime",
value: "99.98%",
type: "text"
}, {
key: "verifications",
label: "Verifications/day",
value: "1,245",
type: "text"
}, {
key: "memory",
label: "Memory Usage",
value: "6.2 GB / 16 GB",
type: "text"
}, {
key: "last_backup",
label: "Last Backup",
value: "Today 04:30 IST",
type: "text"
}]
};
CustomStyling.parameters = {
docs: {
description: {
story: "Label-value pairs with custom styling for monitoring VideoKYC infrastructure at Think360.AI's Mumbai data center."
}
}
};
/**
* Filter specific data types (text only)
*/
const FilteredDataTypes = exports.FilteredDataTypes = Template.bind({});
FilteredDataTypes.args = {
..._LabelValuePairs2.KWIKUI_LABEL_VALUE_PAIR_DEFAULTS,
data: [{
key: "name",
label: "Name",
value: "Baiju Dodhia",
type: "text"
}, {
key: "email",
label: "Email",
value: "baiju.dodhia@think360.ai",
type: "text"
}, {
key: "phone",
label: "Phone",
value: "+91 98765 43210",
type: "text"
}, {
key: "address",
label: "Address",
value: "Chandivali, Mumbai, Maharashtra 400072",
type: "text"
}]
};
FilteredDataTypes.parameters = {
docs: {
description: {
story: "Label-value pairs showing only text data values, suitable for contact information of a Think360.AI team member."
}
}
};
/**
* VideoKYC Dashboard Example
*/
const VideoKYCDashboard = () => {
const customerData = [{
key: "customer_id",
label: "Customer ID",
value: "KWIKID-78945",
type: "text"
}, {
key: "customer_name",
label: "Customer Name",
value: "Baiju Dodhia",
type: "text"
}, {
key: "mobile",
label: "Mobile",
value: "+91 98765 43210",
type: "text"
}, {
key: "email",
label: "Email",
value: "baiju.dodhia@think360.ai",
type: "text"
}, {
key: "verification_status",
label: "Verification Status",
value: "Completed",
type: "text"
}, {
key: "risk_score",
label: "Risk Score",
value: "Low",
type: "text"
}, {
key: "onboarding_date",
label: "Onboarding Date",
value: "15 Aug 2023",
type: "text"
}, {
key: "pan_verified",
label: "PAN Verified",
value: true,
type: "boolean"
}, {
key: "aadhaar_verified",
label: "Aadhaar Verified",
value: true,
type: "boolean"
}, {
key: "face_match",
label: "Face Match",
value: "98%",
type: "text"
}];
const documentData = [{
key: "pan_card",
label: "PAN Card",
value: "https://example.com/documents/pan.pdf",
type: "pdf"
}, {
key: "aadhaar_front",
label: "Aadhaar Front",
value: "https://picsum.photos/id/64/200/200",
type: "image"
}, {
key: "aadhaar_back",
label: "Aadhaar Back",
value: "https://picsum.photos/id/65/200/200",
type: "image"
}, {
key: "selfie",
label: "Customer Selfie",
value: "https://picsum.photos/id/64/200/200",
type: "image"
}, {
key: "video_recording",
label: "KYC Video",
value: "https://example.com/videos/kyc_video.mp4",
type: "video"
}];
return /*#__PURE__*/_react.default.createElement("div", {
style: {
maxWidth: "800px",
margin: "0 auto",
fontFamily: "Arial, sans-serif"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "16px 0",
borderBottom: "1px solid #e0e0e0",
marginBottom: "16px"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}
}, /*#__PURE__*/_react.default.createElement("h2", {
style: {
margin: "0",
color: "#333"
}
}, "KwikID VideoKYC Dashboard"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center"
}
}, /*#__PURE__*/_react.default.createElement("span", {
style: {
backgroundColor: "#e7f3ff",
color: "#0066cc",
padding: "4px 8px",
borderRadius: "4px",
fontSize: "14px",
marginRight: "8px"
}
}, "Think360.AI"), /*#__PURE__*/_react.default.createElement("span", {
style: {
backgroundColor: "#e6f4ea",
color: "#137333",
padding: "4px 8px",
borderRadius: "4px",
fontSize: "14px"
}
}, "Verified")))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: "24px"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
margin: "0 0 12px 0",
color: "#555",
fontSize: "16px"
}
}, "CUSTOMER INFORMATION"), /*#__PURE__*/_react.default.createElement("div", {
style: {
backgroundColor: "#f8f9fa",
borderRadius: "8px",
overflow: "hidden"
}
}, /*#__PURE__*/_react.default.createElement(_LabelValuePairs.default, {
data: customerData,
config: {
orientation: "horizontal",
case: {
label: "default",
value: "default"
},
tooltip: {
show: true
}
},
customStyles: {
container: {
padding: "12px",
borderBottom: "1px solid #e9ecef"
},
label: {
fontWeight: "600",
color: "#495057",
width: "150px"
},
value: {
color: "#212529"
},
placeholder: {}
},
placeholder: /*#__PURE__*/_react.default.createElement("span", null, "Information not available")
}))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: "24px"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
margin: "0 0 12px 0",
color: "#555",
fontSize: "16px"
}
}, "VERIFICATION DOCUMENTS"), /*#__PURE__*/_react.default.createElement("div", {
style: {
backgroundColor: "#f8f9fa",
borderRadius: "8px",
overflow: "hidden"
}
}, /*#__PURE__*/_react.default.createElement(_LabelValuePairs.default, {
data: documentData,
config: {
orientation: "horizontal",
case: {
label: "default",
value: "default"
},
tooltip: {
show: false
}
},
customStyles: {
container: {
padding: "12px",
borderBottom: "1px solid #e9ecef"
},
label: {
fontWeight: "600",
color: "#495057",
width: "150px"
},
value: {
color: "#212529"
},
placeholder: {}
},
placeholder: /*#__PURE__*/_react.default.createElement("span", null, "Document not available")
}))), /*#__PURE__*/_react.default.createElement("div", {
style: {
backgroundColor: "#e8f5e9",
padding: "12px 16px",
borderRadius: "8px",
border: "1px solid #c8e6c9"
}
}, /*#__PURE__*/_react.default.createElement("p", {
style: {
margin: "0",
fontSize: "14px",
color: "#2e7d32"
}
}, /*#__PURE__*/_react.default.createElement("strong", null, "Verification Complete:"), " This customer has been successfully verified using KwikID VideoKYC process and is ready for account activation. Verification agent: Baiju Dodhia.")));
};
exports.VideoKYCDashboard = VideoKYCDashboard;
VideoKYCDashboard.parameters = {
controls: {
disable: true
},
docs: {
description: {
story: "A comprehensive VideoKYC dashboard example showing customer verification information and uploaded identity documents in an Indian FinTech context. This story uses a custom layout with multiple LabelValuePairs components, so Storybook controls are intentionally disabled."
}
}
};