@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,107 +0,0 @@
-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 */
-  scrollableId: string;
-  /** Called to fetch the next older batch. Receives the current newest-first items array. */
-  loadMore: (existingItems: T[]) => Promise<T[]>;
-  /** Render all loaded items. Receives the newest-first array. */
-  renderItems: (items: T[]) => React.ReactNode;
-  /** Optional ref that will be set to a function to prepend a single live item */
-  prependRef?: React.MutableRefObject<((item: T) => void) | null>;
-  /** Custom loading indicator */
-  loadingIndicator?: React.ReactNode;
-  /** Change this value to reset the list and reload from scratch */
-  resetTrigger?: unknown;
-  /** Style for the outer scroll container */
-  style?: React.CSSProperties;
-}
-
-const PRELOAD_THRESHOLD = 20;
-
-/**
- * Infinite scroll list for chat-style history (newest at bottom, load older on scroll up).
- * Uses react-infinite-scroll-component with inverse=true and column-reverse layout.
- *
- * Items state is managed internally. Use prependRef to push live inserts from outside.
- */
-export function InverseLazyList<T>(props: IInverseLazyListProps<T>) {
-  const [items, setItems] = useState<T[]>([]);
-  const [allLoaded, setAllLoaded] = useState(false);
-  const isLoadingRef = useRef(false);
-  const itemsRef = useRef<T[]>([]);
-
-  // Keep ref in sync so loadMore always sees the latest items
-  itemsRef.current = items;
-
-  // Expose prepend function via ref so callers can push live updates
-  useEffect(() => {
-    if (props.prependRef) {
-      props.prependRef.current = (item: T) => setItems((prev) => [item, ...prev]);
-    }
-    return () => {
-      if (props.prependRef) props.prependRef.current = null;
-    };
-  }, [props.prependRef]);
-
-  const loadMore = useCallback(async () => {
-    if (isLoadingRef.current || allLoaded) return;
-    isLoadingRef.current = true;
-    try {
-      const moreItems = await props.loadMore(itemsRef.current);
-      if (!moreItems.length) {
-        setAllLoaded(true);
-      } else {
-        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, loadMore]);
-
-  // Reset when resetTrigger changes
-  useEffect(() => {
-    setItems([]);
-    setAllLoaded(false);
-    isLoadingRef.current = false;
-  }, []);
-
-  return (
-    <div
-      id={props.scrollableId}
-      style={{
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column-reverse",
-        ...props.style,
-      }}
-    >
-      <InfiniteScroll
-        dataLength={items.length}
-        next={loadMore}
-        style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
-        inverse={true}
-        hasMore={!allLoaded}
-        loader={
-          props.loadingIndicator ?? (
-            <div className="d-flex justify-content-center py-2">
-              <div className="spinner-border spinner-border-sm text-secondary" role="status" />
-            </div>
-          )
-        }
-        scrollableTarget={props.scrollableId}
-      >
-        {props.renderItems(items)}
-      </InfiniteScroll>
-    </div>
-  );
-}

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

@@ -1,103 +0,0 @@
-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 { MarkdownEditorInline } from "./markdown-editor/editor-inline";
-import { Tooltip } from "./tooltip";
-
-interface IOSchemaValuesProps {
-  ioSchema: IOSchema;
-  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) => {
-        if (props.excludeFields?.includes(field.name)) {
-          return null;
-        }
-        return (
-          <div key={field.name} className="mt-2">
-            <small className="text-body-secondary">
-              {camelCaseToSpaces(field.name)}:
-              <small>
-                <Tooltip markdownContent={field.description ?? ""} />
-              </small>
-            </small>
-
-            <IOSchemaValue field={field} values={values} q={q} />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export const IOSchemaValue = (props: {
-  field: IOSchema["fields"][0];
-  values: Record<string, unknown>;
-  q: Observable<number>;
-}) => {
-  const { field, values, q } = props;
-
-  const [valueObs] = useState(() => {
-    // Field values are heterogeneous (string | number | boolean | Date | …) at runtime.
-    const obs = observable<any | undefined>(values[field.name] ?? "");
-    return obs;
-  });
-
-  useEffect(() => {
-    const sub = valueObs.subscribe(() => {
-      values[field.name] = valueObs();
-      q(q() + 1);
-    });
-    return () => {
-      sub.dispose();
-    };
-  });
-
-  useSubscription(
-    q,
-    () => {
-      valueObs(values[field.name] ?? "");
-    },
-    true,
-  );
-
-  const valueType = field.type;
-
-  // TODO isArray
-
-  // 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"} />;
-    } else {
-      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>;
-  }
-};

package/src/components/io-schema.tsx

@@ -1,259 +0,0 @@
-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;
-}) => {
-  const { ioSchema, simpleValueName } = props;
-
-  if (!ioSchema().type) {
-    ioSchema().type = IOSchemaType.none;
-  }
-  if (!ioSchema().fields) {
-    ioSchema().fields = [];
-  }
-
-  const q = useObservableState(0);
-
-  useEffect(() => {
-    const schemaType = ioSchema().type;
-    const sub = ioSchema.subscribe(() => {
-      if (schemaType !== ioSchema().type) {
-        q(q() + 1);
-      }
-    });
-    return () => sub.dispose();
-  }, [ioSchema, q]);
-
-  return (
-    <>
-      <select
-        className="form-select form-select-sm"
-        style={{ width: "150px", display: "inline-block" }}
-        defaultValue={ioSchema().type}
-        onChange={(evt) => {
-          ioSchema({
-            ...ioSchema(),
-            type: evt.target.value as IOSchemaType,
-          });
-        }}
-      >
-        <option value="none">None</option>
-        <option value="simple">Simple Value</option>
-        <option value="complex">Complex Value</option>
-      </select>
-
-      <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;
-}) => {
-  const { ioSchema, simpleValueName } = props;
-  useObservable(ioSchema);
-
-  const [ioValueType] = useState(() =>
-    observable(ioSchema()?.fields?.[0]?.type || FieldType.string),
-  );
-  const [ioValueDesc] = useState(() => observable(ioSchema()?.fields?.[0]?.description || ""));
-
-  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(() => {
-      setSimpleInputSchema();
-    });
-    const sub2 = ioValueDesc.subscribe(() => {
-      setSimpleInputSchema();
-    });
-    return () => {
-      sub.dispose();
-      sub2.dispose();
-    };
-  }, [ioValueDesc, ioValueType, setSimpleInputSchema]);
-
-  const simpleValueTypes = Object.values(FieldType);
-
-  return (
-    <div>
-      <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)}
-        style={{ width: "150px", display: "inline-block" }}
-      >
-        {simpleValueTypes.map((type) => (
-          <option key={type} value={type}>
-            {type}
-          </option>
-        ))}
-      </select>
-      <br />
-      <small>Value Description:</small>
-      <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: IField[] = ioSchema().fields || [];
-    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: "" },
-      ],
-    });
-    const _fieldsDocs = _fields.map((f) => initDoc(f, inMemoryTable));
-    const _fieldsDocsObs = observable(_fieldsDocs);
-
-    const newRow = () => {
-      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);
-
-  const updateSchemaFields = useCallback(() => {
-    ioSchema({
-      ...ioSchema(),
-      type: IOSchemaType.complex,
-      fields: fields().map((f) => f.toJS()),
-    });
-  }, [fields, ioSchema]);
-
-  useEffect(() => {
-    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">
-      TODO - Move Datagrid over from peers-kore
-      {/* <Datagrid<IField>
-        primaryKey={{ name: "fakeId", dataType: "string" }}
-        columns={[
-          // { name: "name2", displayName: "Field Name" },
-          { name: "name", displayName: "Field Name", width: "180px" },
-          {
-            name: "type",
-            width: "120px",
-            getContent(doc, ref: any) {
-              return (
-                <select
-                  ref={ref}
-                  className="form-select form-select-sm"
-                  defaultValue={doc.qs.type()}
-                  onChange={evt => doc.qs.type(evt.target.value as FieldType)}
-                >
-                  {Object.values(FieldType).map((type) =>
-                    <option
-                      key={type}
-                      value={type}
-                    >
-                      {type}
-                    </option>
-                  )}
-                </select>
-              )
-            },
-          },
-          { name: "description" },
-          { name: "default", displayName: "Default Value", width: "120px" },
-          { name: "optional", dataType: "boolean", width: "40px" },
-          { name: "isArray", dataType: "boolean", displayName: "Array", width: "40px" },
-          {
-            name: 'delete',
-            displayName: '',
-            width: '40px',
-            getContent(doc: any) {
-              return (
-                <button
-                  className="btn btn-sm"
-                  onClick={() => {
-                    fields([...(_.without(fields(), doc))]);
-                    updateSchemaFields();
-                  }}
-                >
-                  <i className="bi bi-trash"></i>
-                </button>)
-            }
-          },
-        ]}
-        // @ts-ignore
-        data={fields()}
-        disableSorting={true}
-        newRow={newRow}
-      /> */}
-    </div>
-  );
-};

package/src/components/lazy-list.tsx

@@ -1,115 +0,0 @@
-import { observable } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { useObservable } from "../hooks";
-
-interface IProps<T> {
-  loadMore: (existingItems: T[]) => Promise<T[]>;
-  renderItems: (items: T[]) => React.ReactNode;
-  filterItems?: (existingItems: T[]) => T[];
-  endOfList?: React.ReactNode;
-  loadingIndicator?: React.ReactNode;
-  scrollThreshold?: number | string;
-  lazyListStyle?: React.CSSProperties;
-  resetTrigger?: unknown;
-}
-
-export function LazyList<T>(props: IProps<T>) {
-  const [itemsObsAry] = useState(() => observable<T[]>([]));
-  const [items] = useObservable(itemsObsAry);
-  const [allLoaded, setAllLoaded] = useState(false);
-  const [loading] = useState(() => observable(false));
-  useObservable(loading);
-  const isLoadingSync = useRef(false); // Synchronous loading flag
-  // Bumped whenever resetTrigger changes so in-flight loadMore calls can discard stale results.
-  const loadGenRef = useRef(0);
-
-  const loadMore = useCallback(async () => {
-    if (loading() || isLoadingSync.current) {
-      return;
-    }
-    isLoadingSync.current = true;
-    loading(true);
-    const gen = loadGenRef.current;
-    try {
-      const moreItems = await props.loadMore(itemsObsAry());
-      if (gen !== loadGenRef.current) {
-        // Reset happened while we were awaiting — discard to avoid mixing old + new results.
-        return;
-      }
-      if (!moreItems.length) {
-        setAllLoaded(true);
-      } else {
-        itemsObsAry([...itemsObsAry(), ...moreItems]);
-      }
-    } finally {
-      if (gen === loadGenRef.current) {
-        loading(false);
-        isLoadingSync.current = false;
-      }
-    }
-  }, [props.loadMore, itemsObsAry, loading]);
-
-  let renderItems = items;
-  if (props.filterItems) {
-    renderItems = props.filterItems(items);
-  }
-
-  // Must run before the preload effect below: on mount / when `resetTrigger` changes we bump
-  // the generation and clear items first. Otherwise preload starts `loadMore` at gen N, then
-  // this effect runs and increments to N+1, the awaited result is discarded, and nothing
-  // retriggers a fetch (empty list forever — e.g. Groups).
-  useEffect(() => {
-    loadGenRef.current += 1;
-    itemsObsAry([]);
-    setAllLoaded(false);
-    isLoadingSync.current = false;
-    loading(false);
-  }, [itemsObsAry, loading, props.resetTrigger]);
-
-  useEffect(() => {
-    if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
-      loadMore();
-    }
-  }, [renderItems.length, allLoaded, loadMore, loading]);
-  // console.log('existing tasks', items.length);
-  // console.log('rendering tasks', renderItems.length);
-
-  return (
-    <div
-      id="scrollableDiv"
-      style={props.lazyListStyle}
-      // style={{
-      //   // height: '600px',
-      //   overflow: 'auto',
-      //   marginLeft: '10px',
-      //   display: 'flex',
-      //   // flexDirection: 'column-reverse',
-      // }}
-    >
-      <InfiniteScroll
-        dataLength={renderItems.length}
-        next={loadMore}
-        hasMore={!allLoaded}
-        scrollThreshold={props.scrollThreshold}
-        loader={
-          props.loadingIndicator ?? (
-            <div className="d-flex justify-content-center">
-              <div>loading...</div>
-            </div>
-          )
-        }
-        endMessage={
-          props.endOfList ?? (
-            <div className="d-flex justify-content-center">
-              <i>end of list</i>
-            </div>
-          )
-        }
-      >
-        {props.renderItems(renderItems)}
-      </InfiniteScroll>
-    </div>
-  );
-}