format-builder-ui

A small React component set providing a contentEditable "chip" (tag) editor and a modal wrapper for building dynamic object formats. The UI is focused on typing text and inserting non-editable chips that represent object fields — ideal for building format strings with variable placeholders.

This package exports two components:

• FormatBuilder — the editor component (contentEditable based) that allows typing and inserting chips
• FormatBuilderModal — a simple modal wrapper that shows FormatBuilder inside a centered dialog

Installation

As this package uses React as a peer dependency, install it alongside React in your app:

# from the package folder (local build)
npm install format-builder-ui
# or with a scope
# npm publish --access public
# npm install @your-scope/format-builder

Note: react and react-dom are peer dependencies and must be installed in your application.

Quick Start

import React, { useState } from 'react';
import { FormatBuilderModal } from 'format-builder-ui';

const data = {
  user: { name: 'Jane', email: '[email protected]' },
  id: 123
};

export default function Example() {
  const [open, setOpen] = useState(true);
  const handleSave = (payload) => {
    console.log('Saved mapping', payload);
    setOpen(false);
  };
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Format Builder</button>
      <FormatBuilderModal
        isOpen={open}
        onClose={() => setOpen(false)}
        onSave={handleSave}
        dataObject={data}
      />
    </div>
  );
}

API

FormatBuilder props

• dataObject (object) — required: the sample object to use for generating field paths
• savedMappings (optional) — object with { format: string, recordFields: [{ path }] } used to pre-populate editor
• onSave (function) — callback invoked with { format, recordFields } when the user clicks "Save Mapping"
• onClose (function) — close/cancel callback

FormatBuilderModal props

• isOpen (boolean) — show/hide modal
• dataObject, savedMappings, onSave, onClose — forwarded to FormatBuilder

Example: building and saving

When you add a chip it will be represented in the saved payload as {var} in the format string. recordFields contains the array of { path } in the same order.

Example returned payload:

{
  "format": "Hello {var}, your id is {var}",
  "recordFields": [{ "path": "user.name" }, { "path": "id" }]
}

Build & Publish

1. Install dev dependencies in the package folder:

cd packages/format-builder
npm install

2. Build bundles (creates dist/index.esm.js and dist/index.cjs.js):

npm run build

3. Publish to npm (ensure package.json name is set correctly and you are logged in):

npm publish --access public

Notes:

• The package expects react and react-dom to be provided by the consuming app (peer dependencies).
• The package ships JS bundles; if you want TypeScript types generate or add .d.ts declarations.

Contributing

PRs welcome. Open an issue first for larger changes.

License

MIT