@designbasekorea/figma-ui 0.6.10 → 0.7.0

package/dist/index.esm.js

@@ -38,6 +38,7 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: '남음',
         usageCountCaption: '오늘 사용',
         remainingCopy: '{{count}}회 남음 · 매일 리셋',
+        lowUsageWarning: '무료 사용량이 {{count}}회({{percent}}%) 남았습니다. 멤버십으로 무제한 이용해보세요.',
         usageUnavailable: '사용량 제한이 없습니다',
         unlimitedUsageTooltip: '모든 기능을 제한 없이 사용할 수 있습니다',
         betaUsageDescription: '베타 기간에는 사용량 제한이 적용되지 않습니다',
@@ -170,6 +171,7 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: 'left',
         usageCountCaption: 'Used today',
         remainingCopy: '{{count}} remaining · resets daily',
+        lowUsageWarning: 'Only {{count}} free uses ({{percent}}%) remain. Upgrade for unlimited access.',
         usageUnavailable: 'No usage limit',
         unlimitedUsageTooltip: 'Use every feature without limits',
         betaUsageDescription: 'Usage limits are not applied during the beta period',
@@ -302,6 +304,7 @@ const FIGMA_UI_TRANSLATIONS = {
         remainingShort: '残り',
         usageCountCaption: '今日の使用',
         remainingCopy: '{{count}}回残り · 毎日リセット',
+        lowUsageWarning: '無料使用回数は残り{{count}}回（{{percent}}%）です。無制限利用にアップグレードできます。',
         usageUnavailable: '使用制限はありません',
         unlimitedUsageTooltip: 'すべての機能を無制限で使用できます',
         betaUsageDescription: 'ベータ期間中は使用制限がありません',
@@ -979,7 +982,7 @@ const fallbackText = (t, key, fallback) => {
     const translated = t?.(key);
     return translated && translated !== key ? translated : fallback;
 };
-const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, t, locale, className, }) => {
+const UsageStatusPopover = ({ paymentStatus, usageCount = 0, remainingUsage, maxDailyUsage = 20, showUsage = true, showPlan = true, isLoading = false, onLicensePageClick, t, locale, className, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
     const [isOpen, setIsOpen] = useState(false);
     const rootRef = useRef(null);
@@ -989,9 +992,11 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20,
     const isBeta = paymentStatus === 'BETA';
     const hasDailyLimit = !isPaid && maxDailyUsage > 0;
     const limit = Math.max(1, Math.round(maxDailyUsage));
-    const used = Math.min(limit, Math.max(0, Math.round(usageCount)));
-    const remaining = Math.max(0, limit - used);
-    const usedPercent = hasDailyLimit ? Math.round((used / limit) * 100) : 0;
+    const hasRemainingUsage = typeof remainingUsage === 'number' && Number.isFinite(remainingUsage);
+    const remaining = hasRemainingUsage
+        ? Math.min(limit, Math.max(0, Math.round(remainingUsage)))
+        : Math.max(0, limit - Math.min(limit, Math.max(0, Math.round(usageCount))));
+    const remainingPercent = hasDailyLimit ? Math.round((remaining / limit) * 100) : 0;
     const hasControl = showUsage || showPlan;
     const planLabel = isPaid
         ? fallbackText(translate, 'proUser', '프로')
@@ -1049,7 +1054,7 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20,
         React.createElement("div", { className: "designbase-figma-usage-status__control" },
             showUsage && (React.createElement("button", { ref: triggerRef, type: "button", className: "designbase-figma-usage-status__trigger", "aria-expanded": isOpen, "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": isLoading ? fallbackText(translate, 'loading', '불러오는 중') : triggerLabel, disabled: isLoading, onClick: togglePopover }, isLoading ? (React.createElement("span", { className: "designbase-figma-usage-status__skeleton", "aria-hidden": "true" })) : isPaid ? (React.createElement("span", { className: "designbase-figma-usage-status__unlimited-mark", "aria-hidden": "true" }, "\u221E")) : hasDailyLimit ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { className: "designbase-figma-usage-status__mini-progress", "aria-hidden": "true" },
-                    React.createElement("span", { style: { width: `${usedPercent}%` } })),
+                    React.createElement("span", { style: { width: `${remainingPercent}%` } })),
                 React.createElement("span", { className: "designbase-figma-usage-status__usage-value" },
                     React.createElement("strong", null, remaining),
                     React.createElement("span", null,
@@ -1065,36 +1070,19 @@ const UsageStatusPopover = ({ paymentStatus, usageCount = 0, maxDailyUsage = 20,
                 React.createElement("span", null, fallbackText(translate, 'unlimitedUsageTooltip', '모든 기능을 제한 없이 사용할 수 있습니다')))) : isBeta ? (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, 'betaUsageDescription', '베타 기간에는 사용량 제한이 적용되지 않습니다'))) : hasDailyLimit ? (React.createElement("div", { className: "designbase-figma-usage-status__usage-detail" },
                 React.createElement("div", { className: "designbase-figma-usage-status__usage-summary" },
                     React.createElement("strong", { className: "designbase-figma-usage-status__usage-count" },
-                        used,
+                        remaining,
                         React.createElement("span", { className: "designbase-figma-usage-status__usage-divider" }, "/"),
                         limit),
-                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, fallbackText(translate, 'usageCountCaption', '오늘 사용'))),
-                React.createElement("div", { className: "designbase-figma-usage-status__progress", role: "progressbar", "aria-label": fallbackText(translate, 'usageCountCaption', '오늘 사용'), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": used, "aria-valuetext": `${used} / ${limit}` },
-                    React.createElement("span", { style: { width: `${usedPercent}%` } })),
+                    React.createElement("span", { className: "designbase-figma-usage-status__usage-caption" }, fallbackText(translate, 'remainingToday', '오늘 남은 사용량')),
+                    React.createElement("strong", { className: "designbase-figma-usage-status__usage-percent" },
+                        remainingPercent,
+                        "%")),
+                React.createElement("div", { className: "designbase-figma-usage-status__progress", role: "progressbar", "aria-label": fallbackText(translate, 'remainingToday', '오늘 남은 사용량'), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": remaining, "aria-valuetext": `${remaining} / ${limit}, ${remainingPercent}%` },
+                    React.createElement("span", { style: { width: `${remainingPercent}%` } })),
                 React.createElement("p", { className: "designbase-figma-usage-status__remaining-copy" }, resolveText(translate, { key: 'remainingCopy', values: { count: remaining } }, `${remaining}회 남음 · 매일 리셋`)))) : (React.createElement("p", { className: "designbase-figma-usage-status__note" }, fallbackText(translate, 'usageUnavailable', '사용량 제한이 없습니다')))))));
 };
 UsageStatusPopover.displayName = 'UsageStatusPopover';
 
-const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = { key: 'donation.buy_me_a_coffee' }, showDonationText = true, donationPromptText, showLanguageSelector = true, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t, children, }) => {
-    const { t: translate } = useFigmaUiI18n(currentLanguage, t);
-    const resolvedShowUsageInfo = showPaymentStatus && showUsageInfo;
-    const resolvedShowPaymentBadge = showPaymentStatus && showPaymentBadge;
-    const resolvedLicensePageClick = paymentStatus === 'BETA' ? undefined : onLicensePageClick;
-    const hasChildren = React.Children.count(children) > 0;
-    const classes = clsx('designbase-figma-footer', {
-        'designbase-figma-footer--has-children': hasChildren,
-    }, className);
-    return (React.createElement("footer", { className: classes },
-        React.createElement("div", { className: "designbase-figma-footer__wrap" },
-            React.createElement("div", { className: "designbase-figma-footer__left" },
-                React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, languages: languages, currentLanguage: currentLanguage, showLanguageSelector: showLanguageSelector, onLanguageChange: onLanguageChange, t: translate })),
-            React.createElement("div", { className: "designbase-figma-footer__right" },
-                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: paymentStatus, usageCount: usageCount, maxDailyUsage: maxDailyUsage, showUsage: resolvedShowUsageInfo, showPlan: resolvedShowPaymentBadge, isLoading: isLoading, onLicensePageClick: resolvedLicensePageClick, t: translate })),
-                showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: translate })))),
-        children));
-};
-FigmaFooter.displayName = 'FigmaFooter';
-
 const FigmaToastStack = ({ toasts, position, maxToasts, onRemoveToast, }) => {
     const visibleToasts = [...toasts]
         .sort((a, b) => b.createdAt - a.createdAt)
@@ -1155,17 +1143,150 @@ const FigmaToast = ({ message, isVisible, onClose, type = 'info', duration = 300
         React.createElement(Toast, { toastId: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showClose: true, onClose: onClose })));
 };
 const useFigmaToast = () => {
-    const [toast, setToast] = useState({ message: '', isVisible: false });
-    const showToast = useCallback((message, _type = 'info') => {
-        setToast({ message, isVisible: true });
-        setTimeout(() => setToast({ message: '', isVisible: false }), 5000);
+    const [toast, setToast] = useState({
+        message: '',
+        isVisible: false,
+        type: 'info',
+    });
+    const timeoutRef = useRef(null);
+    const showToast = useCallback((message, type = 'info') => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        setToast({ message, isVisible: true, type });
+        timeoutRef.current = setTimeout(() => {
+            setToast({ message: '', isVisible: false, type: 'info' });
+            timeoutRef.current = null;
+        }, 5000);
     }, []);
-    const toastComponent = toast.isVisible ? (React.createElement(FigmaToast, { message: toast.message, isVisible: toast.isVisible, onClose: () => setToast({ message: '', isVisible: false }), type: "info", duration: 5000 })) : null;
+    useEffect(() => () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+    }, []);
+    const toastComponent = toast.isVisible ? (React.createElement(FigmaToast, { message: toast.message, isVisible: toast.isVisible, onClose: () => setToast({ message: '', isVisible: false, type: 'info' }), type: toast.type, duration: 5000 })) : null;
     return { showToast, toastComponent };
 };
 FigmaToastProvider.displayName = 'FigmaToastProvider';
 FigmaToast.displayName = 'FigmaToast';
 
+const DEFAULT_LOW_USAGE_WARNING = { key: 'lowUsageWarning' };
+const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, remainingUsage, listenForUsageMessages = true, isLoading = false, showPaymentStatus = true, showUsageInfo = true, maxDailyUsage = 20, showLowUsageWarning = true, lowUsageThresholdPercent = 10, lowUsageWarningText = DEFAULT_LOW_USAGE_WARNING, onLowUsageWarning, showPaymentBadge = true, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = { key: 'donation.buy_me_a_coffee' }, showDonationText = true, donationPromptText, showLanguageSelector = true, currentLanguage = 'ko', languages, onLanguageChange, logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks, className, t, children, }) => {
+    const { t: translate } = useFigmaUiI18n(currentLanguage, t);
+    const { showToast, toastComponent } = useFigmaToast();
+    const [liveUsage, setLiveUsage] = useState({});
+    const previousRemainingRef = useRef(null);
+    const hasWarnedLowUsageRef = useRef(false);
+    const effectivePaymentStatus = liveUsage.paymentStatus ?? paymentStatus;
+    const effectiveUsageCount = liveUsage.usageCount ?? usageCount;
+    const effectiveRemainingUsage = liveUsage.remainingUsage ?? remainingUsage;
+    const effectiveMaxDailyUsage = liveUsage.maxDailyUsage ?? maxDailyUsage;
+    const limit = Math.max(1, Math.round(effectiveMaxDailyUsage));
+    const resolvedRemaining = typeof effectiveRemainingUsage === 'number' && Number.isFinite(effectiveRemainingUsage)
+        ? Math.min(limit, Math.max(0, Math.round(effectiveRemainingUsage)))
+        : Math.max(0, limit - Math.min(limit, Math.max(0, Math.round(effectiveUsageCount))));
+    const remainingPercent = Math.round((resolvedRemaining / limit) * 100);
+    const resolvedShowUsageInfo = showPaymentStatus && (showUsageInfo || effectivePaymentStatus === 'FREE');
+    const resolvedShowPaymentBadge = showPaymentStatus && showPaymentBadge;
+    const resolvedLicensePageClick = effectivePaymentStatus === 'BETA' ? undefined : onLicensePageClick;
+    const hasChildren = React.Children.count(children) > 0;
+    useEffect(() => {
+        if (!listenForUsageMessages || typeof window === 'undefined')
+            return undefined;
+        const handleUsageMessage = (event) => {
+            const message = event.data?.pluginMessage;
+            if (!message || !['initialize', 'update-plugin-status', 'usage-consume-result'].includes(message.type)) {
+                return;
+            }
+            const nextLimit = [message.usageLimit, message.freeDailyLimit, message.maxDailyUsage]
+                .find((value) => typeof value === 'number' && Number.isFinite(value) && value > 0);
+            const nextUsed = [message.usageUsed, message.dailyUsage]
+                .find((value) => typeof value === 'number' && Number.isFinite(value) && value >= 0);
+            const nextRemaining = typeof message.remainingUsage === 'number' && Number.isFinite(message.remainingUsage)
+                ? message.remainingUsage
+                : typeof nextLimit === 'number' && typeof nextUsed === 'number'
+                    ? Math.max(0, nextLimit - nextUsed)
+                    : undefined;
+            const nextPaymentStatus = message.paymentStatus === 'PAID'
+                ? 'PAID'
+                : message.paymentStatus === 'FREE' || message.paymentStatus === 'UNPAID'
+                    ? 'FREE'
+                    : undefined;
+            if (nextPaymentStatus === undefined
+                && nextLimit === undefined
+                && nextUsed === undefined
+                && nextRemaining === undefined) {
+                return;
+            }
+            setLiveUsage((previous) => ({
+                ...previous,
+                ...(nextPaymentStatus ? { paymentStatus: nextPaymentStatus } : {}),
+                ...(typeof nextLimit === 'number' ? { maxDailyUsage: nextLimit } : {}),
+                ...(typeof nextUsed === 'number' ? { usageCount: nextUsed } : {}),
+                ...(typeof nextRemaining === 'number' ? { remainingUsage: nextRemaining } : {}),
+            }));
+        };
+        window.addEventListener('message', handleUsageMessage);
+        return () => window.removeEventListener('message', handleUsageMessage);
+    }, [listenForUsageMessages]);
+    useEffect(() => {
+        const previousRemaining = previousRemainingRef.current;
+        const shouldTrack = showLowUsageWarning && effectivePaymentStatus === 'FREE' && effectiveMaxDailyUsage > 0;
+        if (!shouldTrack) {
+            previousRemainingRef.current = resolvedRemaining;
+            hasWarnedLowUsageRef.current = false;
+            return;
+        }
+        if (remainingPercent >= lowUsageThresholdPercent) {
+            hasWarnedLowUsageRef.current = false;
+        }
+        else if (previousRemaining !== null
+            && resolvedRemaining < previousRemaining
+            && !hasWarnedLowUsageRef.current) {
+            hasWarnedLowUsageRef.current = true;
+            const warningText = typeof lowUsageWarningText === 'string'
+                ? lowUsageWarningText
+                : {
+                    ...lowUsageWarningText,
+                    values: {
+                        ...(lowUsageWarningText.values || {}),
+                        count: resolvedRemaining,
+                        percent: remainingPercent,
+                    },
+                };
+            onLowUsageWarning?.({
+                remaining: resolvedRemaining,
+                percent: remainingPercent,
+                limit,
+            });
+            showToast(resolveText(translate, warningText, `무료 사용량이 ${resolvedRemaining}회(${remainingPercent}%) 남았습니다.`) || `무료 사용량이 ${resolvedRemaining}회(${remainingPercent}%) 남았습니다.`, 'warning');
+        }
+        previousRemainingRef.current = resolvedRemaining;
+    }, [
+        lowUsageThresholdPercent,
+        lowUsageWarningText,
+        effectiveMaxDailyUsage,
+        effectivePaymentStatus,
+        onLowUsageWarning,
+        remainingPercent,
+        resolvedRemaining,
+        showLowUsageWarning,
+        showToast,
+        translate,
+    ]);
+    const classes = clsx('designbase-figma-footer', {
+        'designbase-figma-footer--has-children': hasChildren,
+    }, className);
+    return (React.createElement("footer", { className: classes },
+        React.createElement("div", { className: "designbase-figma-footer__wrap" },
+            React.createElement("div", { className: "designbase-figma-footer__left" },
+                React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, languages: languages, currentLanguage: currentLanguage, showLanguageSelector: showLanguageSelector, onLanguageChange: onLanguageChange, t: translate })),
+            React.createElement("div", { className: "designbase-figma-footer__right" },
+                (resolvedShowUsageInfo || resolvedShowPaymentBadge) && (React.createElement(UsageStatusPopover, { paymentStatus: effectivePaymentStatus, usageCount: effectiveUsageCount, remainingUsage: effectiveRemainingUsage, maxDailyUsage: effectiveMaxDailyUsage, showUsage: resolvedShowUsageInfo, showPlan: resolvedShowPaymentBadge, isLoading: isLoading, onLicensePageClick: resolvedLicensePageClick, t: translate })),
+                showDonation && (React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", iconOnly: true, showPrompt: false, t: translate })))),
+        children,
+        toastComponent));
+};
+FigmaFooter.displayName = 'FigmaFooter';
+
 const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, helperText, className, t, locale, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
     const [inputValue, setInputValue] = useState(value);