@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/text-list-editor.tsx/text-list-editor.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { IMarkdownEditorProps, MarkdownEditor } from '../markdown-editor/editor'
-
-interface TextListEditorProps extends IMarkdownEditorProps {}
-
-export const TextListEditor = (props: TextListEditorProps) => {
-  
-  return (
-    <div className="border rounded border-dark-subtle">
-      <MarkdownEditor {...props} />
-    </div>
-  )
-}

package/src/components/top-bar.tsx

@@ -1,119 +0,0 @@
-import React from 'react'
-import * as globals from '../globals';
-// import { visibleNotifications } from '../notifications';
-
-
-export const TopBar = () => {
-  // const [_notifications] = useObservable(visibleNotifications);
-  // const unreadNotifications = _notifications.filter(n => !n.status);
-  // const unreadNotificationCount = unreadNotifications.length;
-  // const [group] = useObservable(globals.activeGroup);
-
-  let connections = [1,2,3];
-  let connectionsSyncing = [1,2];
-  let unreadNotificationCount = 0;
-
-  return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-body-tertiary fixed-top peers-top-bar"
-      // style={{ borderLeft: 'solid', borderColor: '#606365', borderWidth: globals.isDesktop() ? '1px' : 0,   }}
-      // style={{ borderBottom: 'solid', borderColor: '#606365', borderWidth: '1px',   }}
-      style={{ height: '50px' }}
-    >
-      <div className="container-fluid">
-        {/* <a className="dropdown-toggle logo" href="#"
-          id="brandDD" data-bs-toggle="dropdown" aria-expanded="false"
-        >
-          <img src="/android/android-launchericon-512-512.png" alt="" width="40" height="40" className="d-inline-block align-top"></img>
-        </a> */}
-
-        <div>
-          <button className="navbar-toggler collapsed" type="button"
-            data-bs-toggle="offcanvas"
-            data-bs-target="#leftBar"
-            aria-controls="leftBar"
-            aria-expanded="false"
-            aria-label="Toggle Left Bar"
-          >
-            <span className="navbar-toggler-icon"></span>
-          </button>
-        </div>
-
-        <div>
-          <span className="text-white">
-            {/* {group?.name} */} open tabs here
-          </span>
-        </div>
-
-        <div>
-          <span className="navbar-text" style={{ marginRight: 8, fontSize: "12pt" }}>
-            <span style={{ display: 'inline-block' }}>
-              {Boolean(connectionsSyncing.length) && [
-                connectionsSyncing.length + " ",
-                <i key="1" className="bi bi-arrow-repeat"></i>,
-                <span key="2">&nbsp;&nbsp;&nbsp;</span>
-              ]}
-              {connections.length} <i className="bi bi-arrow-down-up"></i>
-            </span>
-          </span>
-
-          <button type="button" className="btn btn-dark position-relative"
-            data-bs-toggle="offcanvas"
-            data-bs-target="#rightBar"
-            aria-controls="rightBar"
-            aria-expanded="false"
-            aria-label="Toggle Right Bar"
-            // TODO take this out once we are ready to show content in the right bar
-            hidden
-          >
-            <i className={`bi bi-bell${unreadNotificationCount > 0 ? '-fill' : ''}`}></i>
-            <span
-              className="translate-middle badge rounded-pill bg-danger"
-              style={{
-                display: unreadNotificationCount < 1 ? 'none' : '',
-                position: 'absolute',
-                top: unreadNotificationCount > 9 ? 4 : 7,
-                right: unreadNotificationCount > 9 ? -27 : -16
-              }}
-            >
-              {unreadNotificationCount > 9 ? "9+" : unreadNotificationCount}
-              <span className="visually-hidden">unread notifications</span>
-            </span>
-          </button>
-
-        </div>
-
-        {/* <div className="d-flex">
-          <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
-        </div> */}
-
-        {/* 
-        <button className="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
-          data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span className="navbar-toggler-icon"></span>
-        </button>
-
-        <div className="navbar-collapse collapse" id="navbarMain" >
-          <ul className="navbar-nav me-auto mb-2 mb-md-0">
-            {[
-              { path: 'new-order', name: 'New Order' },
-              { path: 'inventory', name: 'Inventory' },
-            ].map(({ path, name }) => {
-              return (
-                <li key={path + name} className="nav-item"
-                >
-                  <a className={'nav-link'}
-                    aria-current="page"
-                    href={`#/${path}`}>{name}</a>
-                </li>
-              )
-            })
-
-            }
-          </ul>
-        </div> */}
-      </div>
-    </nav>
-  );
-}

package/src/components/typeahead/mentions-plugin.tsx

@@ -1,265 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  LexicalTypeaheadMenuPlugin,
-  MenuOption,
-  useBasicTypeaheadTriggerMatch
-} from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import { IMentionData, observable, Observable } from "@peers-app/peers-sdk";
-import { $getSelection, TextNode } from 'lexical';
-import { sortBy, uniqBy } from 'lodash';
-import * as React from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import * as ReactDOM from 'react-dom';
-import { IMentionConfig } from '../../mention-configs';
-import { $createMentionNode } from '../markdown-editor/mention-node';
-
-// At most, 5 suggestions are shown in the popup.
-const SUGGESTION_LIST_LENGTH_LIMIT = 10;
-export const MENTIONS_MAX_RESULTS = 10;
-
-function useMentionLookupService(mentionString: string | null, mentionConfigs: IMentionConfig[] = []): IMentionData[] {
-  const [results, setResults] = useState<Array<IMentionData>>([]);
-
-  useEffect(() => {
-    if (!mentionString) {
-      setResults([]);
-      return;
-    }
-    (async () => {
-      mentionString = mentionString || '';
-      const prefix = mentionString[0];
-      // TODO simplify how users can include completed tasks in their search
-      let searchCompletedTasks = prefix === '$' && mentionString.startsWith('done');
-      if (searchCompletedTasks) {
-        mentionString = mentionString.slice(4);
-      }
-      let kind = '';
-      if (mentionString.includes(':')) {
-        const parts = mentionString.split(':');
-        kind = parts[0];
-        mentionString = parts[1] || '';
-      }
-      const config = mentionConfigs?.find(c => c.kind === kind);
-      if (config) {
-        let results = await config.query(mentionString);
-        results = results.map(r => ({ ...r, clickable: false }));
-        setResults(results);
-        return;
-      }
-      const results = await Promise.all(
-        mentionConfigs?.map(c => c.query(mentionString || '')),
-      );
-      let allResults = results.flat();
-      allResults = uniqBy(allResults, 'id');
-      let filteredResults = allResults;
-      if (prefix === '@') {
-        filteredResults = filteredResults.filter((result) => result.kind === 'user' || result.kind === 'assistant');
-      } else {
-        filteredResults = filteredResults.filter((result) => result.kind !== 'user' && result.kind !== 'assistant');
-      }
-      if (kind) {
-        filteredResults = allResults.filter((result) => result.kind.toLowerCase() === kind.toLowerCase());
-      } else if (!filteredResults.length) {
-        filteredResults = allResults;
-      }
-      filteredResults = sortBy(filteredResults, r => {
-        return r.name.toLowerCase().indexOf((mentionString!).toLowerCase());
-      });
-      filteredResults = filteredResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
-      filteredResults = filteredResults.map(r => ({ ...r, clickable: false }));
-      setResults(filteredResults);
-    })();
-  }, [mentionString]);
-
-  return results;
-}
-
-class MentionTypeaheadOption extends MenuOption {
-  name: string;
-  picture: JSX.Element;
-  id: string;
-  userId?: string;
-
-  constructor(
-    public readonly data: IMentionData,
-    picture: JSX.Element
-  ) {
-    super(data.name);
-    this.name = data.name;
-    this.picture = picture;
-    this.id = data.id;
-    // if (data.kind === 'assistant') {
-    //   this.userId = data.userId;
-    // }
-  }
-}
-
-function MentionsTypeaheadMenuItem({
-  index,
-  isSelected,
-  onClick,
-  onMouseEnter,
-  option,
-}: {
-  index: number;
-  isSelected: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  option: MentionTypeaheadOption;
-}) {
-  let className = 'item';
-  if (isSelected) {
-    className += ' selected';
-  }
-  return (
-    <li
-      key={option.key}
-      tabIndex={-1}
-      className={className}
-      ref={option.setRefElement}
-      role="option"
-      aria-selected={isSelected}
-      id={'typeahead-item-' + index}
-      onMouseEnter={onMouseEnter}
-      onClick={onClick}
-      data-kind={option.data.kind}
-      data-id={option.id}
-      data-user-id={option.userId || undefined}
-    >
-      {option.picture}
-      <span className="text">{option.name}</span>
-    </li>
-  );
-}
-
-export function MentionsPlugin(
-  props: {
-    mentionConfigs?: IMentionConfig[]
-    mentionsOpen?: Observable<boolean>
-  }
-): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  const [queryString, setQueryString] = useState<string | null>(null);
-  const results = useMentionLookupService(queryString, props.mentionConfigs);
-  const [_mentionsOpen] = useState(() => observable(false));
-
-  if (props.mentionsOpen) {
-    const finalMentionsOpen = _mentionsOpen() && results.length > 0;
-    if (props.mentionsOpen() !== finalMentionsOpen) {
-      props.mentionsOpen(finalMentionsOpen);
-    }
-  }
-
-  const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
-    minLength: 0,
-  });
-
-  const options = useMemo(
-    () =>
-      results
-        .map(
-          (result) => {
-            let picture = <i className="bi bi-question pe-1" />;
-            const config = props.mentionConfigs?.find(c => c.kind === result.kind);
-            if (config) {
-              if (config.picture) {
-                picture = config.picture(result);
-              } else {
-                picture = <i className={config.iconClass + ' pe-1'} />;
-              }
-            } else {
-              picture = <i className={'bi bi-question pe-1'} />;
-            }
-            return new MentionTypeaheadOption(result, picture);
-          }
-        )
-        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
-    [results],
-  );
-
-  const onSelectOption = useCallback(
-    (
-      selectedOption: MentionTypeaheadOption,
-      nodeToReplace: TextNode | null,
-      closeMenu: () => void,
-    ) => {
-      editor.update(() => {
-        const mentionNode = $createMentionNode(selectedOption.data);
-        if (nodeToReplace) {
-          nodeToReplace.replace(mentionNode);
-        }
-        mentionNode.selectNext(); // Move cursor to the position after the mention
-        const selection = $getSelection();
-        if (selection !== null) {
-          selection.insertText(' '); // Insert a space after the mention
-        }
-        closeMenu();
-      });
-    },
-    [editor],
-  );
-
-  const checkForMentionMatch = useCallback(
-    (text: string) => {
-      const textTrimmed = text.trimStart();
-      return {
-        leadOffset: text.length - textTrimmed.length,
-        matchingString: text.trim(),
-        replaceableString: text.trim(),
-      };
-    },
-    [checkForSlashTriggerMatch, editor],
-  );
-
-  return (
-    <LexicalTypeaheadMenuPlugin<MentionTypeaheadOption>
-      onQueryChange={setQueryString}
-      onSelectOption={onSelectOption}
-      triggerFn={checkForMentionMatch}
-      options={options}
-      onOpen={() => _mentionsOpen(true)}
-      onClose={() => _mentionsOpen(false)}
-      menuRenderFn={(
-        anchorElementRef,
-        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
-      ) => {
-        if (!(anchorElementRef.current && results.length)) {
-          return null;
-        }
-
-        // distance from the top of the viewport to the top of the anchor element
-        const anchorTop = anchorElementRef.current.getBoundingClientRect().top;
-        const viewportHeight = window.innerHeight;
-
-        let className = 'typeahead-popover mentions-menu';
-        if (anchorTop > (viewportHeight / 2)) {
-          className += ' mentions-menu-popup';
-        }
-
-        return ReactDOM.createPortal(
-          <div className={className}>
-            <ul>
-              {options.map((option, i: number) => (
-                <MentionsTypeaheadMenuItem
-                  index={i}
-                  isSelected={selectedIndex === i}
-                  onClick={() => {
-                    setHighlightedIndex(i);
-                    selectOptionAndCleanUp(option);
-                  }}
-                  onMouseEnter={() => {
-                    setHighlightedIndex(i);
-                  }}
-                  key={option.key}
-                  option={option}
-                />
-              ))}
-            </ul>
-          </div>,
-          anchorElementRef.current,
-        );
-      }}
-    />
-  );
-}

package/src/components/typeahead/typeahead-editor.tsx

@@ -1,140 +0,0 @@
-import { CodeNode } from '@lexical/code';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { observable, Observable } from "@peers-app/peers-sdk";
-import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from 'lexical';
-import React, { useEffect, useState } from 'react';
-import { MarkdownPlugin } from '../markdown-editor/markdown-plugin';
-import { MentionNode } from '../markdown-editor/mention-node';
-import theme from '../markdown-editor/theme';
-import { MentionsPlugin } from './mentions-plugin';
-import { IMentionConfig, mentionConfigs } from '../../mention-configs';
-
-const editorConfig = {
-  namespace: 'PeersEditor',
-  nodes: [
-    HeadingNode,
-    QuoteNode,
-    CodeNode,
-    ListNode,
-    ListItemNode,
-    MentionNode,
-    AutoLinkNode as any,
-    LinkNode,
-  ],
-  // Handling of errors during update
-  onError(error: Error) {
-    throw error;
-  },
-  // The editor theme
-  theme,
-};
-
-export interface IEditorEffects {
-  onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
-  focus?: () => void;
-}
-
-export interface ITypeaheadEditorProps {
-  value: Observable<string>;
-  effects?: IEditorEffects;
-  autoFocus?: boolean;
-  maxHeight?: string | number;
-  mentionConfigs?: IMentionConfig[];
-}
-
-export function TypeaheadEditor(props: ITypeaheadEditorProps) {
-  const { effects } = props;
-  const editorRef = React.useRef<HTMLDivElement>(null);
-
-  const [mentionsOpen] = useState(() => {
-    const obs = observable(false);
-    return obs;
-  });
-
-  if (effects) {
-    effects.focus = () => {
-      if (editorRef.current?.children[0]) {
-        const div = editorRef.current.children[0] as HTMLDivElement;
-        setTimeout(() => {
-          div.focus();
-          // Set the selection to the end of the div content
-          const range = document.createRange();
-          range.selectNodeContents(div);
-          range.collapse(false);
-          const selection = window.getSelection();
-          if (selection) {
-            selection.removeAllRanges();
-            selection.addRange(range);
-          }
-        }, 10);
-      }
-    }
-  }
-
-  const _mentionConfigs = props.mentionConfigs ?? mentionConfigs;
-
-  return (
-    <div className="border rounded border-dark-subtle">
-      <LexicalComposer initialConfig={{ ...editorConfig }}>
-        <div className="editor-container">
-
-          <div
-            className="editor-inner"
-            ref={editorRef}
-            style={{ maxHeight: props.maxHeight ?? 30, overflowY: 'hidden' }}
-          >
-            <RichTextPlugin
-              contentEditable={
-                <ContentEditable
-                  className="editor-input p-1"
-                />
-              }
-              // placeholder={(isEditable) => !isEditable ? <div className="text-muted">Type here...</div> : null}
-              ErrorBoundary={LexicalErrorBoundary}
-            />
-            <HistoryPlugin />
-            {props.autoFocus && <AutoFocusPlugin defaultSelection='rootEnd' />}
-            
-            {_mentionConfigs.length > 0 && (
-              <MentionsPlugin
-                mentionConfigs={_mentionConfigs}
-                mentionsOpen={mentionsOpen}
-              />
-            )}
-
-            <MarkdownPlugin markdownObs={props.value} />
-            {/* <MarkdownShortcutPlugin transformers={customMarkdownTransformers} /> */}
-            <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
-          </div>
-        </div>
-      </LexicalComposer>
-    </div>
-  );
-}
-
-const OnKeyDownPlugin = (props: { effects?: IEditorEffects, mentionsOpen: Observable<boolean> }) => {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    const removeListener = editor.registerCommand(KEY_DOWN_COMMAND, (event: KeyboardEvent) => {
-      if (props.mentionsOpen()) {
-        return false;
-      }
-      if (props.effects?.onKeyDown) {
-        const result = props.effects.onKeyDown(event as any);
-        return !!result;
-      }
-      return false;
-    }, COMMAND_PRIORITY_LOW);
-    return removeListener;
-  }, [editor]);
-  return null;
-}

package/src/components/typeahead/typeahead.tsx

@@ -1,77 +0,0 @@
-import { formatMention, getAllMentions, observable, Observable } from "@peers-app/peers-sdk";
-import React, { useState } from 'react';
-import { useObservable, usePromise, useSubscription } from "../../hooks";
-import { IMentionConfig } from '../../mention-configs';
-import { TypeaheadEditor } from './typeahead-editor';
-
-interface IProps<T> {
-  value: Observable<string> | Observable<string | undefined>
-  textValue?: Observable<string>
-  mentionConfigs: IMentionConfig[]
-  autoFocus?: boolean
-  onSubmit?: (value: string, textValue: string) => void
-}
-
-export function Typeahead<T>(props: IProps<T>) {
-  const { value: sourceValue } = props;
-
-  // const typeaheadValue = useObservableState('', true);
-  const [typeaheadValue] = useState(() => {
-    if (props.textValue) {
-      return props.textValue;
-    } else {
-      return observable('');
-    }
-  });
-  useObservable(typeaheadValue);
-  const existingMention = usePromise(async () => {
-    const id = sourceValue();
-    if (!id) return true;
-    for (const config of props.mentionConfigs) {
-      const refValue = await config.getById(id);
-      if (refValue) {
-        typeaheadValue(formatMention({ kind: config.kind, id, name: refValue.name }) + ' ');
-        return true;
-      }
-    }
-    return true;
-  });
-  
-  useSubscription(typeaheadValue, () => {
-    const mentions = getAllMentions(typeaheadValue());
-    const resolvedMention = mentions.find(m => m.id !== sourceValue()) || mentions[0];
-    const resolvedId = resolvedMention?.id;
-    if (resolvedId !== sourceValue() || mentions.length > 1) {
-      sourceValue(resolvedId);
-      if (resolvedId) {
-        const newTypeaheadValue = formatMention(resolvedMention) + ' ';
-        typeaheadValue(newTypeaheadValue);
-      }
-    }
-  }, true);
-
-  if (!existingMention) {
-    return <div>...</div>
-  }
-
-  return (
-    <TypeaheadEditor
-      value={typeaheadValue}
-      mentionConfigs={props.mentionConfigs}
-      autoFocus={props.autoFocus}
-      
-      // these settings configure it for a single line input
-      effects={{
-        onKeyDown(e) {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            if (props.onSubmit) {
-              props.onSubmit(sourceValue() ?? '', typeaheadValue());
-            }
-            return true;
-          }
-        },        
-      }}
-    />
-  )
-}

package/src/screens/profile.tsx

@@ -1,75 +0,0 @@
-
-import { getUserContext, thisDeviceId, Users } from "@peers-app/peers-sdk";
-import React from 'react';
-import { Input } from '../components/input';
-import { SaveButton } from '../components/save-button';
-import { Tooltip } from '../components/tooltip';
-import * as globals from '../globals';
-import { usePromise } from '../hooks';
-
-export const Profile = () => {
-
-  const me = usePromise(async () => {
-    const userContext = await getUserContext();
-    return Users(userContext.userDataContext).initDoc(globals.me);
-  });
-  if (!me) {
-    return;
-  }
-
-  return (
-    <div className="container mt-4">
-
-      <div className="d-flex mb-2">
-        <div className="flex-grow-1">
-          <h4>Profile</h4>
-        </div>
-        <div>
-          <SaveButton
-            doc={me}
-            noBuiltInActions
-          />
-        </div>
-      </div>
-
-      <small>Name:</small>
-      <Input
-        value={me.qs.name}
-        className="form-control mb-3"
-      />
-
-      <small>User Id:</small>
-      <Tooltip markdownContent="This uniquely identifies you to all other users." />
-      <Input
-        value={me.userId}
-        className="form-control mb-3"
-        disabled
-      />
-
-      <small>Device Id:</small>
-      <Tooltip markdownContent="This uniquely identifies this device on Peers networks." />
-      <Input
-        value={thisDeviceId()}
-        className="form-control mb-3"
-        disabled
-      />
-
-      <small>Public Key:</small>
-      <Tooltip markdownContent="This is your public key that other users will use to verify your signatures and thereby confirm a message was actually from you." />
-      <Input
-        value={me.publicKey}
-        className="form-control mb-3"
-        disabled
-      />
-
-      <small>Public Box Key:</small>
-      <Tooltip markdownContent="This is the public key that other users can use to encrypt data so that only you can open it with your secret key." />
-      <Input
-        value={me.publicBoxKey}
-        className="form-control mb-3"
-        disabled
-      />
-
-    </div>
-  );
-}