kwikid-components-react/components/forms/stories/Forms.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Login = exports.DocumentVerification = exports.CustomerDetails = exports.AgentOnboarding = exports.AddressDetails = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Forms = _interopRequireDefault(require("../form-view/Forms"));
var _idVerification = _interopRequireDefault(require("./configs/id-verification.json"));
var _addressVerification = _interopRequireDefault(require("./configs/address-verification.json"));
var _loginForm = _interopRequireDefault(require("./configs/login-form.json"));
var _agentOnboarding = _interopRequireDefault(require("./configs/agent-onboarding.json"));
var _registrationForm = _interopRequireDefault(require("./configs/registration-form.json"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); } // Import only the needed configs
/**
 * KwikID Form View component allows for dynamic form rendering based on configuration.
 * It handles data binding, validation, and form submission for identity verification workflows.
 */
var _default = exports.default = {
  title: "Forms/Forms",
  component: _Forms.default,
  parameters: {
    docs: {
      description: {
        component: `
The Form View component is a powerful tool for rendering dynamic identity verification forms based on JSON configuration.
It supports various field types, validation rules, and data binding capabilities commonly used in KYC and identity verification processes.

## Features
- Dynamic form generation from configuration
- Two-way data binding
- Field validation
- Conditional field visibility
- Form submission handling
- Identity verification specific fields and validations
- Document upload and verification
- Biometric capture and verification

## Common Use Cases
- KYC (Know Your Customer) verification
- Customer onboarding
- Document verification
- Biometric verification
- Liveness checks
- Address verification
- PAN/Aadhaar verification
- Banking and financial application forms
        `
      }
    },
    componentSubtitle: "Dynamic identity verification form renderer component"
  },
  argTypes: {
    data: {
      control: "object",
      description: "Form data object that will be used to populate the form fields"
    },
    config: {
      control: "object",
      description: "Configuration object that defines the form structure and behavior"
    },
    getData: {
      description: "Callback function that gets called when data changes"
    },
    getSavedData: {
      description: "Callback function that gets called when the form is submitted"
    }
  }
};
const Template = _ref => {
  let {
    ...args
  } = _ref;
  const [config] = (0, _react.useState)(args.config);
  const [localData, setLocalData] = (0, _react.useState)(args.data);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: "100%",
      height: "100%",
      boxShadow: "0px 0px 10px -3px lightgray",
      borderRadius: "1rem",
      padding: "1rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_Forms.default, _extends({
    config: config,
    data: localData,
    getData: data => {
      setLocalData(data);
      console.log("DATA UPDATED:", data);
    },
    getSavedData: params => {
      console.log("DATA SAVED:", params);
    }
  }, args))));
};

// 1. Document Verification form with Aadhaar, PAN, and Passport
const DocumentVerification = exports.DocumentVerification = Template.bind({});
DocumentVerification.args = {
  config: _idVerification.default,
  data: {
    verification_type: "",
    pan_number: "",
    aadhaar_number: "",
    passport_number: "",
    date_of_birth: "",
    verification_consent: false
  }
};
DocumentVerification.parameters = {
  docs: {
    description: {
      story: "Document verification form supporting multiple ID types including Aadhaar, PAN, and Passport, with built-in validation."
    }
  }
};

// 2. Address Details form
const AddressDetails = exports.AddressDetails = Template.bind({});
AddressDetails.args = {
  config: _addressVerification.default,
  data: {
    address_type: "",
    address_line_1: "",
    address_line_2: "",
    city: "",
    state: "",
    pin_code: "",
    address_proof_type: "",
    address_proof_document: null,
    address_confirmation: false
  }
};
AddressDetails.parameters = {
  docs: {
    description: {
      story: "Address verification form for capturing and validating customer residential and permanent address information."
    }
  }
};

// 3. Login Form
const Login = exports.Login = Template.bind({});
Login.args = {
  config: _loginForm.default,
  data: {
    email: "",
    password: "",
    rememberMe: false
  }
};
Login.parameters = {
  docs: {
    description: {
      story: "Authentication form for secure login to identity verification platforms with email and password validation."
    }
  }
};

// 4. Agent/Admin Onboarding Form
const AgentOnboarding = exports.AgentOnboarding = Template.bind({});
AgentOnboarding.args = {
  config: _agentOnboarding.default,
  data: {
    agent_name: "",
    agent_id: "",
    agent_password: "",
    agent_role: ""
  }
};
AgentOnboarding.parameters = {
  docs: {
    description: {
      story: "Agent and admin onboarding form for creating users with specific roles in identity verification workflows."
    }
  }
};

// 5. Customer Basic Details
const CustomerDetails = exports.CustomerDetails = Template.bind({});
CustomerDetails.args = {
  config: _registrationForm.default,
  data: {
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    dateOfBirth: "",
    gender: "",
    address: "",
    city: "",
    country: ""
  }
};
CustomerDetails.parameters = {
  docs: {
    description: {
      story: "Customer basic information form capturing essential personal and contact details for identity verification processes."
    }
  }
};