@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.10

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -0,0 +1,149 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TemplateSaveAsStyled = styled(Flex) `
+  /* max-width: 1177px; */
+  height: 100%;
+
+  position: relative;
+
+  /* &:has(canvas),
+  &:has(.image-upload-zone) { */
+  &:has(.is-editing) {
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: #fff;
+      opacity: 0.5;
+      z-index: 20;
+    }
+  }
+
+  .save-options-container {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed #e5e5e5;
+  }
+
+  div:has(> .template-container) {
+    height: 100%;
+  }
+
+  .template-container {
+    flex: 1 0 680px;
+    /* flex: 1 1 60%; */
+    max-height: 60vh;
+    padding-right: 28px;
+    overflow-y: auto;
+  }
+
+  .template-container:has(+ .share-access-container) {
+    flex-grow: 0;
+  }
+
+  .categories-container {
+    margin-bottom: 20px;
+  }
+
+  /* &:not(:has(.share-access-container)) .categories-container {
+    width: 60%;
+  } */
+
+  .share-access-container {
+    flex: 1 1 40%;
+    padding-left: 20px;
+    margin-left: 5px;
+    /* max-height: 60vh; */
+    overflow-y: auto;
+    border-left: 1px solid #e5e5e5;
+
+    & > div {
+      max-width: 400px;
+    }
+  }
+
+  /* .antsomi-form-item .antsomi-form-item-row */
+  .field-container {
+    gap: 10px;
+  }
+
+  /* NOTE: Style for ant form */
+  .antsomi-form-item {
+    /* margin: 0; */
+  }
+  .antsomi-form-item-row {
+    gap: 10px;
+    .antsomi-form-item-label {
+      flex: 0 0 150px;
+    }
+    .antsomi-form-item-control-input {
+      width: 330px;
+    }
+  }
+
+  .field-title {
+    font-size: 12px;
+    flex: 0 0 150px;
+    span {
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+    }
+
+    &--start {
+      padding-top: 6px;
+    }
+    &--middle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  div:has(> .field-input) {
+    width: 330px;
+  }
+
+  .field-input.antsomi-select {
+    margin-bottom: 24px;
+  }
+
+  .category-container {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 510px;
+    max-width: 510px;
+    & > button {
+      height: 36px;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+    /* display: grid;
+    grid-template-columns: repeat(2, minmax(100px, 250px)); */
+  }
+
+  .selected-category {
+    /* width: 240px; */
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 250px;
+    height: 36px;
+    border: 1px solid #b8cfe6;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+    padding: 0 10px;
+
+    & > .remove-btn {
+      cursor: pointer;
+    }
+  }
+`;
+// export const FormStyled = styled(Form)`
+//   position: relative;
+//   &::after {
+//     position: absolute;
+//     inset: 0;
+//     background-color: rgba(255, 255, 255, 0.5);
+//   }
+// `;

package/es/components/molecules/TextDecorationSelect/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const OPTION_TEXT_DECORATION: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Underline";
+    readonly value: "underline";
+}, {
+    readonly label: "Overline";
+    readonly value: "overline";
+}, {
+    readonly label: "Line Through";
+    readonly value: "line-through";
+}, {
+    readonly label: "Underline - Overline";
+    readonly value: "underline overline";
+}, {
+    readonly label: "Underline - Line Through";
+    readonly value: "underline line-through";
+}];

package/es/components/molecules/TextDecorationSelect/constants.js

@@ -0,0 +1,26 @@
+export const OPTION_TEXT_DECORATION = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Underline',
+        value: 'underline',
+    },
+    {
+        label: 'Overline',
+        value: 'overline',
+    },
+    {
+        label: 'Line Through',
+        value: 'line-through',
+    },
+    {
+        label: 'Underline - Overline',
+        value: 'underline overline',
+    },
+    {
+        label: 'Underline - Line Through',
+        value: 'underline line-through',
+    },
+];

package/es/components/molecules/TextDecorationSelect/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+export type TextDecorationSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_DECORATION)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_DECORATION)[number]['value']) => void;
+};
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export declare const TextDecorationSelect: React.FC<TextDecorationSelectProps>;

package/es/components/molecules/TextDecorationSelect/index.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+import { SettingWrapper } from '../SettingWrapper';
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export const TextDecorationSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textDecorationOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_DECORATION];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_DECORATION.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textDecorationOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

package/es/components/molecules/TextTransformSelect/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const OPTION_TEXT_TRANSFORM: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Capitalize";
+    readonly value: "capitalize";
+}, {
+    readonly label: "Uppercase";
+    readonly value: "uppercase";
+}, {
+    readonly label: "Lowercase";
+    readonly value: "lowercase";
+}];

package/es/components/molecules/TextTransformSelect/constants.js

@@ -0,0 +1,19 @@
+// export const LABEL_TEXT_TRANSFORM = 'None' || 'Capitalize' || 'Uppercase' || 'Lowercase';
+export const OPTION_TEXT_TRANSFORM = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Capitalize',
+        value: 'capitalize',
+    },
+    {
+        label: 'Uppercase',
+        value: 'uppercase',
+    },
+    {
+        label: 'Lowercase',
+        value: 'lowercase',
+    },
+];

package/es/components/molecules/TextTransformSelect/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export type TextTransformSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_TRANSFORM)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_TRANSFORM)[number]['value']) => void;
+};
+export declare const TextTransformSelect: React.FC<TextTransformSelectProps>;

package/es/components/molecules/TextTransformSelect/index.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export const TextTransformSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textTransformOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_TRANSFORM];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_TRANSFORM.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textTransformOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

package/es/components/molecules/ThumbnailCard/ThumbnailCard.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ThumbnailCardProps } from './types';
+export declare const ThumbnailCard: {
+    <TActionKey extends string[] = []>(props: ThumbnailCardProps<TActionKey>): React.JSX.Element;
+    displayName: string;
+};

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -0,0 +1,121 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import { Modal } from 'antd';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Styled
+import { ThumbnailCardWrapper } from './styled';
+// Components
+import { Button, Flex, Typography, Spin, Tooltip, Icon } from '../../atoms';
+// Constants
+import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
+import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+export const ThumbnailCard = (props) => {
+    const [modal, contextHolder] = Modal.useModal();
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);
+    const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
+    const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit, show: showEditBtn = true } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick", "show"]);
+    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview, show: showPreviewBtn = true } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick", "show"]);
+    // Memo
+    const showSkeletonMemo = 
+    // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+    typeof showSkeleton === 'undefined'
+        ? checkShowSkeletonBaseUrl(thumbnail)
+        : typeof showSkeleton === 'function'
+            ? showSkeleton(props)
+            : showSkeleton;
+    // Handlers
+    const handleRemoveThumbnail = e => {
+        e.stopPropagation();
+        modal.confirm(Object.assign(Object.assign({ title: 'Remove template', centered: true, icon: (React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px', marginRight: 13 } })), content: (React.createElement("div", null,
+                React.createElement("p", null, "Are you sure you want to remove the template?"),
+                React.createElement("p", null, "This action can not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (onOk)
+                    onOk(id);
+            }) }));
+    };
+    const handleWrapperClick = e => {
+        e.stopPropagation();
+        onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
+    };
+    // Handlers
+    const renderActionButtons = () => {
+        if (!actionButtons)
+            return null;
+        return Object.keys(actionButtons)
+            .map(key => {
+            const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+            const actionSettings = actionButtons[key];
+            if (actionSettings) {
+                const { buttonProps, key, customRender, onClick } = actionSettings;
+                const icon = actionSettings.icon || (option === null || option === void 0 ? void 0 : option.icon) || '';
+                const label = actionSettings.label || (option === null || option === void 0 ? void 0 : option.label) || '';
+                const ButtonComponent = (React.createElement(Tooltip, { key: key || (option === null || option === void 0 ? void 0 : option.key), title: label },
+                    React.createElement(Button, Object.assign({ type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps, { onClick: e => {
+                            if (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) {
+                                buttonProps.onClick(e);
+                            }
+                            if (onClick) {
+                                onClick(id);
+                            }
+                        } }))));
+                /**
+                 * Handle custom render for action button
+                 * If customRender is a function, return the function callback the ButtonComponent
+                 * If not, return ButtonComponent
+                 */
+                return typeof customRender === 'function'
+                    ? customRender(ButtonComponent)
+                    : ButtonComponent;
+            }
+            return null;
+        })
+            .filter(Boolean);
+    };
+    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
+        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick, "data-test": "thumbnail" },
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
+                    e.currentTarget.style.display = 'none';
+                } }))),
+            actionAvailable && !loading && (React.createElement(React.Fragment, null,
+                React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
+                    showEditBtn && (React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
+                            e.stopPropagation();
+                            onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
+                        } }),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText))),
+                    showPreviewBtn && (React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
+                            e.stopPropagation();
+                            onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+                        } }, restOfPreviewBtnProps),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText)))),
+                React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
+                    renderActionButtons(),
+                    removable && (React.createElement(Tooltip, { title: i18nInstance.t(translations.remove).toString() },
+                        React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail })))),
+                React.createElement("div", { className: "backdrop" }),
+                React.createElement("div", null, contextHolder))),
+            loading && React.createElement(Spin, { className: "thumbnail__loading", spinning: true })),
+        !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
+};
+ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const THUMBNAIL_CARD_ACTION_KEYS: {
+    readonly EDIT: "EDIT";
+    readonly DUPLICATE: "DUPLICATE";
+};
+export declare const THUMBNAIL_CARD_ACTION_OPTIONS: Record<string, any>;

package/es/components/molecules/ThumbnailCard/constants.js

@@ -0,0 +1,25 @@
+// Libraries
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Constants
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
+/* CARD ACTION KEYS */
+export const THUMBNAIL_CARD_ACTION_KEYS = {
+    EDIT: 'EDIT',
+    DUPLICATE: 'DUPLICATE',
+};
+const { EDIT, DUPLICATE } = THUMBNAIL_CARD_ACTION_KEYS;
+export const THUMBNAIL_CARD_ACTION_OPTIONS = {
+    [EDIT]: {
+        key: EDIT,
+        label: i18nInstance.t(translations.edit.title).toString(),
+        icon: 'icon-ants-pencil',
+    },
+    [DUPLICATE]: {
+        key: DUPLICATE,
+        label: i18nInstance.t(translations.duplicate.title).toString(),
+        icon: 'icon-ants-duplicate',
+    },
+};

package/es/components/molecules/ThumbnailCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/index.js

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/styled.d.ts

@@ -0,0 +1,5 @@
+type ThumbnailCardWrapperProps = {
+    $showSkeleton?: boolean;
+};
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, ThumbnailCardWrapperProps, never>;
+export {};

package/es/components/molecules/ThumbnailCard/styled.js

@@ -0,0 +1,99 @@
+// Libraries
+import styled from 'styled-components';
+// Images
+import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ThumbnailCardWrapper = styled.div `
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
+  padding: 10px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+
+  :hover {
+    .center-action {
+      display: flex;
+      max-width: 90%;
+
+      button {
+        max-width: 100%;
+      }
+    }
+
+    .top-right-corner-action {
+      display: flex;
+    }
+
+    .backdrop {
+      opacity: 0.5 !important;
+    }
+  }
+
+  .screen {
+    width: 100%;
+    height: 100%;
+
+    ${p => p.$showSkeleton ? `background: center / cover no-repeat url(${skeletonBackground});` : ''}
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .center-action {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    z-index: 12;
+
+    button {
+      width: fit-content;
+    }
+  }
+
+  .top-right-corner-action {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    display: none;
+    align-items: center;
+    gap: 12px;
+    z-index: 12;
+
+    button {
+      background: #00000040;
+
+      :hover {
+        background: none !important;
+        background-color: black !important;
+      }
+    }
+  }
+
+  .backdrop {
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0;
+    transition: opacity 0.5s;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
+
+  .thumbnail__loading {
+    position: absolute;
+  }
+`;

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -0,0 +1,39 @@
+import { ModalFuncProps, ButtonProps } from 'antd';
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { THUMBNAIL_CARD_ACTION_KEYS } from './constants';
+export type TThumbnailCardId = string | number;
+export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
+    onOk?: (id: TThumbnailCardId) => void;
+};
+export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
+    show?: boolean;
+    text?: string;
+    onClick?: (id: TThumbnailCardId) => void;
+};
+export type TThumbnailActionButtons<TActionKey extends string[] = []> = Partial<Record<TActionButtonKey<TActionKey>, {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: string;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+    onClick?: (id: TThumbnailCardId) => void;
+}>>;
+export interface ThumbnailCardProps<TActionKey extends string[] = []> extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    id: TThumbnailCardId;
+    name?: string;
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    removable?: boolean;
+    showSkeleton?: boolean | ((thumbnailCard: Omit<ThumbnailCardProps, 'showSkeleton' | ''>) => boolean);
+    loading?: boolean;
+    editBtnProps?: TThumbnailButton;
+    previewBtnProps?: TThumbnailButton;
+    actionAvailable?: boolean;
+    removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
+    actionButtons?: TThumbnailActionButtons<TActionKey>;
+    thumbnailCacheValue?: string | number;
+    onClickWrapper?: (id: TThumbnailCardId) => void;
+}
+export type TActionButtonKey<T extends string[] = []> = (typeof THUMBNAIL_CARD_ACTION_KEYS)[keyof typeof THUMBNAIL_CARD_ACTION_KEYS] | T[number];

package/es/components/molecules/ThumbnailCard/types.js

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