kwikid-components-react/components/kwikui/inputs/input-radio/InputRadio.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithValidation = exports.Sizes = exports.Shapes = exports.Orientations = exports.Disabled = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputRadio = _interopRequireDefault(require("./InputRadio"));
var _InputRadio2 = require("./InputRadio.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); }
// Helper function to replace the missing isNotEmptyValue from utils/helpers
const isNotEmptyValue = value => {
  if (value === undefined || value === null) return false;
  if (typeof value === "string" && value.trim() === "") return false;
  if (Array.isArray(value) && value.length === 0) return false;
  if (typeof value === "object" && Object.keys(value).length === 0) return false;
  return true;
};
var _default = exports.default = {
  title: "KwikUI/Inputs/Radio",
  component: _InputRadio.default,
  parameters: {
    componentSubtitle: "Radio button group for selecting verification preferences and identity options",
    docs: {
      description: {
        component: `
The \`KwikUIInputRadio\` component provides a group of radio buttons for selecting a single option from multiple choices.
It is particularly useful in KYC workflows where users need to make clear, mutually exclusive selections for verification methods,
document preferences, and consent options as per RBI and UIDAI guidelines.

## Usage

\`\`\`jsx
import { KwikUIInputRadio } from "@kwikid/react-kwikui";

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = React.useState(null);

  const options = [
    { key: "video_kyc", label: "Video KYC", value: "video_kyc", description: "Complete verification via video call with our agent" },
    { key: "offline_kyc", label: "Offline KYC", value: "offline_kyc", description: "Visit nearest branch for in-person verification" },
    { key: "aadhaar_kyc", label: "Aadhaar eKYC", value: "aadhaar_kyc", description: "Verify using Aadhaar OTP" }
  ];

  const handleChange = (id, value) => {
    setSelectedOption(value);
  };

  return (
    <KwikUIInputRadio
      id="kyc-method"
      label="Select KYC Method"
      options={options}
      value={selectedOption}
      onInput={handleChange}
    />
  );
};
\`\`\`
        `
      }
    }
  },
  argTypes: {
    orientation: {
      control: {
        type: "select",
        options: ["vertical", "horizontal", "wrapped"]
      },
      defaultValue: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.orientation,
      description: "Layout orientation of the radio buttons. Vertical is recommended for KYC forms with detailed options."
    },
    size: {
      control: {
        type: "select",
        options: ["s", "m", "l"]
      },
      defaultValue: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.size,
      description: "Size of the radio buttons. Larger sizes improve accessibility for elderly customers."
    },
    shape: {
      control: {
        type: "select",
        options: ["curved", "rectangle", "rounded"]
      },
      defaultValue: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.shape,
      description: "Visual shape style of the radio buttons to match your design system."
    },
    updateBehavior: {
      control: {
        type: "select",
        options: ["onChange", "onBlur"]
      },
      defaultValue: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.updateOn,
      description: "When to trigger updates - immediately on change or when focus is lost."
    }
  }
};
/**
 * Template for rendering the InputRadio component
 */
const Template = args => {
  const {
    value,
    ...rest
  } = args;
  const [localValue, setValue] = _react.default.useState(value);

  // Define KYC method options inside the component instead of at the top level
  const KYC_METHOD_OPTIONS = _react.default.useMemo(() => [{
    key: "video_kyc",
    label: "Video KYC",
    value: "video_kyc",
    description: "Complete verification via video call with our agent as per RBI guidelines"
  }, {
    key: "offline_kyc",
    label: "Offline KYC",
    value: "offline_kyc",
    description: "Visit nearest branch for in-person verification"
  }, {
    key: "aadhaar_kyc",
    label: "Aadhaar eKYC",
    value: "aadhaar_kyc",
    description: "Verify using Aadhaar OTP authentication"
  }, {
    key: "digilocker",
    label: "DigiLocker",
    value: "digilocker",
    description: "Connect your DigiLocker for document verification"
  }, {
    key: "manual_kyc",
    label: "Manual Verification (Disabled)",
    value: "manual_kyc",
    disabled: true,
    description: "Currently unavailable due to high volume"
  }], []);
  const onChangeInput = (id, value) => {
    setValue(value);
  };
  const onChangeInputValidate = (id, value) => {
    // Simple validation logic for demonstration
    if ((value === null || value === void 0 ? void 0 : value.value) === "video_kyc" || (value === null || value === void 0 ? void 0 : value.value) === "aadhaar_kyc") {
      return {
        isValid: true
      };
    }
    if ((value === null || value === void 0 ? void 0 : value.value) === "manual_kyc") {
      return {
        isValid: false
      };
    }
    return undefined;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: "500px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, rest, {
    options: isNotEmptyValue(rest === null || rest === void 0 ? void 0 : rest.options) ? rest.options : KYC_METHOD_OPTIONS,
    onInput: onChangeInput,
    onInputValidate: onChangeInputValidate,
    value: localValue
  })), localValue && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "1rem",
      padding: "0.5rem",
      backgroundColor: "#f5f5f5",
      borderRadius: "4px"
    }
  }, /*#__PURE__*/_react.default.createElement("strong", null, "Selected:"), /*#__PURE__*/_react.default.createElement("div", null, localValue.label, " (value: ", localValue.value, ")")));
};

/**
 * Default radio button group implementation
 */
const Default = args => {
  // Move KYC method options inside the component
  const KYC_METHOD_OPTIONS = _react.default.useMemo(() => [{
    key: "video_kyc",
    label: "Video KYC",
    value: "video_kyc",
    description: "Complete verification via video call with our agent as per RBI guidelines"
  }, {
    key: "offline_kyc",
    label: "Offline KYC",
    value: "offline_kyc",
    description: "Visit nearest branch for in-person verification"
  }, {
    key: "aadhaar_kyc",
    label: "Aadhaar eKYC",
    value: "aadhaar_kyc",
    description: "Verify using Aadhaar OTP authentication"
  }, {
    key: "digilocker",
    label: "DigiLocker",
    value: "digilocker",
    description: "Connect your DigiLocker for document verification"
  }, {
    key: "manual_kyc",
    label: "Manual Verification (Disabled)",
    value: "manual_kyc",
    disabled: true,
    description: "Currently unavailable due to high volume"
  }], []);
  return /*#__PURE__*/_react.default.createElement(Template, _extends({}, args, {
    label: "Select KYC Verification Method",
    options: KYC_METHOD_OPTIONS
  }));
};
exports.Default = Default;
Default.args = {
  ..._InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS
};
Default.parameters = {
  docs: {
    description: {
      story: "Default radio button group for KYC method selection with vertical orientation. This component allows customers to choose their preferred verification method as per RBI guidelines for VideoKYC and other verification processes."
    }
  }
};

/**
 * Radio button group with different orientations
 */
const Orientations = args => {
  const {
    isClearable,
    isSearchable,
    value
  } = args;

  // Define options inside the component
  const KYC_METHOD_OPTIONS = _react.default.useMemo(() => [{
    key: "video_kyc",
    label: "Video KYC",
    value: "video_kyc",
    description: "Complete verification via video call with our agent as per RBI guidelines"
  }, {
    key: "offline_kyc",
    label: "Offline KYC",
    value: "offline_kyc",
    description: "Visit nearest branch for in-person verification"
  }, {
    key: "aadhaar_kyc",
    label: "Aadhaar eKYC",
    value: "aadhaar_kyc",
    description: "Verify using Aadhaar OTP authentication"
  }, {
    key: "digilocker",
    label: "DigiLocker",
    value: "digilocker",
    description: "Connect your DigiLocker for document verification"
  }, {
    key: "manual_kyc",
    label: "Manual Verification (Disabled)",
    value: "manual_kyc",
    disabled: true,
    description: "Currently unavailable due to high volume"
  }], []);
  const CONSENT_OPTIONS = _react.default.useMemo(() => [{
    key: "consent_yes",
    label: "I Consent",
    value: "yes",
    description: "I agree to share my information for KYC verification"
  }, {
    key: "consent_no",
    label: "I Do Not Consent",
    value: "no",
    description: "I do not wish to proceed with KYC verification at this time"
  }], []);
  const ADDRESS_PROOF_OPTIONS = _react.default.useMemo(() => [{
    key: "utility_bill",
    label: "Utility Bill",
    value: "utility_bill",
    description: "Electricity, water, or gas bill (not older than 3 months)"
  }, {
    key: "bank_statement",
    label: "Bank Statement",
    value: "bank_statement",
    description: "Bank statement with address (not older than 3 months)"
  }, {
    key: "rent_agreement",
    label: "Rent Agreement",
    value: "rent_agreement",
    description: "Valid rental agreement with address details"
  }, {
    key: "passport",
    label: "Passport",
    value: "passport",
    description: "Valid passport with current address"
  }, {
    key: "voter_id",
    label: "Voter ID Card",
    value: "voter_id",
    description: "Voter ID card with current address"
  }], []);

  // Basic defaults needed for the component
  const commonProps = {
    value: value || null,
    isClearable: isClearable !== undefined ? isClearable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
    isSearchable: isSearchable !== undefined ? isSearchable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-vertical",
    label: "KYC Method (Vertical Layout)",
    orientation: "vertical",
    options: KYC_METHOD_OPTIONS
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-horizontal",
    label: "Consent Options (Horizontal Layout)",
    orientation: "horizontal",
    options: CONSENT_OPTIONS
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-wrapped",
    label: "Address Proof Documents (Wrapped Layout)",
    orientation: "wrapped",
    options: ADDRESS_PROOF_OPTIONS
  })));
};
exports.Orientations = Orientations;
Orientations.args = {
  isClearable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
  isSearchable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable,
  value: null
};
Orientations.parameters = {
  docs: {
    description: {
      story: "Different orientation layouts for various KYC form sections. Vertical layout is ideal for detailed KYC method options, horizontal for simple consent choices, and wrapped for document selection where many options may be available."
    }
  }
};

/**
 * Radio button group with different shapes
 */
const Shapes = args => {
  const {
    isClearable,
    isSearchable,
    value
  } = args;

  // Basic defaults needed for the component
  const commonProps = {
    value: value || null,
    isClearable: isClearable !== undefined ? isClearable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
    isSearchable: isSearchable !== undefined ? isSearchable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-curved",
    label: "Primary ID Proof (Curved Shape)",
    shape: "curved",
    options: [{
      key: "aadhaar",
      label: "Aadhaar Card",
      value: "aadhaar",
      description: "UIDAI issued Aadhaar card"
    }, {
      key: "pan",
      label: "PAN Card",
      value: "pan",
      description: "Income Tax Department issued PAN card"
    }, {
      key: "passport",
      label: "Passport",
      value: "passport",
      description: "Government issued passport"
    }]
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-rectangle",
    label: "Preferred Language (Rectangle Shape)",
    shape: "rectangle",
    options: [{
      key: "english",
      label: "English",
      value: "english",
      description: "Proceed in English"
    }, {
      key: "hindi",
      label: "Hindi",
      value: "hindi",
      description: "हिंदी में आगे बढ़ें"
    }, {
      key: "tamil",
      label: "Tamil",
      value: "tamil",
      description: "தமிழில் தொடரவும்"
    }]
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-rounded",
    label: "Verification Time Slot (Rounded Shape)",
    shape: "rounded",
    options: [{
      key: "morning",
      label: "Morning (9 AM - 12 PM)",
      value: "morning",
      description: "Early morning slot"
    }, {
      key: "afternoon",
      label: "Afternoon (12 PM - 5 PM)",
      value: "afternoon",
      description: "Midday slot"
    }, {
      key: "evening",
      label: "Evening (5 PM - 8 PM)",
      value: "evening",
      description: "Evening slot"
    }]
  })));
};
exports.Shapes = Shapes;
Shapes.args = {
  isClearable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
  isSearchable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable,
  value: null
};
Shapes.parameters = {
  docs: {
    description: {
      story: "Different shape styles for radio buttons to match your design system and provide visual distinction between different types of selections in the KYC process."
    }
  }
};

/**
 * Radio button group with different sizes
 */
const Sizes = args => {
  const {
    isClearable,
    isSearchable,
    value
  } = args;

  // Basic defaults needed for the component
  const commonProps = {
    value: value || null,
    isClearable: isClearable !== undefined ? isClearable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
    isSearchable: isSearchable !== undefined ? isSearchable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-s",
    size: "s",
    label: "Communication Preference (Small Size)",
    options: [{
      key: "sms",
      label: "SMS",
      value: "sms",
      description: "Receive updates via SMS"
    }, {
      key: "email",
      label: "Email",
      value: "email",
      description: "Receive updates via Email"
    }, {
      key: "whatsapp",
      label: "WhatsApp",
      value: "whatsapp",
      description: "Receive updates via WhatsApp"
    }]
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-m",
    size: "m",
    label: "Income Range (Medium Size - Default)",
    options: [{
      key: "range1",
      label: "Below ₹5 Lakhs",
      value: "below_5l",
      description: "Annual income below ₹5 Lakhs"
    }, {
      key: "range2",
      label: "₹5 Lakhs - ₹10 Lakhs",
      value: "5l_10l",
      description: "Annual income between ₹5-10 Lakhs"
    }, {
      key: "range3",
      label: "Above ₹10 Lakhs",
      value: "above_10l",
      description: "Annual income above ₹10 Lakhs"
    }]
  })), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, commonProps, {
    id: "radio-l",
    size: "l",
    label: "Account Type (Large Size)",
    options: [{
      key: "savings",
      label: "Savings Account",
      value: "savings",
      description: "Regular savings account with standard features"
    }, {
      key: "current",
      label: "Current Account",
      value: "current",
      description: "Business account with advanced features"
    }, {
      key: "salary",
      label: "Salary Account",
      value: "salary",
      description: "Account linked to employer for salary credits"
    }]
  })));
};
exports.Sizes = Sizes;
Sizes.args = {
  isClearable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
  isSearchable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable,
  value: null
};
Sizes.parameters = {
  docs: {
    description: {
      story: "Radio buttons in different sizes to accommodate various form contexts. Larger sizes improve accessibility for elderly customers during the KYC process, while smaller sizes work well for compact forms with multiple options."
    }
  }
};

/**
 * Radio button group with validation and feedback
 */
const WithValidation = args => {
  var _validateRadio, _validateRadio2;
  const {
    isClearable,
    isSearchable
  } = args;
  const [value, setValue] = _react.default.useState(null);
  const currentId = "radio-validation";

  // Define KYC method options inside the component
  const KYC_METHOD_OPTIONS = _react.default.useMemo(() => [{
    key: "video_kyc",
    label: "Video KYC",
    value: "video_kyc",
    description: "Complete verification via video call with our agent as per RBI guidelines"
  }, {
    key: "offline_kyc",
    label: "Offline KYC",
    value: "offline_kyc",
    description: "Visit nearest branch for in-person verification"
  }, {
    key: "aadhaar_kyc",
    label: "Aadhaar eKYC",
    value: "aadhaar_kyc",
    description: "Verify using Aadhaar OTP authentication"
  }, {
    key: "digilocker",
    label: "DigiLocker",
    value: "digilocker",
    description: "Connect your DigiLocker for document verification"
  }, {
    key: "manual_kyc",
    label: "Manual Verification (Disabled)",
    value: "manual_kyc",
    disabled: true,
    description: "Currently unavailable due to high volume"
  }], []);
  const validateRadio = (id, option) => {
    if (!option) return null;

    // Video KYC and Aadhaar eKYC are valid, Manual verification is invalid, others are neutral
    if (option.value === "video_kyc" || option.value === "aadhaar_kyc") {
      return {
        isValid: true
      };
    }
    if (option.value === "manual_kyc") {
      return {
        isValid: false
      };
    }
    return undefined;
  };
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Select \"Video KYC\" or \"Aadhaar eKYC\" for valid feedback, \"Manual Verification\" for invalid feedback."), /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, args, {
    id: currentId,
    label: "KYC Method Selection",
    options: KYC_METHOD_OPTIONS,
    value: value,
    isClearable: isClearable !== undefined ? isClearable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
    isSearchable: isSearchable !== undefined ? isSearchable : _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable,
    onInput: (id, option) => setValue(option),
    onInputValidate: validateRadio,
    messages: value ? [((_validateRadio = validateRadio(currentId, value)) === null || _validateRadio === void 0 ? void 0 : _validateRadio.isValid) === true ? {
      type: "success",
      message: "This verification method is currently available and offers the fastest processing!"
    } : ((_validateRadio2 = validateRadio(currentId, value)) === null || _validateRadio2 === void 0 ? void 0 : _validateRadio2.isValid) === false ? {
      type: "error",
      message: "This verification method is temporarily unavailable. Please select an alternative."
    } : {
      type: "info",
      message: "This verification method is available but may have longer processing times."
    }] : []
  })));
};
exports.WithValidation = WithValidation;
WithValidation.args = {
  isClearable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isClearable,
  isSearchable: _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS.isSearchable
};
WithValidation.parameters = {
  docs: {
    description: {
      story: "Radio button group with validation that provides feedback based on the selected KYC method. This helps guide users toward the most efficient verification options while providing clear feedback about availability and processing times as per RBI guidelines."
    }
  }
};

/**
 * Disabled radio button group
 */
const Disabled = () => {
  return /*#__PURE__*/_react.default.createElement(_InputRadio.default, _extends({}, _InputRadio2.KWIKUI_INPUT_RADIO__DEFAULTS, {
    id: "risk-assessment",
    label: "System-Generated Risk Assessment (View Only)",
    options: [{
      key: "low_risk",
      label: "Low Risk",
      value: "low_risk",
      description: "Customer meets all standard verification criteria"
    }, {
      key: "medium_risk",
      label: "Medium Risk",
      value: "medium_risk",
      description: "Additional verification may be required"
    }, {
      key: "high_risk",
      label: "High Risk",
      value: "high_risk",
      description: "Enhanced due diligence required as per RBI guidelines"
    }],
    value: {
      key: "low_risk",
      label: "Low Risk",
      value: "low_risk",
      description: "Customer meets all standard verification criteria"
    },
    disabled: true,
    onInput: () => {}
  }));
};
exports.Disabled = Disabled;
Disabled.parameters = {
  docs: {
    description: {
      story: "Disabled radio button group for displaying system-generated assessments that cannot be modified by the user. This is useful for showing automated risk assessments or verification statuses that are determined by the system based on submitted KYC documents."
    }
  }
};