Kevin/codify specific improvements

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "ink-form",
+  "name": "@codifycli/ink-form",
   "type": "module",
-  "version": "2.0.1",
-  "description": "Complex user-friendly form component for React Ink",
+  "version": "0.0.11",
+  "description": "Complex user-friendly form component for Codify",
   "main": "lib/index.js",
   "exports": "./lib/index.js",
   "types": "lib/index.d.ts",
@@ -18,44 +18,47 @@
     "commandline",
     "cmd"
   ],
-  "repository": "https://github.com/lukasbach/ink-form",
-  "author": "Lukas Bach <lbach@outlook.de>",
-  "license": "MIT",
-  "bugs": "https://github.com/lukasbach/ink-form/issues",
+  "repository": "https://github.com/codifyCLI/codify-ink-form",
+  "author": "Lukas Bach <lbach@outlook.de> modified by Kevin Wang",
   "devDependencies": {
-    "@types/node": "^14.14.45",
+    "@types/node": "20.14.8",
     "@types/react": "^18.2.41",
-    "ink": "^4.4.1",
+    "ink": "^5.1.0",
     "prettier": "^2.2.1",
     "publish-fast": "^0.0.20",
     "react": "^18.2.0",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.19.2",
     "typedoc": "^0.25.4",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "react-devtools-core": "4.28.5"
   },
   "scripts": {
     "start": "ts-node-esm src/demo/overview.tsx",
-    "demo:overview": "ts-node-esm src/demo/overview.tsx",
-    "demo:packagejson": "ts-node-esm src/demo/packagejson.tsx",
-    "demo:custommanager": "ts-node-esm src/demo/custommanager.tsx",
-    "demo:imperative": "ts-node-esm src/demo/imperative.ts",
+    "demo:overview": "tsx src/demo/overview.tsx",
+    "demo:counter": "tsx src/demo/counter.tsx",
+    "demo:codify": "tsx src/demo/codify.tsx",
+    "demo:packagejson": "tsx src/demo/packagejson.tsx",
+    "demo:custommanager": "tsx src/demo/custommanager.tsx",
+    "demo:imperative": "tsx src/demo/imperative.ts",
     "build": "tsc",
     "build:docs": "typedoc --out docs src/index.ts",
     "lint": "prettier --check .",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
-    "release": "publish-fast"
+    "release": "publish-fast",
+    "prepublishOnly": "tsc"
   },
   "peerDependencies": {
-    "ink": ">=4",
+    "ink": ">=5",
     "react": ">=18"
   },
   "dependencies": {
-    "ink-select-input": "^5.0.0",
+    "ink-select-input": "^6.0.0",
     "ink-text-input": "^6.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "restricted",
+    "registry": "https://npm.pkg.github.com"
   },
   "publish": {
     "preScripts": "build,build:docs,lint",

src/ArrayFieldRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormFieldArray, SpecificFormFieldRendererProps } from './types.js';
+import { Box } from 'ink';
+import TextInput from 'ink-text-input';
+
+export const ArrayFieldRenderer: React.FC<
+  SpecificFormFieldRendererProps<FormFieldArray>
+> = props => {
+  const regex = props.field.regex;
+
+  const change = (value: string) => {
+    if (regex) {
+      const arr = value.split(/(?<!\\),/);
+
+      if (arr.some((i) => !regex.test(i))) {
+        props.onError(`"${value}" does not pass the regex ${regex}`);
+        props.onChange(value as any);
+      }
+    } else {
+      props.onChange(value as any);
+    }
+  };
+
+  return (
+    <Box borderStyle={'round'} width="100%" flexDirection="column">
+      <Box>
+        <TextInput
+          value={props.value?.toString() ?? ''}
+          onChange={value => {
+            props.onClearError();
+            change(value);
+          }}
+          placeholder={props.field.placeholder ?? 'value1, value2, value3...'}
+          onSubmit={() => props.onSetEditingField(undefined)}
+        />
+      </Box>
+    </Box>
+  );
+};

src/Button.tsx

@@ -0,0 +1,30 @@
+import { Box, Text, useFocus, useInput } from 'ink';
+import React from 'react';
+
+export function Button(props: {
+  label: string;
+  onClicked?: () => void;
+  id?: string;
+  isEnabled?: boolean;
+}) {
+  const isEnabled = props.isEnabled ?? true;
+  const { isFocused } = useFocus({ ...(props.id ? { id: props.id } : {}), isActive: props.isEnabled });
+
+  useInput((input, key) => {
+    if (!isEnabled) {
+      return;
+    }
+
+    if (key.return && isFocused) {
+      props.onClicked?.();
+    }
+  });
+
+  return <Box borderStyle="round" borderColor={!isEnabled ? 'gray' : isFocused ? 'blue' : 'magenta'}>
+    <Box flexGrow={1}>
+      <Text underline={isFocused} color={isFocused ? 'blue' : undefined}>
+        {props.label}
+      </Text>
+    </Box>
+  </Box>
+}