@rezide/dynamic-form

Schema-driven dynamic form renderer with project / tower / unit / location pickers, packaged for React applications.

Install

npm install @rezide/dynamic-form

Or, when consumed as a workspace package inside this monorepo, declare the dependency as "@rezide/dynamic-form": "*".

Next.js setup

The package ships as pre-built ESM + CJS with .d.ts. No special bundler config is needed. If you consume it as a workspace (not from npm), add it to transpilePackages in next.config.ts:

const nextConfig: NextConfig = {
  transpilePackages: ["@rezide/dynamic-form"],
};

Peer dependencies the consumer must provide

• react >= 18, react-dom >= 18
• @tanstack/react-query ^5 — mount a QueryClientProvider above any <DynamicForm>
• Tailwind v4 with the shadcn CSS variables (--background, --foreground, --primary, --border, --ring, --radius, etc.). Copy the :root { ... } block from the host app's globals.css.

Configure backend endpoints

The package ships with default paths (/api/projects/search, etc.) that work inside this repo because Next.js rewrites proxy them to the real backends. In another app you'll usually want to override them.

Call once at app startup (e.g. in your root providers.tsx):

import { configureDynamicForm } from "@rezide/dynamic-form";

configureDynamicForm({
  baseURL: "https://api.rezide.in",
  timeoutMs: 10000,
  getAuthHeader: () => {
    const token = localStorage.getItem("rezide_token");
    return token ? `Bearer ${token}` : null;
  },
  endpoints: {
    projectsSearch: "/v1/admin/Inventory/project/search",
    towersSearch: "/v1/admin/Inventory/tower/search",
    unitsSearch: "/v1/admin/Inventory/unit/search",
    locationSearch: (type) => `/v1/admin/localisation/${type}`,
    cityMasterSearch: "/v1/admin/master/city/search",
    regionMasterSearch: "/v1/admin/master/region/search",
    subRegionRepoSearch: "/v1/admin/repository/sub_region/search",
    localityRepoSearch: "/v1/admin/repository/locality/search",
    googlePlacesSearch: "/v1/google/places/search",
  },
});

Any field you omit keeps its default. Subsequent calls merge on top of the current config.

Configurable surface

| Field | Type | Purpose | | --- | --- | --- | | baseURL | string | Prepended to every request. Default / (relative, for same-origin proxies). | | timeoutMs | number | Axios timeout. Default 10000. | | getAuthHeader | () => string \| null \| undefined | Returned value is set as Authorization on every request when truthy. | | endpoints.projectsSearch | string | GET ?query=&page=&pageSize= | | endpoints.towersSearch | string | POST { projectIds }, query ?query=&page=&pageSize= | | endpoints.unitsSearch | string | POST { towerIds }, query ?query=&page=&pageSize= | | endpoints.locationSearch(type) | (type) => string | GET ?searchQuery=&page=&pageSize=&[key]= — type is "country", "zone", etc. | | endpoints.cityMasterSearch | string | GET ?query= | | endpoints.regionMasterSearch | string | GET ?query=&cityId= | | endpoints.subRegionRepoSearch | string | GET ?query=&regionId= | | endpoints.localityRepoSearch | string | GET ?query=&subRegionId= | | endpoints.googlePlacesSearch | string | GET ?query= |

Usage

"use client";

import { DynamicForm } from "@rezide/dynamic-form";

export default function Page() {
  return (
    <DynamicForm
      formTitle="Listing — Quick Create"
      formDescription="Loaded from server"
      schemaUrl="/api/forms/listing.quick.create/versions/latest-published"
      schemaQueryKey={["dynamic-form", "listing.quick.create"]}
      mode="add"
      showPayloadPreview
      onSubmit={(payload) => console.log(payload)}
    />
  );
}

You can also pass schema={...} directly instead of schemaUrl. See the DynamicFormSchema type for the shape.

Public exports

• Components: DynamicForm plus the nine pickers (CountrySelectionCombobox, StateSelectionCombobox, CitySelectionCombobox, RegionSelectionCombobox, SubRegionSelectionCombobox, LocalitySelectionCombobox, ProjectSearchCombobox, TowerSelectionCombobox, UnitSelectionCombobox).
• Config: configureDynamicForm, getDynamicFormConfig, DynamicFormConfig, Endpoints.
• Types: DynamicFormSchema, FormStep, FormVersionResponse, List, ListItem, Project, Tower, Unit, GooglePlaceResult.

Caveat — Rezide-specific contracts

The endpoint URLs are configurable but the response shapes the package expects (e.g. { data: [{ _id, value, label, ... }], pagination: { next, pageSize } }) are baked in. To use against a non-Rezide backend you must either adapt your API to the same shape or fork the picker hooks. See src/lib/api/*.ts for the contracts.

Publishing

The package is built with tsup to dist/ (ESM + CJS + .d.ts). The "use client" directive is prepended to each bundle after build so React Server Components consumers (Next.js App Router) work out of the box.

One-time setup

1. Create the @rezide scope on npm if it doesn't exist (free) and ensure your npm user is a member.
2. npm login
3. Enable 2FA on the npm account for auth-and-writes (recommended).

Cut a release

From packages/dynamic-form/:

# Bump the version
npm version patch        # or: minor / major

# Publish (prepublishOnly will run `npm run build`)
npm publish

publishConfig.access is set to "public" so the scoped package is published publicly. The files field limits the tarball to dist, src, README.md, LICENSE.

Local development of the package

npm run dev runs tsup --watch and re-prepends the "use client" directive on each rebuild via the --onSuccess hook. Run it alongside the consuming app's next dev.

Verifying the tarball before publishing

npm pack --dry-run

Confirms exactly what files would ship.