WW Form Designer

A React form designer component for building dynamic forms.

Installation

npm install ww-form-designer
# or
yarn add ww-form-designer

Usage

Basic Usage

import { FormDesigner } from 'ww-form-designer';
import 'ww-form-designer/styles'; // Import the styles (required)

function App() {
  const [formJSON, setFormJSON] = useState({});
  const initialFormDesign = [];

  return (
    <FormDesigner 
      getFormJSON={setFormJSON}
      initialFormDesign={initialFormDesign}
    />
  );
}

With Custom Font Family

import { FormDesigner } from 'ww-form-designer';
import 'ww-form-designer/styles';

function App() {
  const [formJSON, setFormJSON] = useState({});
  const initialFormDesign = [];
  const fontFamily = "'Inter', sans-serif";

  return (
    <FormDesigner 
      getFormJSON={setFormJSON}
      initialFormDesign={initialFormDesign}
      fontFamily={fontFamily}
    />
  );
}

With Lookup Data

import { FormDesigner } from 'ww-form-designer';
import 'ww-form-designer/styles';

function App() {
  const [formJSON, setFormJSON] = useState({});
  const initialFormDesign = [];
  const lookupData = {
    // Your lookup data structure
  };

  return (
    <FormDesigner 
      getFormJSON={setFormJSON}
      initialFormDesign={initialFormDesign}
      lookupData={lookupData}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | getFormJSON | Dispatch<React.SetStateAction<GetFormJsonTypes>> | Yes | Function to receive the form JSON data | | initialFormDesign | ComponentProperties[] | Yes | Initial form design configuration | | lookupData | any | No | Data for lookup fields | | fontFamily | any | No | Custom font family for the form designer |

Styling

The package includes its own styles. You must import the styles entry point:

import 'ww-form-designer/styles';

This ensures all required CSS is loaded. If you do not see styles, check your build system or import the CSS manually as above.

TypeScript Support

• Full TypeScript declarations are included.
• You can import types directly:

import type { FormDesignerProps } from 'ww-form-designer';

If you see errors like:

• Cannot find module 'ww-form-designer/styles' or its corresponding type declarations.
• Could not find a declaration file for module 'ww-form-designer'.

Try:

• Deleting node_modules and dist in your project and reinstalling dependencies.
• Ensuring your tsconfig.json does not exclude node_modules/ww-form-designer.
• If using a local build, make sure you have run yarn build in the package directory.

Dependencies

This package has the following peer dependencies:

• React (^18.0.0 || ^19.0.0)
• React DOM (^18.0.0 || ^19.0.0)
• Ant Design (^5.0.0)

Make sure these are installed in your project.

Troubleshooting

• Styles not loading?
  • Ensure you have import 'ww-form-designer/styles'; in your entry file.
  • Check your build system supports CSS imports from node_modules.
• TypeScript errors?
  • Make sure you are using the latest version of the package and have built it if using locally.
  • Check your tsconfig.json includes the package for type checking.

Example Usage (for README)

import { FormDesigner } from 'ww-form-designer';
import 'ww-form-designer/styles';

Summary:
Your package is now set up correctly for both styling and TypeScript. If you want, I can help you further polish your README or provide troubleshooting tips for consumers.