\nVector Sigma (VĪ£) is a dynamic form orchestrator package for rapidly creating and managing the complex lifecycle of interactive extensible input forms that can be easily embedded into a React front-end client interface for use in data pipelines, onboarding applications or automation workflows.\n\nFields, Input Validation and Submission callback() can be defined and parametized in real-time predicated on a native JavaScript object/JSON (JavaScript Object Notation) xForm definition or by builder methods object pattern.\n
\n \n#### Key Features\n\nuseVectorSigma hook method utilizes React lazy initialization in tandem with useRef to guarantee VectorSigma class object is created in a singleton-ish fashion when the VĪ£ component mounts, and safely persists across DOM re-renders.\n
Dual mode package with both CommonJS (CJS) & ES Modules (ESM) builds bundled using Rollup.js to facilitate universal module compatibility and enable effortless integration across legacy and modern JavaScript ecosystems.
Adopted Zod as the native engine for JSON schema validation to provide a TypeScript-first validation layer. Schema validation guarantees any schema object provided strictly adheres with the expected API model before rendering to client viewport.
Method chaining offers a modern, fluent alternative to static JSON object configuration that elevates the developer experience (DX) by enabling rapid form creation using intuitive method chains that are human-readable and generate type-safe xForm schema definitions automatically.
\n\n```javascript\nimport React from 'react';\nimport { VectorSigma } from './VectorSigma';\n\nexport const VĪ£CodexForm = () => {\n // Initialize an empty xForm\n const xFormBuilder = new VectorSigma();\n\n // Chain object methods to build xForm schema\n // ---------------------------------------------------------\n // METHOD A: addSection(xFormSectionSchema{})\n // METHOD B: createSection() * addQueryToSection()\n // ---------------------------------------------------------\n const xFormElement = xFormBuilder\n .setUUID('ai-agent-007')\n .setName('New User Onboarding')\n // setBrand(color, logoUrl?, logoPosition?)\n .setBrand(\n '#800020', // Brand (i.e. Primary) color\n 'https://www.example.com/brandLogo.jpeg', // Brand Logo URL\n 'center' // Brand Logo alignment\n )\n .createSection('personal-info', 'Personal Information', 'user')\n .addQueryToSection('personal-info', {\n queryId: 101,\n inputType: 'text-input',\n inputAlias: 'firstName',\n inputLabel: 'First Name',\n inputPlaceholder: 'Enter your first name',\n inputWidth: 6,\n newRow: true,\n isRequired: true,\n errorText: 'First name is required'\n })\n .createSection('address-info', 'Address Info', 'home')\n .addQueryToSection('address-info', {\n queryId: 102,\n inputType: 'password-input',\n inputAlias: 'securityCode',\n inputLabel: 'Secure Passcode',\n inputWidth: 6,\n newRow: true,\n isRequired: true,\n errorText: 'Security code is required'\n })\n .addSection({\n sectionId: \"shipping-info\",\n title: \"Shipping Address\",\n icon: \"paperplane\",\n queries: [\n {\n queryId: 103,\n inputType: \"text-input\",\n inputAlias: \"deliveryAddress\",\n inputLabel: \"Home Address\",\n inputWidth: 9,\n newRow: false,\n isRequired: true,\n errorText: 'Address is required for shipping'\n }\n ]\n })\n .render({\n displayMode: 'codex',\n readOnlyMode: false,\n // Optionally inject Teletraan1 (codex display) callback\n onFinish: () => {\n console.log(\"xForm submission complete.\");\n }\n // Optionally inject VectorSigma global callback\n onSubmit: async (values, actions, instance) => {\n console.log(\"Submitting to API...\", values);\n try {\n await fetch('/api/users/onboard', {\n method: 'POST',\n body: JSON.stringify(values)\n });\n alert(\"VĪ£ has come to...\");\n actions.submitForm();\n actions.resetForm();\n } catch (error) {\n console.error(\"xForm submission failed\", error);\n }\n }\n });\n\n return (\nDeclarative schema (JSON) isRequired and errorText attributes facilitate a validation engine that is comprehensive, accessible and easy to maintain. onChange(), onBlur() input event control state updates, errors and values are handled automatically. onSubmit() handler is automatically blocked if the input vs. validation schema is invalid.
Leveraged Formik for robust React state management and Yup for declarative schema validation to adhere strictly to the standard React form lifecycle, ensuring compatibility with Redux DevTools & standard debugging workflows.
\n\n```javascript\nimport React from 'react';\nimport { useVectorSigma } from './hooks/useVectorSigma';\n\n const xFormBuilder = useVectorSigma(apiXFormData);\n .setName('VĪ£ Robot Activation')\n .setBrand(\"brandHexColor\", \"www.exampleurl.com/logoimage.png\", 'center')\n return xFormBuilder.render({\n displayMode: 'codex',\n readOnlyMode: false,\n // Access 'values', 'actions' and 'instance' object(s) in global onSubmit callback function\n // 'instance' :: { errors, statusCode, isSubmitting, timeCreated, timeInProgress, timeSubmitted, formObject } \n onSubmit: async (values, actions, instance) => {\n \n console.log(\"VĪ£ User Email:\", values.emailAddress);\n console.log(\"VĪ£ Robot Serial Number:\", values.serialNumber);\n const timeTakenMs = (instance.timeSubmitted || Date.now()) - instance.timeCreated;\n console.log(`VĪ£ User finished the xForm in ${timeTakenMs / 1000} seconds.`);\n console.log(`Extant xForm Status:`, instance.statusCode);\n console.log(`Extant xForm object:`, instance.formObject);\n // Initiate Promise or API HTTP POST\n await new Promise(resolve => setTimeout(resolve, 1000));\n alert(\"VĪ£ Robot Activated!\");\n actions.resetForm();\n }\n })\n```\nCustomizable to fit seamlessly into an existing design system and allow developer control of the visual layer through standard CSS patterns.
\nRadix UI theme {} passed into the transfrom() or render() method(s) as an options attribute can be leveraged to cleverly align the returned xForm style and appearance with an extant application design system.
Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point src/index.ts to enable developer-friendly use as lightweight ARIA compliant component library.
Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, CountrySelect, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan1 (Render Matrix)
\n\n```javascript\nimport { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } \nfrom '@emeraldemperaur/vector-sigma';\nimport { Theme } from '@emeraldemperaur/vector-sigma';\nimport { Form, Formik } from 'formik'\nimport * as Yup from 'yup'\n\n\nconst App = () => {\n return (\n'Mobile-First' layout design ensures that complex form orchestrations remain usable, accessible, and performant on any viewport.
\nInstall Changeset CLI on 'main | prometheus' branch
\n\n```bash\nnpm install --save-dev @changesets/cli\n# Changeset project initializer\nnpx changeset init\n```\nCreate new working 'changeset' branch
\n\n```bash\ngit checkout -b new-changeset-branchname\n```\nUpdate/Modify source code
Run Changeset CLI to create changeset file
\n\n```bash\n# Changeset - patch, minor, major versioning\nnpx changeset\n\n# PreRelease mode (alpha)\nnpx changeset pre enter alpha\n\n# PreRelease mode (beta)\nnpx changeset pre enter beta\n\n# Exit PreRelease mode \nnpx changeset pre exit\n```\nCommit source code changes to git
\n\n```bash\ngit add .\ngit commit -m \"Changeset :: commit message\"\ngit status\n# confirm clean working tree before push\ngit push origin new-changeset-branchname\n\n```\nMerge Changeset 'workflow' and 'version packages' PRs on Github repository
\nCheckout 'main | prometheus' origin branch
\n\n```bash\ngit checkout prometheus\n\n```\nPull remote version changes merged from working 'changeset' branch to 'main | prometheus' origin branch
\n\n```bash\ngit pull origin prometheus\n\n```\n