@peers-app/peers-ui 0.0.14

package/src/components/save-button.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { IDoc } from "@peers-app/peers-sdk";
+import { isDesktop, mainContentPath } from "../globals";
+import { useObservable } from "../hooks";
+
+export interface ISaveButtonProps {
+  doc: IDoc<any>
+  onClick?: () => void | Promise<void>;
+  addActions?: (
+    {
+      label: string;
+      onClick: () => void;
+      className?: string;
+    }
+    | React.ReactNode
+  )[]
+  noBuiltInActions?: boolean;
+}
+
+export const SaveButton = (props: ISaveButtonProps) => {
+  let { doc, addActions } = props;
+  useObservable(doc.q);
+  const q = doc.q;
+
+  if (!addActions) {
+    addActions = [];
+  }
+  const allActions: ISaveButtonProps['addActions'] = props.addActions ? [...addActions] : [];
+
+  if (!props.noBuiltInActions) {
+    if (q()) {
+      allActions.unshift({
+        label: 'Discard Changes',
+        className: 'text-bg-warning',
+        onClick: () => {
+          if (confirm('Are you sure you want to discard your changes?')) {
+            doc.load()
+              .then(() => {
+                setTimeout(() => doc.q(0), 100);
+              });
+          }
+        }
+      });
+    }
+    if (allActions.length) {
+      allActions.push(<hr className="dropdown-divider mt-3" />);
+    }
+    allActions.push({
+      label: 'Delete',
+      className: `text-bg-danger`,
+      onClick: async () => {
+        if (confirm('Are you sure you want to delete this?')) {
+          await doc.delete();
+          const pathParts = mainContentPath().split('/');
+          pathParts.pop();
+          const path = pathParts.join('/') ?? '';
+          mainContentPath(path);
+        }
+      }
+    });
+  }
+
+
+
+  let className = `btn `;
+  if (q()) {
+    className += 'btn-primary';
+  } else {
+    className += 'disabled';
+  }
+
+  if (!addActions?.length && props.noBuiltInActions) {
+    return (
+      <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
+        {isDesktop() ? 'Save Changes' : 'Save'}
+      </button>
+    )
+  }
+
+  return (
+    <div style={{ display: 'inline-block' }}>
+      <div className="input-group" >
+        <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
+          {isDesktop() ? 'Save Changes' : 'Save'}
+        </button>
+        <button type="button" data-bs-toggle="dropdown" aria-expanded="false"
+          // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
+          className={`btn dropdown-toggle dropdown-toggle-split btn-secondary`}
+        >
+          <span className="visually-hidden">Toggle Dropdown</span>
+        </button>
+        <ul className="dropdown-menu dropdown-menu-end">
+          {allActions.map(action => {
+            if (typeof action !== 'object' || action === null || !('label' in action)) {
+              return (<li key={Math.random()}>{action}</li>);
+            }
+            return (
+              <li key={action.label}>
+                <button className={`dropdown-item rounded mt-2 ${action.className || ''}`} onClick={action.onClick}>
+                  {action.label}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/components/sortable-list.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Sortable from 'sortablejs';
+import { last, sortBy } from 'lodash';
+import { Observable, unwrapObservable } from "@peers-app/peers-sdk";
+
+
+export interface ISortable {
+  sortOrder: number
+}
+
+interface ISortableListProps<T extends ISortable> {
+  items: Observable<T[]> | T[],
+  renderItem: (props: { item: T, listId: string, sortHandle: string }) => React.ReactNode,
+  listsGroup?: string
+  onAdd?: ((itemId: string, sortOrder: number) => any),
+  onUpdate?: ((args: { items: T[], ixMoved: number[] }) => any),
+  hidden?: boolean,
+  containerProps?: Record<string, any>
+  dragHandleClassName?: string
+  sortDirection?: 'asc' | 'desc'
+  minHeight?: string | number
+  paddingBottom?: string | number
+}
+
+export class SortableList<T extends ISortable> extends React.Component<ISortableListProps<T>, {}>
+{
+
+  constructor(props: any) {
+    super(props);
+    this.sortHandle = this.props.dragHandleClassName && `.${this.props.dragHandleClassName}` || this.sortHandle;
+  }
+
+  self: any
+
+  items: any[] = [];
+
+  listId = `${Date.now()}_${Math.round(Math.random()*100000)}`;
+  sortHandle = `.sort-handle-${this.listId}`;
+
+  calculateSortOrder(index: number) {
+    const items = this.items;
+    if (index === 0) return Date.now();
+    if (index >= items.length) return last(items).sortOrder - 10000;
+    const above = items[index - 1].sortOrder ?? Date.now();
+    const below = items[index].sortOrder ?? Number.MIN_VALUE;
+    if (above === below) alert('sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it')
+    return above - ((above - below) / 2)
+  }
+
+  componentDidMount() {
+    const self = this;
+    const listDiv = document.getElementById(this.listId) as any;
+
+    Sortable.create(listDiv, {
+      handle: this.sortHandle,
+      group: { name: this.props.listsGroup || this.listId, put: !!this.props.onAdd },
+      animation: 100,
+
+      onUpdate: evt => {
+        const items = self.items;
+        const item = items.splice(evt.oldIndex!, 1)[0];
+        item.sortOrder = this.calculateSortOrder(evt.newIndex!);
+        items.splice(evt.newIndex!, 0, item);
+        // console.log(items.map(i => i.toJS()));
+        if (this.props.onUpdate) {
+          this.props.onUpdate({ items, ixMoved: [evt.newIndex!] })
+        }
+      },
+
+      onAdd: evt => {
+        const itemEl = evt.item;  // dragged HTMLElement
+        if (evt.to !== evt.from) {
+          // first restore html hierarchy so html doesn't get out of sync with react
+          evt.to.removeChild(itemEl);
+          evt.from.appendChild(itemEl);
+
+          // now if we were given an `onAdd` function, call it
+          if (this.props.onAdd) {
+            const itemId = evt.item.id;
+            this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex!));
+          }
+        }
+      },
+    });
+  }
+
+  public render() {
+    let items = unwrapObservable(this.props.items);
+    if (this.props.sortDirection === 'asc') {
+      items = sortBy(items, i => i.sortOrder ?? -Infinity);
+    } else {
+      // @ts-ignore
+      items = sortBy(items, i => -i.sortOrder ?? Infinity);
+    }
+    this.items = items;
+    return (
+      <div id={this.listId} style={{ minHeight: this.props.minHeight ?? "25px", paddingBottom: this.props.paddingBottom ?? "10px" }} {...this.props.containerProps} >
+        {items.map(item => this.props.renderItem({ item, listId: this.listId, sortHandle: this.sortHandle.substring(1) }))}
+      </div>
+    )
+  }
+}

package/src/components/tabs.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { queryParam } from "../globals";
+
+interface ITabsProps {
+  tabs: { 
+    name: string, 
+    content: JSX.Element, 
+    active?: true 
+  }[];
+}
+
+let lastActive = '';
+
+export const Tabs = (props: ITabsProps) => {
+  const { tabs } = props;
+  
+  const [activeTab, _setActiveTab] = useState(() => {
+    let activeTabName = tabs.find(tab => tab.active)?.name || queryParam('tab') || lastActive;
+    activeTabName = activeTabName.toLowerCase();
+    const _activeTab = tabs.find(tab => tab.name.toLowerCase() === activeTabName) || tabs[0];
+    lastActive = _activeTab.name;
+    setTimeout(() => queryParam('tab', lastActive.toLowerCase()));
+    return _activeTab;
+  });
+  
+  function setActiveTab(tab: { name: string, content: JSX.Element }) {
+    _setActiveTab(tab);
+    queryParam('tab', tab.name.toLowerCase());
+    lastActive = tab.name;
+  }
+
+  return (
+    <>
+      <ul className="nav nav-tabs">
+        {tabs.map((tab, iTab) => {
+          return (
+            <li key={tab.name + iTab} className="nav-item">
+              <a
+                href="#"
+                className={"nav-link " + (activeTab.name === tab.name ? 'active' : '')}
+                onClick={evt => (evt.preventDefault(), setActiveTab(tab))}
+              >
+                {tab.name}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+      <br />
+      {tabs.map((tab, iTab) => {
+        return (
+          <div key={tab.name + iTab} hidden={activeTab.name !== tab.name}>
+            {tab.content}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+
+export const ScreenTabBody = (props: React.PropsWithChildren) => {
+  return (
+    <div
+      style={{ maxHeight: 'calc(100vh - 138px)', overflowY: 'auto' }}
+    >
+      {props.children}
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+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/tooltip.tsx

@@ -0,0 +1,50 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
+import { Popover } from 'react-tiny-popover';
+import { MarkdownWithMentions } from './markdown-with-mentions';
+import { useObservable, useObservableState } from "../hooks";
+
+interface IProps {
+  markdownContent?: string | Observable<string> | Observable<string | undefined>;
+  handle?: React.ReactNode;
+  handleClassName?: string;
+  positions?: ('right' | 'bottom' | 'left' | 'top')[];
+  genericContent?: React.ReactNode
+}
+
+export const Tooltip = (props: IProps) => {
+  const { handle } = props;
+  let [markdownContent] = useObservable(props.markdownContent);
+
+  markdownContent = markdownContent ?? '';
+
+  const showPopover = useObservableState(false);
+
+  return (
+    <Popover
+      isOpen={showPopover()}
+      onClickOutside={() => showPopover(false)}
+      positions={props.positions ?? ['right', 'bottom', 'left', 'top']}
+      content={
+        () => (
+          <div
+            className='card p-2 bg-light-subtle'
+            style={{ maxWidth: 500, maxHeight: 400, overflowY: 'auto', zIndex: 1000001 }}
+          >
+            {
+              props.genericContent ||
+              <MarkdownWithMentions
+                content={markdownContent}
+              />
+            }
+          </div>
+        )
+      }
+    >
+      <span className={props.handleClassName ?? 'p-2'} onClick={() => showPopover(!showPopover())}>
+        {handle ?? <i className="bi bi-info-circle" style={{ cursor: 'pointer' }}></i>}
+        {/* <i className="fa-solid fa-note-sticky" onClick={() => showPopover(!showPopover())}></i> */}
+      </span>
+    </Popover >
+  )
+}

package/src/components/top-bar.tsx

@@ -0,0 +1,119 @@
+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>
+  );
+}