@peers-app/peers-ui 0.13.6 → 0.14.0

package/dist/ui-defaults/notes-editor.js

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenMarkdownEditor = void 0;
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
-const zod_1 = require("zod");
-const editor_inline_1 = require("../components/markdown-editor/editor-inline");
-const ui_loader_1 = require("../ui-router/ui-loader");
-const FullScreenMarkdownEditor = (props) => {
-    return (react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: props.markdown, maxHeight: 'calc(100vh - 160px)', autoFocus: true }));
-};
-exports.FullScreenMarkdownEditor = FullScreenMarkdownEditor;
-(0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00m4rof6uwka5kfi6t7rav8t3',
-    component: (props) => {
-        const doc = props.knowledgeValue;
-        const markdown = (0, peers_sdk_1.computed)({
-            read: () => doc.value?.body || '',
-            write: (value) => {
-                doc.value.body = value;
-                doc.qs.value.notifySubscribers();
-                doc.q(doc.q() + 1);
-            }
-        });
-        return (react_1.default.createElement(exports.FullScreenMarkdownEditor, { key: doc.knowledgeValueId, markdown: markdown }));
-    },
-    propsSchema: zod_1.z.object({
-        knowledgeValue: peers_sdk_1.knowledgeValueSchema, // TODO fix this
-    }),
-    routes: [
-        {
-            // KnowledgeValue with PeerType: Note
-            isMatch: (props, context) => props.knowledgeValue?.peerTypeId === '00m3g0ntcop3mrh6ynuzgekiy',
-            uiEditMode: 'edit',
-            uiCategory: 'details',
-        }
-    ]
-});

package/src/screens/events/cron.ts

@@ -1,74 +0,0 @@
-import cronValidate from "cron-validate";
-import moment from "moment-timezone";
-import { parseExpression } from 'cron-parser';
-
-
-export function getCronErrors(cronExpression: string): string | false {
-  const validationResult = cronValidate(cronExpression);
-
-  if (validationResult.isError()) {
-    const errors = validationResult.getError();
-    const errorMarkdown = ['Validation errors:', ...errors].join('\n- ');
-    return errorMarkdown;
-  }
-
-  let parseError = '';
-  try {
-    parseExpression(cronExpression);
-  } catch (e: any) {
-    parseError = e.message;
-  }
-  if (parseError) {
-    return 'Validation error: ' + parseError;
-  }
-  return false;
-}
-
-export function getCronExplanation(cronExpression: string) {
-  if (!cronExpression) {
-    return '';
-  }
-  function formatDate(date: Date) {
-    // let dtStr = moment
-    return moment(date).calendar(null, {
-      sameDay: '[Today at] LT',
-      nextDay: '[Tomorrow at] LT',
-      nextWeek: 'dddd [at] LT',
-      lastDay: '[Yesterday at] LT',
-      lastWeek: '[Last] dddd [at] LT',
-      sameElse: 'L [at] LT'
-    }) + `\n  - \`${date.toISOString().replace(':00.000Z', 'Z')}\``;
-  }
-  let parsed = parseExpression(cronExpression);
-
-  const strDates: string[] = [];
-  let i = 1;
-  while (true) {
-    const dt = parsed.prev().toString();
-    strDates.push(`- ${formatDate(new Date(dt))}`);
-    i++;
-    if (i > 3) break;
-  }
-  strDates.push('Prior three dates:');
-  strDates.reverse();
-  strDates.push('\nNext three dates:');
-  i = 1;
-  parsed = parseExpression(cronExpression);
-  while (true) {
-    const dt = parsed.next().toString();
-    strDates.push(`- ${formatDate(new Date(dt))}`);
-    i++;
-    if (i > 3) break;
-  }
-
- return strDates.join('\n');
-}
-
-export function getNextCronDate(cronExpression: string): Date {
-  const errors = getCronErrors(cronExpression);
-  if (errors) {
-    throw new Error(errors);
-  }
-  const parsed = parseExpression(cronExpression);
-  return new Date(parsed.next().toString());
-}

package/src/screens/events/event-details.tsx

@@ -1,117 +0,0 @@
-import { IPeerEventHandler, observable, PeerEventHandlers, PeerEventTypes } from "@peers-app/peers-sdk";
-import React, { useState } from "react";
-import { Input } from "../../components/input";
-import { IOSchemaEditor } from "../../components/io-schema";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { SaveButton } from "../../components/save-button";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { PeerEventHandlersUI } from "./event-handlers";
-import { PeerEventInfo } from "./event-info";
-import { PeerEventSchedule } from "./event-schedule";
-
-interface IProps {
-  peerEventTypeId: string;
-}
-
-export const PeerEventDetails = (props: IProps) => {
-
-  const peerEventType = usePromise(async () => {
-    const peerEvent = await PeerEventTypes().get(props.peerEventTypeId);
-    if (!peerEvent) {
-      throw new Error('Workflow not found');
-    }
-    const doc = PeerEventTypes().initDoc(peerEvent);
-    updateActiveTabTitle(doc.name || "Event");
-    return doc;
-  }, undefined, [props.peerEventTypeId]);
-
-  const [handlers] = useState(() => observable([] as IPeerEventHandler[]));
-
-  const handlersLoaded = usePromise(async () => {
-    if (!peerEventType) return false;
-    const _handlers = await PeerEventHandlers().list({ peerEventTypeId: peerEventType?.peerEventTypeId });
-    handlers(_handlers);
-    return true;
-  }, false, [peerEventType]);
-
-  const allLoaded = !!(peerEventType && handlersLoaded);
-
-  if (!allLoaded) {
-    return <LoadingIndicator />;
-  }
-
-  async function saveChanges() {
-    if (!peerEventType) return;
-    await peerEventType.save();
-    const oldHandlers = await PeerEventHandlers().list({ peerEventTypeId: peerEventType.peerEventTypeId });
-    for (const oldHandler of oldHandlers) {
-      await PeerEventHandlers().delete(oldHandler.peerEventHandlerId);
-    }
-    for (const handler of handlers()) {
-      PeerEventHandlers().save(handler, { restoreIfDeleted: true });
-    }    
-  }
-
-  return (
-    <div className="container-fluid p-3">
-
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="bi bi-lightning-charge-fill me-2"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={peerEventType.peerEventTypeId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
-              value={peerEventType.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton
-            key={peerEventType.peerEventTypeId}
-            onClick={saveChanges}
-            doc={peerEventType}
-          />
-        </div>
-      </div>
-
-      <Tabs
-        key={peerEventType.peerEventTypeId}
-        tabs={[
-          {
-            name: 'Info', content:
-              <ScreenTabBody>
-                <PeerEventInfo peerEventType={peerEventType} />
-              </ScreenTabBody>
-          },
-          {
-            name: 'Schema', content:
-              <ScreenTabBody>
-                <IOSchemaEditor ioSchema={peerEventType.qs.schema} simpleValueName="Event" />
-              </ScreenTabBody>
-          },
-          {
-            name: 'Triggers', content:
-              <ScreenTabBody>
-                <PeerEventSchedule peerEventType={peerEventType} />
-              </ScreenTabBody>
-          },
-          {
-            name: 'Handlers', content:
-              <ScreenTabBody>
-                <PeerEventHandlersUI peerEventType={peerEventType} handlers={handlers} />
-              </ScreenTabBody>
-          },
-
-        ]}
-      />
-    </div>
-  )
-}

package/src/screens/events/event-handlers.tsx

@@ -1,61 +0,0 @@
-import { observable, Observable } from "@peers-app/peers-sdk";
-import { isEqual } from "lodash";
-import React, { useState } from "react";
-import { newid, IDoc, IPeerEventHandler, IPeerEventType, Workflows } from "@peers-app/peers-sdk";
-import { Tooltip } from "../../components/tooltip";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { formatMention, getAllMentions } from "@peers-app/peers-sdk";
-import { usePromise, useSubscription } from "../../hooks";
-
-export const PeerEventHandlersUI = (props: { peerEventType: IDoc<IPeerEventType>, handlers: Observable<IPeerEventHandler[]> }) => {
-  const { peerEventType, handlers } = props;
-
-  const [handlersMarkdown] = useState(() => observable(''));
-
-  const markdownInitialized = usePromise(async () => {
-    const workflowIds = handlers().map(h => h.handlerWorkflowId);
-    const handlerWorkflows = await Workflows().list({ workflowId: { $in: workflowIds } });
-    const workflowTitles = handlerWorkflows.reduce((acc, wf) => ({ ...acc, [wf.workflowId]: wf.name }), {} as Record<string, string>);
-    const mentions = workflowIds.map(workflowId => '- ' + formatMention({ kind: 'workflow', id: workflowId, name: workflowTitles[workflowId] ?? workflowId }));
-    const markdown = `${mentions.join('\n') || '- '}`;
-    handlersMarkdown(markdown);
-    return true;
-  });
-
-  useSubscription(handlersMarkdown, () => {
-    if (!markdownInitialized) return;
-    const startWorkflowIds = handlers().map(h => h.handlerWorkflowId);
-    const workflowIds = getAllMentions(handlersMarkdown()).filter(m => m.kind === 'workflow').map(m => m.id);
-    if (isEqual(startWorkflowIds, workflowIds)) return;
-    const newHandlers: IPeerEventHandler[] = workflowIds.map(workflowId => ({
-      peerEventHandlerId: newid(),
-      peerEventTypeId: peerEventType.peerEventTypeId,
-      handlerWorkflowId: workflowId,
-    }));
-    handlers(newHandlers);
-    peerEventType.q(peerEventType.q() + 1);
-    console.log('new handlers', newHandlers.map(h => h.handlerWorkflowId));
-  });
-
-  if (!markdownInitialized) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div>
-
-      <div className='mt-2'>
-        <small>Mention workflows this event should trigger:</small>
-        <small>
-          <Tooltip markdownContent={`The mentions will be reformatted as a bulleted list regardless of how they are entered.  All other content except for workflow mentions will be discarded.`} />
-        </small>
-
-        <MarkdownEditorInline
-          value={handlersMarkdown}
-        />
-      </div>
-
-    </div>
-  );
-};

package/src/screens/events/event-info.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { IDoc, IPeerEventType } from "@peers-app/peers-sdk";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { Input } from "../../components/input";
-
-export const PeerEventInfo = (props: { peerEventType: IDoc<IPeerEventType> }) => {
-  const { peerEventType } = props;
-
-  return (
-    <div>
-
-      <small>Name:</small>
-      <Input
-        value={peerEventType.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Event name"
-        title="Event name"
-      />
-
-      <div className='mt-2'>
-        <small>Description:</small>
-        <MarkdownEditorInline
-          value={peerEventType.qs.description as any}
-        />
-      </div>
-
-    </div>
-  );
-};

package/src/screens/events/event-list.tsx

@@ -1,104 +0,0 @@
-import { ICursorIterable, IOSchemaType, IPeerEventType, newid, observable, PeerEventTypes } 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 { MarkdownWithMentions } from '../../components/markdown-with-mentions';
-import { isDesktop, mainContentPath } from '../../globals';
-import { useObservable } from "../../hooks";
-
-export function PeerEventList() {
-  const [searchTextObs] = useState(() => observable(''));
-  const [searchText] = useObservable(searchTextObs);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<IPeerEventType> | undefined>());
-  const [cursorId] = useState(() => observable(newid()));
-
-  async function newCursor() {
-    const cursor = await PeerEventTypes().cursor({ name: { $matchWords: searchText } }, { sortBy: ['-createdAt'] });
-    cursorObs(cursor);
-    cursorId(newid());
-    return cursor;
-  }
-
-  useEffect(() => {
-    newCursor();
-  }, [searchText]);
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    if (!searchText.trim()) return;
-    const peerEventName = searchText.trim();
-    const event = await PeerEventTypes().initRecord({
-      name: peerEventName,
-      description: '',
-      schema: {
-        type: IOSchemaType.none,
-        fields: []
-      }
-    });
-    await PeerEventTypes().insert(event);
-    mainContentPath(`events/${event.peerEventTypeId}`);
-  }
-
-  async function loadMore(events: IPeerEventType[]): Promise<IPeerEventType[]> {
-    let moreMatches: IPeerEventType[] = [];
-    let cursor = cursorObs() || await newCursor();
-    for await (const event of cursor) {
-      if (events.find(e => e.peerEventTypeId === event.peerEventTypeId)) continue;
-      moreMatches.push(event);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 50) break;
-    }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-    return moreMatches;
-  }
-
-  return (
-    <div className='container-fluid'>
-      <Input value={searchTextObs} className="form-control mt-3" style={{ marginBottom: "10px" }} placeholder="Search or create new event"
-        autoFocus={isDesktop() ? true : false}
-        onKeyUp={evt => searchSubmit(evt)}
-      />
-
-      <div className="peers-list-container">
-        <LazyList
-          key={cursorId()}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(events) => {
-            return events.map(event => {
-              return (
-                <div
-                  key={event.peerEventTypeId}
-                  className='container-fluid pb-4'
-                >
-                  <i className="bi bi-lightning-charge-fill"></i>&nbsp;
-                  <a href={`#events/${event.peerEventTypeId}`}>
-                    {event.name}
-                  </a>
-                  <div style={{ paddingLeft: '20px' }}>
-                    <MarkdownWithMentions content={event.description} />
-                  </div>
-
-                </div>
-              )
-            })
-          }}
-          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>
-  );
-}

package/src/screens/events/event-schedule.tsx

@@ -1,130 +0,0 @@
-import { IDoc, IPeerEventType, Observable, } from "@peers-app/peers-sdk";
-import React, { useEffect } from "react";
-import { Input } from "../../components/input";
-import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { Tooltip } from "../../components/tooltip";
-import { useObservableState } from "../../hooks";
-import { getCronErrors, getCronExplanation } from "./cron";
-
-export const PeerEventSchedule = (props: { peerEventType: IDoc<IPeerEventType> }) => {
-  const { peerEventType } = props;
-
-  return (
-    <div>
-
-      <div className="mt-3"></div>
-      <small>Chron Schedule</small>
-      <CronScheduleEditor cronSchedule={peerEventType.qs.cronSchedule} q={peerEventType.q} />
-
-    </div>
-  );
-};
-
-const CronScheduleEditor = (props: { cronSchedule: Observable<string | undefined>, q: Observable<number> }) => {
-  const { cronSchedule } = props;
-  const tempSchedule = useObservableState(props.cronSchedule() ?? '');
-  const cronError = useObservableState('');
-  const cronExplanation = useObservableState('');
-
-  const emptyCronMessage = [
-    'Enter a valid cron schedule to have this workflow automatically run.',
-    'For detailed information, see [Cron Schedule Syntax](https://en.wikipedia.org/wiki/Cron#CRON_expression)',
-    'and [CronTab.Guru](https://crontab.guru/)\n',
-    'The format is:',
-    '- `minute hour day-of-month month day-of-week`. ',
-    '  - `*` means every',
-    '  - `1-5` means 1 through 5',
-    '  - `1,4` means 1 and 4',
-    '',
-    'Examples:',
-    '- run every day at 3am:\n  - `0 3 * * *`',
-    '- run every Monday at 3am:\n  - `0 3 * * 1`',
-    '- run every Monday and Thursday at 3am:\n  - `0 3 * * 1,4`',
-    '- run every weekday at 3am:\n  - `0 3 * * 1-5`',
-
-  ].join('\n')
-
-
-  useEffect(() => {
-
-    function updateExplanation() {
-      if (cronError()) {
-        cronExplanation('');
-      }
-      else if (!tempSchedule()) {
-        cronExplanation(emptyCronMessage);
-      }
-      else {
-        cronExplanation(getCronExplanation(tempSchedule()));
-      }
-    }
-
-    cronExplanation(getCronExplanation(tempSchedule()));
-
-    const sub = tempSchedule.subscribe(() => {
-      // validate and format cron schedule
-      let schedule = tempSchedule() || '';
-      schedule = schedule.trim();
-      cronExplanation('');
-      cronError('');
-      cronSchedule(undefined);
-      if (!schedule) {
-        updateExplanation();
-        return;
-      }
-
-      const errors = getCronErrors(schedule);
-      if (errors) {
-        cronError(errors);
-        return;
-      }
-
-      cronSchedule(schedule);
-      updateExplanation();
-    });
-
-    const sub2 = props.q.subscribe(() => {
-      if (props.q() === 0) {
-        tempSchedule(cronSchedule() || '');
-        cronError('');
-        cronExplanation(getCronExplanation(tempSchedule()));
-      }
-    })
-    return () => {
-      sub.dispose();
-      sub2.dispose();
-    }
-  }, [cronSchedule, tempSchedule]);
-
-
-  return (
-    <>
-      <Tooltip
-        markdownContent={emptyCronMessage}
-        handleClassName={`p-2 small`}
-      />
-
-      <Input
-        value={tempSchedule}
-        className={`form-control mb-3 p-0 p-2 ` + (cronError() ? 'border-danger' : '')}
-        placeholder="minute hour day(of month) month day(of week)"
-        title="Cron Schedule"
-        style={{ fontFamily: 'monospace' }}
-      />
-      {cronError()
-        ? (
-          <div className="text-danger">
-            <MarkdownWithMentions content={cronError()} />
-          </div>
-        )
-        : (
-          <div>
-            <MarkdownWithMentions content={cronExplanation()} />
-          </div>
-        )
-      }
-
-
-    </>
-  )
-}