@peers-app/peers-ui 0.13.6 → 0.14.0

package/src/screens/knowledge/knowledge-value-list.tsx

@@ -1,131 +0,0 @@
-import { ICursorIterable, IKnowledgeValue, KnowledgeValues, newid, observable, PeersUI } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { Input } from "../../components/input";
-import { LazyList } from "../../components/lazy-list";
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { isDesktop, mainContentPath } from '../../globals';
-import { useObservable } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import './knowledge-value-list-item';
-
-const screenPathPart = 'knowledge-values';
-// const icon = 'bi bi-diagram-2-fill';
-
-
-export const KnowledgeValueList = (props: {}) => {
-  const [searchTextObs] = useState(() => observable(''));
-  const [searchText] = useObservable(searchTextObs);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<IKnowledgeValue> | undefined>());
-  const [allLoadedIds] = useState(() => new Set<string>());
-
-  async function newCursor() {
-    const cursor = await KnowledgeValues().cursor({}, { sortBy: ['-lastModified', '-knowledgeValueId'], textSearch: searchText });
-    cursorObs(cursor);
-    return cursor;
-  }
-
-  useEffect(() => {
-    cursorObs(undefined); // Clear existing cursor first
-    allLoadedIds.clear(); // Clear loaded IDs when search changes
-    newCursor();
-  }, [searchText]);
-
-
-  async function loadMore(existing: IKnowledgeValue[]): Promise<IKnowledgeValue[]> {
-    let moreMatches: IKnowledgeValue[] = [];
-    let cursor = cursorObs() || await newCursor();
-    
-    for await (const nextRecord of cursor) {
-      // Skip if already loaded globally or in existing items
-      if (allLoadedIds.has(nextRecord.knowledgeValueId) || 
-          existing.some(e => e.knowledgeValueId === nextRecord.knowledgeValueId)) {
-        continue;
-      }
-      
-      allLoadedIds.add(nextRecord.knowledgeValueId); // Track as loaded
-      moreMatches.push(nextRecord);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 50) break;
-    }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-    
-    return moreMatches;
-  }
-
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    const name = searchText.trim();
-    if (!name) return;
-
-    const newKV = await KnowledgeValues().insert({
-      knowledgeValueId: newid(),
-      lastModified: new Date(),
-      name: name,
-      peerTypeId: "00m3g0ntcop3mrh6ynuzgekiy", // `Note` value type
-      value: {
-        body: '',
-      },
-    });
-    mainContentPath(`${screenPathPart}/${newKV.knowledgeValueId}`);
-  }
-
-  return (
-    <div className='container-fluid'>
-
-      <div className="input-group mt-3 mb-3">
-        {/* <Typeahead /> */}
-        <Input value={searchTextObs} className="form-control" placeholder={`Search or create knowledge`}
-          autoFocus={isDesktop() ? true : false}
-          onKeyUp={evt => searchSubmit(evt)}
-        />
-      </div>
-
-      <div className="peers-list-container">
-        <LazyList
-          resetTrigger={searchText}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(items) => {
-            // return items.map(item => <KnowledgeValueListItem key={item.knowledgeValueId} data={item} />);
-            return items.map(item => 
-              <PeersUI 
-                key={item.knowledgeValueId} 
-                uiEditMode='view'
-                uiCategory='list-item'
-                props={{ knowledgeValue: item }}
-              />
-            );
-          }}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* <span className="h3">End of List</span> */}
-            </div>
-          }
-        />
-      </div>
-    </div>
-  );
-};
-
-
-registerInternalPeersUI({
-  peersUIId: '00m5fshz2g6ea23v8z6y0a1ck',
-  component: KnowledgeValueList,
-  routes: [
-    {
-      isMatch: (props, context) => context.path === 'knowledge-values',
-      // path: 'knowledge-values',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-})

package/src/screens/predicates/predicate-details.tsx

@@ -1,125 +0,0 @@
-import { IDoc, IPredicate, Observable, Predicates } from "@peers-app/peers-sdk";
-import React, { useEffect } from "react";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { SaveButton } from "../../components/save-button";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-interface IProps {
-  predicateId: string;
-}
-
-export const PredicateDetails = (props: IProps) => {
-
-  const predicate = usePromise(async () => {
-    const predicate = await Predicates().get(props.predicateId);
-    if (!predicate) {
-      throw new Error('Predicate not found');
-    }
-    const doc = Predicates().initDoc(predicate);
-    updateActiveTabTitle(doc.name || "Predicate");
-    return doc;
-  }, undefined, [props.predicateId]);
-
-
-  useEffect(() => {
-    if (!predicate) return;
-    const sub = predicate.qs.name.subscribe(() => {
-      predicate.name = predicate.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
-    });
-    return () => {
-      sub.dispose();
-    }
-  }, [predicate]);
-
-  if (!predicate) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid p-3">
-
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="me-2 bi bi-node-plus-fill"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={predicate.predicateId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
-              value={predicate.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton
-            key={predicate.predicateId}
-            doc={predicate}
-          />
-        </div>
-      </div>
-
-      <Tabs
-        key={predicate.predicateId}
-        tabs={[
-          {
-            name: 'Info', content:
-              <ScreenTabBody>
-                <PredicateInfo predicate={predicate} />
-              </ScreenTabBody>
-          },
-          {
-            name: 'Allowed Types', content:
-              <ScreenTabBody>
-                <AllowedTypes predicate={predicate} />
-              </ScreenTabBody>
-          },
-        ]}
-      />
-    </div>
-  )
-}
-
-
-const PredicateInfo = (props: { predicate: IDoc<IPredicate> }) => {
-  const { predicate } = props
-
-  predicate.description = predicate.description || '';
-
-  return (
-    <div>
-
-      <small>Name:</small>
-      <Input
-        value={predicate.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Variable name"
-        title="Variable name"
-      />
-
-      <small className="mt-2">Description:</small>
-      <MarkdownEditorInline
-        value={predicate.qs.description as Observable<string>}
-      />
-
-    </div>
-  )
-}
-
-const AllowedTypes = (props: { predicate: IDoc<IPredicate> }) => {
-  const { predicate } = props
-
-  return (
-    <div>
-      {/* <TextListEditor value={predicate} /> */}
-    </div>
-  )
-}
-

package/src/screens/predicates/predicate-list.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { newid, IPredicate, Predicates } from "@peers-app/peers-sdk";
-import { ListScreen } from '../../components/list-screen';
-import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
-import { mainContentPath } from '../../globals';
-
-export function PredicateList() {
-  const screenPathPart = 'predicates';
-  const icon = 'bi bi-node-plus-fill';
-
-  return ListScreen({
-    table: Predicates(),
-    sortBy: ['-predicateId'],
-    placeholderName: 'frame',
-    getFilter: (text: string) => {
-      return {
-        $or: [
-          { name: { $matchWords: text } },
-          { description: { $matchWords: text } },
-        ]
-      };
-    },
-    newRecord: async (text: string) => {
-      text = text.trim().replace(/\s+/g, '_');
-      const item = await Predicates().insert({
-        predicateId: newid(),
-        name: text,
-        description: '',
-      });
-      mainContentPath(`${screenPathPart}/${item.predicateId}`);
-      return item;
-    },
-    renderItem: (item: IPredicate) => {
-      return (
-        <div
-          key={item.predicateId}
-          className='container-fluid pb-4'
-        >
-          <i className={icon}></i>&nbsp;
-          <a href={`#${screenPathPart}/${item.predicateId}`}>
-            {item.name || '<empty-name>'}
-          </a>
-          <div style={{ paddingLeft: '20px' }}>
-            <MarkdownWithMentions content={item.description || ''} />
-          </div>
-        </div>
-      )
-    },
-  });
-}

package/src/screens/workflows/workflow-subscriptions.tsx

@@ -1,58 +0,0 @@
-import { formatMention, getAllMentions, IDoc, IPeerEventHandler, IWorkflow, newid, observable, Observable, PeerEventTypes } from "@peers-app/peers-sdk";
-import { isEqual } from "lodash";
-import React, { useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { Tooltip } from "../../components/tooltip";
-import { usePromise, useSubscription } from "../../hooks";
-
-export const WorkflowEventSubscriptions = (props: { workflow: IDoc<IWorkflow>, eventSubscriptions: Observable<IPeerEventHandler[]> }) => {
-  const { workflow, eventSubscriptions } = props;
-
-  const [subscriptionsMarkdown] = useState(() => observable(''));
-
-  const markdownInitialized = usePromise(async () => {
-    const eventTypeIds = eventSubscriptions().map(h => h.peerEventTypeId);
-    const subscribedEvents = await PeerEventTypes().list({ peerEventTypeId: { $in: eventTypeIds } });
-    const peerEventTypeNames = subscribedEvents.reduce((acc, evt) => ({ ...acc, [evt.peerEventTypeId]: evt.name }), {} as Record<string, string>);
-    const mentions = eventTypeIds.map(eventTypeId => '- ' + formatMention({ kind: 'event', id: eventTypeId, name: peerEventTypeNames[eventTypeId] ?? eventTypeId }));
-    const markdown = `${mentions.join('\n') || '- '}`;
-    subscriptionsMarkdown(markdown);
-    return true;
-  });
-
-  useSubscription(subscriptionsMarkdown, () => {
-    if (!markdownInitialized) return;
-    const startEventTypeIds = eventSubscriptions().map(h => h.peerEventTypeId);
-    const eventTypeIds = getAllMentions(subscriptionsMarkdown()).filter(m => m.kind === 'event').map(m => m.id);
-    if (isEqual(startEventTypeIds, eventTypeIds)) return;
-    const newHandler: IPeerEventHandler[] = eventTypeIds.map(eventTypeId => ({
-      peerEventHandlerId: newid(),
-      peerEventTypeId: eventTypeId,
-      handlerWorkflowId: workflow.workflowId,
-    }));
-    eventSubscriptions(newHandler);
-    workflow.q(workflow.q() + 1);
-  });
-
-  if (!markdownInitialized) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div>
-
-      <div className='mt-2'>
-        <small>Mention events that should trigger this workflow:</small>
-        <small>
-          <Tooltip markdownContent={`The mentions will be reformatted as a bulleted list regardless of how they are entered.  All other content except for event mentions will be discarded.`} />
-        </small>
-
-        <MarkdownEditorInline
-          value={subscriptionsMarkdown}
-        />
-      </div>
-
-    </div>
-  );
-};

package/src/system-apps/events.app.ts

@@ -1,7 +0,0 @@
-import { IAppNav } from "@peers-app/peers-sdk";
-
-export const eventsApp: IAppNav = {
-  name: 'Events',
-  iconClassName: 'bi-lightning-charge-fill',
-  navigationPath: 'events'
-};

package/src/system-apps/knowledge-frames.app.ts

@@ -1,8 +0,0 @@
-import { IAppNav } from "@peers-app/peers-sdk";
-
-export const knowledgeFramesApp: IAppNav = {
-  name: 'Knowledge Frames',
-  displayName: 'K-Frames',
-  iconClassName: 'bi-window-dock',
-  navigationPath: 'knowledge-frames'
-};

package/src/system-apps/knowledge-values.app.ts

@@ -1,8 +0,0 @@
-import { IAppNav } from "@peers-app/peers-sdk";
-
-export const knowledgeValuesApp: IAppNav = {
-  name: 'Knowledge Values',
-  displayName: 'K-Values',
-  iconClassName: 'bi-journal-bookmark-fill',
-  navigationPath: 'knowledge-values'
-};

package/src/system-apps/predicates.app.ts

@@ -1,7 +0,0 @@
-import { IAppNav } from "@peers-app/peers-sdk";
-
-export const predicatesApp: IAppNav = {
-  name: 'Predicates',
-  iconClassName: 'bi-node-plus-fill',
-  navigationPath: 'predicates'
-};

package/src/ui-defaults/notes-editor.tsx

@@ -1,51 +0,0 @@
-import { computed, IDoc, IKnowledgeValue, knowledgeValueSchema, Observable } from "@peers-app/peers-sdk";
-import React from "react";
-import { z } from "zod";
-import { MarkdownEditorInline } from "../components/markdown-editor/editor-inline";
-import { registerInternalPeersUI } from "../ui-router/ui-loader";
-
-interface IProps {
-  markdown: Observable<string>,
-}
-
-export const FullScreenMarkdownEditor = (props: IProps) => {
-  return (
-    <MarkdownEditorInline
-      value={props.markdown}
-      maxHeight={'calc(100vh - 160px)'}
-      autoFocus
-    />
-  )
-}
-
-registerInternalPeersUI({
-  peersUIId: '00m4rof6uwka5kfi6t7rav8t3',
-  component: (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
-    const doc = props.knowledgeValue;
-    const markdown = computed({
-      read: () => doc.value?.body || '',
-      write: (value: string) => {
-        doc.value.body = value;
-        doc.qs.value.notifySubscribers();
-        doc.q(doc.q() + 1);
-      }
-    })
-    return (
-      <FullScreenMarkdownEditor
-        key={doc.knowledgeValueId}
-        markdown={markdown as any}
-      />
-    );
-  },
-  propsSchema: z.object({
-    knowledgeValue: knowledgeValueSchema as any, // TODO fix this
-  }),
-  routes: [
-    {
-      // KnowledgeValue with PeerType: Note
-      isMatch: (props, context) => props.knowledgeValue?.peerTypeId === '00m3g0ntcop3mrh6ynuzgekiy',
-      uiEditMode: 'edit',
-      uiCategory: 'details',
-    }
-  ]
-});