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:

1npm install craft-ux

or

1yarn add craft-ux

Usage

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

1import React from 'react';
2import { DynamicForm } from 'craft-ux';
3
4const formDefinition = {
5  fields: [
6    { name: 'business_name', type: 'text', label: 'Business Name', required: true },
7    { name: 'applicant_name', type: 'text', label: 'Applicant Name', required: true },
8    { name: 'loan_type', type: 'dropdown', label: 'Loan Type', options: [
9      { label: 'Home Loan', value: 'home' },
10      { label: 'Car Loan', value: 'car' },
11    ]},
12  ],
13};
14
15const App = () => {
16  return (
17    <DynamicForm formDefinition={formDefinition} />
18  );
19};
20
21export default App;

Advanced Usage

Handling Form Submission

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

1import React from 'react';
2import { DynamicForm, handleDynamicFormSubmit } from 'craft-ux';
3import { useDispatch } from 'react-redux';
4
5const App = () => {
6  const dispatch = useDispatch();
7
8  const onSubmit = () => {
9    dispatch(handleDynamicFormSubmit()).then((data) => {
10      // Handle form submission data here
11      console.log(data);
12    });
13  };
14
15  return (
16    <>
17      <DynamicForm formDefinition={formDefinition} />
18      <button onClick={onSubmit}>Submit</button>
19    </>
20  );
21};
22
23export default App;

External Form Submission with Ref

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

1import React, { useRef, useState } from 'react';
2import { Provider, DynamicForm, AxiosProvider } from 'craft-ux';
3
4const formJson = {
5  "sections": [
6    {
7      "title": "Pokemon Information",
8      "fields": [
9        {
10          "name": "primary.pokemon.name",
11          "label": "Pokemon Name",
12          "fieldType": "text",
13          "validation": {
14            "required": true
15          }
16        },
17        {
18          "name": "primary.pokemon.type",
19          "label": "Pokemon Type",
20          "fieldType": "dropdown",
21          "source": {
22            "api": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
23            "labelKey": "name",
24            "valueKey": "name"
25          },
26          "validation": {
27            "required": true
28          }
29        }
30      ]
31    }
32  ]
33};
34
35const App = () => {
36  const dynamicFormRef = useRef(null);
37  const [submittedData, setSubmittedData] = useState(null);
38
39  const handleFormSubmitSuccess = (data) => {
40    console.log('Form submitted successfully with data:', data);
41    setSubmittedData(data);
42  };
43
44  const triggerFormSubmit = () => {
45    if (dynamicFormRef.current) {
46      dynamicFormRef.current.submitFormExternally();
47    }
48  };
49
50  return (
51    <Provider>
52      <div>
53        <h1>Using Craft UX Library</h1>
54        <AxiosProvider axiosInstance={axiosInstance}>
55          <DynamicForm
56            ref={dynamicFormRef}
57            componentName="TestForm"
58            formJson={formJson}
59            onSubmitSuccess={handleFormSubmitSuccess}
60          />
61        </AxiosProvider>
62        <button onClick={triggerFormSubmit}>Submit Form Externally</button>
63        {submittedData && <pre>{JSON.stringify(submittedData, null, 2)}</pre>}
64      </div>
65    </Provider>
66  );
67};
68
69export 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.

1{
2  "name": "co_applicant",
3  "type": "section",
4  "repeatable": true,
5  "fields": [
6    { "name": "name", "type": "text", "label": "Co-Applicant Name" },
7    { "name": "relationship", "type": "dropdown", "label": "Relationship", "options": [
8      { "label": "Spouse", "value": "spouse" },
9      { "label": "Sibling", "value": "sibling" }
10    ]}
11  ]
12}

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!