terrier-engine 4.1.0 → 4.3.3

package/api.ts

@@ -4,6 +4,11 @@ import { QueryParams } from "tuff-core/urls"
 const log = new Logger('Api')
 log.level = 'debug'
 
+
+////////////////////////////////////////////////////////////////////////////////
+// Basic Requests
+////////////////////////////////////////////////////////////////////////////////
+
 /**
  * All API responses containing these fields.
  */
@@ -104,9 +109,123 @@ async function post<ResponseType>(url: string, body: Record<string, unknown> | F
 }
 
 
+////////////////////////////////////////////////////////////////////////////////
+// Event Streams
+////////////////////////////////////////////////////////////////////////////////
+
+type LogLevel = 'success' | 'info' | 'warn' | 'debug'
+
+/**
+ * Type of log events from a streaming response.
+ */
+export type LogEvent = {
+    level: LogLevel
+    prefix?: string
+    message: string
+}
+
+/**
+ * Type of error events from a streaming response.
+ */
+export type ErrorEvent = {
+    prefix?: string
+    message: string
+    backtrace: string[]
+}
+
+/**
+ * Configure a `Streamer`.
+ */
+export type StreamOptions = {
+    keepAlive?: boolean
+}
+
+type noArgListener = () => any
+
+type StreamLifecycle = 'close'
+
+/**
+ * Exposes a typesafe API for handling streaming responses using SSE.
+ */
+export class Streamer {
+
+    sse!: EventSource
+    lifecycleListeners: Record<StreamLifecycle, noArgListener[]> = {
+        close: []
+    }
+
+    constructor(readonly url: string, readonly options: StreamOptions) {
+        this.sse = new EventSource(url)
+
+        // this is a special event sent by the ResponseStreamer on the server
+        // to tell us that the request is done
+        this.sse.addEventListener('_close', evt => {
+            if (!this.options.keepAlive) {
+                log.debug(`Closing Streamer at ${url}`, evt)
+                this.sse.close()
+                for (const listener of this.lifecycleListeners['close']) {
+                    listener()
+                }
+            }
+        })
+    }
+
+    /**
+     * Register a listener for events of the given type.
+     * @param type
+     * @param listener
+     */
+    on<T>(type: string, listener: (event: T) => any) {
+        this.sse.addEventListener(type, event => {
+            const data = JSON.parse(event.data) as T
+            log.debug(`${type} event`, data)
+            listener(data)
+        })
+        return this
+    }
+
+    /**
+     * Listen specifically for log events.
+     * @param listener
+     */
+    onLog(listener: (event: LogEvent) => any) {
+        return this.on<LogEvent>('_log', listener)
+    }
+
+    /**
+     * Listen specifically for error events.
+     * @param listener
+     */
+    onError(listener: (event: ErrorEvent) => any) {
+        return this.on<ErrorEvent>('_error', listener)
+    }
+
+    onClose(listener: noArgListener) {
+        this.lifecycleListeners['close'].push(listener)
+    }
+}
+
+
+
+/**
+ * Creates a streaming response for the given endpoint.
+ * @param url
+ * @param options pass `keepAlive: true` to keep retrying the request
+ * @return a `Streamer` on which you attach event handlers
+ */
+function stream(url: string, options: StreamOptions={}): Streamer {
+    return new Streamer(url, options)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
 const Api = {
     safeGet,
     safePost,
-    post
+    post,
+    stream
 }
 export default Api

package/app.ts

@@ -3,12 +3,14 @@ import {Part, PartConstructor, PartParent} from "tuff-core/parts"
 import TerrierPart from "./parts/terrier-part"
 import Tooltips from "./tooltips"
 import Lightbox from "./lightbox"
-import Theme, {ThemeType} from "./theme"
+import Theme from "./theme"
 import {ModalPart, ModalStackPart} from "./modals"
 import {OverlayLayerType, OverlayPart} from "./overlays"
 
 // @ts-ignore
 import logoUrl from './images/optimized/terrier-hub-logo-light.svg'
+import Sheets, {AlertSheetState, ConfirmSheetState, Sheet, SheetState} from "./sheets";
+import {messages} from "tuff-core";
 
 const log = new Logger('App')
 Logger.level = 'info'
@@ -16,22 +18,18 @@ Logger.level = 'info'
 /**
  * Main application part that renders the entire page.
  */
-export abstract class TerrierApp<
-    TThemeType extends ThemeType,
-    TSelf extends TerrierApp<TThemeType, TSelf, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends TerrierPart<{theme: TTheme}, TThemeType, TSelf, TTheme> {
+export abstract class TerrierApp<TState> extends TerrierPart<TState> {
 
-    _theme!: TTheme
-
-    get theme(): TTheme {
+    _theme!: Theme
+    
+    get theme(): Theme {
         return this._theme
     }
 
     overlayPart!: OverlayPart
 
     async init() {
-        this._theme = this.state.theme
+        this._theme = new Theme()
         this.overlayPart = this.makePart(OverlayPart, {})
         log.info("Initialized")
     }
@@ -44,7 +42,7 @@ export abstract class TerrierApp<
     update(root: HTMLElement) {
         log.info(`Update`, root)
         Tooltips.init(root)
-        Lightbox.init<TThemeType, TSelf, TTheme>(root, this as unknown as TSelf, 'body-content')
+        Lightbox.init(root, this, 'body-content')
     }
 
 
@@ -70,7 +68,7 @@ export abstract class TerrierApp<
         this.overlayPart.clearAll()
     }
 
-    removeDropdown<StateType extends {}>(state: StateType): boolean {
+    removeDropdown<StateType>(state: StateType): boolean {
         this.lastDropdownTarget = undefined
         return this.overlayPart.removeLayer(state)
     }
@@ -86,7 +84,7 @@ export abstract class TerrierApp<
 
     /// Modals
 
-    showModal<ModalType extends ModalPart<StateType, TThemeType, TSelf, TTheme>, StateType>(
+    showModal<ModalType extends ModalPart<StateType>, StateType>(
         constructor: PartConstructor<ModalType, StateType>,
         state: StateType
     ): ModalType {
@@ -97,4 +95,58 @@ export abstract class TerrierApp<
     }
 
 
+    /// Sheets
+
+    /**
+     * Shows a confirm sheet to the user, asking them a question
+     * @param options
+     * @param callback gets called if the user hits "Confirm"
+     */
+    confirm(options: ConfirmSheetState, callback: () => any) {
+        const key = messages.untypedKey()
+        const state = {...options,
+            primaryActions: [
+                {
+                    title: 'Confirm',
+                    icon: 'glyp-checkmark',
+                    click: {key}
+                }
+            ],
+            secondaryActions: [
+                {
+                    title: 'Cancel',
+                    icon: 'glyp-close',
+                    classes: ['secondary'],
+                    click: {key: Sheets.clearKey}
+                }
+            ]
+        } as SheetState
+        const sheet = this.overlayPart.getOrCreateLayer(Sheet<SheetState>, state, 'sheet')
+        sheet.onClick(key, _ => {
+            sheet.clear()
+            callback()
+        })
+        sheet.dirty()
+    }
+
+    /**
+     * Shows an alert sheet to the user with a message (but no choices).
+     * @param options
+     */
+    alert(options: AlertSheetState) {
+        const state = {...options,
+            primaryActions: [
+                {
+                    title: 'Okay',
+                    icon: 'glyp-checkmark',
+                    click: {key: Sheets.clearKey},
+                    classes: ['secondary']
+                }
+            ]
+        } as SheetState
+        const sheet = this.overlayPart.getOrCreateLayer(Sheet<SheetState>, state, 'sheet')
+        sheet.dirty()
+    }
+
+
 }

package/attachments.ts

@@ -0,0 +1,55 @@
+import {Logger} from "tuff-core/logging"
+
+const log = new Logger('Attachments')
+
+type MetaData = {
+    size: number
+    filename: string
+    mime_type: string
+}
+
+type ShrineAttachment = {
+    id: string
+    storage: string
+    metadata: MetaData
+    path?: string // used to send tmp filepath to server
+}
+
+type Derivatives = {
+    thumbnail?: ShrineAttachment
+}
+
+export type Attachment = ShrineAttachment & { derivatives?: Derivatives }
+
+/**
+ * Constructs a url pointing to the original or a derivative of the attachment
+ * @param attachment
+ * @param derivative
+ */
+function url(attachment: Attachment, derivative: keyof Derivatives | null) {
+    let path = '/uploads'
+    let id
+
+    if (derivative?.length && attachment.derivatives) {
+        const derivativeId = attachment.derivatives[derivative]?.id
+        if (derivativeId?.length) {
+            path += '/permanent'
+            id = derivativeId
+        } else {
+            log.info(`${derivative} not found, returning original`)
+        }
+    }
+
+    if (!id) {
+        path += '/cache'
+        id = attachment.id
+    }
+
+    return `${path}/${id}`
+}
+
+const Attachments = {
+    url
+}
+
+export default Attachments

package/dropdowns.ts

@@ -1,12 +1,11 @@
-import { Logger } from "tuff-core/logging"
-import { untypedKey } from "tuff-core/messages"
-import { unique } from "tuff-core/arrays"
+import {Logger} from "tuff-core/logging"
+import {untypedKey} from "tuff-core/messages"
+import {unique} from "tuff-core/arrays"
 import {PartTag, StatelessPart} from "tuff-core/parts"
 import Overlays from "./overlays"
 import TerrierPart from "./parts/terrier-part"
 import Objects from "tuff-core/objects"
-import Theme, {Action, ThemeType} from "./theme"
-import {TerrierApp} from "./app"
+import {Action} from "./theme"
 
 const log = new Logger('Dropdowns')
 
@@ -16,12 +15,7 @@ const clearDropdownKey = untypedKey()
  * Abstract base class for dropdown parts.
  * Subclasses must implement the `renderContent()` method to render the dropdown content.
  */
-export abstract class Dropdown<
-    TState extends {},
-    TThemeType extends ThemeType,
-    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends TerrierPart<TState, TThemeType, TApp, TTheme> {
+export abstract class Dropdown<TState> extends TerrierPart<TState> {
 
     parentPart?: StatelessPart
 
@@ -96,12 +90,7 @@ export abstract class Dropdown<
 /**
  * A concrete dropdown part that shows a list of actions.
  */
-export class ActionsDropdown<
-    TThemeType extends ThemeType,
-    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
-    TTheme extends Theme<TThemeType>
-> extends Dropdown<Array<Action<TThemeType>>, TThemeType, TApp, TTheme> {
-
+export class ActionsDropdown extends Dropdown<Array<Action>> {
 
     get autoClose(): boolean {
         return true

package/format.ts

@@ -0,0 +1,24 @@
+
+////////////////////////////////////////////////////////////////////////////////
+// Currency
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Formats a cents value as a dollars string.
+ * @param c an integer number of cents
+ */
+function cents(c: number | string): string {
+    const num = typeof c == 'number' ? c : parseInt(c)
+    return '$' + (num/100).toFixed(2)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Format = {
+    cents
+}
+
+export default Format

package/forms.ts

@@ -1,5 +1,10 @@
-import {SelectOptions} from "tuff-core/forms"
+import {Field, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
 import {strings} from "tuff-core"
+import {DbErrors} from "./db-client"
+import {PartTag} from "tuff-core/parts"
+import {InputTag, InputTagAttrs} from "tuff-core/html"
+import TerrierPart from "./parts/terrier-part";
+import {an} from "vitest/dist/types-ad1c3f45";
 
 ////////////////////////////////////////////////////////////////////////////////
 // Options
@@ -20,6 +25,52 @@ function titleizeOptions(opts: string[], blank?: string): SelectOptions {
 }
 
 
+////////////////////////////////////////////////////////////////////////////////
+// Form Fields
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Override regular `FormFields` methods to include validation errors.
+ */
+export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
+
+    errors?: DbErrors<T>
+
+    /**
+     * You must pass a `TerrierPart` so that we can render the error bubble with it.
+     * @param part
+     * @param data
+     * @param errors
+     */
+    constructor(part: TerrierPart<any>, data: T, errors?: DbErrors<T>) {
+        super(part, data)
+        this.errors = errors
+    }
+
+    protected input<Key extends KeyOfType<T, any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: {
+        new(name: string): Field<any, Element>
+    }, attrs?: InputTagAttrs): InputTag {
+        if (this.errors && this.errors[name]) {
+            attrs ||= {}
+            attrs.classes ||= []
+            attrs.classes.push('error')
+        }
+        return super.input(parent, type, name, serializerType, attrs);
+    }
+
+    /**
+     * Only renders the error bubble if the errors are set.
+     * @param parent
+     */
+    renderErrorBubble(parent: PartTag) {
+        if (this.errors) {
+            (this.part as TerrierPart<an>).renderErrorBubble(parent, this.errors)
+        }
+    }
+}
+
+
+
 ////////////////////////////////////////////////////////////////////////////////
 // Export
 ////////////////////////////////////////////////////////////////////////////////

package/fragments.ts

@@ -1,14 +1,26 @@
 import {PartTag} from "tuff-core/parts"
 import {AnchorTagAttrs, HtmlParentTag} from "tuff-core/html"
-import Theme, {Action, Packet, ThemeType} from "./theme"
+import Theme, {Action, ColorName, IconName, Packet} from "./theme"
 import {ActionLevel, PanelActions} from "./parts/content-part"
 
 /**
  * Base class for Panel and Card fragment builders.
  */
-abstract class ContentFragment<TT extends ThemeType> {
-    protected constructor(readonly prefix: string, readonly theme: Theme<TT>) {
+abstract class ContentFragment {
+    protected constructor(readonly prefix: string, readonly theme: Theme) {
+        
+    }
+
 
+    protected _classes: string[] = []
+
+    /**
+     * Add arbitrary classes to the top-level fragment.
+     * @param c
+     */
+    classes(...c: string[]) {
+        this._classes.push(...c)
+        return this
     }
 
     protected _title?: string
@@ -17,18 +29,18 @@ abstract class ContentFragment<TT extends ThemeType> {
      * @param t the title
      * @param icon the optional icon
      */
-    title(t: string, icon?: TT['icons']) {
+    title(t: string, icon?: IconName) {
         this._title = t
         this._icon = icon
         return this
     }
 
-    protected _icon?: TT['icons']
+    protected _icon?: IconName
 
     /**
      * @param i the panel icon
      */
-    icon(i: TT['icons']) {
+    icon(i: IconName) {
         this._icon = i
         return this
     }
@@ -46,17 +58,17 @@ abstract class ContentFragment<TT extends ThemeType> {
 }
 
 
-export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
-    constructor(theme: Theme<TT>) {
+export class PanelFragment extends ContentFragment {
+    constructor(theme: Theme) {
         super('tt-panel', theme)
     }
 
     /// Actions
 
     actions = {
-        primary: Array<Action<TT>>(),
-        secondary: Array<Action<TT>>(),
-        tertiary: Array<Action<TT>>()
+        primary: Array<Action>(),
+        secondary: Array<Action>(),
+        tertiary: Array<Action>()
     }
 
     /**
@@ -64,7 +76,7 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
      * @param action the action to add
      * @param level whether it's a primary, secondary, or tertiary action
      */
-    addAction(action: Action<TT>, level: ActionLevel = 'primary') {
+    addAction(action: Action, level: ActionLevel = 'primary') {
         this.actions[level].push(action)
         return this
     }
@@ -93,7 +105,7 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
                 }
             })
             panelActions(panel, this.actions, this.theme)
-        })
+        }).class(...this._classes)
     }
 
 }
@@ -104,7 +116,7 @@ export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
  * @param actions the actions
  * @param theme the theme with which to render actions
  */
-function panelActions<TT extends ThemeType>(panel: PartTag, actions: PanelActions<TT>, theme: Theme<TT>) {
+function panelActions(panel: PartTag, actions: PanelActions, theme: Theme) {
     if (actions.primary.length || actions.secondary.length) {
         panel.div('.panel-actions', actionsContainer => {
             for (const level of ['secondary', 'primary'] as const) {
@@ -122,8 +134,8 @@ function panelActions<TT extends ThemeType>(panel: PartTag, actions: PanelAction
 /**
  * Cards are like panels except they don't have any actions and are themselves an anchor.
  */
-class CardFragment<TT extends ThemeType> extends ContentFragment<TT> {
-    constructor(theme: Theme<TT>) {
+class CardFragment extends ContentFragment {
+    constructor(theme: Theme) {
         super('tt-card', theme)
     }
 
@@ -164,15 +176,15 @@ class CardFragment<TT extends ThemeType> extends ContentFragment<TT> {
 }
 
 
-class LabeledValueFragment<TT extends ThemeType> extends ContentFragment<TT> {
+class LabeledValueFragment extends ContentFragment {
 
-    constructor(theme: Theme<TT>) {
+    constructor(theme: Theme) {
         super('tt-labeled-value', theme)
     }
 
     private _value?: string
-    private _valueIcon?: TT['icons']
-    private _valueIconColor?: TT['colors'] | null
+    private _valueIcon?: IconName
+    private _valueIconColor?: ColorName | null
     private _valueClass?: string[]
 
     private _href?: string
@@ -182,7 +194,7 @@ class LabeledValueFragment<TT extends ThemeType> extends ContentFragment<TT> {
 
     private _tooltip?: string
 
-    value(value: string, icon?: TT['icons'], iconColor?: TT['colors'] | null) {
+    value(value: string, icon?: IconName, iconColor?: ColorName | null) {
         this._value = value
         this._valueIcon = icon
         this._valueIconColor = iconColor
@@ -258,10 +270,10 @@ type ListValueDefinition = {
     tooltip?: string
 }
 
-class LabeledListFragment<TT extends ThemeType> extends ContentFragment<TT> {
+class LabeledListFragment extends ContentFragment {
     private _values?: ListValueDefinition[]
 
-    constructor(theme: Theme<TT>) {
+    constructor(theme: Theme) {
         super('tt-labeled-list', theme)
     }
 
@@ -307,7 +319,7 @@ class LabeledListFragment<TT extends ThemeType> extends ContentFragment<TT> {
  * Creates a new card fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function card<TT extends ThemeType>(theme: Theme<TT>) {
+function card(theme: Theme) {
     return new CardFragment(theme)
 }
 
@@ -316,7 +328,7 @@ function card<TT extends ThemeType>(theme: Theme<TT>) {
  * Creates a new panel fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function panel<TT extends ThemeType>(theme: Theme<TT>) {
+function panel(theme: Theme) {
     return new PanelFragment(theme)
 }
 
@@ -324,18 +336,18 @@ function panel<TT extends ThemeType>(theme: Theme<TT>) {
  * Creates a new labeled value fragment builder.
  * Make sure to call `render()` in order to render it to a parent tag.
  */
-function labeledValue<TT extends ThemeType>(theme: Theme<TT>) {
+function labeledValue(theme: Theme) {
     return new LabeledValueFragment(theme)
 }
 
-function labeledList<TT extends ThemeType>(theme: Theme<TT>) {
+function labeledList(theme: Theme) {
     return new LabeledListFragment(theme)
 }
 
 /**
  * Create a new button in the parent.
  */
-function button<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title?: string, icon?: TT['icons'], iconColor: TT['colors'] | null = null) {
+function button(parent: PartTag, theme: Theme, title?: string, icon?: IconName, iconColor: ColorName | null = null) {
     return parent.a('.tt-button', button => {
         if (icon) theme.renderIcon(button, icon, iconColor)
         if (title?.length) button.div('.title', {text: title})
@@ -346,7 +358,7 @@ function button<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title?:
  * Create a new simple value display in the parent.
  * This is just some text with an optional icon that doesn't have a separate label.
  */
-function simpleValue<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons'], iconColor: TT['colors'] | null = 'link') {
+function simpleValue(parent: PartTag, theme: Theme, title: string, icon?: IconName, iconColor: ColorName | null = 'link') {
     return parent.div('.tt-simple-value.shrink', button => {
         if (icon) theme.renderIcon(button, icon, iconColor)
         button.div('.title', {text: title})
@@ -356,7 +368,7 @@ function simpleValue<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, ti
 /**
  * Helper to create a heading with an optional icon.
  */
-function simpleHeading<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons']) {
+function simpleHeading(parent: PartTag, theme: Theme, title: string, icon?: IconName) {
     return parent.h3('.shrink', heading => {
         if (icon) {
             theme.renderIcon(heading, icon, 'link')