@designbasekorea/figma-ui 0.7.1 → 0.7.2
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.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +95 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +95 -23
- package/dist/index.js.map +1 -1
- package/package.json +100 -100
package/dist/index.js
CHANGED
|
@@ -52,6 +52,20 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
52
52
|
'form.submit': '제출',
|
|
53
53
|
'form.verifying': '확인 중...',
|
|
54
54
|
'license.youtube_membership': 'YouTube 멤버십',
|
|
55
|
+
'license.unlock_unlimited': '무제한 사용 활성화',
|
|
56
|
+
'license.unlock_unlimited_description': '라이선스 키를 등록하면 모든 Designbase 플러그인의 프로 기능과 무제한 사용을 이용할 수 있습니다.',
|
|
57
|
+
'license.get_key_title': '라이선스 키 받기',
|
|
58
|
+
'license.get_key_description': '멤버십 회원에게 매월 새 라이선스 키가 제공됩니다.',
|
|
59
|
+
'license.get_key_step_1_title': '멤버십 가입',
|
|
60
|
+
'license.get_key_step_1_description': 'Designbase YouTube 채널에서 멤버십에 가입합니다.',
|
|
61
|
+
'license.get_key_step_2_title': '이번 달 키 복사',
|
|
62
|
+
'license.get_key_step_2_description': '멤버 전용 커뮤니티 게시글에서 키를 확인합니다.',
|
|
63
|
+
'license.get_key_step_3_title': '키 등록',
|
|
64
|
+
'license.get_key_step_3_description': '아래 입력창에 붙여 넣으면 프로 기능이 열립니다.',
|
|
65
|
+
'license.get_key_cta': '멤버십 가입하고 키 받기',
|
|
66
|
+
'license.activate_key_title': '라이선스 키 등록',
|
|
67
|
+
'license.activate_key_description': '이미 키가 있다면 아래에 붙여 넣어 프로 기능을 활성화하세요.',
|
|
68
|
+
'license.unlock_pro_features': '프로 기능 활성화',
|
|
55
69
|
'license.current_plan': '현재 플랜',
|
|
56
70
|
'license.pro_plan': '프로 플랜',
|
|
57
71
|
'license.membership': '멤버십',
|
|
@@ -83,7 +97,7 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
83
97
|
'license.submit': '활성화',
|
|
84
98
|
'license.verifying': '확인 중...',
|
|
85
99
|
'license.enter_from_email': '이메일로 받은 라이선스 키를 입력하세요.',
|
|
86
|
-
'license.enter_from_youtube': '멤버 전용
|
|
100
|
+
'license.enter_from_youtube': '멤버 전용 게시글에서 복사한 이번 달 키를 입력하세요.',
|
|
87
101
|
'license.help_link': '라이선스·결제 도움말',
|
|
88
102
|
'license.youtube_membership_howto': '이용 방법',
|
|
89
103
|
'license.youtube_membership_step_1': 'Designbase YouTube 채널 멤버십에 가입합니다.',
|
|
@@ -190,6 +204,20 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
190
204
|
'form.submit': 'Activate',
|
|
191
205
|
'form.verifying': 'Verifying...',
|
|
192
206
|
'license.youtube_membership': 'YouTube Membership',
|
|
207
|
+
'license.unlock_unlimited': 'Unlock Unlimited Access',
|
|
208
|
+
'license.unlock_unlimited_description': 'Add a license key to unlock Pro features and unlimited use across Designbase plugins.',
|
|
209
|
+
'license.get_key_title': 'Get a license key',
|
|
210
|
+
'license.get_key_description': 'Members receive a new license key every month.',
|
|
211
|
+
'license.get_key_step_1_title': 'Join the membership',
|
|
212
|
+
'license.get_key_step_1_description': 'Join the Designbase YouTube channel membership.',
|
|
213
|
+
'license.get_key_step_2_title': 'Copy this month’s key',
|
|
214
|
+
'license.get_key_step_2_description': 'Find the key in the members-only community post.',
|
|
215
|
+
'license.get_key_step_3_title': 'Activate the key',
|
|
216
|
+
'license.get_key_step_3_description': 'Paste it below to unlock Pro features.',
|
|
217
|
+
'license.get_key_cta': 'Join and get a license key',
|
|
218
|
+
'license.activate_key_title': 'Activate your license key',
|
|
219
|
+
'license.activate_key_description': 'Already have a key? Paste it below to unlock Pro features.',
|
|
220
|
+
'license.unlock_pro_features': 'Unlock Pro features',
|
|
193
221
|
'license.current_plan': 'Current plan',
|
|
194
222
|
'license.pro_plan': 'Pro plan',
|
|
195
223
|
'license.membership': 'Membership',
|
|
@@ -221,7 +249,7 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
221
249
|
'license.submit': 'Activate',
|
|
222
250
|
'license.verifying': 'Verifying...',
|
|
223
251
|
'license.enter_from_email': 'Enter the license key you received by email.',
|
|
224
|
-
'license.enter_from_youtube': 'Enter
|
|
252
|
+
'license.enter_from_youtube': 'Enter this month’s key copied from the members-only post.',
|
|
225
253
|
'license.help_link': 'License · payment help',
|
|
226
254
|
'license.youtube_membership_howto': 'How to use',
|
|
227
255
|
'license.youtube_membership_step_1': 'Join the Designbase YouTube channel membership.',
|
|
@@ -328,6 +356,20 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
328
356
|
'form.submit': '有効化',
|
|
329
357
|
'form.verifying': '確認中...',
|
|
330
358
|
'license.youtube_membership': 'YouTubeメンバーシップ',
|
|
359
|
+
'license.unlock_unlimited': '無制限アクセスを有効化',
|
|
360
|
+
'license.unlock_unlimited_description': 'ライセンスキーを登録すると、DesignbaseプラグインのPro機能を無制限で利用できます。',
|
|
361
|
+
'license.get_key_title': 'ライセンスキーを取得',
|
|
362
|
+
'license.get_key_description': 'メンバーには毎月新しいライセンスキーが提供されます。',
|
|
363
|
+
'license.get_key_step_1_title': 'メンバーシップに参加',
|
|
364
|
+
'license.get_key_step_1_description': 'Designbase YouTubeチャンネルのメンバーシップに参加します。',
|
|
365
|
+
'license.get_key_step_2_title': '今月のキーをコピー',
|
|
366
|
+
'license.get_key_step_2_description': 'メンバー限定コミュニティの投稿でキーを確認します。',
|
|
367
|
+
'license.get_key_step_3_title': 'キーを登録',
|
|
368
|
+
'license.get_key_step_3_description': '下の入力欄に貼り付けるとPro機能が利用できます。',
|
|
369
|
+
'license.get_key_cta': '参加してライセンスキーを取得',
|
|
370
|
+
'license.activate_key_title': 'ライセンスキーを登録',
|
|
371
|
+
'license.activate_key_description': 'キーをお持ちの場合は、下に貼り付けてPro機能を有効化してください。',
|
|
372
|
+
'license.unlock_pro_features': 'Pro機能を有効化',
|
|
331
373
|
'license.current_plan': '現在のプラン',
|
|
332
374
|
'license.pro_plan': 'Proプラン',
|
|
333
375
|
'license.membership': 'メンバーシップ',
|
|
@@ -359,7 +401,7 @@ const FIGMA_UI_TRANSLATIONS = {
|
|
|
359
401
|
'license.submit': '有効化',
|
|
360
402
|
'license.verifying': '確認中...',
|
|
361
403
|
'license.enter_from_email': 'メールで受け取ったライセンスキーを入力してください。',
|
|
362
|
-
'license.enter_from_youtube': '
|
|
404
|
+
'license.enter_from_youtube': 'メンバー限定投稿からコピーした今月のキーを入力してください。',
|
|
363
405
|
'license.help_link': 'ライセンス・支払いヘルプ',
|
|
364
406
|
'license.youtube_membership_howto': '利用方法',
|
|
365
407
|
'license.youtube_membership_step_1': 'Designbase YouTubeチャンネルのメンバーシップに参加します。',
|
|
@@ -1488,19 +1530,34 @@ const LicenseOffer = ({ joinUrl, guideUrl, membershipUrl, t, locale, className,
|
|
|
1488
1530
|
const titleId = `designbase-license-offer-title-${React.useId().replace(/:/g, '')}`;
|
|
1489
1531
|
const resolvedJoinUrl = joinUrl || membershipUrl;
|
|
1490
1532
|
const steps = [
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1533
|
+
{
|
|
1534
|
+
title: resolveText(translate, { key: 'license.get_key_step_1_title' }, '멤버십 가입'),
|
|
1535
|
+
description: resolveText(translate, { key: 'license.get_key_step_1_description' }, 'Designbase YouTube 채널에서 멤버십에 가입합니다.'),
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
title: resolveText(translate, { key: 'license.get_key_step_2_title' }, '이번 달 키 복사'),
|
|
1539
|
+
description: resolveText(translate, { key: 'license.get_key_step_2_description' }, '멤버 전용 커뮤니티 게시글에서 키를 확인합니다.'),
|
|
1540
|
+
},
|
|
1541
|
+
{
|
|
1542
|
+
title: resolveText(translate, { key: 'license.get_key_step_3_title' }, '키 등록'),
|
|
1543
|
+
description: resolveText(translate, { key: 'license.get_key_step_3_description' }, '아래 입력창에 붙여 넣으면 프로 기능이 열립니다.'),
|
|
1544
|
+
},
|
|
1494
1545
|
];
|
|
1495
1546
|
return (React.createElement("section", { className: `designbase-figma-license-offer ${className || ''}`, "aria-labelledby": titleId },
|
|
1496
|
-
React.createElement("
|
|
1547
|
+
React.createElement("header", { className: "designbase-figma-license-offer__header" },
|
|
1548
|
+
React.createElement("span", { className: "designbase-figma-license-offer__section-index", "aria-hidden": "true" }, "1"),
|
|
1549
|
+
React.createElement("div", null,
|
|
1550
|
+
React.createElement("h3", { id: titleId, className: "designbase-figma-license-offer__title" }, resolveText(translate, { key: 'license.get_key_title' }, '라이선스 키 받기')),
|
|
1551
|
+
React.createElement("p", { className: "designbase-figma-license-offer__description" }, resolveText(translate, { key: 'license.get_key_description' }, '멤버십 회원에게 매월 새 라이선스 키가 제공됩니다.')))),
|
|
1497
1552
|
React.createElement("ol", { className: "designbase-figma-license-offer__steps" }, steps.map((step, index) => (React.createElement("li", { key: index },
|
|
1498
|
-
React.createElement("span", { className: "designbase-figma-license-offer__step-index", "aria-hidden": "true" },
|
|
1499
|
-
|
|
1500
|
-
".
|
|
1501
|
-
|
|
1553
|
+
React.createElement("span", { className: "designbase-figma-license-offer__step-index", "aria-hidden": "true" }, index + 1),
|
|
1554
|
+
React.createElement("span", { className: "designbase-figma-license-offer__step-copy" },
|
|
1555
|
+
React.createElement("strong", null, step.title),
|
|
1556
|
+
React.createElement("span", null, step.description)))))),
|
|
1502
1557
|
(resolvedJoinUrl || guideUrl) && (React.createElement("div", { className: "designbase-figma-license-offer__actions" },
|
|
1503
|
-
resolvedJoinUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true },
|
|
1558
|
+
resolvedJoinUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(resolvedJoinUrl), variant: "primary", size: "m", fullWidth: true },
|
|
1559
|
+
React.createElement("span", null, resolveText(translate, { key: 'license.get_key_cta' }, '멤버십 가입하고 키 받기')),
|
|
1560
|
+
React.createElement(icons.ExternalLinkIcon, { size: 16, "aria-hidden": "true" }))),
|
|
1504
1561
|
guideUrl && (React.createElement(react.Button, { onPress: () => openExternalUrl(guideUrl), variant: "secondary", size: "m", fullWidth: true },
|
|
1505
1562
|
React.createElement("span", null, resolveText(translate, { key: 'license.youtube_membership_guide' }, '안내보기')),
|
|
1506
1563
|
React.createElement(icons.ExternalLinkIcon, { size: 16, "aria-hidden": "true" })))))));
|
|
@@ -1932,7 +1989,7 @@ function useFigmaLicenseBridge(options = {}) {
|
|
|
1932
1989
|
function formatUsageLabel(state, t) {
|
|
1933
1990
|
const { remainingUsage, usageUsed, usageLimit, usageReset } = state;
|
|
1934
1991
|
if (usageLimit === 'unlimited') {
|
|
1935
|
-
return resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음') ?? '사용 횟수 제한 없음';
|
|
1992
|
+
return (resolveText(t, { key: 'license.usage_unlimited' }, '사용 횟수 제한 없음') ?? '사용 횟수 제한 없음');
|
|
1936
1993
|
}
|
|
1937
1994
|
const limit = typeof usageLimit === 'number' ? usageLimit : remainingUsage + usageUsed;
|
|
1938
1995
|
const remaining = remainingUsage ?? Math.max(0, limit - usageUsed);
|
|
@@ -1951,7 +2008,7 @@ function formatUsageLabel(state, t) {
|
|
|
1951
2008
|
const translated = resolveText(t, { key: 'license.usage_weekly', values: { remaining, limit } }, fallback) ?? fallback;
|
|
1952
2009
|
return translated.includes(String(remaining)) ? translated : fallback;
|
|
1953
2010
|
}
|
|
1954
|
-
return resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}
|
|
2011
|
+
return (resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}`);
|
|
1955
2012
|
}
|
|
1956
2013
|
const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', licenseStatus: initialLicenseStatus, licenseSource: initialLicenseSource, accessScope: initialAccessScope, expiresAt: initialExpiresAt, lastVerifiedAt: initialLastVerifiedAt, wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, locale, className, }) => {
|
|
1957
2014
|
const { t: translate } = useFigmaUiI18n(locale, t);
|
|
@@ -2000,20 +2057,22 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
|
|
|
2000
2057
|
React.createElement("div", { className: "designbase-figma-page-license__content" },
|
|
2001
2058
|
React.createElement("div", { className: "designbase-figma-page-license__header" },
|
|
2002
2059
|
React.createElement("div", { className: "designbase-figma-page-license__title" },
|
|
2003
|
-
React.createElement("h2", null,
|
|
2004
|
-
? resolveText(translate, { key: 'license.
|
|
2005
|
-
:
|
|
2006
|
-
? resolveText(translate, { key: 'license.
|
|
2060
|
+
React.createElement("h2", null, isPaid
|
|
2061
|
+
? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
|
|
2062
|
+
: isMembershipMode
|
|
2063
|
+
? resolveText(translate, { key: 'license.unlock_unlimited' }, '무제한 사용 활성화')
|
|
2007
2064
|
: resolveText(translate, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
|
|
2008
2065
|
isPaid && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, resolveText(translate, { key: 'license.pro_plan' }, '프로 플랜')))),
|
|
2009
2066
|
React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
|
|
2010
2067
|
? resolveText(translate, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
|
|
2011
2068
|
: isMembershipMode
|
|
2012
|
-
? resolveText(translate, { key: 'license.
|
|
2069
|
+
? resolveText(translate, { key: 'license.unlock_unlimited_description' }, '라이선스 키를 등록하면 모든 Designbase 플러그인의 프로 기능과 무제한 사용을 이용할 수 있습니다.')
|
|
2013
2070
|
: resolveText(translate, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
|
|
2014
2071
|
!isPaid && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
|
|
2015
2072
|
!isMembershipMode && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: translate })),
|
|
2016
|
-
state.lastMessage &&
|
|
2073
|
+
state.lastMessage &&
|
|
2074
|
+
state.lastErrorCode &&
|
|
2075
|
+
!state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}`, "aria-live": "polite" }, state.lastMessage)),
|
|
2017
2076
|
isPaid && (React.createElement("div", { className: "designbase-figma-page-license__paid-summary" },
|
|
2018
2077
|
React.createElement("div", { className: "designbase-figma-page-license__paid-hero" },
|
|
2019
2078
|
React.createElement("span", { "aria-hidden": "true" }, "\u221E"),
|
|
@@ -2040,7 +2099,8 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
|
|
|
2040
2099
|
React.createElement("p", { className: "designbase-figma-page-license__deactivate-hint" }, resolveText(translate, { key: 'license.deactivate_hint' }, '이 기기에서 라이선스 연결을 해제합니다.'))))),
|
|
2041
2100
|
!isPaid && (React.createElement(React.Fragment, null,
|
|
2042
2101
|
isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })),
|
|
2043
|
-
!isMembershipMode &&
|
|
2102
|
+
!isMembershipMode &&
|
|
2103
|
+
(enableAccountAuth || links.purchaseUrl || links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
2044
2104
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
2045
2105
|
React.createElement("h3", null, resolveText(translate, { key: 'license.designbase_account' }, '디자인베이스 계정'))),
|
|
2046
2106
|
React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, { key: 'license.designbase_account_hint' }, 'WordPress 계정으로 로그인하거나 멤버십을 구매하면 플러그인이 자동으로 활성화됩니다.')),
|
|
@@ -2058,8 +2118,20 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
|
|
|
2058
2118
|
? 'designbase-figma-page-license__key-form'
|
|
2059
2119
|
: 'designbase-figma-page-license__section' },
|
|
2060
2120
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
2061
|
-
React.createElement("
|
|
2062
|
-
|
|
2121
|
+
isMembershipMode && (React.createElement("span", { className: "designbase-figma-page-license__section-index", "aria-hidden": "true" }, "2")),
|
|
2122
|
+
React.createElement("h3", null, isMembershipMode
|
|
2123
|
+
? resolveText(translate, { key: 'license.activate_key_title' }, '라이선스 키 등록')
|
|
2124
|
+
: resolveText(translate, { key: 'license.enter_key' }, '라이선스 키 입력'))),
|
|
2125
|
+
isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, { key: 'license.activate_key_description' }, '이미 키가 있다면 아래에 붙여 넣어 프로 기능을 활성화하세요.'))),
|
|
2126
|
+
React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: {
|
|
2127
|
+
key: isMembershipMode
|
|
2128
|
+
? 'license.unlock_pro_features'
|
|
2129
|
+
: 'license.submit',
|
|
2130
|
+
}, submittingText: { key: 'license.verifying' }, helperText: {
|
|
2131
|
+
key: isMembershipMode
|
|
2132
|
+
? 'license.enter_from_youtube'
|
|
2133
|
+
: 'license.enter_from_email',
|
|
2134
|
+
}, t: translate }))))),
|
|
2063
2135
|
links.helpUrl && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
|
|
2064
2136
|
React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(translate, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
|
|
2065
2137
|
React.createElement(react.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": translate('close') },
|