@dwidge/json-forms-expo 0.0.2

package/src/Form/FormListView.tsx

@@ -0,0 +1,23 @@
+// 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 assert from "assert";
+import { useState } from "react";
+import { FormApi } from "../hooks/FormApi";
+import { FormView } from "./FormView";
+
+export const FormListView = ({
+  elements = FormApi.useGetList(),
+  selection: [selection, setSelection] = useState<string[]>([]),
+}) => (
+  <UnstyledList
+    items={elements}
+    keyExtractor={(item) => (assert(item.id), item.id)}
+    selection={[selection, setSelection]}
+    render={(item) => <FormView form={item} />}
+    selectStyle={viewStyles.select}
+    style={viewStyles.unselect}
+  />
+);

package/src/Form/FormSelectScreen.tsx

@@ -0,0 +1,49 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import React, { useState } from "react";
+import {
+  ScreenView,
+  ScrollView,
+  StyledText,
+  StyledView,
+} from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
+import { StyledButton } from "@dwidge/components-rnw";
+import { FormSelectView } from "./FormSelectView";
+import { useNavRoutes } from "../hooks/FormsContext";
+import { StyledHeader } from "@dwidge/components-expo";
+import { useCreateBlankFormAttachment } from "../hooks/useCreateBlankFormAttachment";
+
+const useOnSelectForm = () =>
+  useNavAction2(
+    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
+    useCreateBlankFormAttachment({}),
+  );
+
+export const FormSelectScreen = ({
+  onSelectForm = useOnSelectForm(),
+  selected: [selected, setSelected] = useState<string[]>([]),
+}) => (
+  <ScreenView>
+    <StyledHeader title="Select Form" />
+    <ScrollView gap pad>
+      <StyledView>
+        <StyledText center>
+          Select from the list of forms below, or use the search option above.
+        </StyledText>
+      </StyledView>
+      <FormSelectView selected={[selected, setSelected]} />
+      <StyledButton
+        onPress={
+          selected.length > 0 && onSelectForm
+            ? () => onSelectForm(selected.map((id) => ({ id })))
+            : undefined
+        }
+      >
+        Select Form
+      </StyledButton>
+    </ScrollView>
+  </ScreenView>
+);

package/src/Form/FormSelectView.tsx

@@ -0,0 +1,31 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledButton } from "@dwidge/components-rnw";
+import { ReactNode, useState } from "react";
+import { FormApi } from "../hooks/FormApi";
+import { FormListView } from "./FormListView";
+
+export const FormSelectView = ({
+  formList = FormApi.useGetList(),
+  selected: [selected, setSelected] = useState<string[]>([]),
+  searchValue: [searchValue, setSearchValue] = useState(""),
+  createFormList = FormApi.useCreateList(),
+}): ReactNode => (
+  <>
+    <FormListView
+      elements={
+        searchValue
+          ? formList?.filter((form) =>
+              form.name?.toLowerCase().includes(searchValue.toLowerCase()),
+            )
+          : formList
+      }
+      selection={[selected, setSelected]}
+    />
+    <StyledButton onPress={createFormList && (() => createFormList([{}]))}>
+      Create New Form
+    </StyledButton>
+  </>
+);

package/src/Form/FormView.tsx

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

package/src/Form/index.ts

@@ -0,0 +1,9 @@
+export * from "./EditFormAttachmentScreen";
+export * from "./FormEdit";
+export * from "./FormEditScreen";
+export * from "./FormListEdit";
+export * from "./FormListScreen";
+export * from "./FormListView";
+export * from "./FormSelectScreen";
+export * from "./FormSelectView";
+export * from "./FormView";

package/src/FormAttachment/FormAttachmentEdit.tsx

@@ -0,0 +1,72 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledButton, StyledLoader, StyledText } from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
+import {
+  defaultFormSchemaString,
+  defaultJsonFormDataString,
+  FormSubmit,
+} from "@dwidge/json-forms-designer";
+import { useContext } from "react";
+import { AttachmentListEdit } from "../FileAttachment/AttachmentListEdit";
+import { FormApi } from "../hooks/FormApi";
+import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { FormsContext } from "../hooks/FormsContext";
+import { useParams } from "../hooks/useParams";
+import { FormAttachment1 } from "../types/FormAttachment";
+
+type T = FormAttachment1 | null | undefined;
+export const FormAttachmentEdit = ({
+  id = useParams().FormAttachmentId,
+  formAttachment: [
+    formAttachment,
+    setFormAttachment,
+  ] = FormAttachmentApi.useItem(id),
+  form = FormApi.useGetItem(formAttachment?.FormId),
+  onEditForm = useNavAction2(
+    useContext(FormsContext).routes.FORM_EDIT_SCREEN,
+    async (key: string) => ({
+      FormId: key,
+    }),
+  ),
+  onSaveForm = useNavAction2(
+    useContext(FormsContext).routes.FORM_ATTACHMENT_LIST_SCREEN,
+    async () => ({}),
+  ),
+}) =>
+  formAttachment === undefined || form === undefined ? (
+    <StyledLoader />
+  ) : formAttachment === null || form === null ? (
+    <StyledText>No form</StyledText>
+  ) : form.schema ? (
+    <>
+      <FormSubmit
+        dataString={[
+          formAttachment.data ?? defaultJsonFormDataString,
+          setFormAttachment &&
+            ((data) =>
+              setFormAttachment((prev) => ({
+                ...prev,
+                data:
+                  typeof data === "function"
+                    ? data(prev?.data ?? defaultJsonFormDataString)
+                    : data,
+              }))),
+        ]}
+        schemaString={[form.schema ?? defaultFormSchemaString]}
+      />
+      <AttachmentListEdit ids={{ FormAttachmentId: formAttachment.id }} />
+      <StyledButton onPress={onSaveForm}>Save</StyledButton>
+    </>
+  ) : (
+    <>
+      <StyledText>This form has not been created yet.</StyledText>
+      {onEditForm && (
+        <StyledButton onPress={() => onEditForm(form.id!)}>
+          Edit Form
+        </StyledButton>
+      )}
+    </>
+  );

package/src/FormAttachment/FormAttachmentEditScreen.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 } from "@dwidge/components-rnw";
+import { FormApi } from "../hooks/FormApi";
+import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { FormAttachmentEdit } from "./FormAttachmentEdit";
+
+export const FormAttachmentEditScreen = ({
+  formAttachment = FormAttachmentApi.useGetItem(),
+  form = FormApi.useGetItem(formAttachment?.FormId),
+}) => (
+  <ScreenView>
+    <StyledHeader title={["Form", form?.name].filter(Boolean).join(" - ")} />
+    <ScrollView flex gap pad>
+      <FormAttachmentEdit />
+    </ScrollView>
+  </ScreenView>
+);

package/src/FormAttachment/FormAttachmentListEdit.tsx

@@ -0,0 +1,40 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledView, UnstyledList, viewStyles } from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
+import { useMemoState } from "@dwidge/hooks-react";
+import assert from "assert";
+import { useParams } from "../hooks";
+import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { useNavRoutes } from "../hooks/FormsContext";
+import { FormAttachmentView } from "./FormAttachmentView";
+
+export const FormAttachmentListEdit = ({
+  ids = useParams(),
+  elements = FormAttachmentApi.useGetList({
+    id: undefined,
+    data: undefined,
+    ...ids,
+  }),
+  selection: [selection, setSelection] = useMemoState<string[]>([]),
+  onPress = useNavAction2(
+    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
+    async (id: string) => ({
+      FormAttachmentId: id,
+    }),
+  ),
+}) => (
+  <StyledView column>
+    <UnstyledList
+      items={elements}
+      keyExtractor={(item) => (assert(item.id), item.id)}
+      selection={[selection, setSelection]}
+      render={(item) => <FormAttachmentView id={item.id} />}
+      selectStyle={viewStyles.select}
+      style={viewStyles.unselect}
+      onPress={onPress}
+    />
+  </StyledView>
+);

package/src/FormAttachment/FormAttachmentListScreen.tsx

@@ -0,0 +1,62 @@
+// 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,
+} from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
+import { useMemoState } from "@dwidge/hooks-react";
+import { TouchableOpacity } from "react-native";
+import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { useNavRoutes } from "../hooks/FormsContext";
+import { FormAttachmentListEdit } from "./FormAttachmentListEdit";
+
+export const FormAttachmentListScreen = ({
+  onCreateAttachment = useNavAction2(
+    useNavRoutes().FORM_SELECT_SCREEN,
+    async () => ({}),
+  ),
+  onEditAttachment = useNavAction2(
+    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
+    async (key: string) => ({
+      FormAttachmentId: key,
+    }),
+  ),
+  onDeleteAttachmentList = FormAttachmentApi.useDeleteList(),
+  selection = useMemoState<string[]>([]),
+}) => (
+  <ScreenView>
+    <StyledHeader
+      title="Manage Forms"
+      actions={[
+        {
+          icon: "remove-circle",
+          onPress:
+            onDeleteAttachmentList && selection[0].length
+              ? () => onDeleteAttachmentList(selection[0].map((id) => ({ id })))
+              : undefined,
+        },
+        {
+          icon: "add-circle",
+          onPress: onCreateAttachment,
+        },
+      ]}
+    />
+    <ScrollView gap>
+      <FormAttachmentListEdit
+        selection={selection}
+        onPress={onEditAttachment}
+      />
+      <TouchableOpacity style={{ flex: 1 }} onPress={onCreateAttachment}>
+        <CenterView row gap>
+          <StyledFontAwesome name="plus" size={30} />
+        </CenterView>
+      </TouchableOpacity>
+    </ScrollView>
+  </ScreenView>
+);

package/src/FormAttachment/FormAttachmentListView.tsx

@@ -0,0 +1,30 @@
+// 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 { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { useNavRoutes } from "../hooks/FormsContext";
+import { FormAttachmentView } from "./FormAttachmentView";
+
+export const FormAttachmentListView = ({
+  attachments = FormAttachmentApi.useGetList({}),
+  onPressItem = useNavAction2(
+    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
+    async (id: string) => ({
+      FormAttachmentId: id,
+    }),
+  ),
+}) => (
+  <UnstyledList
+    items={attachments}
+    keyExtractor={(item) => (assert(item.id), item.id)}
+    selection={[[], () => {}]}
+    render={(item) => <FormAttachmentView id={item.id} />}
+    selectStyle={viewStyles.select}
+    style={viewStyles.unselect}
+    onPress={onPressItem}
+  />
+);

package/src/FormAttachment/FormAttachmentView.tsx

@@ -0,0 +1,25 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledDate } from "@dwidge/components-expo";
+import { StyledLoader, StyledText, StyledView } from "@dwidge/components-rnw";
+import { FormApi } from "../hooks/FormApi";
+import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { useParams } from "../hooks/useParams";
+
+export const FormAttachmentView = ({
+  id = useParams().FormAttachmentId,
+  attachment: [attachment, setAttachment] = FormAttachmentApi.useItem(id),
+  form = FormApi.useGetItem(attachment?.FormId),
+}) =>
+  attachment && form ? (
+    <StyledView space outline gap pad flex>
+      <StyledText>{form.name || "untitled"}</StyledText>
+      {attachment.createdAt && (
+        <StyledDate>{attachment.createdAt * 1000}</StyledDate>
+      )}
+    </StyledView>
+  ) : (
+    <StyledLoader />
+  );

package/src/FormAttachment/index.ts

@@ -0,0 +1,6 @@
+export * from "./FormAttachmentEdit";
+export * from "./FormAttachmentEditScreen";
+export * from "./FormAttachmentListEdit";
+export * from "./FormAttachmentListScreen";
+export * from "./FormAttachmentListView";
+export * from "./FormAttachmentView";

package/src/hooks/FileApi.ts

@@ -0,0 +1,13 @@
+import { File2 } from "../types/File2.js";
+import { createApi } from "./createApi.js";
+
+export const FileApi = createApi<File2>({
+  id: undefined,
+  createdAt: undefined,
+  createdBy: undefined,
+  size: undefined,
+  mime: undefined,
+  sha256: undefined,
+  putUrl: undefined,
+  getUrl: undefined,
+});

package/src/hooks/FileAttachmentApi.ts

@@ -0,0 +1,11 @@
+import { FileAttachment } from "../types/FileAttachment.js";
+import { createApi } from "./createApi.js";
+
+export const FileAttachmentApi = createApi<FileAttachment>({
+  id: undefined,
+  createdAt: undefined,
+  createdBy: undefined,
+  FileId: undefined,
+  FormId: undefined,
+  FormAttachmentId: undefined,
+});

package/src/hooks/FormApi.ts

@@ -0,0 +1,11 @@
+import { Form1 } from "../types/Form1.js";
+import { createApi } from "./createApi.js";
+
+export const FormApi = createApi<Form1>({
+  id: undefined,
+  createdAt: undefined,
+  createdBy: undefined,
+  name: undefined,
+  type: undefined,
+  schema: undefined,
+});

package/src/hooks/FormAttachmentApi.ts

@@ -0,0 +1,10 @@
+import { FormAttachment1 } from "../types/FormAttachment.js";
+import { createApi } from "./createApi.js";
+
+export const FormAttachmentApi = createApi<FormAttachment1>({
+  id: undefined,
+  createdAt: undefined,
+  createdBy: undefined,
+  FormId: undefined,
+  data: undefined,
+});

package/src/hooks/FormsContext.ts

@@ -0,0 +1,29 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { useLocalSearchParams } from "expo-router";
+import { createContext, useContext } from "react";
+import { z } from "zod";
+
+export const FormsContext = createContext({
+  routes: {
+    FORM_ATTACHMENT_LIST_SCREEN: "",
+    FORM_ATTACHMENT_EDIT_SCREEN: "",
+    FORM_EDIT_SCREEN: "",
+    FORM_SELECT_SCREEN: "",
+  },
+  useParams: () =>
+    z
+      .object({
+        FormId: z.coerce.string().nullable(),
+        FormAttachmentId: z.coerce.string().nullable(),
+        AttachmentId: z.coerce.string().nullable(),
+      })
+      .partial()
+      .parse({
+        ...useLocalSearchParams(),
+      }) satisfies Record<string, string | number | null>,
+});
+
+export const useNavRoutes = () => useContext(FormsContext).routes;

package/src/hooks/createApi.ts

@@ -0,0 +1,65 @@
+import { AsyncState, useAsyncSaveState } from "@dwidge/hooks-react";
+import { createContext, useContext } from "react";
+import { useParams } from "./useParams";
+
+export type ApiItem = Record<string, string | number | boolean | null>;
+
+export const createApi = <T extends ApiItem>(
+  defaultFilter: Partial<T> = {},
+) => {
+  type Get = Partial<T>;
+  type Set = Omit<Get, "createdAt" | "createdBy">;
+  type Key = Pick<Get, "id">;
+  type Filter = Get;
+
+  getList: (filter?: Filter) => Promise<Get[]>;
+  setList: (list: Set[]) => Promise<(Key | null)[]>;
+  createList: (list: Set[]) => Promise<(Key | null)[]>;
+  updateList: (list: Set[]) => Promise<(Key | null)[]>;
+  deleteList: (list: Key[]) => Promise<(Key | null)[]>;
+  getItem: (item: Filter & Key) => Promise<Get | null>;
+  updateItem: (item: Set) => Promise<Key | null>;
+  deleteItem: (item: Key) => Promise<Key | null>;
+
+  const message =
+    "createApiW1: Please wrap App with <Context.Provider value={{}}></Context.Provider>";
+
+  const Context = createContext<{
+    useGetList: (filter?: Filter) => undefined | Get[];
+    useCreateList: () => ((list: Set[]) => Promise<(Get | null)[]>) | undefined;
+    useDeleteList: () => ((list: Key[]) => Promise<(Get | null)[]>) | undefined;
+    useGetItem: (key?: Filter & Key) => undefined | Get | null;
+    useItem: (key?: Get) => AsyncState<Get | null>;
+  }>({
+    useGetList: () => (console.warn(message), undefined),
+    useCreateList: () => (console.warn(message), undefined),
+    useDeleteList: () => (console.warn(message), undefined),
+    useGetItem: () => (console.warn(message), undefined),
+    useItem: () => (console.warn(message), []),
+  });
+
+  const useGetList = (filter: Filter = {}, ids = useParams()) =>
+    useContext(Context).useGetList({ ...ids, ...defaultFilter, ...filter });
+  const useCreateList = () => useContext(Context).useCreateList();
+  const useDeleteList = () => useContext(Context).useDeleteList();
+  const useGetItem = (id?: Key["id"] | null, ids = useParams()) =>
+    useContext(Context).useGetItem(
+      id ? { ...ids, ...defaultFilter, id } : undefined,
+    );
+  const useItem = (id?: Key["id"] | null, ids = useParams()) =>
+    useAsyncSaveState(
+      useContext(Context).useItem(
+        id ? { ...ids, ...defaultFilter, id } : undefined,
+      ),
+    );
+
+  return {
+    Context,
+    Provider: Context.Provider,
+    useGetList,
+    useGetItem,
+    useItem,
+    useCreateList,
+    useDeleteList,
+  };
+};

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from "./FileApi";
+export * from "./FileAttachmentApi";
+export * from "./FormApi";
+export * from "./FormAttachmentApi";
+export * from "./FormsContext";
+export * from "./createApi";
+export * from "./useCreateBlankAttachment";
+export * from "./useCreateBlankForm";
+export * from "./useCreateBlankFormAttachment";
+export * from "./useParams";

package/src/hooks/useCreateBlankAttachment.ts

@@ -0,0 +1,24 @@
+import assert from "assert";
+import { useParams } from "./useParams";
+import { FileApi } from "./FileApi";
+import { FileAttachmentApi } from "./FileAttachmentApi";
+
+export const useCreateBlankAttachment = ({
+  createAttachmentList = FileAttachmentApi.useCreateList(),
+  createFileList = FileApi.useCreateList(),
+  AttachIds = useParams(),
+} = {}) =>
+  createAttachmentList && createFileList
+    ? () =>
+        createFileList([{}]).then(
+          ([file]) => (
+            assert(file),
+            createAttachmentList([
+              {
+                FileId: file.id,
+                ...AttachIds,
+              },
+            ]).then(([r]) => r)
+          ),
+        )
+    : undefined;

package/src/hooks/useCreateBlankForm.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 { FormApi } from "./FormApi";
+
+export const useCreateBlankForm = ({
+  createFormList = FormApi.useCreateList(),
+} = {}) =>
+  createFormList
+    ? () => createFormList([{}]).then(([form]) => ({ FormId: form?.id }))
+    : () => undefined;

package/src/hooks/useCreateBlankFormAttachment.ts

@@ -0,0 +1,20 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { Form1Key } from "../types/Form1";
+import { FormApi } from "./FormApi";
+import { FormAttachmentApi } from "./FormAttachmentApi";
+import { useParams } from "./useParams";
+
+export const useCreateBlankFormAttachment = ({
+  createFormList = FormApi.useCreateList(),
+  createAttachmentList = FormAttachmentApi.useCreateList(),
+  AttachmentIds = useParams(),
+} = {}) =>
+  createFormList && createAttachmentList
+    ? async (forms: Form1Key[]) =>
+        createAttachmentList(
+          forms.map((form) => ({ ...AttachmentIds, FormId: form.id })),
+        ).then(([r]) => ({ FormAttachmentId: r?.id }))
+    : async () => undefined;

package/src/hooks/useParams.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { FormsContext } from "./FormsContext";
+
+export type Params = Record<string, string | number | null | undefined>;
+export const useParams = (): Params & {
+  AttachmentId?: string | null | undefined;
+  FormId?: string | null | undefined;
+  FormAttachmentId?: string | null | undefined;
+} => useContext(FormsContext).useParams();

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./FileAttachment";
+export * from "./Form";
+export * from "./FormAttachment";
+export * from "./hooks";
+export * from "./types";

package/src/types/File2.ts

@@ -0,0 +1,19 @@
+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;

package/src/types/FileAttachment.ts

@@ -0,0 +1,9 @@
+export type FileAttachment = {
+  id: string;
+  created: boolean;
+  createdAt: number;
+  createdBy: number | null;
+  FileId: string | null;
+  FormId: string | null;
+  FormAttachmentId: string | null;
+};