@designbasekorea/figma-ui 0.1.43 → 0.1.44
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 +17 -50
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +81 -142
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +78 -141
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -295,70 +295,6 @@ const FigmaSidebar = ({ categories, categoryGroups = {}, categoryLabels = {}, ac
|
|
|
295
295
|
};
|
|
296
296
|
FigmaSidebar.displayName = 'FigmaSidebar';
|
|
297
297
|
|
|
298
|
-
const defaultLinks = [
|
|
299
|
-
{
|
|
300
|
-
name: 'officialWebsite',
|
|
301
|
-
url: 'https://designbase.co.kr',
|
|
302
|
-
icon: React.createElement(icons.AppWindowIcon, { size: 20 }),
|
|
303
|
-
},
|
|
304
|
-
{
|
|
305
|
-
name: 'youtube',
|
|
306
|
-
url: 'https://youtube.com/designbase',
|
|
307
|
-
icon: React.createElement(icons.YoutubeIcon, { size: 20 }),
|
|
308
|
-
},
|
|
309
|
-
{
|
|
310
|
-
name: 'instagram',
|
|
311
|
-
url: 'https://instagram.com/designbase',
|
|
312
|
-
icon: React.createElement(icons.InstagramIcon, { size: 20 }),
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
name: 'figmaCommunity',
|
|
316
|
-
url: 'https://www.figma.com/@designbasekorea',
|
|
317
|
-
icon: React.createElement(icons.FigmaIcon, { size: 20 }),
|
|
318
|
-
},
|
|
319
|
-
{
|
|
320
|
-
name: 'contact',
|
|
321
|
-
url: 'mailto:designbasekorea@gmail.com',
|
|
322
|
-
icon: React.createElement(icons.MailIcon, { size: 20 }),
|
|
323
|
-
},
|
|
324
|
-
];
|
|
325
|
-
const defaultTranslations$1 = {
|
|
326
|
-
officialWebsite: '공식 웹사이트',
|
|
327
|
-
youtube: '유튜브',
|
|
328
|
-
instagram: '인스타그램',
|
|
329
|
-
figmaCommunity: '피그마 커뮤니티',
|
|
330
|
-
contact: '문의하기',
|
|
331
|
-
};
|
|
332
|
-
const defaultT$1 = (key) => defaultTranslations$1[key] || key;
|
|
333
|
-
const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t = defaultT$1, }) => {
|
|
334
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
335
|
-
const toggleDropdown = () => setIsOpen(!isOpen);
|
|
336
|
-
const handleLinkClick = (url) => {
|
|
337
|
-
if (url.startsWith('mailto:')) {
|
|
338
|
-
return;
|
|
339
|
-
}
|
|
340
|
-
window.open(url, '_blank', 'noopener,noreferrer');
|
|
341
|
-
};
|
|
342
|
-
const classes = clsx('designbase-figma-logo-dropdown', `designbase-figma-logo-dropdown--${position}`, {
|
|
343
|
-
'designbase-figma-logo-dropdown--open': isOpen,
|
|
344
|
-
}, className);
|
|
345
|
-
const renderLogo = () => {
|
|
346
|
-
if (logoSrc) {
|
|
347
|
-
return (React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }));
|
|
348
|
-
}
|
|
349
|
-
return (React.createElement("div", { className: "designbase-figma-logo-dropdown__logo", onClick: toggleDropdown },
|
|
350
|
-
React.createElement(ui.Logo, { type: logoType, size: logoSize, variant: "default" })));
|
|
351
|
-
};
|
|
352
|
-
return (React.createElement("div", { className: classes },
|
|
353
|
-
renderLogo(),
|
|
354
|
-
isOpen && (React.createElement("ul", { className: "designbase-figma-logo-dropdown__menu" }, links.map((link, index) => (React.createElement("li", { key: index, className: "designbase-figma-logo-dropdown__item" },
|
|
355
|
-
React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", onClick: () => handleLinkClick(link.url) },
|
|
356
|
-
link.icon && (React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" }, link.icon)),
|
|
357
|
-
React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
|
|
358
|
-
React.createElement(icons.ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
|
|
359
|
-
};
|
|
360
|
-
LogoDropdown.displayName = 'LogoDropdown';
|
|
361
|
-
|
|
362
298
|
const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
|
|
363
299
|
const getBadgeText = () => {
|
|
364
300
|
if (text)
|
|
@@ -398,7 +334,7 @@ const defaultTranslations = {
|
|
|
398
334
|
donationPrompt: '이 플러그인이 유용했나요?',
|
|
399
335
|
};
|
|
400
336
|
const defaultT = (key) => defaultTranslations[key] || key;
|
|
401
|
-
const FigmaFooter = ({
|
|
337
|
+
const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showDonationText = true, donationPromptText, showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = defaultT, children, }) => {
|
|
402
338
|
const isActive = paymentStatus === 'PAID';
|
|
403
339
|
const hasChildren = React.Children.count(children) > 0;
|
|
404
340
|
const classes = clsx('designbase-figma-footer', {
|
|
@@ -406,9 +342,7 @@ const FigmaFooter = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase',
|
|
|
406
342
|
}, className);
|
|
407
343
|
return (React.createElement("footer", { className: classes },
|
|
408
344
|
React.createElement("div", { className: "designbase-figma-footer__wrap" },
|
|
409
|
-
React.createElement("div", { className: "designbase-figma-footer__left" },
|
|
410
|
-
React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
|
|
411
|
-
showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
|
|
345
|
+
React.createElement("div", { className: "designbase-figma-footer__left" }, showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
|
|
412
346
|
showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
|
|
413
347
|
!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,
|
|
414
348
|
React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
|
|
@@ -467,31 +401,6 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
|
|
|
467
401
|
};
|
|
468
402
|
InteractionFeedback.displayName = 'InteractionFeedback';
|
|
469
403
|
|
|
470
|
-
const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, t }) => {
|
|
471
|
-
const remainingActivations = activationLimit - activationUsage;
|
|
472
|
-
return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
|
|
473
|
-
React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
|
|
474
|
-
resolveText(t, { key: 'payment.license_key_label' }, '라이선스 키'),
|
|
475
|
-
": ",
|
|
476
|
-
React.createElement("span", null, licenseKey)),
|
|
477
|
-
showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
|
|
478
|
-
React.createElement("div", { className: "designbase-figma-payment-status__activation-info" },
|
|
479
|
-
React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
|
|
480
|
-
remainingActivations,
|
|
481
|
-
" ",
|
|
482
|
-
resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
|
|
483
|
-
" ",
|
|
484
|
-
resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
|
|
485
|
-
React.createElement("div", { className: "designbase-figma-payment-status__usage" },
|
|
486
|
-
activationUsage,
|
|
487
|
-
"/",
|
|
488
|
-
activationLimit)),
|
|
489
|
-
React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
|
|
490
|
-
? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
|
|
491
|
-
: resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
|
|
492
|
-
};
|
|
493
|
-
PaymentStatusSection.displayName = 'PaymentStatusSection';
|
|
494
|
-
|
|
495
404
|
const defaultFeatures = [
|
|
496
405
|
{ name: '사용 제한', free: '일일 제한', pro: '무제한' },
|
|
497
406
|
{ name: '모든 주제 사용', free: false, pro: true },
|
|
@@ -554,7 +463,7 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
|
|
|
554
463
|
};
|
|
555
464
|
PricingComparison.displayName = 'PricingComparison';
|
|
556
465
|
|
|
557
|
-
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t
|
|
466
|
+
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t, className, }) => {
|
|
558
467
|
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
559
468
|
const [isDeactivating, setIsDeactivating] = React.useState(false);
|
|
560
469
|
const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
|
|
@@ -636,33 +545,74 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
|
|
|
636
545
|
React.createElement("div", { className: "designbase-figma-page-license__header" },
|
|
637
546
|
React.createElement("div", { className: "designbase-figma-page-license__title" },
|
|
638
547
|
isPaid ? React.createElement(icons.StarIcon, { size: 24 }) : React.createElement(icons.KeyIcon, { size: 24 }),
|
|
639
|
-
React.createElement("h2", null, isPaid ? t
|
|
548
|
+
React.createElement("h2", null, isPaid ? resolveText(t, { key: 'license.pro_account' }, '프로 계정') : resolveText(t, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드'))),
|
|
640
549
|
React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
|
|
641
|
-
? t
|
|
642
|
-
: t
|
|
550
|
+
? resolveText(t, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
|
|
551
|
+
: resolveText(t, { key: 'license.purchase_for_unlimited' }, '라이선스 구매 후 무제한 접근이 가능합니다.'))),
|
|
643
552
|
React.createElement(PricingComparison, { t: t }),
|
|
644
553
|
isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
645
554
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
646
|
-
React.createElement("h3", null, t
|
|
555
|
+
React.createElement("h3", null, resolveText(t, { key: 'license.activated' }, '라이선스 활성화됨')),
|
|
647
556
|
React.createElement(ui.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
|
|
648
557
|
React.createElement(icons.MoreHorizontalIcon, { size: 16 }))),
|
|
649
|
-
React.createElement(
|
|
650
|
-
|
|
558
|
+
React.createElement("div", { className: "designbase-figma-page-license__license-key" },
|
|
559
|
+
resolveText(t, { key: 'license.key_label' }, '라이선스 키'),
|
|
560
|
+
": ",
|
|
561
|
+
React.createElement("span", null, licenseKey)),
|
|
562
|
+
showDetails && (React.createElement("div", { className: "designbase-figma-page-license__details" },
|
|
563
|
+
React.createElement("div", { className: "designbase-figma-page-license__activation-info" },
|
|
564
|
+
React.createElement("div", { className: "designbase-figma-page-license__remaining" },
|
|
565
|
+
activationLimit - activationUsage,
|
|
566
|
+
" ",
|
|
567
|
+
resolveText(t, { key: 'license.activations_remaining' }, '활성'),
|
|
568
|
+
" ",
|
|
569
|
+
resolveText(t, { key: 'license.spots_remaining' }, '자리 남음')),
|
|
570
|
+
React.createElement("div", { className: "designbase-figma-page-license__usage" },
|
|
571
|
+
activationUsage,
|
|
572
|
+
"/",
|
|
573
|
+
activationLimit)),
|
|
574
|
+
React.createElement(ui.Button, { onClick: handleDeactivateLicense, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
|
|
575
|
+
? resolveText(t, { key: 'license.deactivating' }, '비활성화중...')
|
|
576
|
+
: resolveText(t, { key: 'license.deactivate' }, '라이선스 비활성화')))))),
|
|
577
|
+
!isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
651
578
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
652
|
-
React.createElement("h3", null, t
|
|
653
|
-
|
|
654
|
-
React.createElement("span", null, t
|
|
579
|
+
React.createElement("h3", null, resolveText(t, { key: 'license.enter_key' }, '라이선스 키 입력')),
|
|
580
|
+
paymentPageUrl && (React.createElement(ui.Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
|
|
581
|
+
React.createElement("span", null, resolveText(t, { key: 'license.purchase' }, '라이선스 구매')),
|
|
655
582
|
React.createElement(icons.ExternalLinkIcon, { size: 16 })))),
|
|
656
|
-
React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label:
|
|
657
|
-
React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
|
|
658
|
-
? t('licenseActivatedSuccess') || '라이선스가 성공적으로 활성화되었습니다.'
|
|
659
|
-
: t('enterLicenseFromEmail') || '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))),
|
|
583
|
+
React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, t: t }),
|
|
584
|
+
React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, resolveText(t, { key: 'license.enter_from_email' }, '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))))),
|
|
660
585
|
React.createElement(ui.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
|
|
661
586
|
React.createElement(icons.CloseIcon, { size: 20 }))));
|
|
662
587
|
};
|
|
663
588
|
PageLicense.displayName = 'PageLicense';
|
|
664
589
|
|
|
665
|
-
const
|
|
590
|
+
const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, t }) => {
|
|
591
|
+
const remainingActivations = activationLimit - activationUsage;
|
|
592
|
+
return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
|
|
593
|
+
React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
|
|
594
|
+
resolveText(t, { key: 'payment.license_key_label' }, '라이선스 키'),
|
|
595
|
+
": ",
|
|
596
|
+
React.createElement("span", null, licenseKey)),
|
|
597
|
+
showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
|
|
598
|
+
React.createElement("div", { className: "designbase-figma-payment-status__activation-info" },
|
|
599
|
+
React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
|
|
600
|
+
remainingActivations,
|
|
601
|
+
" ",
|
|
602
|
+
resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
|
|
603
|
+
" ",
|
|
604
|
+
resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
|
|
605
|
+
React.createElement("div", { className: "designbase-figma-payment-status__usage" },
|
|
606
|
+
activationUsage,
|
|
607
|
+
"/",
|
|
608
|
+
activationLimit)),
|
|
609
|
+
React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
|
|
610
|
+
? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
|
|
611
|
+
: resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
|
|
612
|
+
};
|
|
613
|
+
PaymentStatusSection.displayName = 'PaymentStatusSection';
|
|
614
|
+
|
|
615
|
+
const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.working' }, completedMessage = { key: 'progress.completed' }, processingMessage = { key: 'progress.processing' }, stopButtonText = { key: 'progress.stop' }, confirmButtonText = { key: 'progress.confirm' }, helpText, onStop, onComplete, loadingIcon, completeIcon, className, t }) => {
|
|
666
616
|
const [isCompleted, setIsCompleted] = React.useState(false);
|
|
667
617
|
const { processedNodes, totalNodes } = progress;
|
|
668
618
|
const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
|
|
@@ -683,20 +633,25 @@ const ProgressModal = ({ isOpen, onClose, progress, title = '작업 중', comple
|
|
|
683
633
|
onClose();
|
|
684
634
|
};
|
|
685
635
|
const modalClasses = clsx('designbase-figma-progress-modal', className);
|
|
686
|
-
|
|
636
|
+
const displayTitle = resolveText(t, isCompleted ? completedMessage : title, isCompleted ? '완료되었습니다' : '작업 중');
|
|
637
|
+
const displayMessage = resolveText(t, isCompleted ? completedMessage : processingMessage, isCompleted ? '완료되었습니다' : '처리 중...');
|
|
638
|
+
const displayStopText = resolveText(t, stopButtonText, '중지');
|
|
639
|
+
const displayConfirmText = resolveText(t, confirmButtonText, '확인');
|
|
640
|
+
const displayHelpText = resolveText(t, helpText);
|
|
641
|
+
return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: displayTitle, size: "s", className: modalClasses, showCloseButton: false },
|
|
687
642
|
React.createElement("div", { className: "designbase-figma-progress-modal__content" },
|
|
688
643
|
React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
|
|
689
644
|
React.createElement(icons.CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
|
|
690
645
|
React.createElement(ui.Spinner, { size: "m" }))))),
|
|
691
|
-
React.createElement("p", { className: "designbase-figma-progress-modal__message" },
|
|
646
|
+
React.createElement("p", { className: "designbase-figma-progress-modal__message" }, displayMessage),
|
|
692
647
|
React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
|
|
693
648
|
React.createElement(ui.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
|
|
694
|
-
|
|
695
|
-
React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(ui.Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true },
|
|
649
|
+
displayHelpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, displayHelpText)),
|
|
650
|
+
React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(ui.Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(ui.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
|
|
696
651
|
};
|
|
697
652
|
ProgressModal.displayName = 'ProgressModal';
|
|
698
653
|
|
|
699
|
-
const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
|
|
654
|
+
const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, ariaLabel = { key: 'plugin.resize' }, className, t }) => {
|
|
700
655
|
const [isResizing, setIsResizing] = React.useState(false);
|
|
701
656
|
const resizeHandleRef = React.useRef(null);
|
|
702
657
|
React.useEffect(() => {
|
|
@@ -732,11 +687,11 @@ const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight =
|
|
|
732
687
|
React.createElement("div", { ref: resizeHandleRef, className: `designbase-figma-resizable-plugin__handle ${isResizing ? 'resizing' : ''}`, onMouseDown: (e) => {
|
|
733
688
|
e.preventDefault();
|
|
734
689
|
setIsResizing(true);
|
|
735
|
-
}, role: "button", tabIndex: 0, "aria-label":
|
|
690
|
+
}, role: "button", tabIndex: 0, "aria-label": resolveText(t, ariaLabel, 'Resize plugin') }, icon || React.createElement(icons.ExpandIcon, { size: 12 }))));
|
|
736
691
|
};
|
|
737
692
|
ResizablePlugin.displayName = 'ResizablePlugin';
|
|
738
693
|
|
|
739
|
-
const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '
|
|
694
|
+
const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = { key: 'settings.modal_title' }, description = { key: 'settings.modal_description' }, className, t }) => {
|
|
740
695
|
const [tempCategories, setTempCategories] = React.useState(initialCategories);
|
|
741
696
|
const [draggedIndex, setDraggedIndex] = React.useState(null);
|
|
742
697
|
React.useEffect(() => {
|
|
@@ -829,9 +784,11 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
|
|
|
829
784
|
}
|
|
830
785
|
};
|
|
831
786
|
const modalClasses = clsx('designbase-figma-settings-modal', className);
|
|
832
|
-
|
|
787
|
+
const displayTitle = resolveText(t, title, '목록 변경');
|
|
788
|
+
const displayDescription = resolveText(t, description, '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.');
|
|
789
|
+
return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: onClose, title: displayTitle, size: "m", className: modalClasses },
|
|
833
790
|
React.createElement("div", { className: "designbase-figma-settings-modal__content" },
|
|
834
|
-
|
|
791
|
+
displayDescription && (React.createElement("p", { className: "designbase-figma-settings-modal__description" }, displayDescription)),
|
|
835
792
|
React.createElement("ul", { className: "designbase-figma-settings-modal__list" }, tempCategories.map((category, index) => (React.createElement("li", { key: category.id, draggable: true, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, className: clsx('designbase-figma-settings-modal__item', {
|
|
836
793
|
'designbase-figma-settings-modal__item--disabled': !category.enabled,
|
|
837
794
|
'designbase-figma-settings-modal__item--dragging': draggedIndex === index,
|
|
@@ -840,13 +797,13 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
|
|
|
840
797
|
React.createElement("span", { className: "designbase-figma-settings-modal__drag-handle" },
|
|
841
798
|
React.createElement(icons.GripVerticalIcon, { size: 16 })),
|
|
842
799
|
category.icon && (React.createElement("span", { className: "designbase-figma-settings-modal__category-icon" }, category.icon)),
|
|
843
|
-
React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, category.title)),
|
|
800
|
+
React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, resolveText(t, category.title))),
|
|
844
801
|
React.createElement(ui.Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
|
|
845
802
|
React.createElement("div", { className: "designbase-figma-settings-modal__footer" },
|
|
846
|
-
onReset && (React.createElement(ui.Button, { onPress: handleReset, variant: "tertiary", size: "s" },
|
|
803
|
+
onReset && (React.createElement(ui.Button, { onPress: handleReset, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.reset' }, '초기화'))),
|
|
847
804
|
React.createElement("div", { className: "designbase-figma-settings-modal__footer-right" },
|
|
848
|
-
React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" },
|
|
849
|
-
React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" },
|
|
805
|
+
React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, resolveText(t, { key: 'settings.cancel' }, '취소')),
|
|
806
|
+
React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" }, resolveText(t, { key: 'settings.save' }, '저장'))))));
|
|
850
807
|
};
|
|
851
808
|
SettingsModal.displayName = 'SettingsModal';
|
|
852
809
|
|
|
@@ -889,24 +846,6 @@ const UpgradeBanner = ({ onClick, isLoading = false, title = { key: 'banner.upgr
|
|
|
889
846
|
};
|
|
890
847
|
UpgradeBanner.displayName = 'UpgradeBanner';
|
|
891
848
|
|
|
892
|
-
const LicenseManager = ({ licenseStatus, licenseKey = '', activationLimit = 3, activationUsage = 0, usageCount = 0, onLicenseActivate, onLicenseDeactivate, isActivating = false, isDeactivating = false, className, t }) => {
|
|
893
|
-
const [inputValue, setInputValue] = React.useState('');
|
|
894
|
-
const handleLicenseSubmit = async (submittedKey) => {
|
|
895
|
-
await onLicenseActivate(submittedKey);
|
|
896
|
-
setInputValue('');
|
|
897
|
-
};
|
|
898
|
-
const handleDeactivate = async () => {
|
|
899
|
-
await onLicenseDeactivate();
|
|
900
|
-
};
|
|
901
|
-
if (licenseStatus === 'ACTIVE' && licenseKey) {
|
|
902
|
-
return (React.createElement("div", { className: `designbase-figma-license-manager ${className || ''}` },
|
|
903
|
-
React.createElement(PaymentStatusSection, { status: "PAID", usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivate, isDeactivating: isDeactivating, showDetails: true, t: t })));
|
|
904
|
-
}
|
|
905
|
-
return (React.createElement("div", { className: `designbase-figma-license-manager ${className || ''}` },
|
|
906
|
-
React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, value: inputValue, onValueChange: setInputValue, isSubmitting: isActivating, disabled: false, t: t })));
|
|
907
|
-
};
|
|
908
|
-
LicenseManager.displayName = 'LicenseManager';
|
|
909
|
-
|
|
910
849
|
exports.DonationBadge = DonationBadge;
|
|
911
850
|
exports.FigmaContainer = FigmaContainer;
|
|
912
851
|
exports.FigmaFooter = FigmaFooter;
|
|
@@ -916,8 +855,6 @@ exports.FigmaSidebar = FigmaSidebar;
|
|
|
916
855
|
exports.FormWithSubmit = FormWithSubmit;
|
|
917
856
|
exports.InteractionFeedback = InteractionFeedback;
|
|
918
857
|
exports.LanguageSelector = LanguageSelector;
|
|
919
|
-
exports.LicenseManager = LicenseManager;
|
|
920
|
-
exports.LogoDropdown = LogoDropdown;
|
|
921
858
|
exports.PageLicense = PageLicense;
|
|
922
859
|
exports.PaymentBadge = PaymentBadge;
|
|
923
860
|
exports.PaymentStatusSection = PaymentStatusSection;
|