@dynamic-field-kit/core 1.0.6 → 1.0.9

package/README.md

@@ -1,8 +1,13 @@
-# Dynamic Field Kit
+# @dynamic-field-kit/core
 
-A lightweight, extensible **dynamic form engine** for React, built for scalable applications and design systems.
+**Core types and field registry for dynamic-field-kit** (v1.0.7)
 
-`dynamic-field-kit` lets you define forms using **configuration objects** instead of hard-coded UI, and allows applications to **freely extend field types** (`text`, `number`, `checkbox`, `select`, `date`, `custom`, …) without modifying the library.
+A lightweight, extensible **dynamic form engine** framework-agnostic. Define forms using **configuration objects** instead of hard-coded UI, and allow applications to **freely extend field types** without modifying the library.
+
+`dynamic-field-kit` provides:
+- A shared `fieldRegistry` singleton that stores renderer implementations across frameworks.
+- Exchange types (`FieldDescription`, `FieldRendererProps`) that let you register renderers in any UI framework (React, Angular, Vue, etc.).
+- An extensible `FieldTypeMap` interface so consumers add custom field types with full TypeScript support.
 
 ---
 
@@ -13,30 +18,29 @@ A lightweight, extensible **dynamic form engine** for React, built for scalable
 - Pluggable field renderers via registry
 - Runtime conditional fields (`appearCondition`)
 - Clean TypeScript declarations (DTS-safe)
-- Core logic separated from React rendering
+- Framework-agnostic (works with React, Angular, Vue, or vanilla JS)
 - Ideal for form builders & design systems
 
 ---
 
-## 📦 Packages
+## 📦 Packages in the Monorepo
 
 | Package | Description |
 |------|------------|
-| `@dynamic-field-kit/core` | Core types and field registry |
+| `@dynamic-field-kit/core` | Core types and field registry (you are here) |
 | `@dynamic-field-kit/react` | React components (FieldInput, MultiFieldInput, DynamicInput) |
+| `@dynamic-field-kit/angular` | Angular components and module (standalone + NgModule exports) |
 
 ---
 
 ## 📥 Installation
 
+The core package is a peer dependency for UI framework adapters. Install together:
+
 ```bash
 npm install @dynamic-field-kit/core @dynamic-field-kit/react
-```
-
-**Peer dependency**
-
-```txt
-react >= 17
+# or for Angular
+npm install @dynamic-field-kit/core @dynamic-field-kit/angular
 ```
 
 ---
@@ -125,105 +129,38 @@ const fields: FieldDescription[] = [
 | appearCondition	| Runtime visibility condition |
 
 **Field Registry (Render Layer)**
-The library does **not** ship UI components.
 
-Instead, applications register their own renderers.
+The library does **not** ship UI components. Instead, applications register their own renderers using the `fieldRegistry` from the framework adapter (`@dynamic-field-kit/react`, `@dynamic-field-kit/angular`, etc.).
 
+Example (framework adapter determines how to invoke the renderer):
 ```ts
-import { fieldRegistry } from "@dynamic-field-kit/react"
-
-fieldRegistry.register("text", ({ value, onValueChange, label }) => (
-  <div>
-    <label>{label}</label>
-    <input
-      value={value ?? ""}
-      onChange={(e) => onValueChange?.(e.target.value)}
-    />
-  </div>
-))
-
-fieldRegistry.register("checkbox", ({ value, onValueChange, label }) => (
-  <label>
-    <input
-      type="checkbox"
-      checked={!!value}
-      onChange={(e) => onValueChange?.(e.target.checked)}
-    />
-    {label}
-  </label>
-))
-
-```
-
----
+import { fieldRegistry } from "@dynamic-field-kit/react" // or /angular
 
-## ⚛️ React Usage
-
-**MultiFieldInput (Main Form Engine)**
-
-```tsx
-import { MultiFieldInput } from "@dynamic-field-kit/react"
-import { FieldDescription } from "@dynamic-field-kit/core"
-
-const fields: FieldDescription[] = [
-  { name: "email", type: "text", label: "Email" },
-  { name: "age", type: "number", label: "Age" }
-]
-
-const Example = () => {
-  return (
-    <MultiFieldInput
-      fieldDescriptions={fields}
-      onChange={(data) => {
-        console.log("Form data:", data)
-      }}
-    />
-  )
-}
+fieldRegistry.register("text", myTextRenderer)
+fieldRegistry.register("checkbox", myCheckboxRenderer)
 ```
 
-**Controlled Form**
-```tsx
-const [formData, setFormData] = useState({})
-
-<MultiFieldInput
-  fieldDescriptions={fields}
-  properties={formData}
-  onChange={setFormData}
-/>
-```
 
----
 
 ## ➕ Adding a New Field Type
 
-You **do not** need to modify the library.
-
-Just extend `FieldTypeMap`:
+You **do not** need to modify the library. Just extend `FieldTypeMap` in your application:
 
 ```ts
 declare module "@dynamic-field-kit/core" {
   interface FieldTypeMap {
     date: Date
+    myCustom: any
   }
 }
 ```
 
-Then register a renderer:
+Then register renderers using the framework-specific adapter:
 
-```ts
-fieldRegistry.register("date", ({ value, onValueChange }) => (
-  <input
-    type="date"
-    value={value ? value.toISOString().slice(0, 10) : ""}
-    onChange={(e) =>
-      onValueChange?.(new Date(e.target.value))
-    }
-  />
-))
-```
+- React: `import { fieldRegistry } from "@dynamic-field-kit/react"`
+- Angular: `import { fieldRegistry } from "@dynamic-field-kit/angular"`
 
-Now `"date"` is fully type-safe everywhere.
+Now your custom types are fully type-safe throughout the codebase.
 
 ---
 ## 🧠 Domain Typing (Optional)
@@ -246,45 +183,28 @@ const fields: FieldDescription[] = [
 ```
 This keeps the library generic while allowing strict typing in the app.
 
----
-
-## 🧩 Components API
-
-**<DynamicInput />**
-
-Resolves and renders a field based on its type.
+## 📚 Next Steps
 
-```tsx
-<DynamicInput type="text" value="hello" />
-```
----
-
-**<FieldInput />**
-
-Renders a single field with value binding.
-
-```tsx
-<FieldInput
-  fieldDescription={field}
-  renderInfos={formData}
-  onChange={(value, key) => {}}
-/>
-```
-
-## Demo
-- [Examples](https://github.com/vannt-dev/dynamic-field-kit-demo)
+- **React integration**: See `@dynamic-field-kit/react` for component usage and examples.
+- **Angular integration**: See `@dynamic-field-kit/angular` for component usage and examples.
+- **Framework-agnostic**: Use `fieldRegistry` from any adapter to register custom renderers.
 
 ---
 
 ## 🏗 Architecture
 
+The monorepo contains framework-agnostic core and framework-specific adapters:
+
 ```
-dynamic-field-kit
+dynamic-field-kit (monorepo)
 ├─ packages/
-│  ├─ core    # framework-agnostic types
-│  └─ react   # React renderer + registry
+│  ├─ core        # Framework-agnostic types and registry
+│  ├─ react       # React renderer & DynamicInput component
+│  └─ angular     # Angular components & DynamicFieldKitModule
 ```
 
+All packages share the same `fieldRegistry` instance so registrations are visible across frameworks (in the same process).
+
 ---
 
 ## 🚫 Non-Goals

package/dist/index.js

@@ -25,13 +25,13 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/fieldRegistry.ts
+// src/FieldRegistry.ts
 var FieldRegistry = class {
   constructor() {
-    // ❗ INTERNAL = string, KHÔNG constrain
+    // ❗ INTERNAL = string, not constrain
     this.registry = {};
   }
-  // ✅ Type safety ở API
+  // ✅ Type safety API
   register(type, renderer) {
     this.registry[type] = renderer;
   }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/fieldRegistry.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, KHÔNG constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety ở API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,gBAAN,MAAoB;AAAA,EAApB;AAEH;AAAA,SAAQ,WAA+C,CAAC;AAAA;AAAA;AAAA,EAGxD,SACI,MACA,UACF;AACE,SAAK,SAAS,IAAc,IAAI;AAAA,EACpC;AAAA,EAEA,IACI,MAC0C;AAC1C,WAAO,KAAK,SAAS,IAAc;AAAA,EACvC;AACJ;AAEO,IAAM,gBAAgB,IAAI,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/FieldRegistry.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./FieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, not constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,gBAAN,MAAoB;AAAA,EAApB;AAEH;AAAA,SAAQ,WAA+C,CAAC;AAAA;AAAA;AAAA,EAGxD,SACI,MACA,UACF;AACE,SAAK,SAAS,IAAc,IAAI;AAAA,EACpC;AAAA,EAEA,IACI,MAC0C;AAC1C,WAAO,KAAK,SAAS,IAAc;AAAA,EACvC;AACJ;AAEO,IAAM,gBAAgB,IAAI,cAAc;","names":[]}

package/dist/index.mjs

@@ -1,10 +1,10 @@
-// src/fieldRegistry.ts
+// src/FieldRegistry.ts
 var FieldRegistry = class {
   constructor() {
-    // ❗ INTERNAL = string, KHÔNG constrain
+    // ❗ INTERNAL = string, not constrain
     this.registry = {};
   }
-  // ✅ Type safety ở API
+  // ✅ Type safety API
   register(type, renderer) {
     this.registry[type] = renderer;
   }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/fieldRegistry.ts"],"sourcesContent":["import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, KHÔNG constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety ở API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n"],"mappings":";AAKO,IAAM,gBAAN,MAAoB;AAAA,EAApB;AAEH;AAAA,SAAQ,WAA+C,CAAC;AAAA;AAAA;AAAA,EAGxD,SACI,MACA,UACF;AACE,SAAK,SAAS,IAAc,IAAI;AAAA,EACpC;AAAA,EAEA,IACI,MAC0C;AAC1C,WAAO,KAAK,SAAS,IAAc;AAAA,EACvC;AACJ;AAEO,IAAM,gBAAgB,IAAI,cAAc;","names":[]}
+{"version":3,"sources":["../src/FieldRegistry.ts"],"sourcesContent":["import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, not constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n"],"mappings":";AAKO,IAAM,gBAAN,MAAoB;AAAA,EAApB;AAEH;AAAA,SAAQ,WAA+C,CAAC;AAAA;AAAA;AAAA,EAGxD,SACI,MACA,UACF;AACE,SAAK,SAAS,IAAc,IAAI;AAAA,EACpC;AAAA,EAEA,IACI,MAC0C;AAC1C,WAAO,KAAK,SAAS,IAAc;AAAA,EACvC;AACJ;AAEO,IAAM,gBAAgB,IAAI,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dynamic-field-kit/core",
-    "version": "1.0.6",
+    "version": "1.0.9",
     "description": "Core types and field registry for dynamic-field-kit",
     "license": "MIT",
     "main": "dist/index.cjs",
@@ -19,6 +19,22 @@
     },
     "scripts": {
         "build": "tsup",
-        "clean": "rm -rf dist"
+        "clean": "rimraf dist",
+        "prepublishOnly": "npm run clean && npm run build",
+        "release:patch": "npm version patch && npm publish",
+        "release:minor": "npm version minor && npm publish",
+        "release:major": "npm version major && npm publish"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/vannt-dev/dynamic-field-kit.git"
+    },
+    "keywords": [
+        "dynamic-field",
+        "dynamic-field-kit",
+        "dynamic-field-kit/core"
+    ],
+    "devDependencies": {
+        "rimraf": "^6.1.3"
     }
 }