craft-ux

craft-ux is a dynamic form-building library that provides components to create and manage form workflows efficiently. Built for React and powered by Redux, craft-ux allows you to build highly customizable and scalable forms, ideal for use cases in fintech, loan applications, and beyond.

Features

• Dynamic Forms: Easily create dynamic forms using JSON configurations.
• Repeatable Sections: Support for repeatable sections, allowing you to add multiple blocks of fields like "Shareholder" or "Applicant" entries.
• Conditional Logic: Implement dynamic field visibility and validation rules based on form inputs.
• Redux Integration: Leverage Redux Toolkit for centralized form state management, making it easy to integrate with larger applications.
• Field Dependencies: Define dependencies between fields for scenarios like dropdown value changes based on other fields.
• Custom Stepper: Seamlessly incorporate custom steppers for multi-stage forms to improve user navigation.
• External Form Submission: Trigger form submission externally using a reference to the DynamicForm component.

Installation

Install the package using npm or yarn:

npm install craft-ux

or

yarn add craft-ux

Usage

Here's a basic example of how to use DynamicForm from craft-ux:

import React from 'react';
import { DynamicForm } from 'craft-ux';

const formDefinition = {
  fields: [
    { name: 'business_name', type: 'text', label: 'Business Name', required: true },
    { name: 'applicant_name', type: 'text', label: 'Applicant Name', required: true },
    { name: 'loan_type', type: 'dropdown', label: 'Loan Type', options: [
      { label: 'Home Loan', value: 'home' },
      { label: 'Car Loan', value: 'car' },
    ]},
  ],
};

const App = () => {
  return (
    <DynamicForm formDefinition={formDefinition} />
  );
};

export default App;

Advanced Usage

Handling Form Submission

You can use the exported handleDynamicFormSubmit to handle form submissions outside of the DynamicForm component:

import React from 'react';
import { DynamicForm, handleDynamicFormSubmit } from 'craft-ux';
import { useDispatch } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();

  const onSubmit = () => {
    dispatch(handleDynamicFormSubmit()).then((data) => {
      // Handle form submission data here
      console.log(data);
    });
  };

  return (
    <>
      <DynamicForm formDefinition={formDefinition} />
      <button onClick={onSubmit}>Submit</button>
    </>
  );
};

export default App;

External Form Submission with Ref

You can also trigger form submission externally using a reference to the DynamicForm component:

import React, { useRef, useState } from 'react';
import { Provider, DynamicForm, AxiosProvider } from 'craft-ux';

const formJson = {
  "sections": [
    {
      "title": "Pokemon Information",
      "fields": [
        {
          "name": "primary.pokemon.name",
          "label": "Pokemon Name",
          "fieldType": "text",
          "validation": {
            "required": true
          }
        },
        {
          "name": "primary.pokemon.type",
          "label": "Pokemon Type",
          "fieldType": "dropdown",
          "source": {
            "api": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
            "labelKey": "name",
            "valueKey": "name"
          },
          "validation": {
            "required": true
          }
        }
      ]
    }
  ]
};

const App = () => {
  const dynamicFormRef = useRef(null);
  const [submittedData, setSubmittedData] = useState(null);

  const handleFormSubmitSuccess = (data) => {
    console.log('Form submitted successfully with data:', data);
    setSubmittedData(data);
  };

  const triggerFormSubmit = () => {
    if (dynamicFormRef.current) {
      dynamicFormRef.current.submitFormExternally();
    }
  };

  return (
    <Provider>
      <div>
        <h1>Using Craft UX Library</h1>
        <AxiosProvider axiosInstance={axiosInstance}>
          <DynamicForm
            ref={dynamicFormRef}
            componentName="TestForm"
            formJson={formJson}
            onSubmitSuccess={handleFormSubmitSuccess}
          />
        </AxiosProvider>
        <button onClick={triggerFormSubmit}>Submit Form Externally</button>
        {submittedData && <pre>{JSON.stringify(submittedData, null, 2)}</pre>}
      </div>
    </Provider>
  );
};

export default App;

Dynamic Sections

The craft-ux library allows for adding new sections dynamically using repeatable fields. For example, adding multiple "Co-Applicants" or "Guarantors" can be easily managed through the repeatable configuration.

{
  "name": "co_applicant",
  "type": "section",
  "repeatable": true,
  "fields": [
    { "name": "name", "type": "text", "label": "Co-Applicant Name" },
    { "name": "relationship", "type": "dropdown", "label": "Relationship", "options": [
      { "label": "Spouse", "value": "spouse" },
      { "label": "Sibling", "value": "sibling" }
    ]}
  ]
}

API Reference

• DynamicForm: The core form component that takes formDefinition or formJson as a prop.
• handleDynamicFormSubmit: Redux action to handle form submission.
• fetchDynamicFormData: Redux asyncThunk to load form data dynamically.
• submitFormExternally: Method to trigger form submission from outside the component using a reference.

Props for DynamicForm

• formDefinition or formJson: JSON object defining the form fields and their configurations.
• onSubmit (optional): Callback to handle form submission when a submit button is clicked.
• onSubmitSuccess (optional): Callback to handle successful form submission.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

License

This project is licensed under the MIT License.

Feel free to modify the examples to suit your needs, and let us know how craft-ux helps in building dynamic forms for your projects!