Craft-ux NPM | npm.io

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

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.