rewrite certain fields to tsx

Form/Core/FileField.js

@@ -1,31 +0,0 @@
-import tw from "twin.macro";
-import { useDropzone } from "react-dropzone";
-import { useMemo } from "react";
-import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
-import axios from "axios";
-import { useField } from "formik";
-import NejDropzone from "./NejDropzone";
-
-/**
- * Renders a file input field with dropzone functionality.
- *
- * @param {Object} props - The component props.
- * @param {boolean} props.single - Whether to allow only one file to be uploaded
- * @param {string | string[]} props.accept - Array of supported file extensions.
- * @returns {JSX.Element} The rendered file input field.
- */
-export function FileField({ single, accept, ...props }) {
-  const [field, meta, helpers] = useField(props);
-
-  /**
-   * Handles the upload of files.
-   *
-   * @param {Array<File>} files - The files to be uploaded.
-   */
-  function onUpload(files) {
-    console.log(files)
-    field.onChange({ target: { value: single ? files[0] : files, name: field.name } });
-  }
-
-  return <NejDropzone value={field.value} accept={accept} onDrop={onUpload} single={single}/>;
-}

Form/Core/FileField.tsx

@@ -0,0 +1,27 @@
+import { FieldHookConfig, useField } from "formik";
+import NejDropzone from "./NejDropzone";
+import { Accept } from "react-dropzone";
+
+/**
+ * Renders a file input field with dropzone functionality.
+ *
+ * @param props - The component props.
+ * @param props.single - Whether to allow only one file to be uploaded
+ * @param props.accept - Array of supported file extensions.
+ * @returns {JSX.Element} The rendered file input field.
+ */
+export function FileField({ single, accept, ...props }: FieldHookConfig<File | File[]> & { single?: boolean, accept?: Accept }) {
+  const [field, meta, helpers] = useField(props);
+
+  /**
+   * Handles the upload of files.
+   *
+   * @param {Array<File>} files - The files to be uploaded.
+   */
+  function onUpload(files) {
+    console.log(files)
+    field.onChange({ target: { value: single ? files[0] : files, name: field.name } });
+  }
+
+  return <NejDropzone value={field.value} accept={accept} onDrop={onUpload} single={single} />;
+}

Form/Core/NejDropzone.tsx

@@ -1,8 +1,6 @@
 import tw from "twin.macro";
-import { useDropzone } from "react-dropzone";
-import { useMemo } from "react";
-import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
-import axios from "axios";
+import { Accept, FileError, useDropzone } from "react-dropzone";
+import { HTMLAttributes, useMemo } from "react";
 
 /**
  * NejDropzone component for handling file uploads.
@@ -15,7 +13,7 @@ import axios from "axios";
  * @param {string} props.text - The text to be displayed in the dropzone.
  * @returns {JSX.Element} - NejDropzone component.
  */
-export default function NejDropzone({ value, accept, onDrop, validator, single, text, css, children, ...props }) {
+export default function NejDropzone({ value, accept, onDrop, validator, single, text, css, children, ...props }: HTMLAttributes<HTMLDivElement> & { value: File | File[], accept?: Accept, onDrop: (files: File[]) => void, validator?: (file: File) => FileError | FileError[] | null, single?: boolean, text?: string, css?: any, children?: any }) {
 
   const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({
     //validator: validator,
@@ -31,12 +29,14 @@ export default function NejDropzone({ value, accept, onDrop, validator, single,
       ...(isFocused && tw`bg-secondary`),
       ...(isDragAccept && tw`border-accent`),
       ...(isDragReject && tw`border-red-600`),
-      css
+      ...css
     }),
     [isFocused, isDragAccept, isDragReject, css]
   );
 
-  let fil = value == null ? null : single ? [value] : value;
+  //if file is not array, make it 1 item array
+  const array = Array.isArray(value) ? value : [value];
+  const fil = value == null ? null : array;
 
   return (
     <div {...getRootProps({ style })} {...props}>

Table/NejReactTable.tsx

@@ -10,6 +10,8 @@ type TableInstanceProp<TData extends MRT_RowData> = {
 
 export type NejReactTableOptions<TData extends MRT_RowData> = Omit<MRT_TableOptions<TData>, "data"> & { data?: TData[] };
 
+export type CommonlyForwardedNejReactTableOptions<TData extends MRT_RowData> = Omit<NejReactTableOptions<TData>, "data" | "columns">
+
 type Props<TData extends MRT_RowData> = Xor<
     TableInstanceProp<TData>,
     NejReactTableOptions<TData>

Table/useNejReactTable.ts

@@ -1,15 +1,20 @@
 import { MRT_RowData, MRT_TableInstance, MRT_TableOptions, useMantineReactTable } from "mantine-react-table";
+import { NejReactTableOptions, TableInstance } from "./NejReactTable";
 
 
 export const useNejReactTable = <TData extends MRT_RowData>(
-    tableOptions: MRT_TableOptions<TData>,
-): MRT_TableInstance<TData> => {
-    return useMantineReactTable({
-        enablePagination: false,
-        enableFullScreenToggle: false,
-        enableDensityToggle: false,
-        enableBottomToolbar: false,
-        enableTopToolbar: tableOptions.renderTopToolbarCustomActions != null,
-        ...tableOptions,
-    });
+    tableOptions: NejReactTableOptions<TData>,
+): TableInstance<TData> => {
+    return {
+        ...useMantineReactTable({
+            enablePagination: false,
+            enableFullScreenToggle: false,
+            enableDensityToggle: false,
+            enableBottomToolbar: false,
+            enableTopToolbar: tableOptions.renderTopToolbarCustomActions != null,
+            ...tableOptions,
+            data: tableOptions.data ?? [],        
+        }),
+        loading: tableOptions.data == null
+    };
 }

macros/useMethod.macro.cjs

@@ -78,7 +78,7 @@ function useMethod({ references, state, babel }) {
     let useStateHookImport = addNamed(declPath, "useState", "react");
     let useCallbackHookImport = addNamed(declPath, "useCallback", "react");
 
-    let servicePath = "@services/accounting-api";
+    let servicePath = "@services/portal-api";
     let apiErrorImport = addNamed(declPath, "ApiError", servicePath);
     
     let nejServicesPath = "@utils/NejManager/NejProvider";

macros/useMethod.macro.d.ts

@@ -1,5 +1,5 @@
-import { CancelablePromise, Error } from "src/services/accounting-api";
+import { CancelablePromise, Error } from "src/services/portal-api";
 
 export default function useMethod<T, Arg>(method: (...args: Arg) => CancelablePromise<T>,
     onDone?: (data: T) => void, 
-    onError?: (error: Error) => void = null): [(...args: Arg) => void, { data: T, loading: boolean, error: Error }];
+    onError?: (error: Error) => void = null): [(...args: Arg) => CancelablePromise<T>, { data: T, loading: boolean, error: Error }];

macros/useQuery.macro.cjs

@@ -87,7 +87,7 @@ function useQuery({ references, state, babel }) {
     }
     let fullCallPathString = reduceCallee(call.callee)
     
-    let servicePath = "@services/accounting-api";
+    let servicePath = "@services/portal-api";
     let apiErrorImport = addNamed(declPath, "ApiError", servicePath);
 
     let useStateSrc = babel.template("[DATA, CALL_SET] = USE_STATE({data: null, error: null, loading: true})")({

macros/useQuery.macro.d.ts

@@ -1,4 +1,4 @@
-import { CancelablePromise, Error } from "src/services/accounting-api";
+import { CancelablePromise, Error } from "src/services/portal-api";
 
 //default export is a function
 /*