@dynamic-field-kit/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
+
+interface FieldTypeMap {
+}
+type FieldTypeKey = keyof FieldTypeMap | string;
+
+interface Props$2<T extends FieldTypeKey$1> {
+    type: T;
+    value?: any;
+    onChange?: (value: any) => void;
+    label?: string;
+}
+declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    fieldDescription: FieldDescription;
+    renderInfos: Properties;
+    onValueChangeField: (value: any, key: string) => void;
+}
+declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    fieldDescriptions: FieldDescription[];
+    properties?: Properties;
+    onChange?: (data: Properties) => void;
+}
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
+
+interface FieldTypeMap {
+}
+type FieldTypeKey = keyof FieldTypeMap | string;
+
+interface Props$2<T extends FieldTypeKey$1> {
+    type: T;
+    value?: any;
+    onChange?: (value: any) => void;
+    label?: string;
+}
+declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    fieldDescription: FieldDescription;
+    renderInfos: Properties;
+    onValueChangeField: (value: any, key: string) => void;
+}
+declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    fieldDescriptions: FieldDescription[];
+    properties?: Properties;
+    onChange?: (data: Properties) => void;
+}
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };

package/dist/index.js

@@ -0,0 +1,114 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DynamicInput: () => DynamicInput_default,
+  FieldInput: () => FieldInput_default,
+  MultiFieldInput: () => MultiFieldInput_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DynamicInput.tsx
+var import_core = require("@dynamic-field-kit/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DynamicInput = ({
+  type,
+  value,
+  onChange,
+  label
+}) => {
+  const Renderer = import_core.fieldRegistry.get(type);
+  if (!Renderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      "Unknown field type: ",
+      type
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Renderer,
+    {
+      value,
+      onValueChange: onChange,
+      label
+    }
+  );
+};
+var DynamicInput_default = DynamicInput;
+
+// src/FieldInput.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FieldInput = ({
+  fieldDescription,
+  renderInfos,
+  onValueChangeField
+}) => {
+  const { name, type, label } = fieldDescription;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DynamicInput_default,
+    {
+      type,
+      label,
+      value: renderInfos[name],
+      onChange: (v) => onValueChangeField(v, name)
+    }
+  );
+};
+var FieldInput_default = FieldInput;
+
+// src/MultiFieldInput.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MultiFieldInput = ({
+  fieldDescriptions,
+  properties,
+  onChange
+}) => {
+  const [data, setData] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
+    if (properties) setData(properties);
+  }, [properties]);
+  const visibleFields = (0, import_react.useMemo)(
+    () => fieldDescriptions.filter(
+      (f) => !f.appearCondition || f.appearCondition(data)
+    ),
+    [fieldDescriptions, data]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FieldInput_default,
+    {
+      fieldDescription: f,
+      renderInfos: data,
+      onValueChangeField: (value, key) => {
+        const next = { ...data, [key]: value };
+        setData(next);
+        onChange?.(next);
+      }
+    }
+  ) }, f.name)) });
+};
+var MultiFieldInput_default = MultiFieldInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DynamicInput,
+  FieldInput,
+  MultiFieldInput
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["export * from \"./types\"\r\nexport { default as DynamicInput } from \"./DynamicInput\"\r\nexport { default as FieldInput } from \"./FieldInput\"\r\nexport { default as MultiFieldInput } from \"./MultiFieldInput\"\r\n","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({\r\n    type,\r\n    value,\r\n    onChange,\r\n    label,\r\n}: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n    if (!Renderer) {\r\n        return <div>Unknown field type: {type}</div>\r\n    }\r\n\r\n    return (\r\n        <Renderer\r\n            value={value}\r\n            onValueChange={onChange}\r\n            label={label}\r\n        />\r\n    )\r\n}\r\n\r\nexport default DynamicInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\nconst FieldInput = ({\r\n  fieldDescription,\r\n  renderInfos,\r\n  onValueChangeField,\r\n}: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n}\r\n\r\nconst MultiFieldInput = ({\r\n  fieldDescriptions,\r\n  properties,\r\n  onChange,\r\n}: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () =>\r\n      fieldDescriptions.filter(\r\n        (f) => !f.appearCondition || f.appearCondition(data)\r\n      ),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  return (\r\n    <>\r\n      {visibleFields.map((f) => (\r\n        <Fragment key={f.name}>\r\n          <FieldInput\r\n            fieldDescription={f}\r\n            renderInfos={data}\r\n            onValueChangeField={(value, key) => {\r\n              const next = { ...data, [key]: value }\r\n              setData(next)\r\n              onChange?.(next)\r\n            }}\r\n          />\r\n        </Fragment>\r\n      ))}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAA4C;AAkB7B;AATf,IAAM,eAAe,CAAyB;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAgB;AACZ,QAAM,WAAW,0BAAc,IAAI,IAAI;AAEvC,MAAI,CAAC,UAAU;AACX,WAAO,6CAAC,SAAI;AAAA;AAAA,MAAqB;AAAA,OAAK;AAAA,EAC1C;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAe;AAAA,MACf;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;;;ACbX,IAAAA,sBAAA;AARJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAEA,IAAO,qBAAQ;;;ACzBf,mBAAuD;AA6BnD,IAAAC,sBAAA;AApBJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAqB,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,MACE,kBAAkB;AAAA,MAChB,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI;AAAA,IACrD;AAAA,IACF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,SACE,6EACG,wBAAc,IAAI,CAAC,MAClB,6CAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,EACF,KATa,EAAE,IAUjB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":["import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,85 @@
+// src/DynamicInput.tsx
+import { fieldRegistry } from "@dynamic-field-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DynamicInput = ({
+  type,
+  value,
+  onChange,
+  label
+}) => {
+  const Renderer = fieldRegistry.get(type);
+  if (!Renderer) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      "Unknown field type: ",
+      type
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      value,
+      onValueChange: onChange,
+      label
+    }
+  );
+};
+var DynamicInput_default = DynamicInput;
+
+// src/FieldInput.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FieldInput = ({
+  fieldDescription,
+  renderInfos,
+  onValueChangeField
+}) => {
+  const { name, type, label } = fieldDescription;
+  return /* @__PURE__ */ jsx2(
+    DynamicInput_default,
+    {
+      type,
+      label,
+      value: renderInfos[name],
+      onChange: (v) => onValueChangeField(v, name)
+    }
+  );
+};
+var FieldInput_default = FieldInput;
+
+// src/MultiFieldInput.tsx
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+var MultiFieldInput = ({
+  fieldDescriptions,
+  properties,
+  onChange
+}) => {
+  const [data, setData] = useState({});
+  useEffect(() => {
+    if (properties) setData(properties);
+  }, [properties]);
+  const visibleFields = useMemo(
+    () => fieldDescriptions.filter(
+      (f) => !f.appearCondition || f.appearCondition(data)
+    ),
+    [fieldDescriptions, data]
+  );
+  return /* @__PURE__ */ jsx3(Fragment2, { children: visibleFields.map((f) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
+    FieldInput_default,
+    {
+      fieldDescription: f,
+      renderInfos: data,
+      onValueChangeField: (value, key) => {
+        const next = { ...data, [key]: value };
+        setData(next);
+        onChange?.(next);
+      }
+    }
+  ) }, f.name)) });
+};
+var MultiFieldInput_default = MultiFieldInput;
+export {
+  DynamicInput_default as DynamicInput,
+  FieldInput_default as FieldInput,
+  MultiFieldInput_default as MultiFieldInput
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({\r\n    type,\r\n    value,\r\n    onChange,\r\n    label,\r\n}: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n    if (!Renderer) {\r\n        return <div>Unknown field type: {type}</div>\r\n    }\r\n\r\n    return (\r\n        <Renderer\r\n            value={value}\r\n            onValueChange={onChange}\r\n            label={label}\r\n        />\r\n    )\r\n}\r\n\r\nexport default DynamicInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\nconst FieldInput = ({\r\n  fieldDescription,\r\n  renderInfos,\r\n  onValueChangeField,\r\n}: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n}\r\n\r\nconst MultiFieldInput = ({\r\n  fieldDescriptions,\r\n  properties,\r\n  onChange,\r\n}: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () =>\r\n      fieldDescriptions.filter(\r\n        (f) => !f.appearCondition || f.appearCondition(data)\r\n      ),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  return (\r\n    <>\r\n      {visibleFields.map((f) => (\r\n        <Fragment key={f.name}>\r\n          <FieldInput\r\n            fieldDescription={f}\r\n            renderInfos={data}\r\n            onValueChangeField={(value, key) => {\r\n              const next = { ...data, [key]: value }\r\n              setData(next)\r\n              onChange?.(next)\r\n            }}\r\n          />\r\n        </Fragment>\r\n      ))}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";AAAA,SAAS,qBAAmC;AAkB7B,SAIP,KAJO;AATf,IAAM,eAAe,CAAyB;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAgB;AACZ,QAAM,WAAW,cAAc,IAAI,IAAI;AAEvC,MAAI,CAAC,UAAU;AACX,WAAO,qBAAC,SAAI;AAAA;AAAA,MAAqB;AAAA,OAAK;AAAA,EAC1C;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAe;AAAA,MACf;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;;;ACbX,gBAAAA,YAAA;AARJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAE9B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAEA,IAAO,qBAAQ;;;ACzBf,SAAS,UAAU,WAAW,SAAS,gBAAgB;AA6BnD,qBAAAC,WAGM,OAAAC,YAHN;AApBJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB,CAAC,CAAC;AAE/C,YAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB;AAAA,IACpB,MACE,kBAAkB;AAAA,MAChB,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI;AAAA,IACrD;AAAA,IACF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,SACE,gBAAAA,KAAAD,WAAA,EACG,wBAAc,IAAI,CAAC,MAClB,gBAAAC,KAAC,YACC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,EACF,KATa,EAAE,IAUjB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":["jsx","Fragment","jsx"]}

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@dynamic-field-kit/react",
+    "version": "1.0.0",
+    "description": "React renderer for dynamic-field-kit",
+    "license": "MIT",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "sideEffects": false,
+    "files": [
+        "dist"
+    ],
+    "peerDependencies": {
+        "react": ">=17"
+    },
+    "dependencies": {
+        "@dynamic-field-kit/core": "^1.0.0"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "scripts": {
+        "build": "tsup",
+        "clean": "rm -rf dist"
+    }
+}