@pushwoosh/smart-components-kit 1.2.3 → 1.2.4

package/MediaStorage/CreateCropDrawer.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, ModalConfirm, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, ModalConfirm, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useDeleteMediaFile } from './hooks';
-import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
+import { getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chip, Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage } from './styled';
+import { Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput, TileImage } from './styled';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -46,7 +46,6 @@ const RATIOS = [{
   label: '9:16',
   ar: 9 / 16
 }];
-const DEFAULT_RATIO = 'ASPECT_RATIO_16_9';
 const DEFAULT_SIZE = '1080';
 const DEFAULT_QUALITY = '90';
 export const CreateCropDrawer = ({
@@ -58,6 +57,7 @@ export const CreateCropDrawer = ({
   onCreated,
   onDeleted
 }) => {
+  var _original$meta;
   const lang = useLang();
   const {
     rpcGateway
@@ -66,7 +66,7 @@ export const CreateCropDrawer = ({
     openToast
   } = useToast();
   const deleteMediaFile = useDeleteMediaFile(application);
-  const [ratio, setRatio] = useState(DEFAULT_RATIO);
+  const [ratio, setRatio] = useState('original');
   const [dimension, setDimension] = useState('width');
   const [size, setSize] = useState(DEFAULT_SIZE);
   const [quality, setQuality] = useState(DEFAULT_QUALITY);
@@ -77,7 +77,7 @@ export const CreateCropDrawer = ({
   // `ratioExists` guard) leak from the previously edited image.
   useEffect(() => {
     if (original) {
-      setRatio(DEFAULT_RATIO);
+      setRatio('original');
       setDimension('width');
       setSize(DEFAULT_SIZE);
       setQuality(DEFAULT_QUALITY);
@@ -88,15 +88,34 @@ export const CreateCropDrawer = ({
   const isSizeValid = Number.isFinite(sizeValue) && sizeValue > 0;
   const qualityValue = Number(quality);
   const isQualityValid = !isJpeg || Number.isFinite(qualityValue) && qualityValue >= 1 && qualityValue <= 100;
+  const isOriginalView = ratio === 'original';
+  const originalMeta = (original === null || original === void 0 || (_original$meta = original.meta) === null || _original$meta === void 0 ? void 0 : _original$meta.type) === 'imageMeta' ? original.meta.data : null;
+  const originalRatio = originalMeta && originalMeta.height > 0 ? originalMeta.width / originalMeta.height : 1;
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
   const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
   const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
-  const ratioExists = existingCrops.some(crop => {
+  // Both inputs are always visible: the driving one is editable, the other is
+  // read-only and shows the value computed from the aspect ratio.
+  const computedText = value => isSizeValid ? String(value) : '';
+  const widthText = dimension === 'width' ? size : computedText(outputWidth);
+  const heightText = dimension === 'height' ? size : computedText(outputHeight);
+  const handleDimensionChange = next => {
+    if (next === dimension) return;
+    // Seed the newly editable field with its computed value so the visible
+    // numbers stay put and only editability swaps.
+    if (isSizeValid) {
+      setSize(String(next === 'width' ? outputWidth : outputHeight));
+    }
+    setDimension(next);
+  };
+  // Same ratio with a different size is allowed; only an exact ratio + output
+  // size match counts as a duplicate.
+  const duplicateExists = !isOriginalView && isSizeValid && existingCrops.some(crop => {
     var _crop$meta;
-    return ((_crop$meta = crop.meta) === null || _crop$meta === void 0 ? void 0 : _crop$meta.type) === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label;
+    return ((_crop$meta = crop.meta) === null || _crop$meta === void 0 ? void 0 : _crop$meta.type) === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label && crop.meta.data.width === outputWidth && crop.meta.data.height === outputHeight;
   });
   const handleCreate = async () => {
-    if (!original || !isSizeValid || !isQualityValid || ratioExists) return;
+    if (!original || ratio === 'original' || !isSizeValid || !isQualityValid || duplicateExists) return;
     // Capture the parent up front so a concurrent reopen for another image
     // can't misroute the created crop.
     const parent = original;
@@ -174,44 +193,63 @@ export const CreateCropDrawer = ({
             children: lang({
               message: 'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_LABEL'
             })
-          }), _jsx(Chips, {
-            children: RATIOS.map(item => _jsx(Chip, {
-              type: "button",
-              "$active": item.value === ratio,
+          }), _jsxs(Chips, {
+            children: [_jsx(Chip, {
+              "$selected": isOriginalView,
+              onClick: () => setRatio('original'),
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CREATE_CROP.ORIGINAL'
+              })
+            }), RATIOS.map(item => _jsx(Chip, {
+              "$selected": item.value === ratio,
               onClick: () => setRatio(item.value),
               children: item.label
-            }, item.value))
+            }, item.value))]
           })]
-        }), _jsxs("div", {
+        }), !isOriginalView && _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
               message: 'SMART.MEDIA_STORAGE.CREATE_CROP.SIZE_LABEL'
             })
           }), _jsxs(Columns, {
-            "$sizes": "auto 1fr",
+            "$sizes": "auto 1fr 1fr",
             "$gap": 8,
             "$alignItems": "center",
             children: [_jsxs(Segment, {
               children: [_jsx(SegmentItem, {
                 type: "button",
                 "$active": dimension === 'width',
-                onClick: () => setDimension('width'),
+                onClick: () => handleDimensionChange('width'),
                 children: lang({
                   message: 'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH'
                 })
               }), _jsx(SegmentItem, {
                 type: "button",
                 "$active": dimension === 'height',
-                onClick: () => setDimension('height'),
+                onClick: () => handleDimensionChange('height'),
                 children: lang({
                   message: 'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT'
                 })
               })]
-            }), _jsx(NativeInput, {
+            }), _jsx(SizeInput, {
               type: "number",
               min: 1,
-              value: size,
-              "$isErrored": !isSizeValid,
+              value: widthText,
+              readOnly: dimension !== 'width',
+              "$isErrored": dimension === 'width' && !isSizeValid,
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH'
+              }),
+              onChange: event => setSize(event.target.value)
+            }), _jsx(SizeInput, {
+              type: "number",
+              min: 1,
+              value: heightText,
+              readOnly: dimension !== 'height',
+              "$isErrored": dimension === 'height' && !isSizeValid,
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT'
+              }),
               onChange: event => setSize(event.target.value)
             })]
           })]
@@ -219,16 +257,18 @@ export const CreateCropDrawer = ({
           "$gap": 6,
           children: [_jsx(PreviewStage, {
             children: _jsx(PreviewFrame, {
-              "$ratio": selectedRatio.ar,
+              "$ratio": isOriginalView ? originalRatio : selectedRatio.ar,
               children: _jsx(PreviewImage, {
                 src: original.url,
                 alt: original.filename
               })
             })
-          }), isSizeValid && _jsxs(Text, {
+          }), isOriginalView && originalMeta && _jsxs(Text, {
+            children: [originalMeta.width, ' × ', originalMeta.height]
+          }), !isOriginalView && isSizeValid && _jsxs(Text, {
             children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
           })]
-        }), isJpeg && _jsxs("div", {
+        }), !isOriginalView && isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
               message: 'SMART.MEDIA_STORAGE.CREATE_CROP.QUALITY_LABEL'
@@ -241,14 +281,14 @@ export const CreateCropDrawer = ({
             "$isErrored": !isQualityValid,
             onChange: event => setQuality(event.target.value)
           })]
-        }), ratioExists && _jsx(Text, {
+        }), duplicateExists && _jsx(Text, {
           children: lang({
-            message: 'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_EXISTS'
+            message: 'SMART.MEDIA_STORAGE.CREATE_CROP.DUPLICATE_EXISTS'
           })
-        }), _jsx(Button, {
+        }), !isOriginalView && _jsx(Button, {
           color: "primary",
           size: "field",
-          isDisabled: !isSizeValid || !isQualityValid || ratioExists,
+          isDisabled: !isSizeValid || !isQualityValid || duplicateExists,
           isLoading: isCreating,
           onClick: () => void handleCreate(),
           children: lang({
@@ -282,7 +322,7 @@ export const CreateCropDrawer = ({
                   onClick: () => setPendingDeleteCrop(crop)
                 })
               }), _jsx(CropThumbCaption, {
-                children: getRatioLabel(crop) || crop.filename
+                children: getCropCaption(crop)
               })]
             }, crop.uuid))
           })]

package/MediaStorage/MediaStorage.js

@@ -7,7 +7,7 @@ import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile } from './hooks';
-import { formatBytes, getRatioLabel, getThumbUrl } from './mediaFile.utils';
+import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
 import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
@@ -276,7 +276,7 @@ export const MediaStorage = ({
                   })
                 }), crops.map(crop => _jsx(DropdownMenuItem, {
                   onClick: () => onSelect(crop.url),
-                  children: getRatioLabel(crop) || crop.filename
+                  children: getCropCaption(crop)
                 }, crop.uuid))]
               })
             }) : _jsx(Button, {

package/MediaStorage/mediaFile.utils.d.ts

@@ -1,7 +1,7 @@
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
 /** Thumbnail URL from image meta, falling back to the full-size URL. */
 export declare const getThumbUrl: (file: MediaFile) => string;
-/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
-export declare const getRatioLabel: (file: MediaFile) => string;
+/** Caption for a crop: ratio + pixel size (e.g. "16:9 · 1080×608"); filename fallback. */
+export declare const getCropCaption: (file: MediaFile) => string;
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
 export declare const formatBytes: (bytes: number) => string;

package/MediaStorage/mediaFile.utils.js

@@ -3,10 +3,17 @@ export const getThumbUrl = file => {
   var _file$meta;
   return ((_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.type) === 'imageMeta' ? file.meta.data.thumbnailUrl : file.url;
 };
-/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
-export const getRatioLabel = file => {
+/** Caption for a crop: ratio + pixel size (e.g. "16:9 · 1080×608"); filename fallback. */
+export const getCropCaption = file => {
   var _file$meta2;
-  return ((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.type) === 'imageMeta' ? file.meta.data.ratio : '';
+  if (((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.type) !== 'imageMeta') return file.filename;
+  const {
+    ratio,
+    width,
+    height
+  } = file.meta.data;
+  const size = `${width}×${height}`;
+  return ratio ? `${ratio} · ${size}` : size;
 };
 const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */

package/MediaStorage/polyglot/messages_en.js

@@ -23,12 +23,13 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.TITLE': 'Create crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.CLOSE': 'Close',
   'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_LABEL': 'Aspect ratio',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SIZE_LABEL': 'Size',
   'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH': 'Width',
   'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT': 'Height',
   'SMART.MEDIA_STORAGE.CREATE_CROP.QUALITY_LABEL': 'JPEG quality (1–100)',
   'SMART.MEDIA_STORAGE.CREATE_CROP.CREATE_BUTTON': 'Create crop',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_EXISTS': 'A crop with this aspect ratio already exists',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DUPLICATE_EXISTS': 'A crop with this aspect ratio and size already exists',
   'SMART.MEDIA_STORAGE.CREATE_CROP.EXISTING_LABEL': 'Existing crops',
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'No crops yet',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Crop created',

package/MediaStorage/polyglot/messages_ru.js

@@ -23,12 +23,13 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.TITLE': 'Создание кропа',
   'SMART.MEDIA_STORAGE.CREATE_CROP.CLOSE': 'Закрыть',
   'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_LABEL': 'Соотношение сторон',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.ORIGINAL': 'Оригинал',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SIZE_LABEL': 'Размер',
   'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH': 'Ширина',
   'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT': 'Высота',
   'SMART.MEDIA_STORAGE.CREATE_CROP.QUALITY_LABEL': 'Качество JPEG (1–100)',
   'SMART.MEDIA_STORAGE.CREATE_CROP.CREATE_BUTTON': 'Создать кроп',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_EXISTS': 'Кроп с таким соотношением сторон уже существует',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DUPLICATE_EXISTS': 'Кроп с таким соотношением сторон и размером уже существует',
   'SMART.MEDIA_STORAGE.CREATE_CROP.EXISTING_LABEL': 'Созданные кропы',
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Кропов пока нет',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Кроп создан',

package/MediaStorage/polyglot/types.d.ts

@@ -29,12 +29,13 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CREATE_CROP.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.CLOSE': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_LABEL': NoParams;
+    'SMART.MEDIA_STORAGE.CREATE_CROP.ORIGINAL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.SIZE_LABEL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.WIDTH': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.HEIGHT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.QUALITY_LABEL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.CREATE_BUTTON': NoParams;
-    'SMART.MEDIA_STORAGE.CREATE_CROP.RATIO_EXISTS': NoParams;
+    'SMART.MEDIA_STORAGE.CREATE_CROP.DUPLICATE_EXISTS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.EXISTING_LABEL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': NoParams;

package/MediaStorage/styled.d.ts

@@ -15,10 +15,8 @@ export declare const PreviewFrame: import("styled-components").StyledComponent<"
 }, never>;
 export declare const PreviewImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const FieldLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SizeInput: import("styled-components").StyledComponent<"input", any, import("@pushwoosh/dumb-components/native/Input").NativeInputProps, never>;
 export declare const Chips: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Chip: import("styled-components").StyledComponent<"button", any, {
-    $active?: boolean;
-}, never>;
 export declare const Segment: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SegmentItem: import("styled-components").StyledComponent<"button", any, {
     $active?: boolean;

package/MediaStorage/styled.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { NativeInput } from '@pushwoosh/dumb-components';
 import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const Grid = styled.div.withConfig({
   displayName: "Grid",
@@ -59,20 +60,14 @@ export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
   componentId: "sc-14317rj-12"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
+export const SizeInput = styled(NativeInput).withConfig({
+  displayName: "SizeInput",
+  componentId: "sc-14317rj-13"
+})(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-14317rj-13"
-})(["display:flex;flex-wrap:wrap;gap:7px;"]);
-export const Chip = styled.button.withConfig({
-  displayName: "Chip",
   componentId: "sc-14317rj-14"
-})(["font:inherit;font-size:13px;cursor:pointer;padding:6px 12px;border-radius:20px;border:1px solid ", ";background:", ";color:", ";transition:background 0.12s,border-color 0.12s;"], ({
-  $active
-}) => $active ? Color.PRIMARY : Color.DIVIDER, ({
-  $active
-}) => $active ? Color.PRIMARY : Color.CLEAR, ({
-  $active
-}) => $active ? Color.CLEAR : Color.MAIN);
+})(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
   componentId: "sc-14317rj-15"

package/package.json

@@ -48,5 +48,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.2.3"
+  "version": "1.2.4"
 }