@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/input-number.tsx

@@ -1,13 +1,18 @@
-import _, { isNumber } from 'lodash';
-import React, { useState } from 'react';
-import { formatMoney, unwrapObservable } from "@peers-app/peers-sdk";
-import { useObservable } from '../hooks';
+import { formatMoney, type Observable, unwrapObservable } from "@peers-app/peers-sdk";
+import _, { isNumber } from "lodash";
+import type React from "react";
+import { useState } from "react";
+import { useObservable } from "../hooks";
 
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  value: any
-  format?: 'money'
-  precision?: number
-  refPassthrough?: any
+interface IProps
+  extends Omit<
+    React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    "value"
+  > {
+  value?: number | null | string | Observable<number | null | string | undefined>;
+  format?: "money";
+  precision?: number;
+  refPassthrough?: React.LegacyRef<HTMLInputElement>;
 }
 
 export function InputNumber(props: IProps) {
@@ -16,45 +21,50 @@ export function InputNumber(props: IProps) {
     precision = 2;
   }
 
-  let propsPassthrough = { ...props };
-  // @ts-ignore
-  ['value', 'format', 'precision', 'refPassthrough'].forEach(name => (delete propsPassthrough[name]));
+  const propsPassthrough = { ...props } as Record<string, unknown> & typeof props;
+  for (const name of ["value", "format", "precision", "refPassthrough"] as const) {
+    delete propsPassthrough[name];
+  }
 
   const [value, setValue] = useObservable(props.value);
 
-  let [displayValue, setDisplayValue] = useState<string>(() => {
-    if (isNaN(Number(value)) || value === null || String(value).trim() === '') {
-      return '';
+  const [displayValue, setDisplayValue] = useState<string>(() => {
+    if (Number.isNaN(Number(value)) || value === null || String(value).trim() === "") {
+      return "";
     }
-    if (format === 'money') {
+    if (format === "money") {
       return formatMoney(Number(unwrapObservable(props.value)), precision);
     }
     return String(value);
   });
-  
 
   function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    let _value: any = evt.target.value;
+    const _value: string = evt.target.value;
     setDisplayValue(_value);
     // convert blank to null
-    if (String(_value).trim() === '') {
+    if (String(_value).trim() === "") {
       setValue(null);
       return;
     }
-    
-    _value = _value.replace(/\$/g, '');
-    _value = Number(_value);
-    if (isNumber(_value) && !isNaN(_value)) {
-      setValue(_value);
+
+    const stripped = _value.replace(/\$/g, "");
+    const parsed = Number(stripped);
+    if (isNumber(parsed) && !Number.isNaN(parsed)) {
+      setValue(parsed);
     }
   }
 
-  function onBlur(evt: React.FocusEvent<HTMLInputElement>) {
-    if (format === 'money' && !isNaN(Number(value)) && value !== null && String(value).trim() !== '') {
-      const fmtMoney = formatMoney(value, precision);
+  function onBlur(_evt: React.FocusEvent<HTMLInputElement>) {
+    if (
+      format === "money" &&
+      !Number.isNaN(Number(value)) &&
+      value !== null &&
+      String(value).trim() !== ""
+    ) {
+      const fmtMoney = formatMoney(Number(value), precision);
       setDisplayValue(fmtMoney);
     } else if (value === null) {
-      setDisplayValue('');
+      setDisplayValue("");
     } else {
       setDisplayValue(String(value));
     }
@@ -62,6 +72,12 @@ export function InputNumber(props: IProps) {
   }
 
   return (
-    <input {...propsPassthrough} ref={refPassthrough} value={displayValue} onChange={onChange} onBlur={onBlur} />
-  )
-}
+    <input
+      {...propsPassthrough}
+      ref={refPassthrough}
+      value={displayValue}
+      onChange={onChange}
+      onBlur={onBlur}
+    />
+  );
+}

package/src/components/input.tsx

@@ -1,22 +1,25 @@
-import React from 'react'; 
-import { useObservable } from '../hooks';
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useObservable } from "../hooks";
 
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  value: any,
-  type?: React.HTMLInputTypeAttribute
+interface IProps
+  extends Omit<
+    React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    "value"
+  > {
+  value?: string | number | null | Observable<string | number | null | undefined>;
+  type?: React.HTMLInputTypeAttribute;
 }
 
 export function Input(props: IProps) {
   const [value, setValue] = useObservable(props.value);
-  const type = props.type ?? (typeof value);
+  const type = props.type ?? typeof value;
   function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    let _value: any = evt.target.value;
-    if (type === 'number') {
+    let _value: string | number = evt.target.value;
+    if (type === "number") {
       _value = Number(_value);
     }
     setValue(_value);
   }
-  return (
-    <input onChange={onChange} type={type} {...props} value={value}  />
-  )
-}
+  return <input onChange={onChange} type={type} {...props} value={value ?? ""} />;
+}

package/src/components/inverse-lazy-list.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
-import InfiniteScroll from 'react-infinite-scroll-component';
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 interface IInverseLazyListProps<T> {
   /** Unique id for the scroll container — required to avoid id collisions */
@@ -13,7 +14,7 @@ interface IInverseLazyListProps<T> {
   /** Custom loading indicator */
   loadingIndicator?: React.ReactNode;
   /** Change this value to reset the list and reload from scratch */
-  resetTrigger?: any;
+  resetTrigger?: unknown;
   /** Style for the outer scroll container */
   style?: React.CSSProperties;
 }
@@ -38,14 +39,14 @@ export function InverseLazyList<T>(props: IInverseLazyListProps<T>) {
   // Expose prepend function via ref so callers can push live updates
   useEffect(() => {
     if (props.prependRef) {
-      props.prependRef.current = (item: T) => setItems(prev => [item, ...prev]);
+      props.prependRef.current = (item: T) => setItems((prev) => [item, ...prev]);
     }
     return () => {
       if (props.prependRef) props.prependRef.current = null;
     };
   }, [props.prependRef]);
 
-  async function loadMore() {
+  const loadMore = useCallback(async () => {
     if (isLoadingRef.current || allLoaded) return;
     isLoadingRef.current = true;
     try {
@@ -53,41 +54,41 @@ export function InverseLazyList<T>(props: IInverseLazyListProps<T>) {
       if (!moreItems.length) {
         setAllLoaded(true);
       } else {
-        setItems(prev => [...prev, ...moreItems]);
+        setItems((prev) => [...prev, ...moreItems]);
       }
     } finally {
       isLoadingRef.current = false;
     }
-  }
+  }, [props.loadMore, allLoaded]);
 
   // Auto-preload when items are sparse
   useEffect(() => {
     if (items.length < PRELOAD_THRESHOLD && !allLoaded && !isLoadingRef.current) {
       loadMore();
     }
-  }, [items.length, allLoaded]);
+  }, [items.length, allLoaded, loadMore]);
 
   // Reset when resetTrigger changes
   useEffect(() => {
     setItems([]);
     setAllLoaded(false);
     isLoadingRef.current = false;
-  }, [props.resetTrigger]);
+  }, []);
 
   return (
     <div
       id={props.scrollableId}
       style={{
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column-reverse',
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column-reverse",
         ...props.style,
       }}
     >
       <InfiniteScroll
         dataLength={items.length}
         next={loadMore}
-        style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
+        style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
         inverse={true}
         hasMore={!allLoaded}
         loader={

package/src/components/io-schema-values.tsx

@@ -1,56 +1,61 @@
-import React, { useEffect, useState } from "react";
-import { IOSchema, Observable, observable, camelCaseToSpaces } from "@peers-app/peers-sdk";
-import { Tooltip } from "./tooltip";
-import { MarkdownEditorInline } from "./markdown-editor/editor-inline";
+import {
+  camelCaseToSpaces,
+  type IOSchema,
+  type Observable,
+  observable,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { useSubscription } from "../hooks";
+import { Checkbox } from "./checkbox";
 import { Input } from "./input";
 import { InputNumber } from "./input-number";
-import { Checkbox } from "./checkbox";
-import { useSubscription } from "../hooks";
+import { MarkdownEditorInline } from "./markdown-editor/editor-inline";
+import { Tooltip } from "./tooltip";
 
 interface IOSchemaValuesProps {
   ioSchema: IOSchema;
-  values: Record<string, any>;
+  values: Record<string, unknown>;
   q: Observable<number>;
   excludeFields?: string[];
 }
 
 export const IOSchemaValues = (props: IOSchemaValuesProps) => {
-
   const { ioSchema, values, q } = props;
 
   return (
     <div>
-      {ioSchema.fields.map((field, i) => {
+      {ioSchema.fields.map((field) => {
         if (props.excludeFields?.includes(field.name)) {
           return null;
         }
         return (
-          <div key={i} className='mt-2'>
+          <div key={field.name} className="mt-2">
             <small className="text-body-secondary">
               {camelCaseToSpaces(field.name)}:
               <small>
-                <Tooltip markdownContent={field.description ?? ''} />
+                <Tooltip markdownContent={field.description ?? ""} />
               </small>
             </small>
 
-            <IOSchemaValue
-              field={field}
-              values={values}
-              q={q}
-            />
+            <IOSchemaValue field={field} values={values} q={q} />
           </div>
-        )
+        );
       })}
     </div>
-  )
+  );
+};
 
-}
-
-export const IOSchemaValue = (props: { field: IOSchema['fields'][0], values: Record<string, any>, q: Observable<number> }) => {
+export const IOSchemaValue = (props: {
+  field: IOSchema["fields"][0];
+  values: Record<string, unknown>;
+  q: Observable<number>;
+}) => {
   const { field, values, q } = props;
 
   const [valueObs] = useState(() => {
-    const obs = observable<any | undefined>(values[field.name] ?? '');
+    // Field values are heterogeneous (string | number | boolean | Date | …) at runtime.
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic IO schema binding
+    const obs = observable<any | undefined>(values[field.name] ?? "");
     return obs;
   });
 
@@ -61,12 +66,16 @@ export const IOSchemaValue = (props: { field: IOSchema['fields'][0], values: Rec
     });
     return () => {
       sub.dispose();
-    }
+    };
   });
 
-  useSubscription(q, () => {
-    valueObs(values[field.name] ?? '');
-  }, true);
+  useSubscription(
+    q,
+    () => {
+      valueObs(values[field.name] ?? "");
+    },
+    true,
+  );
 
   const valueType = field.type;
 
@@ -74,49 +83,22 @@ export const IOSchemaValue = (props: { field: IOSchema['fields'][0], values: Rec
 
   // TODO UI Types - text:secret, date:time, date:date, date:datetime, enum
 
-  if (valueType === 'string') {
-    if (field.subType === 'markdown' || (!field.subType && field.name.toLowerCase().includes('body'))) {
-      return (
-        <MarkdownEditorInline
-          value={valueObs}
-          maxHeight={'250px'}
-        />
-      );
+  if (valueType === "string") {
+    if (
+      field.subType === "markdown" ||
+      (!field.subType && field.name.toLowerCase().includes("body"))
+    ) {
+      return <MarkdownEditorInline value={valueObs} maxHeight={"250px"} />;
     } else {
-      return (
-        <Input
-          className='form-control'
-          value={valueObs}
-        />
-      )
+      return <Input className="form-control" value={valueObs} />;
     }
+  } else if (valueType === "number") {
+    return <InputNumber className="form-control" value={valueObs} />;
+  } else if (valueType === "boolean") {
+    return <Checkbox className="form-control" checked={valueObs} />;
+  } else if (valueType === "Date") {
+    return <Input className="form-control" value={valueObs} type="date" />;
+  } else {
+    return <div>Unknown type: {valueType}</div>;
   }
-  else if (valueType === 'number') {
-    return (
-      <InputNumber
-        className='form-control'
-        value={valueObs}
-      />
-    )
-  }
-  else if (valueType === 'boolean') {
-    return (
-      <Checkbox
-        className='form-control'
-        checked={valueObs}
-      />
-    )
-  }
-  else if (valueType === 'Date') {
-    return (
-      <Input
-        className='form-control'
-        value={valueObs}
-        type='date'
-      />
-    )
-  }
-  else {
-    return <div>Unknown type: {valueType}</div>
-  }
-}
+};

package/src/components/io-schema.tsx

@@ -1,9 +1,22 @@
-import { arrayAsTable, FieldType, IField, initDoc, IOSchema, IOSchemaType, newid, Observable, observable } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from "react";
+import {
+  arrayAsTable,
+  FieldType,
+  type IField,
+  type IOSchema,
+  IOSchemaType,
+  initDoc,
+  newid,
+  type Observable,
+  observable,
+} from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useState } from "react";
 import { useObservable, useObservableState } from "../hooks";
 import { MarkdownEditorInline } from "./markdown-editor/editor-inline";
 
-export const IOSchemaEditor = (props: { ioSchema: Observable<IOSchema>, simpleValueName: string }) => {
+export const IOSchemaEditor = (props: {
+  ioSchema: Observable<IOSchema>;
+  simpleValueName: string;
+}) => {
   const { ioSchema, simpleValueName } = props;
 
   if (!ioSchema().type) {
@@ -13,17 +26,17 @@ export const IOSchemaEditor = (props: { ioSchema: Observable<IOSchema>, simpleVa
     ioSchema().fields = [];
   }
 
-  const q = useObservableState(0)
+  const q = useObservableState(0);
 
   useEffect(() => {
-    let schemaType = ioSchema().type;
+    const schemaType = ioSchema().type;
     const sub = ioSchema.subscribe(() => {
       if (schemaType !== ioSchema().type) {
         q(q() + 1);
       }
     });
     return () => sub.dispose();
-  }, [ioSchema, q()]);
+  }, [ioSchema, q]);
 
   return (
     <>
@@ -31,11 +44,11 @@ export const IOSchemaEditor = (props: { ioSchema: Observable<IOSchema>, simpleVa
         className="form-select form-select-sm"
         style={{ width: "150px", display: "inline-block" }}
         defaultValue={ioSchema().type}
-        onChange={evt => {
+        onChange={(evt) => {
           ioSchema({
             ...ioSchema(),
             type: evt.target.value as IOSchemaType,
-          })
+          });
         }}
       >
         <option value="none">None</option>
@@ -43,35 +56,39 @@ export const IOSchemaEditor = (props: { ioSchema: Observable<IOSchema>, simpleVa
         <option value="complex">Complex Value</option>
       </select>
 
-      <div
-        className="ms-4"
-      >
-        {ioSchema().type === IOSchemaType.simple && <SimpleInputSchema ioSchema={ioSchema} simpleValueName={simpleValueName} />}
+      <div className="ms-4">
+        {ioSchema().type === IOSchemaType.simple && (
+          <SimpleInputSchema ioSchema={ioSchema} simpleValueName={simpleValueName} />
+        )}
         {ioSchema().type === IOSchemaType.complex && <ComplexInputSchema ioSchema={ioSchema} />}
       </div>
     </>
-  )
-}
-
-export const SimpleInputSchema = (props: { ioSchema: Observable<IOSchema>, simpleValueName: string }) => {
+  );
+};
 
+export const SimpleInputSchema = (props: {
+  ioSchema: Observable<IOSchema>;
+  simpleValueName: string;
+}) => {
   const { ioSchema, simpleValueName } = props;
   useObservable(ioSchema);
 
-  const [ioValueType] = useState(() => observable(ioSchema()?.fields?.[0]?.type || FieldType.string));
+  const [ioValueType] = useState(() =>
+    observable(ioSchema()?.fields?.[0]?.type || FieldType.string),
+  );
   const [ioValueDesc] = useState(() => observable(ioSchema()?.fields?.[0]?.description || ""));
 
-  const setSimpleInputSchema = () => {
-    const _ioSchema = { ...ioSchema() }
+  const setSimpleInputSchema = useCallback(() => {
+    const _ioSchema = { ...ioSchema() };
     _ioSchema.type = IOSchemaType.simple;
     _ioSchema.fields = _ioSchema.fields || [];
     _ioSchema.fields[0] = {
       name: simpleValueName,
       description: ioValueDesc(),
       type: ioValueType(),
-    }
+    };
     ioSchema(_ioSchema);
-  }
+  }, [ioSchema, simpleValueName, ioValueDesc, ioValueType]);
 
   useEffect(() => {
     const sub = ioValueType.subscribe(() => {
@@ -83,96 +100,104 @@ export const SimpleInputSchema = (props: { ioSchema: Observable<IOSchema>, simpl
     return () => {
       sub.dispose();
       sub2.dispose();
-    }
-  }, [ioSchema]);
+    };
+  }, [ioValueDesc, ioValueType, setSimpleInputSchema]);
 
   const simpleValueTypes = Object.values(FieldType);
 
   return (
     <div>
-      <small>Value Type:</small><br />
+      <small>Value Type:</small>
+      <br />
       <select
         className="form-select form-select-sm mt-2 mb-2"
         defaultValue={ioValueType()}
-        onChange={evt => ioValueType(evt.target.value as FieldType)}
+        onChange={(evt) => ioValueType(evt.target.value as FieldType)}
         style={{ width: "150px", display: "inline-block" }}
       >
-        {simpleValueTypes.map((type) =>
-          <option
-            key={type}
-            value={type}
-          >
+        {simpleValueTypes.map((type) => (
+          <option key={type} value={type}>
             {type}
           </option>
-        )}
+        ))}
       </select>
       <br />
       <small>Value Description:</small>
-      <MarkdownEditorInline
-        value={ioValueDesc}
-        hideToolbar={true}
-      />
+      <MarkdownEditorInline value={ioValueDesc} hideToolbar={true} />
     </div>
-  )
-}
+  );
+};
 
 export const ComplexInputSchema = (props: { ioSchema: Observable<IOSchema> }) => {
   const { ioSchema } = props;
   useObservable(ioSchema);
 
-  const [[fields, newRow], __setState] = useState(() => {
+  const [[fields, _newRow], __setState] = useState(() => {
     const _fields: IField[] = ioSchema().fields || [];
-    // @ts-ignore
-    _fields.forEach(f => f.fakeId = newid());
+    for (const f of _fields) {
+      // @ts-expect-error
+      f.fakeId = newid();
+    }
     const inMemoryTable = arrayAsTable(_fields, {
       primaryKeyName: "fakeId",
       fields: [
-        { name: "fakeId", type: FieldType.string, description: '', defaultValue: () => newid() },
-        { name: "name", type: FieldType.string, description: '' },
-        { name: "type", type: FieldType.string, description: '' },
-        { name: "description", type: FieldType.string, description: '' },
-        { name: "default", type: FieldType.string, description: '' },
-        { name: "optional", type: FieldType.string, description: '' },
-        { name: "isArray", type: FieldType.string, description: '' },
-      ]
+        { name: "fakeId", type: FieldType.string, description: "", defaultValue: () => newid() },
+        { name: "name", type: FieldType.string, description: "" },
+        { name: "type", type: FieldType.string, description: "" },
+        { name: "description", type: FieldType.string, description: "" },
+        { name: "default", type: FieldType.string, description: "" },
+        { name: "optional", type: FieldType.string, description: "" },
+        { name: "isArray", type: FieldType.string, description: "" },
+      ],
     });
-    const _fieldsDocs = _fields.map(f => initDoc(f, inMemoryTable));
+    const _fieldsDocs = _fields.map((f) => initDoc(f, inMemoryTable));
     const _fieldsDocsObs = observable(_fieldsDocs);
 
     const newRow = () => {
-      const newField = initDoc({
-        // @ts-ignore
-        fakeId: newid(),
-        name: "",
-        description: "",
-        type: FieldType.string,
-        optional: false,
-        default: "",
-        isArray: false,
-      }, inMemoryTable);
+      const newField = initDoc(
+        {
+          // @ts-expect-error
+          fakeId: newid(),
+          name: "",
+          description: "",
+          type: FieldType.string,
+          optional: false,
+          default: "",
+          isArray: false,
+        },
+        inMemoryTable,
+      );
       _fieldsDocsObs([..._fieldsDocsObs(), newField]);
       return newField;
-    }
+    };
     return [_fieldsDocsObs, newRow];
   });
 
   useObservable(fields);
 
-  function updateSchemaFields() {
+  const updateSchemaFields = useCallback(() => {
     ioSchema({
       ...ioSchema(),
       type: IOSchemaType.complex,
-      fields: fields().map(f => f.toJS()),
+      fields: fields().map((f) => f.toJS()),
     });
-  }
+  }, [fields, ioSchema]);
 
   useEffect(() => {
-    const subs = fields().map(f => f.q.subscribe(() => updateSchemaFields()));
-    return () => subs.forEach(s => s.dispose());
-  }, [fields()]);
+    const subs = fields().map((f) =>
+      f.q.subscribe(() => {
+        updateSchemaFields();
+      }),
+    );
+    return () => {
+      for (const s of subs) {
+        s.dispose();
+      }
+    };
+  }, [fields, updateSchemaFields]);
 
   return (
-    <div style={{ fontSize: '9pt' }} className="mt-2">
+    <div style={{ fontSize: "9pt" }} className="mt-2">
       TODO - Move Datagrid over from peers-kore
       {/* <Datagrid<IField>
         primaryKey={{ name: "fakeId", dataType: "string" }}
@@ -230,5 +255,5 @@ export const ComplexInputSchema = (props: { ioSchema: Observable<IOSchema> }) =>
         newRow={newRow}
       /> */}
     </div>
-  )
-}
+  );
+};