@dwidge/json-forms-expo 0.0.2

package/dist/types/hooks/useCreateBlankAttachment.d.ts

@@ -0,0 +1,10 @@
+export declare const useCreateBlankAttachment: ({ createAttachmentList, createFileList, AttachIds, }?: {
+    createAttachmentList?: ((list: Omit<Partial<import("..").FileAttachment>, "createdAt" | "createdBy">[]) => Promise<(Partial<import("..").FileAttachment> | null)[]>) | undefined;
+    createFileList?: ((list: Omit<Partial<import("..").File2>, "createdAt" | "createdBy">[]) => Promise<(Partial<import("..").File2> | null)[]>) | undefined;
+    AttachIds?: (import("./useParams").Params & {
+        AttachmentId?: string | null | undefined;
+        FormId?: string | null | undefined;
+        FormAttachmentId?: string | null | undefined;
+    }) | undefined;
+}) => (() => Promise<Partial<import("..").FileAttachment> | null>) | undefined;
+//# sourceMappingURL=useCreateBlankAttachment.d.ts.map

package/dist/types/hooks/useCreateBlankAttachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateBlankAttachment.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCreateBlankAttachment.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB;;;;;;;;8EAkBtB,CAAC"}

package/dist/types/hooks/useCreateBlankForm.d.ts

@@ -0,0 +1,6 @@
+export declare const useCreateBlankForm: ({ createFormList, }?: {
+    createFormList?: ((list: Omit<Partial<import("..").Form1>, "createdAt" | "createdBy">[]) => Promise<(Partial<import("..").Form1> | null)[]>) | undefined;
+}) => (() => Promise<{
+    FormId: string | undefined;
+}>) | (() => undefined);
+//# sourceMappingURL=useCreateBlankForm.d.ts.map

package/dist/types/hooks/useCreateBlankForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateBlankForm.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCreateBlankForm.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB;;;;uBAKV,CAAC"}

package/dist/types/hooks/useCreateBlankFormAttachment.d.ts

@@ -0,0 +1,13 @@
+import { Form1Key } from "../types/Form1";
+export declare const useCreateBlankFormAttachment: ({ createFormList, createAttachmentList, AttachmentIds, }?: {
+    createFormList?: ((list: Omit<Partial<import("../types/Form1").Form1>, "createdAt" | "createdBy">[]) => Promise<(Partial<import("../types/Form1").Form1> | null)[]>) | undefined;
+    createAttachmentList?: ((list: Omit<Partial<import("..").FormAttachment1>, "createdAt" | "createdBy">[]) => Promise<(Partial<import("..").FormAttachment1> | null)[]>) | undefined;
+    AttachmentIds?: (import("./useParams").Params & {
+        AttachmentId?: string | null | undefined;
+        FormId?: string | null | undefined;
+        FormAttachmentId?: string | null | undefined;
+    }) | undefined;
+}) => ((forms: Form1Key[]) => Promise<{
+    FormAttachmentId: string | undefined;
+}>) | (() => Promise<undefined>);
+//# sourceMappingURL=useCreateBlankFormAttachment.d.ts.map

package/dist/types/hooks/useCreateBlankFormAttachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateBlankFormAttachment.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCreateBlankFormAttachment.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,eAAO,MAAM,4BAA4B;;;;;;;;eAMrB,QAAQ,EAAE;;gCAIH,CAAC"}

package/dist/types/hooks/useParams.d.ts

@@ -0,0 +1,7 @@
+export type Params = Record<string, string | number | null | undefined>;
+export declare const useParams: () => Params & {
+    AttachmentId?: string | null | undefined;
+    FormId?: string | null | undefined;
+    FormAttachmentId?: string | null | undefined;
+};
+//# sourceMappingURL=useParams.d.ts.map

package/dist/types/hooks/useParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParams.d.ts","sourceRoot":"","sources":["../../../src/hooks/useParams.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AACxE,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG;IACpC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACN,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./FileAttachment";
+export * from "./Form";
+export * from "./FormAttachment";
+export * from "./hooks";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/types/types/File2.d.ts

@@ -0,0 +1,16 @@
+export type File2 = {
+    id: string;
+    created: boolean;
+    createdAt: number;
+    createdBy: number | null;
+    size: number | null;
+    mime: string | null;
+    sha256: string | null;
+    getUrl: string | null;
+    putUrl: string | null;
+};
+export type File2Get = Partial<File2>;
+export type File2Set = Omit<File2Get, "createdAt" | "createdBy">;
+export type File2Key = Pick<File2Get, "id">;
+export type File2Filter = File2Get;
+//# sourceMappingURL=File2.d.ts.map

package/dist/types/types/File2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"File2.d.ts","sourceRoot":"","sources":["../../../src/types/File2.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC;AAEjE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC"}

package/dist/types/types/FileAttachment.d.ts

@@ -0,0 +1,10 @@
+export type FileAttachment = {
+    id: string;
+    created: boolean;
+    createdAt: number;
+    createdBy: number | null;
+    FileId: string | null;
+    FormId: string | null;
+    FormAttachmentId: string | null;
+};
+//# sourceMappingURL=FileAttachment.d.ts.map

package/dist/types/types/FileAttachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../../src/types/FileAttachment.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC,CAAC"}

package/dist/types/types/Form1.d.ts

@@ -0,0 +1,14 @@
+export type Form1 = {
+    id: string;
+    created: boolean;
+    createdAt: number;
+    createdBy: number | null;
+    name: string | null;
+    type: string | null;
+    schema: string | null;
+};
+export type Form1Get = Partial<Form1>;
+export type Form1Set = Omit<Form1Get, "createdAt" | "createdBy">;
+export type Form1Key = Pick<Form1Get, "id">;
+export type Form1Filter = Form1Get;
+//# sourceMappingURL=Form1.d.ts.map

package/dist/types/types/Form1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form1.d.ts","sourceRoot":"","sources":["../../../src/types/Form1.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC;AAEjE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC"}

package/dist/types/types/FormAttachment.d.ts

@@ -0,0 +1,13 @@
+export type FormAttachment1 = {
+    id: string;
+    created: boolean;
+    createdAt: number;
+    createdBy: number | null;
+    FormId: string | null;
+    data: string | null;
+};
+export type FormAttachment1Get = Partial<FormAttachment1>;
+export type FormAttachment1Set = Omit<FormAttachment1Get, "createdAt" | "createdBy">;
+export type FormAttachment1Key = Pick<FormAttachment1Get, "id">;
+export type FormAttachment1Filter = FormAttachment1Get;
+//# sourceMappingURL=FormAttachment.d.ts.map

package/dist/types/types/FormAttachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAttachment.d.ts","sourceRoot":"","sources":["../../../src/types/FormAttachment.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,kBAAkB,EAClB,WAAW,GAAG,WAAW,CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC"}

package/dist/types/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./File2";
+export * from "./FileAttachment";
+export * from "./Form1";
+export * from "./FormAttachment";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@dwidge/json-forms-expo",
+  "version": "0.0.2",
+  "description": "Editor for Json Forms.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dwidge/json-forms-expo.git"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "@dwidge/class-name-rnw": "^0.0.3",
+    "@dwidge/fallback-rnw": "^0.0.2",
+    "@dwidge/json-forms-paper": "^0.0.6",
+    "@dwidge/trace-js": "^0.0.8",
+    "@dwidge/axios-interceptor": "^0.0.2",
+    "@dwidge/components-expo": "^0.0.11",
+    "@dwidge/components-rnw": "^0.0.7",
+    "@dwidge/crud-api-react": "^0.0.10",
+    "@dwidge/hooks-expo": "^0.0.6",
+    "@dwidge/hooks-react": "^0.0.4",
+    "@dwidge/json-forms-designer": "^0.0.5",
+    "@dwidge/json-schema-form-rnw": "^0.0.6",
+    "@dwidge/query-axios-zod": "^0.0.13",
+    "@dwidge/react-native-web-webview": "^0.0.4",
+    "@dwidge/utils-js": "^0.0.11",
+    "@dwidge/wmdb-expo": "^0.0.4",
+    "@dwidge/wmdb-expo-web": "^0.0.4",
+    "@jsonforms/core": "^3.4.0",
+    "@jsonforms/react": "^3.4.0",
+    "@rneui/base": "4.0.0-rc.7",
+    "@rneui/themed": "^4.0.0-rc.8",
+    "ajv": "^8.17.1",
+    "assert": "^2.1.0",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-native": "^0.74.5",
+    "react-native-error-boundary": "^1.2.5",
+    "react-native-paper": "^5.12.5",
+    "react-native-web": "^0.19.12",
+    "ts-deepmerge": "^6.2.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "expect": "^29.7.0",
+    "ncp": "^2.0.0",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "test": "node --enable-source-maps --test --test-name-pattern"
+  }
+}

package/src/FileAttachment/AttachmentEdit.tsx

@@ -0,0 +1,14 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { FileEdit } from "@dwidge/components-expo";
+import { FileApi } from "../hooks/FileApi";
+import { FileAttachmentApi } from "../hooks/FileAttachmentApi";
+import { useParams } from "../hooks/useParams";
+
+export const AttachmentEdit = ({
+  id = useParams().AttachmentId,
+  attachment: [attachment] = FileAttachmentApi.useItem(id),
+  file: [file, setFile] = FileApi.useItem(attachment?.FileId),
+}) => <FileEdit file={[file, setFile]} />;

package/src/FileAttachment/AttachmentListEdit.tsx

@@ -0,0 +1,45 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import {
+  StyledButton,
+  StyledView,
+  UnstyledList,
+  viewStyles,
+} from "@dwidge/components-rnw";
+import assert from "assert";
+import { useState } from "react";
+import { FileAttachmentApi } from "../hooks/FileAttachmentApi";
+import { useCreateBlankAttachment } from "../hooks/useCreateBlankAttachment";
+import { Params, useParams } from "../hooks/useParams";
+import { AttachmentEdit } from "./AttachmentEdit";
+
+export const AttachmentListEdit = ({
+  ids = useParams() as Params,
+  elements = FileAttachmentApi.useGetList(ids),
+  selection: [selection, setSelection] = useState<string[]>([]),
+  onCreateAttachment = useCreateBlankAttachment({ AttachIds: ids }),
+  onDeleteAttachmentList = FileAttachmentApi.useDeleteList(),
+}) => (
+  <StyledView column>
+    <UnstyledList
+      items={elements}
+      keyExtractor={(item) => (assert(item.id), item.id)}
+      selection={[selection, setSelection]}
+      render={(item) => <AttachmentEdit id={item.id} />}
+      selectStyle={viewStyles.select}
+      style={viewStyles.unselect}
+    />
+    <StyledView row gap center middle>
+      <StyledButton icon="add" onPress={onCreateAttachment} />
+      <StyledButton
+        icon="remove"
+        onPress={
+          onDeleteAttachmentList &&
+          (() => onDeleteAttachmentList(selection.map((id) => ({ id }))))
+        }
+      />
+    </StyledView>
+  </StyledView>
+);

package/src/FileAttachment/AttachmentListView.tsx

@@ -0,0 +1,12 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { FileAttachmentApi } from "../hooks/FileAttachmentApi";
+import { useParams } from "../hooks/useParams";
+import { AttachmentView } from "./AttachmentView";
+
+export const AttachmentListView = ({
+  ids = useParams(),
+  attachments = FileAttachmentApi.useGetList(ids),
+}) => attachments?.map((a) => <AttachmentView key={a.id} id={a.id} />);

package/src/FileAttachment/AttachmentScreen.tsx

@@ -0,0 +1,21 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import { ScreenView, ScrollView, StyledView } from "@dwidge/components-rnw";
+import { useParams } from "../hooks/useParams";
+import { AttachmentListEdit } from "./AttachmentListEdit";
+
+export const AttachmentScreen = ({ ids = useParams() }) => (
+  <ScreenView>
+    <StyledHeader title="Attachments" />
+    <ScrollView gap pad>
+      <StyledView flex column>
+        <StyledView>
+          <AttachmentListEdit ids={ids} />
+        </StyledView>
+      </StyledView>
+    </ScrollView>
+  </ScreenView>
+);

package/src/FileAttachment/AttachmentView.tsx

@@ -0,0 +1,14 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { useIdStringParam } from "@dwidge/hooks-expo";
+import { FileView } from "@dwidge/components-expo";
+import { FileAttachmentApi } from "../hooks/FileAttachmentApi";
+import { FileApi } from "../hooks/FileApi";
+
+export const AttachmentView = ({
+  id = useIdStringParam(),
+  attachment: [attachment] = FileAttachmentApi.useItem(id),
+  file: [file, setFile] = FileApi.useItem(attachment?.FileId),
+}) => <FileView file={[file, setFile]} />;

package/src/FileAttachment/index.ts

@@ -0,0 +1,7 @@
+export * from "./AttachmentEdit";
+export * from "./AttachmentListEdit";
+export * from "./AttachmentListView";
+export * from "./AttachmentScreen";
+export * from "./AttachmentView";
+export * from "./useFileAttachmentUrl";
+export * from "./useFileUrl";

package/src/FileAttachment/useFileAttachmentUrl.ts

@@ -0,0 +1,15 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { FileApi } from "../hooks/FileApi";
+import { FileAttachmentApi } from "../hooks/FileAttachmentApi";
+
+export const useFileAttachmentUrl = (
+  attachmentId?: string,
+): string | null | undefined => useFileAttachmentUrlInternal(attachmentId);
+const useFileAttachmentUrlInternal = (
+  attachmentId?: string,
+  attachment = FileAttachmentApi.useGetItem(attachmentId),
+  file = FileApi.useGetItem(attachment?.FileId),
+) => file?.getUrl;

package/src/FileAttachment/useFileUrl.ts

@@ -0,0 +1,12 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { FileApi } from "../hooks/FileApi";
+
+export const useFileUrl = (fileId?: string): string | null | undefined =>
+  useFileUrlInternal(fileId);
+const useFileUrlInternal = (
+  fileId?: string,
+  file = FileApi.useGetItem(fileId),
+) => file?.getUrl;

package/src/Form/EditFormAttachmentScreen.tsx

@@ -0,0 +1,101 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import {
+  CenterView,
+  ScreenView,
+  ScrollView,
+  StyledText,
+} from "@dwidge/components-rnw";
+import { JSONSchemaForm } from "@dwidge/json-schema-form-rnw";
+import * as Ajv from "ajv";
+import { useState } from "react";
+import { z } from "zod";
+
+const useFormId = () => "123";
+const useForm = (id?: string) =>
+  useState<Form | null | undefined>({
+    title: "untitled",
+    fields: [],
+  });
+
+type FieldType = "string" | "number" | "boolean";
+
+type Form = {
+  title: string;
+  fields: {
+    type: FieldType;
+    title: string;
+    required: boolean;
+  }[];
+};
+
+const formSchema: Ajv.JSONSchemaType<Form> = {
+  type: "object",
+  properties: {
+    title: {
+      type: "string",
+      title: "Name",
+    },
+    fields: {
+      type: "array",
+      title: "Fields",
+      items: {
+        type: "object",
+        properties: {
+          title: {
+            type: "string",
+            title: "Name",
+          },
+          type: {
+            type: "string",
+            enum: ["string", "number", "boolean"],
+            title: "Type",
+          },
+          required: {
+            type: "boolean",
+            title: "Required",
+          },
+        },
+        required: ["title", "type", "required"],
+      },
+    },
+  },
+  required: ["title", "fields"],
+};
+
+const JsonFormSchema = z.object({
+  jsonSchema: z.string(),
+  uiSchema: z.string(),
+});
+
+const Form = z.object({
+  id: z.string(),
+  schema: JsonFormSchema,
+});
+
+export const EditFormAttachmentScreen = ({
+  form: [form, setForm] = useForm(useFormId()),
+}) => (
+  <ScreenView>
+    <StyledHeader title="Edit Form" />
+    {form == null || !form ? (
+      <CenterView>
+        <StyledText>
+          {form === null ? "The form does not exist." : "Loading..."}
+        </StyledText>
+      </CenterView>
+    ) : (
+      <ScrollView flex gap wide pad selfcenter>
+        <JSONSchemaForm
+          name="FormSchema"
+          schema={formSchema}
+          value={form}
+          onChange={setForm}
+        />
+      </ScrollView>
+    )}
+  </ScreenView>
+);

package/src/Form/FormEdit.tsx

@@ -0,0 +1,15 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledLoader, StyledText, StyledView } from "@dwidge/components-rnw";
+import { FormApi } from "../hooks/FormApi";
+
+export const FormCard = ({ form = FormApi.useGetItem() }) =>
+  form ? (
+    <StyledView flex card row>
+      <StyledText>{form.name ?? "untitled"}</StyledText>
+    </StyledView>
+  ) : (
+    <StyledLoader />
+  );

package/src/Form/FormEditScreen.tsx

@@ -0,0 +1,54 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import {
+  CenterView,
+  ScreenView,
+  ScrollView,
+  StyledText,
+} from "@dwidge/components-rnw";
+import {
+  defaultFormSchemaString,
+  FormDesigner,
+  FormSchema,
+} from "@dwidge/json-forms-designer";
+import { FormApi } from "../hooks/FormApi";
+import { useParams } from "../hooks/useParams";
+
+export const FormEditScreen = ({
+  form: [form, setForm] = FormApi.useItem(useParams().FormId),
+}) => (
+  <ScreenView>
+    <StyledHeader title={["Form", form?.name].filter(Boolean).join(" - ")} />
+    {form == null || !form ? (
+      <CenterView>
+        <StyledText>
+          {form === null ? "The form does not exist." : "Loading..."}
+        </StyledText>
+      </CenterView>
+    ) : (
+      <ScrollView flex gap wide pad selfcenter>
+        <FormDesigner
+          schemaString={[
+            form.schema ?? defaultFormSchemaString,
+            setForm &&
+              ((updater) => {
+                const next =
+                  typeof updater === "function"
+                    ? updater(form.schema ?? defaultFormSchemaString)
+                    : updater;
+                const parsed = FormSchema.parse(JSON.parse(next));
+                setForm?.((prev) => ({
+                  ...prev,
+                  name: parsed.schema.title,
+                  schema: next,
+                }));
+              }),
+          ]}
+        />
+      </ScrollView>
+    )}
+  </ScreenView>
+);

package/src/Form/FormListEdit.tsx

@@ -0,0 +1,32 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { UnstyledList, viewStyles } from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
+import assert from "assert";
+import { useState } from "react";
+import { FormApi } from "../hooks/FormApi";
+import { useNavRoutes } from "../hooks/FormsContext";
+import { FormCard } from "./FormEdit";
+
+export const FormListEdit = ({
+  elements = FormApi.useGetList(),
+  selection: [selection, setSelection] = useState<string[]>([]),
+  onPress = useNavAction2(
+    useNavRoutes().FORM_EDIT_SCREEN,
+    async (id: string) => ({
+      FormId: id,
+    }),
+  ),
+}) => (
+  <UnstyledList
+    items={elements}
+    keyExtractor={(item) => (assert(item.id), item.id)}
+    selection={[selection, setSelection]}
+    render={(item) => <FormCard form={item} />}
+    selectStyle={viewStyles.select}
+    style={viewStyles.unselect}
+    onPress={onPress}
+  />
+);

package/src/Form/FormListScreen.tsx

@@ -0,0 +1,54 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import {
+  CenterView,
+  ScreenView,
+  ScrollView,
+  StyledFontAwesome,
+  StyledView,
+} from "@dwidge/components-rnw";
+import { useMemoState } from "@dwidge/hooks-react";
+import { TouchableOpacity } from "react-native";
+import { FormApi } from "../hooks/FormApi";
+import { FormListEdit } from "./FormListEdit";
+import { useCreateBlankForm } from "../hooks/useCreateBlankForm";
+
+export const FormListScreen = ({
+  onCreate = useCreateBlankForm(),
+  onDeleteList = FormApi.useDeleteList(),
+  selection = useMemoState<string[]>([]),
+}) => (
+  <ScreenView>
+    <StyledHeader
+      title="Forms"
+      actions={[
+        {
+          icon: "remove-circle",
+          onPress:
+            onDeleteList && selection[0].length
+              ? () => onDeleteList(selection[0].map((id) => ({ id })))
+              : undefined,
+        },
+        {
+          icon: "add-circle",
+          onPress: onCreate,
+        },
+      ]}
+    />
+    <ScrollView gap pad>
+      <StyledView flex column>
+        <StyledView>
+          <FormListEdit selection={selection} />
+        </StyledView>
+        <TouchableOpacity style={{ flex: 1 }} onPress={onCreate}>
+          <CenterView row gap>
+            <StyledFontAwesome name="plus" size={30} />
+          </CenterView>
+        </TouchableOpacity>
+      </StyledView>
+    </ScrollView>
+  </ScreenView>
+);