डिज़ाइन सिस्टम कंपोनेंट डॉक्यूमेंटेशन राइटर

आप एक डिज़ाइन सिस्टम विशेषज्ञ हैं जिन्होंने Atlassian, Shopify, और IBM में डिज़ाइन सिस्टम पर काम किया है। आपका दस्तावेज़ीकरण स्पष्ट, व्यापक, और डेवलपर-अनुकूल होने के लिए जाना जाता है। मुझे एक डिज़ाइन सिस्टम कंपोनेंट के लिए पूर्ण दस्तावेज़ीकरण लिखने की आवश्यकता है। ## कंपोनेंट जानकारी कंपोनेंट का नाम: [COMPONENT_NAME] कंपोनेंट प्रकार: [जैसे, Button, Input, Modal, Card, आदि] डिज़ाइन सिस्टम का नाम: [YOUR_DESIGN_SYSTEM_NAME] टेक स्टैक: [जैसे, React + TypeScript, Vue, आदि] ## इन अनुभागों के साथ दस्तावेज़ीकरण तैयार करें: ### 1. अवलोकन (OVERVIEW) - कंपोनेंट क्या करता है इसका एक-वाक्य विवरण - इस कंपोनेंट का उपयोग कब करें (2-3 बुलेट पॉइंट) - इस कंपोनेंट का उपयोग कब न करें (विकल्पों के साथ) - विज़ुअल उदाहरण विवरण (डिफ़ॉल्ट स्थिति का वर्णन करें) ### 2. संरचना (ANATOMY) कंपोनेंट के प्रत्येक भाग का वर्णन करें: - कंटेनर/रैपर - आइकन (यदि लागू हो) - लेबल/टेक्स्ट - सहायक तत्व - इंटरैक्टिव स्थितियाँ क्रमांकित आरेख विवरण प्रारूप का उपयोग करें: "1. कंटेनर - बाहरी रैपर जो सभी तत्वों को रखता है..." ### 3. वेरिएंट (VARIANTS) प्रत्येक वेरिएंट के लिए, प्रदान करें: - वेरिएंट का नाम - उपयोग का मामला (इस वेरिएंट का उपयोग कब करें) - विज़ुअल विवरण - उदाहरण परिदृश्य विचार करने के लिए सामान्य वेरिएंट: - आकार वेरिएंट (छोटा, मध्यम, बड़ा) - शैली वेरिएंट (प्राथमिक, द्वितीयक, घोस्ट, आउटलाइन) - स्थिति वेरिएंट (डिफ़ॉल्ट, होवर, सक्रिय, अक्षम, लोडिंग) ### 4. प्रॉप्स / API कॉलम के साथ एक प्रॉप्स तालिका बनाएं: | प्रॉप | प्रकार | डिफ़ॉल्ट | आवश्यक | विवरण | शामिल करें: - सभी कस्टमाइज़ेशन प्रॉप्स - इवेंट हैंडलर (onClick, onChange, आदि) - एक्सेसिबिलिटी प्रॉप्स (aria-label, आदि) - स्टाइल ओवरराइड प्रॉप्स ### 5. उपयोग दिशानिर्देश (USAGE GUIDELINES) #### करें (Do): - स्पष्टीकरण के साथ 4-5 सर्वोत्तम अभ्यास सूचीबद्ध करें - प्रत्येक दिशानिर्देश के लिए तर्क शामिल करें #### न करें (Dont): - बचने के लिए 4-5 एंटी-पैटर्न सूचीबद्ध करें - समझाएं कि प्रत्येक समस्याग्रस्त क्यों है ### 6. एक्सेसिबिलिटी (A11Y) - कीबोर्ड नेविगेशन आवश्यकताएँ - स्क्रीन रीडर संबंधी विचार - आवश्यक ARIA विशेषताएँ - रंग कंट्रास्ट आवश्यकताएँ - फोकस प्रबंधन - टच टार्गेट आकार (मोबाइल) ### 7. कोड उदाहरण (CODE EXAMPLES) 3-4 कोड उदाहरण प्रदान करें: उदाहरण 1: बुनियादी उपयोग ```[भाषा] // केवल आवश्यक प्रॉप्स के साथ सरल कार्यान्वयन ``` उदाहरण 2: सभी विकल्पों के साथ ```[भाषा] // सभी प्रॉप्स दिखाने वाला पूर्ण-विशेषताओं वाला कार्यान्वयन ``` उदाहरण 3: सामान्य पैटर्न ```[भाषा] // वास्तविक-विश्व उपयोग पैटर्न (जैसे, फॉर्म में) ``` उदाहरण 4: संयोजन (Composition) ```[भाषा] // अन्य कंपोनेंट्स के साथ कैसे संयोजित करें ``` ### 8. संबंधित कंपोनेंट्स (RELATED COMPONENTS) 3-5 संबंधित कंपोनेंट्स सूचीबद्ध करें: - कंपोनेंट का नाम - संबंध (जैसे, "अक्सर एक साथ उपयोग किया जाता है", "के लिए विकल्प...") - लिंक प्लेसहोल्डर ### 9. परिवर्तन लॉग (CHANGELOG) संस्करण इतिहास के लिए एक टेम्पलेट बनाएं: | संस्करण | दिनांक | परिवर्तन | |---------|------|---------| | 1.0.0 | YYYY-MM-DD | प्रारंभिक रिलीज़ | ### 10. FIGMA / डिज़ाइन स्पेक्स इसके लिए प्लेसहोल्डर शामिल करें: - Figma कंपोनेंट लिंक - स्पेसिंग विशिष्टताएँ - टाइपोग्राफी विशिष्टताएँ - उपयोग किए गए रंग टोकन दस्तावेज़ीकरण को स्पष्ट शीर्षकों, तालिकाओं और कोड ब्लॉक के साथ स्कैन करने योग्य बनाएं। मैत्रीपूर्ण लेकिन पेशेवर स्वर का उपयोग करें। जहाँ उचित हो वहाँ कॉलआउट बॉक्स में सहायक टिप्स शामिल करें।