@peers-app/peers-ui 0.13.6 → 0.14.0

package/src/screens/knowledge/knowledge-frame-details.bk.tsx

@@ -1,160 +0,0 @@
-import { observable } from "@peers-app/peers-sdk";
-import React from "react";
-import { IKnowledgeFrame, KnowledgeFrames, KnowledgeValues, IDoc } from "@peers-app/peers-sdk";
-import { SaveButton } from "../../components/save-button";
-import { TextListEditor } from "../../components/text-list-editor.tsx/text-list-editor";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { useObservable, useObservableState, usePromise, useSubscription } from "../../hooks";
-import { Input } from "../../components/input";
-
-interface IProps {
-  knowledgeFrameId: string;
-}
-
-export const KnowledgeFrameDetails = (props: IProps) => {
-
-  const frame = usePromise(async () => {
-    const frame = await KnowledgeFrames().get(props.knowledgeFrameId);
-    if (!frame) {
-      throw new Error('Knowledge Frame not found');
-    }
-    return KnowledgeFrames().initDoc(frame);
-  }, undefined, [props.knowledgeFrameId]);
-
-  const bodyObs = frame?.qs.body || observable('');
-  // useEffect
-  let p = setTimeout(() => {}, 0);
-  useSubscription(bodyObs, () => {
-    clearTimeout(p);
-    p = setTimeout(() => {
-      // todo update frames knowledgeIds that are linked in the body
-      frame?.save();
-    }, 2000);
-  });
-
-  if (!frame) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid p-3">
-
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="me-2 bi bi-window-dock"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={frame.knowledgeFrameId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
-              value={frame.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton
-            key={frame.knowledgeFrameId}
-            doc={frame}
-          />
-        </div>
-      </div>
-
-      <br />
-
-      {/* <MarkdownEditorInline
-        value={frame.qs.body}
-        maxHeight={'calc(100vh - 130px)'}
-      /> */}
-
-      {/* <KnowledgeEntriesList frame={frame} /> */}
-
-      <TextListEditor value={bodyObs} maxHeight={'calc(100vh - 130px)'} />
-
-      {/* <KnowledgeEntryEditor /> */}
-
-    </div>
-  )
-}
-
-interface IKnowledgeEntriesListProps {
-  frame: IDoc<IKnowledgeFrame>;
-}
-
-const KnowledgeEntriesList = (props: IKnowledgeEntriesListProps) => {
-  const { frame } = props;
-
-  useObservable(frame.qs.knowledgeValueIds);
-
-  const knowledgeEntries = usePromise(async () => {
-    return KnowledgeValues().list({ knowledgeValueId: frame.knowledgeValueIds } );
-  }, [], [frame.knowledgeValueIds]);
-
-  return (
-    <div>
-      <NewKnowledgeEntry frame={frame} />
-
-      <div>
-        {knowledgeEntries?.map(entry => {
-          return (
-            <div key={entry.knowledgeValueId}>
-              {JSON.stringify(entry, null, 2)}
-            </div>
-          );
-        })}
-      </div>
-
-    </div>
-  );
-};
-
-interface INewKnowledgeEntryProps {
-  defaultSubjectId?: string;
-  defaultPredicateId?: string;
-  frame: IDoc<IKnowledgeFrame>;
-}
-
-const NewKnowledgeEntry = (props: INewKnowledgeEntryProps) => {
-  const { defaultSubjectId, defaultPredicateId, frame } = props;
-
-  const valueStr = useObservableState('', true);
-
-  const addKnowledgeEntry = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const value = valueStr().trim();
-    throw new Error('Not implemented');
-    // const entry = await KnowledgeValues().insert({
-    //   knowledgeValueId: newid(),
-    //   peerTypeId: 'string',
-    //   value,
-    //   // predicateId: defaultPredicateId,
-    //   // subjectId: defaultSubjectId,
-    //   // modified: Date.now(),
-
-    // });
-
-    // frame.knowledgeValueIds = [...frame.knowledgeValueIds, entry.knowledgeValueId];
-    // await frame.save();
-    // valueStr('');
-  };
-
-  return (
-    <div>
-      <form
-        onSubmit={addKnowledgeEntry}
-      >
-        <Input
-          value={valueStr}
-          className="form-control sm"
-          type="text" 
-          placeholder="Add Entry" 
-        />
-      </form>
-      
-    </div>
-  );
-}
-

package/src/screens/knowledge/knowledge-frame-details.tsx

@@ -1,176 +0,0 @@
-import { DataFilter, formatMention, getAllMentions, IDoc, IKnowledgeFrame, IKnowledgeValue, KnowledgeFrames, KnowledgeValues, Observable, observable, PeersUI } from "@peers-app/peers-sdk";
-import { sortBy } from "lodash";
-import React, { useState } from "react";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { SaveButton } from "../../components/save-button";
-import { Typeahead } from "../../components/typeahead/typeahead";
-import { useObservable, useObservableState, usePromise, useSubscription } from "../../hooks";
-import { mentionConfigs } from "../../mention-configs";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-interface IProps {
-  knowledgeFrameId: string;
-}
-
-export const KnowledgeFrameDetails = (props: IProps) => {
-
-  const frame = usePromise(async () => {
-    const frame = await KnowledgeFrames().get(props.knowledgeFrameId);
-    if (!frame) {
-      throw new Error('Knowledge Frame not found');
-    }
-    const doc = KnowledgeFrames().initDoc(frame);
-    updateActiveTabTitle(doc.name || "Knowledge Frame");
-    return doc;
-  }, undefined, [props.knowledgeFrameId]);
-
-  const typeaheadText = useObservableState('', true);
-
-  if (!frame) {
-    return <LoadingIndicator />;
-  }
-
-  function createKnowledgeValue() {
-    console.log('submit', { textValue: typeaheadText() });
-  }
-
-  return (
-    <div className="container-fluid p-3">
-
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="me-2 bi bi-window-dock"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={frame.knowledgeFrameId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
-              value={frame.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton
-            key={frame.knowledgeFrameId}
-            doc={frame}
-          />
-        </div>
-      </div>
-
-      <br />
-
-      <Typeahead
-        value={observable('')}
-        textValue={typeaheadText}
-        mentionConfigs={mentionConfigs}
-        // placeholder={`Search for knowledge to add or create new`}
-        autoFocus
-        onSubmit={createKnowledgeValue}
-      />
-
-      <KnowledgeSearchValuesList searchText={typeaheadText} />
-
-      <KnowledgeFrameValuesList frame={frame} />
-
-    </div>
-  )
-}
-
-let p: ReturnType<typeof setTimeout> | undefined = undefined;
-const KnowledgeSearchValuesList = (props: { searchText: Observable<string> }) => {
-  const { searchText } = props;
-
-  useObservable(searchText);
-  const [searchResults, setSearchResults] = useState<IKnowledgeValue[] | undefined>(undefined);
-
-  useSubscription(searchText, async (text) => {
-    clearTimeout(p);
-    setSearchResults(undefined);
-    if (!searchText()) {
-      return;
-    }
-    p = setTimeout(async () => {
-      p = undefined;
-      const values = await searchKnowledgeValues(searchText());
-      if (p) return;
-      setSearchResults(values);
-    }, 1000);
-  }, true);
-
-  if (!searchText()) {
-    return null;
-  }
-
-  if (searchResults === undefined) {
-    return (
-      <div className="d-flex justify-content-center m-3">
-        <div className="spinner-grow" role="status"
-          style={{ width: '1.2rem', height: '1.2rem', }}
-        >
-          <span className="visually-hidden">Loading...</span>
-        </div>
-      </div>
-    )
-  }
-  if (searchResults.length === 0) {
-    return (
-      <div className="d-flex justify-content-center mt-3" style={{ minHeight: '35px' }}>
-        <div>No results found</div>
-      </div>
-    )
-  }
-  return (
-    <div style={{ minHeight: '51px' }}>
-      {searchResults.map(item => 
-        <PeersUI
-          key={item.knowledgeValueId}
-          uiEditMode="view"
-          uiCategory="list-item"
-          props={{ knowledgeValue: item }}
-        />
-      )}
-    </div>
-  )
-}
-
-const KnowledgeFrameValuesList = (props: { frame: IDoc<IKnowledgeFrame> }) => {
-  const { frame } = props;
-  return (
-    <div>
-      show values included in frame
-    </div>
-  )
-}
-
-export async function searchKnowledgeValues(searchText: string): Promise<IKnowledgeValue[]> {
-  const mentions = getAllMentions(searchText)
-  const typeMentions = mentions.filter(m => m.kind === "type");
-  const otherMentions = mentions.filter(m => m.kind !== "type");
-  const filter: DataFilter<IKnowledgeValue> = {};
-  if (typeMentions.length) {
-    filter.peerTypeId = typeMentions.map(m => m.id);
-    for (const typeMention of typeMentions) {
-      searchText = searchText.replace(formatMention(typeMention), '');
-    }
-  }
-
-  if (otherMentions.length) {
-    for (const mention of mentions) {
-      searchText = searchText.replace(formatMention(mention), mention.id);
-    }
-  }
-  searchText = searchText.trim();
-  
-  let matches = await KnowledgeValues().list(filter, { pageSize: 100, textSearch: searchText });
-
-  if (searchText) {
-    const words = searchText.toLowerCase().split(' ');
-    matches = sortBy(matches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
-  }
-  return matches;
-}

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { newid, IKnowledgeFrame, KnowledgeFrames } from "@peers-app/peers-sdk";
-import { ListScreen } from '../../components/list-screen';
-import { mainContentPath } from '../../globals';
-
-
-export const KnowledgeFrameList = () => {
-  const screenPathPart = 'knowledge-frames';
-  const icon = 'bi bi-window-dock';
-
-  return ListScreen({
-    table: KnowledgeFrames(),
-    sortBy: ['-modified'],
-    placeholderName: 'frame',
-    getFilter: (text: string) => {
-      return {
-        $or: [
-          { name: { $matchWords: text } },
-          { body: { $matchWords: text } },
-        ]
-      };
-    },
-    newRecord: async (text: string) => {
-      const knowledgeFrame = await KnowledgeFrames().insert({
-        knowledgeFrameId: newid(),
-        name: text,
-        knowledgeValueIds: [],
-        body: '',
-        modified: Date.now(),
-      });
-      mainContentPath(`${screenPathPart}/${knowledgeFrame.knowledgeFrameId}`);
-      return knowledgeFrame;
-    },
-    renderItem: (item: IKnowledgeFrame) => {
-      return (
-        <div
-          key={item.knowledgeFrameId}
-          className='container-fluid pb-4'
-        >
-          <i style={{ cursor: 'pointer' }} className={icon}></i>
-          &nbsp;&nbsp; 
-          <a href={`#${screenPathPart}/${item.knowledgeFrameId}`}>
-            {item.name?.trim() || 'No Name'}
-          </a>
-        </div>
-      )
-    },
-  });
-};

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

@@ -1,181 +0,0 @@
-import { IDoc, IKnowledgeValue, KnowledgeValues, newid, PeersUI, PeerTypes } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from "react";
-import { Input } from "../../components/input";
-import { IOSchemaValues } from "../../components/io-schema-values";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { SaveButton } from "../../components/save-button";
-import { Tooltip } from "../../components/tooltip";
-import { Typeahead } from "../../components/typeahead/typeahead";
-import { useObservable, usePromise, useSubscription } from "../../hooks";
-import { valueTypeMentionConfig } from "../../mention-configs";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-interface IProps {
-  knowledgeValueId: string;
-}
-
-export const KnowledgeValueDetails = (props: IProps) => {
-
-  const knowledgeValue = usePromise(async () => {
-    const knowledgeValue = await KnowledgeValues().get(props.knowledgeValueId);
-    if (!knowledgeValue) {
-      throw new Error('Knowledge Value not found');
-    }
-    updateActiveTabTitle(knowledgeValue.name || "Knowledge Value");
-    return KnowledgeValues().initDoc(knowledgeValue);
-  }, undefined, [props.knowledgeValueId]);
-
-  // Force refresh when value type changes
-  const [forceRefreshOnTypeChange, setForceRefreshOnTypeChange] = useState(newid());
-  useEffect(() => {
-    if (!knowledgeValue) return;
-    const sub = knowledgeValue.qs.peerTypeId.subscribe(() => {
-      setForceRefreshOnTypeChange(newid());
-    });
-    return () => {
-      sub.dispose();
-    }
-  }, [knowledgeValue]);
-
-  if (!(knowledgeValue)) {
-    return <LoadingIndicator />;
-  }
-
-  async function saveChanges() {
-    if (!knowledgeValue) return;
-    const type = await PeerTypes().get(knowledgeValue.peerTypeId);
-    const existingFields = type?.schema.fields.map(f => f.name) || [];
-    const value = knowledgeValue.value || {};
-    for (const key of Object.keys(value)) {
-      if (!existingFields.includes(key)) {
-        delete value[key];
-      }
-    }
-    knowledgeValue.save();
-  }
-
-  return (
-    <div className="container-fluid p-1">
-      <Autosave doc={knowledgeValue} />
-
-      <div className="d-flex">
-        <div>
-          <h4>
-            <KnowledgeValueIcon knowledgeValue={knowledgeValue} />
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
-              value={knowledgeValue.qs.name}
-              placeholder="Name"
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton
-            key={knowledgeValue.knowledgeValueId}
-            doc={knowledgeValue}
-            onClick={saveChanges}
-          />
-        </div>
-      </div>
-
-      {/* <br /> */}
-
-      <PeersUI 
-        key={forceRefreshOnTypeChange} 
-        uiEditMode="edit"
-        uiCategory="details"
-        props={{ knowledgeValue }}
-      >
-        <KnowledgeValueDefaultEditor knowledgeValue={knowledgeValue} />
-      </PeersUI>
-    </div>
-  )
-}
-
-const Autosave = (props: { doc: IDoc<IKnowledgeValue> }) => {
-  let p = setTimeout(() => { }, 0);
-  const oldTypeId = props.doc.peerTypeId;
-  useSubscription(props.doc.q, () => {
-    clearTimeout(p);
-    p = setTimeout(() => {
-      if (props.doc.q() === 0) return;
-      if (oldTypeId === props.doc.peerTypeId) {
-        props.doc.lastModified = new Date();
-        props.doc.save();
-      } else {
-        console.log('Not auto-saving because type changed which can cause unexpected data loss');
-      }
-    }, 2000);
-  });
-  return null;
-}
-
-const KnowledgeValueIcon = (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
-  const { knowledgeValue } = props;
-
-  useObservable(knowledgeValue.qs.peerTypeId);
-
-  const valueType = usePromise(async () => {
-    const valueType = await PeerTypes().get(knowledgeValue.peerTypeId, { useCache: true });
-    return valueType;
-  }, undefined, [knowledgeValue.peerTypeId]);
-
-  return (
-    <Tooltip
-      handle={
-        <i className={"btn btn-secondary dropdown-toggle me-2 " + (valueType?.iconClass || "bi bi-diagram-2-fill")}>&nbsp;</i>
-      }
-      positions={['bottom', 'right', 'left']}
-      genericContent={
-        <div 
-          style={{ minWidth: 200 }}
-          className="bg-dark p-2"
-        >
-          <small>
-            Knowledge Type:
-          </small>
-          <Typeahead
-            value={knowledgeValue.qs.peerTypeId}
-            mentionConfigs={[valueTypeMentionConfig]}
-          />          
-        </div>
-      }
-    />
-  );
-}
-
-const KnowledgeValueDefaultEditor = (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
-  const { knowledgeValue } = props;
-  const [peerTypeId] = useObservable(knowledgeValue.qs.peerTypeId);
-
-  const valueType = usePromise(async () => {
-    const valueType = await PeerTypes().get(peerTypeId);
-    if (valueType) {
-      return PeerTypes().initDoc(valueType);
-    }
-  }, null, [peerTypeId]);
-
-  if (valueType === undefined) {
-    return <div>Value Type {peerTypeId} not found in database</div>
-  }
-
-  if (!valueType) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div>
-      <IOSchemaValues
-        q={knowledgeValue.q}
-        ioSchema={valueType.schema}
-        values={knowledgeValue.value || {}}
-        excludeFields={['name']}
-      />
-    </div>
-  );
-}

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

@@ -1,48 +0,0 @@
-import { IKnowledgeValue, knowledgeValueSchema, PeerTypes } from "@peers-app/peers-sdk";
-import React from 'react';
-import { z } from 'zod';
-import { usePromise } from '../../hooks';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
-
-export const KnowledgeValueListItem = (props: { knowledgeValue: IKnowledgeValue }) => {
-  const { knowledgeValue } = props;
-  const id = knowledgeValue.knowledgeValueId;
-  const _item = knowledgeValue.value as any;
-  const description = _item.description || _item.body || _item.content || _item.value;
-
-  const peerType = usePromise(async () => {
-    const peerType = await PeerTypes().get(knowledgeValue.peerTypeId, { useCache: true });
-    return peerType;
-  }, undefined, [knowledgeValue.peerTypeId]);
-
-  const name = knowledgeValue.name || knowledgeValue.value?.name || knowledgeValue.knowledgeValueId;
-
-  return (
-    <div
-      key={id}
-      className='container-fluid pb-3'
-    >
-      <i style={{ cursor: 'pointer' }} className={peerType?.iconClass || "bi bi-diagram-2-fill"}></i>
-      &nbsp;&nbsp;
-      <a href={`#knowledge-values/${id}`}>
-        {name || 'No Name'}
-      </a>
-      {/* <div style={{ paddingLeft: '20px' }}>
-        <MarkdownWithMentions content={String(description || '').substring(0, 200)} />
-      </div> */}
-    </div>
-  )
-}
-
-registerInternalPeersUI({
-  peersUIId: '00m5enc2nj313e8neyf35f1gp',
-  component: KnowledgeValueListItem,
-  propsSchema: z.object({
-    knowledgeValue: knowledgeValueSchema as any,
-  }),
-  routes: [{
-    // isMatch: (props) => true,
-    uiCategory: 'list-item',
-    uiEditMode: 'view',
-  }]
-});