@dynamic-field-kit/angular 1.2.2 → 1.2.4

package/README.md

@@ -1,56 +1,65 @@
 # @dynamic-field-kit/angular
 
-Lightweight Angular adapters for `@dynamic-field-kit/core`.
+Angular adapter for `@dynamic-field-kit/core`.
 
-This package exposes Angular components and a convenience NgModule that integrate with the shared `fieldRegistry` from `@dynamic-field-kit/core`.
+This package provides Angular components and a convenience module that render field schemas defined with `@dynamic-field-kit/core`.
 
-Quick overview
-- Exports `DynamicInput`, `FieldInput`, `MultiFieldInput`, layout components, and `DynamicFieldKitModule`.
-- Uses the shared `fieldRegistry` from `@dynamic-field-kit/core` to resolve Angular field renderers at runtime.
-- Can be consumed in two modes: npm package mode for external apps, or local development mode from `packages/angular/dist`.
-- `MultiFieldInput` currently supports `column`, `row`, and `grid` layout values.
+Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
 
-Mode 1: npm package mode
+## Install
 
-Use this mode for normal Angular apps outside this monorepo.
+```bash
+npm install @dynamic-field-kit/core @dynamic-field-kit/angular
+```
 
-1. Install the packages:
+If you need to pin versions explicitly:
 
 ```bash
-npm install @dynamic-field-kit/core @dynamic-field-kit/angular
+npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
 ```
 
-2. Import `DynamicFieldKitModule` in your Angular module:
+## What it exports
+
+- `DynamicInput`
+- `FieldInput`
+- `MultiFieldInput`
+- `DynamicFieldKitModule`
+- `fieldRegistry`
+
+## Basic setup
+
+1. Import `DynamicFieldKitModule` in your Angular module.
 
 ```ts
-import { DynamicFieldKitModule } from '@dynamic-field-kit/angular'
-
-@NgModule({
-	imports: [BrowserModule, DynamicFieldKitModule],
-})
+import { BrowserModule } from "@angular/platform-browser"
+import { NgModule } from "@angular/core"
+import { DynamicFieldKitModule } from "@dynamic-field-kit/angular"
+
+@NgModule({
+  imports: [BrowserModule, DynamicFieldKitModule],
+})
 export class AppModule {}
 ```
 
-3. Register your Angular field components in the shared registry before bootstrap:
+2. Register Angular field components before bootstrap.
 
 ```ts
-// src/main.ts
-import 'zone.js'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
-import { fieldRegistry } from '@dynamic-field-kit/angular'
-import { AppModule } from './app/app.module'
-import { TextFieldComponent } from './app/components/text-field.component'
-import { NumberFieldComponent } from './app/components/number-field.component'
+import "zone.js"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
+import { fieldRegistry } from "@dynamic-field-kit/angular"
+import { AppModule } from "./app/app.module"
+import { TextFieldComponent } from "./app/components/text-field.component"
+import { NumberFieldComponent } from "./app/components/number-field.component"
 
-fieldRegistry.register('text', TextFieldComponent as any)
-fieldRegistry.register('number', NumberFieldComponent as any)
+fieldRegistry.register("text", TextFieldComponent as any)
+fieldRegistry.register("number", NumberFieldComponent as any)
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err) => console.error(err))
 ```
 
-4. Render fields in a template:
+3. Render your schema in a template.
 
 ```html
 <dfk-multi-field-input
@@ -60,20 +69,20 @@ platformBrowserDynamic()
 ></dfk-multi-field-input>
 ```
 
-5. Example component state:
+4. Define your field schema in the component.
 
 ```ts
-import { Component } from '@angular/core'
-import { FieldDescription } from '@dynamic-field-kit/core'
+import { Component } from "@angular/core"
+import { FieldDescription } from "@dynamic-field-kit/core"
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
 })
 export class AppComponent {
   fields: FieldDescription[] = [
-    { name: 'name', type: 'text', label: 'Name' },
-    { name: 'age', type: 'number', label: 'Age' },
+    { name: "name", type: "text", label: "Name" },
+    { name: "age", type: "number", label: "Age" },
   ]
 
   data: any = {}
@@ -84,53 +93,26 @@ export class AppComponent {
 }
 ```
 
-Mode 2: local development mode
+## Type augmentation
 
-Use this mode only when developing inside this monorepo or when intentionally linking a local build.
-
-1. Point your Angular app at the built package output instead of importing from `src/`:
+```ts
+import "@dynamic-field-kit/core"
 
-```json
-{
-  "dependencies": {
-    "@dynamic-field-kit/core": "file:../../packages/core",
-    "@dynamic-field-kit/angular": "file:../../packages/angular/dist"
+declare module "@dynamic-field-kit/core" {
+  interface FieldTypeMap {
+    text: string
+    number: number
   }
 }
 ```
 
-2. Build the local Angular package before running the app:
+## Notes
 
-```bash
-cd packages/angular
-npm run build
-```
-
-3. When using a local `file:` dependency on Windows or via symlinked installs, set `preserveSymlinks: true` in the Angular builder options to avoid runtime issues with linked packages.
-
-Build & publish
-- Build locally with `ng-packagr`:
-
-```bash
-cd packages/angular
-npm run build
-```
-
-- Publish to npm:
-
-```bash
-cd packages/angular
-npm run build
-npm run publish:dist
-```
+- Register Angular component classes in `fieldRegistry`.
+- Do not register React or Vue renderers in the Angular adapter.
+- `MultiFieldInput` supports `column`, `row`, and `grid` layouts.
+- The shared schema and field types still come from `@dynamic-field-kit/core`.
 
-Notes & caveats
-- Register Angular component classes in `fieldRegistry`. Do not register React or Vue renderers when using the Angular adapter.
-- `DynamicFieldKitModule` is the recommended integration path for consumer apps.
-- Standalone exports are still available for advanced composition, but most apps should start with the module.
-- Text fields default to an empty string when no value is present, so empty controls render as blank instead of `undefined`.
-- Supported `layout` values are `column`, `row`, and `grid`.
+## License
 
-Examples & docs
-- See `example/angular-app/angular-instructions.md` for detailed wiring steps.
-- Try the local scaffold at `example/angular-app/` for a hands-on demo.
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-field-kit/angular",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Angular renderer for dynamic-field-kit",
   "license": "MIT",
   "private": false,
@@ -10,7 +10,7 @@
   "peerDependencies": {
     "@angular/common": ">=13 <22",
     "@angular/core": ">=13 <22",
-    "@dynamic-field-kit/core": "^1.0.7"
+    "@dynamic-field-kit/core": "^1.0.13"
   },
   "publishConfig": {
     "access": "public"