@pushwoosh/smart-components-kit 1.0.90 → 1.1.1

package/MediaStore/MediaStore.js

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, useToast } from '@pushwoosh/dumb-components';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
@@ -8,14 +9,20 @@ import { CreateVariantDrawer } from './CreateVariantDrawer';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
 import { Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, VariantBadge } from './styled';
-const DEFAULT_PER_PAGE = 30;
 const UPLOAD_PATH = '/api/media/upload';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export const MediaStore = ({
   application,
-  page: initialPage = 0,
-  perPage = DEFAULT_PER_PAGE,
+  page,
+  perPage,
+  onPageChange,
   onSelect
 }) => {
+  var _listAsync$value, _listAsync$value2;
   const lang = useLang();
   const {
     rpcGateway,
@@ -28,51 +35,54 @@ export const MediaStore = ({
     openToast
   } = useToast();
   const uploadInputRef = useRef(null);
-  const loadTokenRef = useRef(0);
-  const [files, setFiles] = useState([]);
+  // `uploadFiles` resolves asynchronously; read the latest page from the ref so
+  // the post-upload decision isn't made on a value captured at click time.
+  const pageRef = useRef(page);
+  pageRef.current = page;
   const [variantsByUuid, setVariantsByUuid] = useState({});
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(initialPage);
-  const [total, setTotal] = useState(0);
+  // Bumped to force a reload of the current page (e.g. after an upload) when
+  // the page prop itself does not change.
+  const [reloadToken, setReloadToken] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [createVariantFor, setCreateVariantFor] = useState(null);
-  const fetchFiles = useCallback(async p => {
-    // Guard against races: a newer load invalidates in-flight results of older ones.
-    const token = ++loadTokenRef.current;
-    setLoading(true);
-    setVariantsByUuid({});
-    let originals;
-    try {
-      const response = await rpcGateway.mediaFiles.List({
-        application,
-        page: p,
-        perPage
+  const listAsync = useAsync(async () => {
+    const response = await rpcGateway.mediaFiles.List({
+      application,
+      page,
+      perPage
+    });
+    // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
+    return {
+      files: response.files ?? [],
+      total: response.total
+    };
+  }, [rpcGateway, application, page, perPage, reloadToken]);
+  const {
+    loading
+  } = listAsync;
+  const files = ((_listAsync$value = listAsync.value) === null || _listAsync$value === void 0 ? void 0 : _listAsync$value.files) ?? [];
+  const total = ((_listAsync$value2 = listAsync.value) === null || _listAsync$value2 === void 0 ? void 0 : _listAsync$value2.total) ?? 0;
+  useEffect(() => {
+    if (listAsync.error) {
+      openToast({
+        title: listAsync.error.message || lang({
+          message: 'SMART.MEDIA_STORE.LOAD_ERROR'
+        }),
+        type: 'error'
       });
-      if (token !== loadTokenRef.current) return;
-      // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
-      originals = response.files ?? [];
-      setFiles(originals);
-      setTotal(response.total);
-      setPage(response.page);
-    } catch (error) {
-      if (token === loadTokenRef.current) {
-        openToast({
-          title: error.message || lang({
-            message: 'SMART.MEDIA_STORE.LOAD_ERROR'
-          }),
-          type: 'error'
-        });
-      }
-      return;
-    } finally {
-      if (token === loadTokenRef.current) {
-        setLoading(false);
-      }
     }
-    // Originals are already on screen. The List of originals carries no variant
-    // count, so fetch each original's variants in the background and let the
-    // "N variants" badge appear per file as soon as its request resolves.
+  }, [listAsync.error, openToast, lang]);
+  // The List of originals carries no variant count, so once a page of originals
+  // resolves, fetch each one's variants in the background and let the
+  // "N variants" badge appear per file as soon as its request resolves. The
+  // cleanup flag drops results of a page that has since been replaced.
+  useEffect(() => {
+    var _listAsync$value3;
+    const originals = (_listAsync$value3 = listAsync.value) === null || _listAsync$value3 === void 0 ? void 0 : _listAsync$value3.files;
+    if (!originals) return undefined;
+    setVariantsByUuid({});
+    let cancelled = false;
     originals.forEach(file => {
       void (async () => {
         try {
@@ -80,7 +90,7 @@ export const MediaStore = ({
             application,
             parentUuid: file.uuid
           });
-          if (token !== loadTokenRef.current) return;
+          if (cancelled) return;
           setVariantsByUuid(prev => ({
             ...prev,
             [file.uuid]: response.files ?? []
@@ -90,10 +100,10 @@ export const MediaStore = ({
         }
       })();
     });
-  }, [rpcGateway, application, perPage, openToast, lang]);
-  useEffect(() => {
-    void fetchFiles(initialPage);
-  }, [fetchFiles, initialPage]);
+    return () => {
+      cancelled = true;
+    };
+  }, [listAsync.value, rpcGateway, application]);
   const uploadFiles = async selected => {
     const images = selected.filter(file => file.type.startsWith('image/'));
     if (images.length === 0) return;
@@ -119,7 +129,13 @@ export const MediaStore = ({
           }),
           type: 'success'
         });
-        void fetchFiles(0);
+        // Jump back to the first page to surface the freshly uploaded files. If
+        // already there, the prop won't change, so bump the reload token too.
+        if (pageRef.current === 0) {
+          setReloadToken(token => token + 1);
+        } else {
+          onPageChange(0);
+        }
       }
       if (failed > 0) {
         openToast({
@@ -143,116 +159,140 @@ export const MediaStore = ({
     }));
   };
   const totalPages = Math.ceil(total / perPage);
-  return React.createElement(React.Fragment, null, React.createElement(Dropzone, {
-    type: "button",
-    "$dragOver": isDragOver,
-    disabled: isUploading,
-    onClick: () => {
-      var _uploadInputRef$curre;
-      return (_uploadInputRef$curre = uploadInputRef.current) === null || _uploadInputRef$curre === void 0 ? void 0 : _uploadInputRef$curre.click();
-    },
-    onDragOver: event => {
-      event.preventDefault();
-      setIsDragOver(true);
-    },
-    onDragLeave: () => setIsDragOver(false),
-    onDrop: event => {
-      event.preventDefault();
-      setIsDragOver(false);
-      void uploadFiles(Array.from(event.dataTransfer.files));
-    }
-  }, React.createElement(UploadIcon, {
-    size: "medium",
-    view: "lined"
-  }), isUploading ? lang({
-    message: 'SMART.MEDIA_STORE.UPLOADING'
-  }) : lang({
-    message: 'SMART.MEDIA_STORE.DROPZONE_HINT'
-  })), React.createElement(HiddenInput, {
-    ref: uploadInputRef,
-    type: "file",
-    accept: "image/*",
-    multiple: true,
-    onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
-  }), loading && React.createElement(EmptyState, null, lang({
-    message: 'SMART.MEDIA_STORE.LOADING'
-  })), !loading && files.length === 0 && React.createElement(EmptyState, null, lang({
-    message: 'SMART.MEDIA_STORE.EMPTY'
-  })), !loading && files.length > 0 && React.createElement(React.Fragment, null, React.createElement(Grid, null, files.map(file => {
-    const variants = variantsByUuid[file.uuid] ?? [];
-    return React.createElement(Tile, {
-      key: file.uuid
-    }, React.createElement(TileImage, {
-      src: getThumbUrl(file),
-      alt: file.filename
-    }), variants.length > 0 && React.createElement(VariantBadge, null, lang({
-      message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
-      count: variants.length
-    })), React.createElement(TileActions, null, variants.length > 0 ? React.createElement(DropdownMenuButton, {
-      color: "secondary",
-      size: "compact",
-      icon: React.createElement(CheckIcon, {
-        size: "small"
-      }),
-      menuPlacement: "bottom-start"
-    }, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
-      onClick: () => onSelect(file.url)
-    }, lang({
-      message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
-    })), variants.map(variant => React.createElement(DropdownMenuItem, {
-      key: variant.uuid,
-      onClick: () => onSelect(variant.url)
-    }, getRatioLabel(variant) || variant.filename)))) : React.createElement(Button, {
-      color: "secondary",
-      size: "compact",
-      icon: React.createElement(CheckIcon, {
-        size: "small"
-      }),
-      "aria-label": lang({
-        message: 'SMART.MEDIA_STORE.SELECT_HINT'
-      }),
-      onClick: () => onSelect(file.url)
-    }), React.createElement(Button, {
-      color: "secondary",
-      size: "compact",
-      icon: React.createElement(EditIcon, {
-        size: "small",
+  return _jsxs(_Fragment, {
+    children: [_jsxs(Dropzone, {
+      type: "button",
+      "$dragOver": isDragOver,
+      disabled: isUploading,
+      onClick: () => {
+        var _uploadInputRef$curre;
+        return (_uploadInputRef$curre = uploadInputRef.current) === null || _uploadInputRef$curre === void 0 ? void 0 : _uploadInputRef$curre.click();
+      },
+      onDragOver: event => {
+        event.preventDefault();
+        setIsDragOver(true);
+      },
+      onDragLeave: () => setIsDragOver(false),
+      onDrop: event => {
+        event.preventDefault();
+        setIsDragOver(false);
+        void uploadFiles(Array.from(event.dataTransfer.files));
+      },
+      children: [_jsx(UploadIcon, {
+        size: "medium",
         view: "lined"
-      }),
-      "aria-label": lang({
-        message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
-      }),
-      onClick: () => setCreateVariantFor(file)
-    })));
-  })), totalPages > 1 && React.createElement(Horizontal, {
-    "$justifyContent": "center",
-    "$alignItems": "center",
-    "$gap": 8,
-    "$margin": {
-      top: 16
-    }
-  }, React.createElement(Button, {
-    view: "ghost",
-    color: "secondary",
-    size: "field",
-    isDisabled: page <= 0,
-    onClick: () => void fetchFiles(page - 1)
-  }, lang({
-    message: 'SMART.MEDIA_STORE.PREV_BUTTON'
-  })), React.createElement(Text, null, `${page + 1} / ${totalPages}`), React.createElement(Button, {
-    view: "ghost",
-    color: "secondary",
-    size: "field",
-    isDisabled: page + 1 >= totalPages,
-    onClick: () => void fetchFiles(page + 1)
-  }, lang({
-    message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
-  })))), React.createElement(CreateVariantDrawer, {
-    application: application,
-    original: createVariantFor,
-    isOpen: createVariantFor !== null,
-    existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
-    onClose: () => setCreateVariantFor(null),
-    onCreated: handleVariantCreated
-  }));
+      }), isUploading ? lang({
+        message: 'SMART.MEDIA_STORE.UPLOADING'
+      }) : lang({
+        message: 'SMART.MEDIA_STORE.DROPZONE_HINT'
+      })]
+    }), _jsx(HiddenInput, {
+      ref: uploadInputRef,
+      type: "file",
+      accept: "image/*",
+      multiple: true,
+      onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
+    }), loading && _jsx(EmptyState, {
+      children: lang({
+        message: 'SMART.MEDIA_STORE.LOADING'
+      })
+    }), !loading && files.length === 0 && _jsx(EmptyState, {
+      children: lang({
+        message: 'SMART.MEDIA_STORE.EMPTY'
+      })
+    }), !loading && files.length > 0 && _jsxs(_Fragment, {
+      children: [_jsx(Grid, {
+        children: files.map(file => {
+          const variants = variantsByUuid[file.uuid] ?? [];
+          return _jsxs(Tile, {
+            children: [_jsx(TileImage, {
+              src: getThumbUrl(file),
+              alt: file.filename
+            }), variants.length > 0 && _jsx(VariantBadge, {
+              children: lang({
+                message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
+                count: variants.length
+              })
+            }), _jsxs(TileActions, {
+              children: [variants.length > 0 ? _jsx(DropdownMenuButton, {
+                color: "secondary",
+                size: "compact",
+                icon: _jsx(CheckIcon, {
+                  size: "small"
+                }),
+                menuPlacement: "bottom-start",
+                children: _jsxs(DropdownMenuSection, {
+                  children: [_jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(file.url),
+                    children: lang({
+                      message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
+                    })
+                  }), variants.map(variant => _jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(variant.url),
+                    children: getRatioLabel(variant) || variant.filename
+                  }, variant.uuid))]
+                })
+              }) : _jsx(Button, {
+                color: "secondary",
+                size: "compact",
+                icon: _jsx(CheckIcon, {
+                  size: "small"
+                }),
+                "aria-label": lang({
+                  message: 'SMART.MEDIA_STORE.SELECT_HINT'
+                }),
+                onClick: () => onSelect(file.url)
+              }), _jsx(Button, {
+                color: "secondary",
+                size: "compact",
+                icon: _jsx(EditIcon, {
+                  size: "small",
+                  view: "lined"
+                }),
+                "aria-label": lang({
+                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
+                }),
+                onClick: () => setCreateVariantFor(file)
+              })]
+            })]
+          }, file.uuid);
+        })
+      }), totalPages > 1 && _jsxs(Horizontal, {
+        "$justifyContent": "center",
+        "$alignItems": "center",
+        "$gap": 8,
+        "$margin": {
+          top: 16
+        },
+        children: [_jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "field",
+          isDisabled: page <= 0,
+          onClick: () => onPageChange(page - 1),
+          children: lang({
+            message: 'SMART.MEDIA_STORE.PREV_BUTTON'
+          })
+        }), _jsx(Text, {
+          children: `${page + 1} / ${totalPages}`
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "field",
+          isDisabled: page + 1 >= totalPages,
+          onClick: () => onPageChange(page + 1),
+          children: lang({
+            message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
+          })
+        })]
+      })]
+    }), _jsx(CreateVariantDrawer, {
+      application: application,
+      original: createVariantFor,
+      isOpen: createVariantFor !== null,
+      existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
+      onClose: () => setCreateVariantFor(null),
+      onCreated: handleVariantCreated
+    })]
+  });
 };

package/MediaStore/MediaStorePaginated.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { MediaStorePaginatedProps } from './types';
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export declare const MediaStorePaginated: FC<MediaStorePaginatedProps>;

package/MediaStore/MediaStorePaginated.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MediaStore } from './MediaStore';
+const DEFAULT_PER_PAGE = 30;
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export const MediaStorePaginated = ({
+  application,
+  initialPage = 0,
+  perPage = DEFAULT_PER_PAGE,
+  onSelect
+}) => {
+  const [page, setPage] = useState(initialPage);
+  return _jsx(MediaStore, {
+    application: application,
+    page: page,
+    perPage: perPage,
+    onPageChange: setPage,
+    onSelect: onSelect
+  });
+};

package/MediaStore/index.d.ts

@@ -1 +1,3 @@
-export { MediaStore, type MediaStoreProps } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';
+export type { MediaStoreProps, MediaStorePaginatedProps } from './types';

package/MediaStore/index.js

@@ -1 +1,2 @@
-export { MediaStore } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';

package/MediaStore/types.d.ts

@@ -0,0 +1,22 @@
+export type MediaStoreProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Current page (zero-based). Controlled by the parent. */
+    page: number;
+    /** Page size. */
+    perPage: number;
+    /** Called when the user requests a different page. */
+    onPageChange: (page: number) => void;
+    /** Called with the chosen file URL (original or variant). */
+    onSelect: (url: string) => void;
+};
+export type MediaStorePaginatedProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Initial page to load (zero-based). Defaults to 0. */
+    initialPage?: number;
+    /** Page size. Defaults to 30. */
+    perPage?: number;
+    /** Called with the chosen file URL (original or variant). */
+    onSelect: (url: string) => void;
+};

package/MediaStore/types.js

@@ -0,0 +1 @@
+export {};

package/ModalCloningJourney/ModalCloningJourney.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { type ModalCloningJourneyProps } from './types';
-export declare function ModalCloningJourney({ journeyId, journeyTitle, onAfterClone, onCancel, isOpen }: ModalCloningJourneyProps): React.JSX.Element;
+export declare function ModalCloningJourney({ journeyId, journeyTitle, onAfterClone, onCancel, isOpen }: ModalCloningJourneyProps): import("react").JSX.Element;