foldkit 0.70.0 → 0.71.0

package/dist/ui/toast/update.js

@@ -0,0 +1,203 @@
+import { Array, Duration, Effect, Match as M, Number, Option, } from 'effect';
+import * as Command from '../../command';
+import { OptionExt } from '../../effectExtensions';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+import { Hid as TransitionHid, Showed as TransitionShowed, init as transitionInit, } from '../transition/schema';
+import { defaultLeaveCommand as transitionDefaultLeaveCommand, update as transitionUpdate, } from '../transition/update';
+import { DEFAULT_DURATION, Dismissed, DismissedAll, ElapsedDuration, GotTransitionMessage, makeAdded, makeEntry, makeMessage, makeModel, } from './schema';
+/** Schedules an auto-dismiss timer for an entry. The result Message carries a
+ *  version so stale timers (from hover or manual dismiss) are discarded in
+ *  the update function. Static — the Command definition doesn't depend on
+ *  payload. */
+export const DismissAfter = Command.define('DismissAfter', ElapsedDuration);
+const DEFAULT_VARIANT = 'Info';
+/** Factory that binds Toast's runtime (update fn, helpers, commands) to a
+ *  specific payload schema. Called by `make` in index.ts; inner helpers close
+ *  over the payload-specific Entry / Model / Added types so generics don't
+ *  have to propagate through every helper signature.
+ *
+ *  @internal Consumers should use `Ui.Toast.make(PayloadSchema)`. This is
+ *  only exported so `index.ts` can wire the view into the bound runtime. */
+export const makeRuntime = (payloadSchema) => {
+    const EntrySchema = makeEntry(payloadSchema);
+    const ModelSchema = makeModel(payloadSchema);
+    const MessageSchema = makeMessage(payloadSchema);
+    const Added = makeAdded(payloadSchema);
+    const withUpdateReturn = M.withReturnType();
+    const updateEntry = (model, entryId, f) => evo(model, {
+        entries: Array.map(entry => (entry.id === entryId ? f(entry) : entry)),
+    });
+    const removeEntry = (model, entryId) => evo(model, {
+        entries: Array.filter(({ id }) => id !== entryId),
+    });
+    const isEntryLeaving = (entry) => {
+        const { transitionState } = entry.transition;
+        return (transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating');
+    };
+    const scheduleDismiss = (entryId, version, duration) => DismissAfter(Task.delay(duration).pipe(Effect.as(ElapsedDuration({ entryId, version }))));
+    const rescheduleDismissCommands = (entry) => {
+        if (isEntryLeaving(entry) || entry.isHovered) {
+            return [];
+        }
+        else {
+            return Option.match(entry.maybeDuration, {
+                onNone: () => [],
+                onSome: duration => [
+                    scheduleDismiss(entry.id, entry.pendingDismissVersion, duration),
+                ],
+            });
+        }
+    };
+    const delegateToEntryTransition = (model, entryId, transitionMessage) => {
+        const maybeEntry = Array.findFirst(model.entries, ({ id }) => id === entryId);
+        return Option.match(maybeEntry, {
+            onNone: () => [model, []],
+            onSome: entry => {
+                const [nextTransition, transitionCommands, maybeOutMessage] = transitionUpdate(entry.transition, transitionMessage);
+                const toMessage = (message) => GotTransitionMessage({ entryId, message });
+                const mappedCommands = transitionCommands.map(Command.mapEffect(Effect.map(toMessage)));
+                const nextEntry = evo(entry, {
+                    transition: () => nextTransition,
+                });
+                return Option.match(maybeOutMessage, {
+                    onNone: () => [
+                        updateEntry(model, entryId, () => nextEntry),
+                        mappedCommands,
+                    ],
+                    onSome: M.type().pipe(withUpdateReturn, M.tagsExhaustive({
+                        StartedLeaveAnimating: () => [
+                            updateEntry(model, entryId, () => nextEntry),
+                            [
+                                ...mappedCommands,
+                                Command.mapEffect(transitionDefaultLeaveCommand(nextTransition), Effect.map(toMessage)),
+                            ],
+                        ],
+                        TransitionedOut: () => [
+                            removeEntry(model, entryId),
+                            mappedCommands,
+                        ],
+                    })),
+                });
+            },
+        });
+    };
+    const createEntry = (model, input) => {
+        const entryId = `${model.id}-entry-${model.nextEntryKey}`;
+        const duration = input.duration === undefined
+            ? model.defaultDuration
+            : Duration.decode(input.duration);
+        const maybeDuration = OptionExt.when(!input.sticky, duration);
+        return {
+            id: entryId,
+            variant: input.variant ?? DEFAULT_VARIANT,
+            transition: transitionInit({ id: entryId, isShowing: false }),
+            maybeDuration,
+            pendingDismissVersion: 0,
+            isHovered: false,
+            payload: input.payload,
+        };
+    };
+    /** Creates an initial toast container model from a config. Starts empty. */
+    const init = (config) => ({
+        id: config.id,
+        defaultDuration: config.defaultDuration === undefined
+            ? DEFAULT_DURATION
+            : Duration.decode(config.defaultDuration),
+        entries: [],
+        nextEntryKey: 0,
+    });
+    /** Processes a toast message and returns the next model and commands. */
+    const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        Added: ({ entry }) => {
+            const modelWithEntry = evo(model, {
+                entries: entries => Array.append(entries, entry),
+                nextEntryKey: Number.increment,
+            });
+            const [modelAfterShow, showCommands] = delegateToEntryTransition(modelWithEntry, entry.id, TransitionShowed());
+            const postShowEntry = Array.findFirst(modelAfterShow.entries, ({ id }) => id === entry.id);
+            const dismissCommands = Option.match(postShowEntry, {
+                onNone: () => [],
+                onSome: rescheduleDismissCommands,
+            });
+            return [modelAfterShow, [...showCommands, ...dismissCommands]];
+        },
+        Dismissed: ({ entryId }) => {
+            const maybeEntry = Array.findFirst(model.entries, ({ id }) => id === entryId);
+            return Option.match(maybeEntry, {
+                onNone: () => [model, []],
+                onSome: entry => {
+                    if (isEntryLeaving(entry)) {
+                        return [model, []];
+                    }
+                    else {
+                        return delegateToEntryTransition(model, entryId, TransitionHid());
+                    }
+                },
+            });
+        },
+        DismissedAll: () => Array.reduce(model.entries, [model, []], ([currentModel, currentCommands], entry) => {
+            if (isEntryLeaving(entry)) {
+                return [currentModel, currentCommands];
+            }
+            const [nextModel, nextCommands] = delegateToEntryTransition(currentModel, entry.id, TransitionHid());
+            return [nextModel, [...currentCommands, ...nextCommands]];
+        }),
+        ElapsedDuration: ({ entryId, version }) => {
+            const maybeEntry = Array.findFirst(model.entries, ({ id }) => id === entryId);
+            return Option.match(maybeEntry, {
+                onNone: () => [model, []],
+                onSome: entry => {
+                    const isStale = version !== entry.pendingDismissVersion;
+                    if (isStale || isEntryLeaving(entry)) {
+                        return [model, []];
+                    }
+                    else {
+                        return delegateToEntryTransition(model, entryId, TransitionHid());
+                    }
+                },
+            });
+        },
+        HoveredEntry: ({ entryId }) => [
+            updateEntry(model, entryId, entry => evo(entry, {
+                isHovered: () => true,
+                pendingDismissVersion: Number.increment,
+            })),
+            [],
+        ],
+        LeftEntry: ({ entryId }) => {
+            const maybeEntry = Array.findFirst(model.entries, ({ id }) => id === entryId);
+            return Option.match(maybeEntry, {
+                onNone: () => [model, []],
+                onSome: entry => {
+                    const nextEntry = evo(entry, {
+                        isHovered: () => false,
+                        pendingDismissVersion: Number.increment,
+                    });
+                    return [
+                        updateEntry(model, entryId, () => nextEntry),
+                        rescheduleDismissCommands(nextEntry),
+                    ];
+                },
+            });
+        },
+        GotTransitionMessage: ({ entryId, message: transitionMessage }) => delegateToEntryTransition(model, entryId, transitionMessage),
+    }));
+    /** Adds a new toast entry. */
+    const show = (model, input) => update(model, Added({ entry: createEntry(model, input) }));
+    /** Begins dismissing a specific entry. */
+    const dismiss = (model, entryId) => update(model, Dismissed({ entryId }));
+    /** Begins dismissing every currently-visible entry. */
+    const dismissAll = (model) => update(model, DismissedAll());
+    return {
+        Entry: EntrySchema,
+        Model: ModelSchema,
+        Message: MessageSchema,
+        Added,
+        init,
+        update,
+        show,
+        dismiss,
+        dismissAll,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",
@@ -143,6 +143,10 @@
       "types": "./dist/ui/tabs/public.d.ts",
       "import": "./dist/ui/tabs/public.js"
     },
+    "./ui/toast": {
+      "types": "./dist/ui/toast/public.d.ts",
+      "import": "./dist/ui/toast/public.js"
+    },
     "./ui/tooltip": {
       "types": "./dist/ui/tooltip/public.d.ts",
       "import": "./dist/ui/tooltip/public.js"