‏drawably: کنترل‌های UI که انگار با خودکار کشیده شدن

drawably یه کتابخونه برای ساختن کنترل‌های UI با ظاهر دست‌کشه. هر بار که یه کنترل mount می‌شه، یه طرح جدید با تصادفی بودن seedدار کشیده می‌شه؛ یعنی اگه seed ندید هر بار شکل فرق می‌کنه، اگه یه عدد بدید همیشه همون طرح تکرار می‌شه. خطوط هم «boil» می‌کنن، یعنی مثل یه انیمیشن دستی مدام کمی می‌لرزن. کل کتابخونه بدون وابستگیه، حدود ۹ کیلوبایت JS بعد از gzip، کمتر از ۱ کیلوبایت برای wrapperهای React و یه استایل‌شیت ۳ کیلوبایتی.

تقریباً همهٔ کنترل‌های رایج رو پوشش می‌ده: دکمه، چک‌باکس، رادیو، toggle، اینپوت، textarea، select، کارت، badge، لیست و divider. نکتهٔ مهمش اینه که المان‌های واقعی تو DOM می‌مونن و طرح فقط یه SVG با aria-hidden هست که زیرشون می‌شینه. پس کیبورد، فرم‌ها، labelها و اسکرین‌ریدرها بدون تغییر کار می‌کنن. تو Chromium حتی لیست گزینه‌های select هم قاب دست‌کش می‌گیره، ولی Safari و Firefox همون پاپ‌آپ سیستم‌عامل رو نشون می‌دن.

دکمه‌ها سه حالت ظاهری دارن (outline، solid و scribble) و یه state machine برای کارای async هم دارن. هر تابع یه handle برمی‌گردونه که باهاش می‌شه وضعیت رو عوض کرد:

const button = drawablyButton(el);
button.setState("loading");  // dims the button, boils faster
button.setState("error");    // redraws in red
button.setState("success");  // redraws in green
button.setState("idle");

تو React هم کافیه پراپ state رو بدید و طرح سر جاش می‌مونه، فقط حالتش عوض می‌شه. جدا از کنترل‌ها، ابزارهای تزئین متن هم داره: زیرخط، هایلایت ماژیکی، دایره دور کلمه و فلش از یه المان به یه المان دیگه. یه سری کامپوننت ترکیبی هم مثل تب، تولتیپ، alert، pager و kbd داره که با یه seed کل خطوطشون قابل تکرار می‌شه.

رنگ‌ها CSS custom property هستن (مثل --drawably-stroke و --drawably-fill) و می‌شه یه بار تو تم تنظیمشون کرد. لرزش خطوط با سه فریم و CSS خالص هر ۱۲۰۰ میلی‌ثانیه چرخه می‌زنه و اگه کاربر prefers-reduced-motion رو روشن کرده باشه، همه‌چی ثابت می‌شه. یه فونت اختیاری ۳۱ کیلوبایتی به اسم Drawably Pen هم هست که با همون کد قلم ساخته شده. خود رندرکنندهٔ زبر هم export شده تا بشه شکل‌های دلخواه ساخت.

نکات کلیدی:

• حدود ۹ کیلوبایت JS بعد از gzip، بدون هیچ وابستگی، با لایسنس MIT.
• المان‌های واقعی HTML حفظ می‌شن و طرح یه SVG با aria-hidden زیرشونه.
• با seed یه طرح ثابت و قابل تکرار می‌گیرید و با resketch() دوباره کشیده می‌شه.
• دکمه‌ها حالت‌های loading، error، success و idle دارن.
• با prefers-reduced-motion انیمیشن کامل خاموش می‌شه.
• فلش‌ها به body اضافه می‌شن و داخل کانتینر اسکرول‌شونده جابه‌جا می‌شن.