@pushwoosh/smart-components-kit 1.3.37 → 1.5.0

package/MediaStorage/polyglot/types.d.ts

@@ -18,6 +18,10 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CROPS_BADGE': {
         count: number;
     };
+    'SMART.MEDIA_STORAGE.VERSIONS_BADGE': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': NoParams;
     'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_HINT': NoParams;
@@ -60,4 +64,35 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.TITLE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CLOSE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': {
+        name: string;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.SEARCH': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.EMPTY': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.UNTITLED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.PAGES': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': {
+        max: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.IMPORT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.IMPORTING': {
+        done: number;
+        total: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.EXPORTING': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.SUCCESS': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.ERROR': NoParams;
 };

package/MediaStorage/styles.d.ts

@@ -3,7 +3,9 @@ export declare const Tile: import("styled-components").StyledComponent<"div", an
     $selected?: boolean;
 }, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TileBadges: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SourceBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CountBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const WarningBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectionBar: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -31,3 +33,8 @@ export declare const CropStrip: import("styled-components").StyledComponent<"div
 export declare const CropThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CropThumbDelete: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CropThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DesignTile: import("styled-components").StyledComponent<"button", any, {
+    $selected?: boolean;
+}, never>;
+export declare const DesignCaption: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DropzoneRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/MediaStorage/styles.js

@@ -17,37 +17,45 @@ export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-uu3cbo-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
-export const CropBadge = styled.span.withConfig({
-  displayName: "CropBadge",
+export const TileBadges = styled.div.withConfig({
+  displayName: "TileBadges",
   componentId: "sc-uu3cbo-3"
-})(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
+})(["position:absolute;top:6px;right:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:2;pointer-events:none;"]);
+export const SourceBadge = styled.span.withConfig({
+  displayName: "SourceBadge",
+  componentId: "sc-uu3cbo-4"
+})(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.MAIN, Color.CLEAR);
+export const CountBadge = styled.span.withConfig({
+  displayName: "CountBadge",
+  componentId: "sc-uu3cbo-5"
+})(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
-  componentId: "sc-uu3cbo-4"
+  componentId: "sc-uu3cbo-6"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
 export const TileCheckbox = styled.div.withConfig({
   displayName: "TileCheckbox",
-  componentId: "sc-uu3cbo-5"
+  componentId: "sc-uu3cbo-7"
 })(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
 export const SelectionBar = styled.div.withConfig({
   displayName: "SelectionBar",
-  componentId: "sc-uu3cbo-6"
+  componentId: "sc-uu3cbo-8"
 })(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
 export const SelectionCount = styled.span.withConfig({
   displayName: "SelectionCount",
-  componentId: "sc-uu3cbo-7"
+  componentId: "sc-uu3cbo-9"
 })(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-uu3cbo-8"
+  componentId: "sc-uu3cbo-10"
 })(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-uu3cbo-9"
+  componentId: "sc-uu3cbo-11"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-uu3cbo-10"
+  componentId: "sc-uu3cbo-12"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -55,46 +63,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-uu3cbo-11"
+  componentId: "sc-uu3cbo-13"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-uu3cbo-12"
+  componentId: "sc-uu3cbo-14"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-uu3cbo-13"
+  componentId: "sc-uu3cbo-15"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-uu3cbo-14"
+  componentId: "sc-uu3cbo-16"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-uu3cbo-15"
+  componentId: "sc-uu3cbo-17"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-uu3cbo-16"
+  componentId: "sc-uu3cbo-18"
 })(["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-uu3cbo-17"
+  componentId: "sc-uu3cbo-19"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-uu3cbo-18"
+  componentId: "sc-uu3cbo-20"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-uu3cbo-19"
+  componentId: "sc-uu3cbo-21"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-uu3cbo-20"
+  componentId: "sc-uu3cbo-22"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -102,17 +110,33 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-uu3cbo-21"
+  componentId: "sc-uu3cbo-23"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-uu3cbo-22"
+  componentId: "sc-uu3cbo-24"
 })(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-uu3cbo-23"
+  componentId: "sc-uu3cbo-25"
 })(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
-  componentId: "sc-uu3cbo-24"
-})(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
+  componentId: "sc-uu3cbo-26"
+})(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
+export const DesignTile = styled.button.withConfig({
+  displayName: "DesignTile",
+  componentId: "sc-uu3cbo-27"
+})(["display:flex;flex-direction:column;padding:0;font:inherit;text-align:left;cursor:pointer;background:", ";border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover:not(:disabled){border-color:", ";}&:disabled{cursor:default;}"], Color.CLEAR, ({
+  $selected
+}) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
+  $selected
+}) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
+export const DesignCaption = styled.span.withConfig({
+  displayName: "DesignCaption",
+  componentId: "sc-uu3cbo-28"
+})(["display:flex;justify-content:space-between;gap:6px;padding:6px 8px;font-size:", ";color:", ";span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}span:last-child{flex-shrink:0;color:", ";}"], FontSize.SMALL, Color.MAIN, Color.LOCKED);
+export const DropzoneRow = styled.div.withConfig({
+  displayName: "DropzoneRow",
+  componentId: "sc-uu3cbo-29"
+})(["display:flex;align-items:stretch;gap:12px;& > :first-child{flex:1;}"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.3.37",
+  "version": "1.5.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.9.13",
+    "@pushwoosh/dumb-components": "^2.9.16",
     "@pushwoosh/kit-constants": "^2.1.0",
     "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.7",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.2.151",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.2.383",
     "@pushwoosh/spa-context": "^1.8.1",
     "idb-keyval": "^6.2.2",
     "jwt-decode": "^4.0.0",