@designbasekorea/figma-ui 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +72 -72
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +133 -105
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +144 -116
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { Logo, Spinner, Badge, Input, Button, SegmentControl, Modal,
|
|
2
|
+
import { HeartFilledIcon, CoffeeFilledIcon, ExternalLinkIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ExpandIcon, GripVerticalIcon } from '@designbasekorea/icons';
|
|
3
|
+
import { Logo, Spinner, Badge, Input, Button, SegmentControl, Modal, Progressbar, Toggle } from '@designbasekorea/ui';
|
|
4
4
|
export * from '@designbasekorea/ui';
|
|
5
5
|
|
|
6
6
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const DonationBadge$1 = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
|
|
9
|
+
const handleClick = () => {
|
|
10
|
+
if (onClick) {
|
|
11
|
+
onClick();
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
window.open(donationUrl, '_blank', 'noopener,noreferrer');
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const Icon = iconType === 'heart' ? HeartFilledIcon : CoffeeFilledIcon;
|
|
18
|
+
const classes = clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${size}`, `designbase-figma-donation-badge--${iconType}`, className);
|
|
19
|
+
return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": text },
|
|
20
|
+
React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
|
|
21
|
+
React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
|
|
22
|
+
};
|
|
23
|
+
DonationBadge$1.displayName = 'DonationBadge';
|
|
24
|
+
|
|
25
|
+
DonationBadge;
|
|
26
|
+
|
|
27
|
+
const LogoDropdown$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links, position = 'top-left', className, t = (key) => key, }) => {
|
|
9
28
|
const [isOpen, setIsOpen] = useState(false);
|
|
10
29
|
const toggleDropdown = () => setIsOpen(!isOpen);
|
|
11
30
|
const handleLinkClick = (url) => {
|
|
@@ -32,9 +51,9 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
|
|
|
32
51
|
React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
|
|
33
52
|
React.createElement(ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
|
|
34
53
|
};
|
|
35
|
-
LogoDropdown.displayName = 'LogoDropdown';
|
|
54
|
+
LogoDropdown$1.displayName = 'LogoDropdown';
|
|
36
55
|
|
|
37
|
-
const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
|
|
56
|
+
const PaymentBadge$1 = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
|
|
38
57
|
const getBadgeText = () => {
|
|
39
58
|
if (text)
|
|
40
59
|
return text;
|
|
@@ -47,30 +66,13 @@ const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) =>
|
|
|
47
66
|
};
|
|
48
67
|
return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(Spinner, { size: "s" })) : (React.createElement(Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
|
|
49
68
|
};
|
|
50
|
-
PaymentBadge.displayName = 'PaymentBadge';
|
|
51
|
-
|
|
52
|
-
const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
|
|
53
|
-
const handleClick = () => {
|
|
54
|
-
if (onClick) {
|
|
55
|
-
onClick();
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
window.open(donationUrl, '_blank', 'noopener,noreferrer');
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const Icon = iconType === 'heart' ? HeartFilledIcon : CoffeeFilledIcon;
|
|
62
|
-
const classes = clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${size}`, `designbase-figma-donation-badge--${iconType}`, className);
|
|
63
|
-
return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": text },
|
|
64
|
-
React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
|
|
65
|
-
React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
|
|
66
|
-
};
|
|
67
|
-
DonationBadge.displayName = 'DonationBadge';
|
|
69
|
+
PaymentBadge$1.displayName = 'PaymentBadge';
|
|
68
70
|
|
|
69
71
|
const DEFAULT_LANGUAGES = [
|
|
70
72
|
{ code: 'ko', label: 'KO' },
|
|
71
73
|
{ code: 'en', label: 'EN' },
|
|
72
74
|
];
|
|
73
|
-
const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
|
|
75
|
+
const LanguageSelector$1 = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
|
|
74
76
|
const handleLanguageChange = (languageCode) => {
|
|
75
77
|
if (onLanguageChange) {
|
|
76
78
|
onLanguageChange(languageCode);
|
|
@@ -81,9 +83,9 @@ const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGE
|
|
|
81
83
|
'designbase-figma-language-selector__button--active': currentLanguage === language.code,
|
|
82
84
|
}), onClick: () => handleLanguageChange(language.code), "aria-label": `${language.label} 언어 선택`, "aria-pressed": currentLanguage === language.code }, language.label)))));
|
|
83
85
|
};
|
|
84
|
-
LanguageSelector.displayName = 'LanguageSelector';
|
|
86
|
+
LanguageSelector$1.displayName = 'LanguageSelector';
|
|
85
87
|
|
|
86
|
-
const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks = [], onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = false, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = (key) => key, children, }) => {
|
|
88
|
+
const Footer$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks = [], onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = false, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = (key) => key, children, }) => {
|
|
87
89
|
const isActive = paymentStatus === 'PAID';
|
|
88
90
|
const hasChildren = React.Children.count(children) > 0;
|
|
89
91
|
const classes = clsx('designbase-figma-footer', {
|
|
@@ -92,8 +94,8 @@ const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logo
|
|
|
92
94
|
return (React.createElement("footer", { className: classes },
|
|
93
95
|
React.createElement("div", { className: "designbase-figma-footer__wrap" },
|
|
94
96
|
React.createElement("div", { className: "designbase-figma-footer__left" },
|
|
95
|
-
React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
|
|
96
|
-
showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
|
|
97
|
+
React.createElement(LogoDropdown$1, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
|
|
98
|
+
showLanguageSelector && (React.createElement(LanguageSelector$1, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
|
|
97
99
|
showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
|
|
98
100
|
!isLoading && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage" }, t('unlimitedUsage'))) : (React.createElement(React.Fragment, null,
|
|
99
101
|
React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
|
|
@@ -103,14 +105,16 @@ const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logo
|
|
|
103
105
|
" ",
|
|
104
106
|
t('perDay')),
|
|
105
107
|
React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
|
|
106
|
-
React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
|
|
108
|
+
React.createElement(PaymentBadge$1, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
|
|
107
109
|
showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
|
|
108
|
-
React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
|
|
110
|
+
React.createElement(DonationBadge$1, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
|
|
109
111
|
children));
|
|
110
112
|
};
|
|
111
|
-
Footer.displayName = 'Footer';
|
|
113
|
+
Footer$1.displayName = 'Footer';
|
|
112
114
|
|
|
113
|
-
|
|
115
|
+
Footer;
|
|
116
|
+
|
|
117
|
+
const FormWithSubmit$1 = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
|
|
114
118
|
const [inputValue, setInputValue] = useState(value);
|
|
115
119
|
useEffect(() => {
|
|
116
120
|
setInputValue(value);
|
|
@@ -130,9 +134,36 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
|
|
|
130
134
|
React.createElement(Input, { value: inputValue, onChange: handleChange, placeholder: placeholder, disabled: disabled || isSubmitting, size: "m" })),
|
|
131
135
|
React.createElement(Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
|
|
132
136
|
};
|
|
133
|
-
FormWithSubmit.displayName = 'FormWithSubmit';
|
|
137
|
+
FormWithSubmit$1.displayName = 'FormWithSubmit';
|
|
138
|
+
|
|
139
|
+
FormWithSubmit;
|
|
140
|
+
|
|
141
|
+
const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
|
|
142
|
+
const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
|
|
143
|
+
'designbase-figma-interaction-wrapper--fixed': fixed,
|
|
144
|
+
});
|
|
145
|
+
const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
|
|
146
|
+
'designbase-figma-interaction--visible': visible,
|
|
147
|
+
}, className);
|
|
148
|
+
if (!visible)
|
|
149
|
+
return null;
|
|
150
|
+
return (React.createElement("div", { className: wrapperClasses },
|
|
151
|
+
React.createElement("div", { className: feedbackClasses },
|
|
152
|
+
React.createElement("div", { className: "designbase-figma-interaction__content" },
|
|
153
|
+
React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
|
|
154
|
+
message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, message)),
|
|
155
|
+
statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
|
|
156
|
+
rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
|
|
157
|
+
};
|
|
158
|
+
InteractionFeedback$1.displayName = 'InteractionFeedback';
|
|
159
|
+
|
|
160
|
+
InteractionFeedback;
|
|
161
|
+
|
|
162
|
+
LanguageSelector;
|
|
134
163
|
|
|
135
|
-
|
|
164
|
+
LogoDropdown;
|
|
165
|
+
|
|
166
|
+
const PaymentStatusSection$1 = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
|
|
136
167
|
const remainingActivations = activationLimit - activationUsage;
|
|
137
168
|
return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
|
|
138
169
|
React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
|
|
@@ -151,7 +182,7 @@ const PaymentStatusSection = ({ status, usageCount, activationLimit, activationU
|
|
|
151
182
|
activationLimit)),
|
|
152
183
|
React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
|
|
153
184
|
};
|
|
154
|
-
PaymentStatusSection.displayName = 'PaymentStatusSection';
|
|
185
|
+
PaymentStatusSection$1.displayName = 'PaymentStatusSection';
|
|
155
186
|
|
|
156
187
|
const defaultFeatures = [
|
|
157
188
|
{ name: '사용 제한', free: '일일 제한', pro: '무제한' },
|
|
@@ -164,7 +195,7 @@ const defaultPricing = {
|
|
|
164
195
|
monthly: 2,
|
|
165
196
|
yearly: 21.6,
|
|
166
197
|
};
|
|
167
|
-
const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
|
|
198
|
+
const PricingComparison$1 = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
|
|
168
199
|
const [isYearly, setIsYearly] = useState(false);
|
|
169
200
|
const getPrice = () => {
|
|
170
201
|
const price = isYearly ? pricing.yearly : pricing.monthly;
|
|
@@ -213,9 +244,9 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
|
|
|
213
244
|
? (feature.pro ? '✓' : '✗')
|
|
214
245
|
: feature.pro))))))));
|
|
215
246
|
};
|
|
216
|
-
PricingComparison.displayName = 'PricingComparison';
|
|
247
|
+
PricingComparison$1.displayName = 'PricingComparison';
|
|
217
248
|
|
|
218
|
-
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
|
|
249
|
+
const PageLicense$1 = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
|
|
219
250
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
220
251
|
const [isDeactivating, setIsDeactivating] = useState(false);
|
|
221
252
|
const [licenseKey, setLicenseKey] = useState(initialLicenseKey);
|
|
@@ -301,39 +332,73 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
|
|
|
301
332
|
React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
|
|
302
333
|
? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
|
|
303
334
|
: t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
|
|
304
|
-
React.createElement(PricingComparison, { t: t }),
|
|
335
|
+
React.createElement(PricingComparison$1, { t: t }),
|
|
305
336
|
isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
306
337
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
307
338
|
React.createElement("h3", null, t('licenseActivated') || '라이선스 활성화됨'),
|
|
308
339
|
React.createElement(Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
|
|
309
340
|
React.createElement(MoreHorizontalIcon, { size: 16 }))),
|
|
310
|
-
React.createElement(PaymentStatusSection, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
|
|
341
|
+
React.createElement(PaymentStatusSection$1, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
|
|
311
342
|
React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
312
343
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
313
344
|
React.createElement("h3", null, t('enterLicenseKey') || '라이선스 키 입력'),
|
|
314
345
|
!isPaid && paymentPageUrl && (React.createElement(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
|
|
315
346
|
React.createElement("span", null, t('purchaseLicense') || '라이선스 구매'),
|
|
316
347
|
React.createElement(ExternalLinkIcon, { size: 16 })))),
|
|
317
|
-
React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: t('licenseKey') || 'License Key', submitText: t('submit') || 'Submit', submittingText: t('verifying') || 'Verifying...' }),
|
|
348
|
+
React.createElement(FormWithSubmit$1, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: t('licenseKey') || 'License Key', submitText: t('submit') || 'Submit', submittingText: t('verifying') || 'Verifying...' }),
|
|
318
349
|
React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, isPaid
|
|
319
350
|
? t('licenseActivatedSuccess') || '라이선스가 성공적으로 활성화되었습니다.'
|
|
320
351
|
: t('enterLicenseFromEmail') || '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))),
|
|
321
352
|
React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
|
|
322
353
|
React.createElement(CloseIcon, { size: 20 }))));
|
|
323
354
|
};
|
|
324
|
-
PageLicense.displayName = 'PageLicense';
|
|
355
|
+
PageLicense$1.displayName = 'PageLicense';
|
|
325
356
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
357
|
+
PageLicense;
|
|
358
|
+
|
|
359
|
+
PaymentBadge;
|
|
360
|
+
|
|
361
|
+
PaymentStatusSection;
|
|
362
|
+
|
|
363
|
+
PricingComparison;
|
|
364
|
+
|
|
365
|
+
const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
|
|
366
|
+
const [isCompleted, setIsCompleted] = useState(false);
|
|
367
|
+
const { processedNodes, totalNodes } = progress;
|
|
368
|
+
const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
|
|
369
|
+
useEffect(() => {
|
|
370
|
+
if (processedNodes === totalNodes && totalNodes > 0) {
|
|
371
|
+
setIsCompleted(true);
|
|
372
|
+
if (onComplete)
|
|
373
|
+
onComplete();
|
|
374
|
+
}
|
|
375
|
+
}, [processedNodes, totalNodes, onComplete]);
|
|
376
|
+
useEffect(() => {
|
|
377
|
+
if (isOpen)
|
|
378
|
+
setIsCompleted(false);
|
|
379
|
+
}, [isOpen]);
|
|
380
|
+
const handleStop = () => {
|
|
381
|
+
if (onStop)
|
|
382
|
+
onStop();
|
|
383
|
+
onClose();
|
|
384
|
+
};
|
|
385
|
+
const modalClasses = clsx('designbase-figma-progress-modal', className);
|
|
386
|
+
return (React.createElement(Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: isCompleted ? completedMessage : title, size: "s", className: modalClasses, showCloseButton: false },
|
|
387
|
+
React.createElement("div", { className: "designbase-figma-progress-modal__content" },
|
|
388
|
+
React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
|
|
389
|
+
React.createElement(CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
|
|
390
|
+
React.createElement(Spinner, { size: "m" }))))),
|
|
391
|
+
React.createElement("p", { className: "designbase-figma-progress-modal__message" }, isCompleted ? completedMessage : processingMessage),
|
|
392
|
+
React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
|
|
393
|
+
React.createElement(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
|
|
394
|
+
helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
|
|
395
|
+
React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, confirmButtonText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, stopButtonText))))));
|
|
333
396
|
};
|
|
334
|
-
|
|
397
|
+
ProgressModal$1.displayName = 'ProgressModal';
|
|
335
398
|
|
|
336
|
-
|
|
399
|
+
ProgressModal;
|
|
400
|
+
|
|
401
|
+
const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
|
|
337
402
|
const [isResizing, setIsResizing] = useState(false);
|
|
338
403
|
const resizeHandleRef = useRef(null);
|
|
339
404
|
useEffect(() => {
|
|
@@ -371,28 +436,11 @@ const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight =
|
|
|
371
436
|
setIsResizing(true);
|
|
372
437
|
}, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(ExpandIcon, { size: 12 }))));
|
|
373
438
|
};
|
|
374
|
-
ResizablePlugin.displayName = 'ResizablePlugin';
|
|
439
|
+
ResizablePlugin$1.displayName = 'ResizablePlugin';
|
|
375
440
|
|
|
376
|
-
|
|
377
|
-
const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
|
|
378
|
-
'designbase-figma-interaction-wrapper--fixed': fixed,
|
|
379
|
-
});
|
|
380
|
-
const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
|
|
381
|
-
'designbase-figma-interaction--visible': visible,
|
|
382
|
-
}, className);
|
|
383
|
-
if (!visible)
|
|
384
|
-
return null;
|
|
385
|
-
return (React.createElement("div", { className: wrapperClasses },
|
|
386
|
-
React.createElement("div", { className: feedbackClasses },
|
|
387
|
-
React.createElement("div", { className: "designbase-figma-interaction__content" },
|
|
388
|
-
React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
|
|
389
|
-
message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, message)),
|
|
390
|
-
statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
|
|
391
|
-
rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
|
|
392
|
-
};
|
|
393
|
-
InteractionFeedback.displayName = 'InteractionFeedback';
|
|
441
|
+
ResizablePlugin;
|
|
394
442
|
|
|
395
|
-
const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
|
|
443
|
+
const SettingsModal$1 = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
|
|
396
444
|
const [tempCategories, setTempCategories] = useState(initialCategories);
|
|
397
445
|
const [draggedIndex, setDraggedIndex] = useState(null);
|
|
398
446
|
useEffect(() => {
|
|
@@ -504,41 +552,21 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
|
|
|
504
552
|
React.createElement(Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, "\uCDE8\uC18C"),
|
|
505
553
|
React.createElement(Button, { onPress: handleSave, variant: "primary", size: "s" }, "\uC800\uC7A5")))));
|
|
506
554
|
};
|
|
507
|
-
SettingsModal.displayName = 'SettingsModal';
|
|
555
|
+
SettingsModal$1.displayName = 'SettingsModal';
|
|
508
556
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
}
|
|
519
|
-
}, [processedNodes, totalNodes, onComplete]);
|
|
520
|
-
useEffect(() => {
|
|
521
|
-
if (isOpen)
|
|
522
|
-
setIsCompleted(false);
|
|
523
|
-
}, [isOpen]);
|
|
524
|
-
const handleStop = () => {
|
|
525
|
-
if (onStop)
|
|
526
|
-
onStop();
|
|
527
|
-
onClose();
|
|
528
|
-
};
|
|
529
|
-
const modalClasses = clsx('designbase-figma-progress-modal', className);
|
|
530
|
-
return (React.createElement(Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: isCompleted ? completedMessage : title, size: "s", className: modalClasses, showCloseButton: false },
|
|
531
|
-
React.createElement("div", { className: "designbase-figma-progress-modal__content" },
|
|
532
|
-
React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
|
|
533
|
-
React.createElement(CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
|
|
534
|
-
React.createElement(Spinner, { size: "m" }))))),
|
|
535
|
-
React.createElement("p", { className: "designbase-figma-progress-modal__message" }, isCompleted ? completedMessage : processingMessage),
|
|
536
|
-
React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
|
|
537
|
-
React.createElement(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
|
|
538
|
-
helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
|
|
539
|
-
React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, confirmButtonText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, stopButtonText))))));
|
|
557
|
+
SettingsModal;
|
|
558
|
+
|
|
559
|
+
const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
|
|
560
|
+
return (React.createElement("div", { className: `designbase-figma-upgrade-banner ${className || ''}` },
|
|
561
|
+
React.createElement("div", { className: "designbase-figma-upgrade-banner__content" },
|
|
562
|
+
React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
|
|
563
|
+
React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, title || t('bannerTitle') || '프로로 업그레이드하세요'),
|
|
564
|
+
React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
|
|
565
|
+
React.createElement(Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
|
|
540
566
|
};
|
|
541
|
-
|
|
567
|
+
UpgradeBanner$1.displayName = 'UpgradeBanner';
|
|
568
|
+
|
|
569
|
+
UpgradeBanner;
|
|
542
570
|
|
|
543
|
-
export { DonationBadge, Footer, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, UpgradeBanner };
|
|
571
|
+
export { DonationBadge$1 as DonationBadge, Footer$1 as Footer, FormWithSubmit$1 as FormWithSubmit, InteractionFeedback$1 as InteractionFeedback, LanguageSelector$1 as LanguageSelector, LogoDropdown$1 as LogoDropdown, PageLicense$1 as PageLicense, PaymentBadge$1 as PaymentBadge, PaymentStatusSection$1 as PaymentStatusSection, PricingComparison$1 as PricingComparison, ProgressModal$1 as ProgressModal, ResizablePlugin$1 as ResizablePlugin, SettingsModal$1 as SettingsModal, UpgradeBanner$1 as UpgradeBanner };
|
|
544
572
|
//# sourceMappingURL=index.esm.js.map
|