‏Tour Kit؛ کتابخونهٔ آنبوردینگ برای React، Vue و Svelte

Tour Kit (که سایتش اسم userTourKit داره) یه کتابخونه برای ساختن product tour هست، یعنی همون راهنمای قدم‌به‌قدمی که موقع اولین ورود، بخش‌های مختلف اپ رو به کاربر نشون می‌ده. از React، Vue و Svelte پشتیبانی می‌کنه و تیم سازنده می‌گه مراحل کار تو هر سه یکیه و فقط پکیج adapter عوض می‌شه.

معماریش headless هست، یعنی کتابخونه فقط منطق و state رو مدیریت می‌کنه و ظاهر رو خودت با کامپوننت‌های خودت می‌سازی. نمونه‌ای که تو سایت اومده اینه:

const tour = useTour('onboarding', {
  steps: [
    { target: '#sidebar', title: 'Nav' },
    { target: '#search', title: 'Search' },
  ],
});

هر step با یه selector به یه المان صفحه وصل می‌شه و بعد با tour.currentStep و tour.tooltipProps هر جور خواستی رندرش می‌کنی. اگه عجله داری، پکیج @tour-kit/react کامپوننت‌های آماده مثل Tour و TourStep رو هم داره.

دسترس‌پذیری در سطح WCAG 2.1 AA از اول تو طراحی بوده، یعنی focus trap، جابه‌جایی بین مراحل با کلیدهای جهت‌نما، بستن با Escape و اعلام مراحل به screen reader خودکار انجام می‌شه. کل کتابخونه با TypeScript در حالت strict نوشته شده و تایپ داده‌های هر step تا callbackهایی مثل onComplete درست منتقل می‌شه.

تیم روی حجم هم تأکید داره: اگه فقط useTour رو import کنی، هسته حدود 3.9 کیلوبایت (brotli) می‌شه و این سقف تو CI چک می‌شه. پکیج React زیر 12 کیلوبایت و پکیج hints زیر 6.5 کیلوبایته. کنارش افزونه‌هایی برای چک‌لیست آنبوردینگ، نظرسنجی NPS، اعلان، زمان‌بندی و آنالیتیکس (PostHog، Mixpanel، Amplitude، GA4) هم هست.

مدل لایسنسش متن‌باز به معنای کامل نیست. کد با BSL 1.1 در دسترسه، برای توسعه، ارزیابی و CI رایگانه و برای پروداکشن از 9.99 دلار به‌صورت یه‌باره پول می‌گیره، بدون اشتراک ماهانه.

نکات کلیدی:

• پشتیبانی از React، Vue و Svelte با یه هستهٔ مشترک
• هستهٔ @tour-kit/core حدود 3.9 کیلوبایت brotli
• دسترس‌پذیری WCAG 2.1 AA و سازگاری با shadcn/ui
• ده پکیج جدا، از جمله checklists، surveys و analytics
• لایسنس BSL 1.1؛ رایگان در توسعه، از 9.99 دلار یه‌باره برای پروداکشن