shadcn कंपोनेंट विज़ुअल एडाप्टर

# shadcn कंपोनेंट विज़ुअल अडैप्टर ## उद्देश्य `${component_file_path}` पर स्थित मौजूदा `${component_name}` कंपोनेंट को रेफरेंस कंपोनेंट के विज़ुअल डिज़ाइन, संरचना और व्यवहार से मेल खाने के लिए रीफैक्टर करें, जो यहां उपलब्ध है: > ${install_command:bunx --bun shadcn@latest add accordion} ${reference_url:} ← वैकल्पिक; यदि कोई डॉक्स पेज मौजूद नहीं है तो खाली छोड़ें बिज़नेस लॉजिक, मौजूदा प्रॉप्स इंटरफेस, या डेटा-फेचिंग पैटर्न को न बदलें। उन्हें संरक्षित रखें। केवल विज़ुअल लेयर को अडैप्ट करें: मार्कअप संरचना, क्लास नाम, एनिमेशन और एक्सेसिबिलिटी एट्रिब्यूट। ## चरण 1 - मौजूदा कंपोनेंट का विश्लेषण करें कोई भी कोड लिखने से पहले: 1. `${component_file_path}` का पूरा सोर्स पढ़ें। 2. मैप करें: - सभी प्रॉप्स और उनके प्रकार (TypeScript इंटरफेस या PropTypes)। - आंतरिक स्टेट वेरिएबल (`useState`, `useReducer`, Zustand स्लाइस, आदि)। - कंज़्यूम किए गए कॉन्टेक्स्ट प्रोवाइडर या कस्टम हुक। - रेंडर किए गए चाइल्ड कंपोनेंट और वे कहां रहते हैं। - पैरेंट को एक्सपोज़ किए गए इवेंट हैंडलर और कॉलबैक। 3. हर इम्पोर्ट की सूची बनाएं - उन्हें फ्लैग करें जो shadcn प्रिमिटिव के साथ टकराएंगे या उन्हें बदला जा सकता है। कोई भी कोड छूने से पहले एक संक्षिप्त ऑडिट टेबल आउटपुट करें: | आइटम | वर्तमान मान | कार्रवाई | |------|--------------|--------| | प्रॉप्स | ... | रखें / नाम बदलें / हटाएं | | स्टेट | ... | रखें / माइग्रेट करें | | कॉन्टेक्स्ट/हुक | ... | रखें / बदलें | | सब-कंपोनेंट | ... | रखें / बदलें | | डिपेंडेंसीज़ | ... | रखें / इंस्टॉल करें / हटाएं | ## चरण 2 - डिपेंडेंसी रिज़ॉल्यूशन इंस्टॉल कमांड सीधे चलाएं: ${install_command} कमांड पूरा होने के बाद, जनरेट की गई फाइलें ${components_dir:components/ui}/ में दिखाई देंगी। उन फाइलों का उपयोग करके चरण 3 पर आगे बढ़ें। ## चरण 3 - रेफरेंस कंपोनेंट की समीक्षा करें यदि ${reference_url} प्रदान किया गया है → इसे फेच करें और पहले की तरह विज़ुअल स्पेक निकालें। यदि ${reference_url} खाली है → चरण 2 में CLI कमांड द्वारा डाउनलोड की गई फाइलों को पढ़ें और सोर्स कोड से सीधे समान जानकारी निकालें: - cva वेरिएंट स्कीमा - data-state / data-disabled एट्रिब्यूट - एनिमेशन/ट्रांज़िशन क्लास - ARIA भूमिकाएं और प्रॉप्स - cn() उपयोग पैटर्न ## चरण 4 - कंपोनेंट को रीफैक्टर करें चरण 3 से विज़ुअल संरचना को चरण 1 के मौजूदा कंपोनेंट पर लागू करें। ### नियम: - ✅ सभी मौजूदा प्रॉप नाम और प्रकार रखें जब तक कि सीधा shadcn समकक्ष मौजूद न हो। - ✅ सभी डेटा-फेचिंग, बिज़नेस लॉजिक और कॉलबैक रखें। - ✅ लचीलापन बनाए रखने के लिए `forwardRef` का उपयोग करके Radix प्रिमिटिव को रैप करें और `...props` स्प्रेड करें। - ✅ सभी className मर्जिंग के लिए `cn()` का उपयोग करें - कभी भी स्ट्रिंग कॉन्केटनेशन न करें। - ✅ यदि रेफरेंस कंपोनेंट उनका उपयोग करता है तो नामित कंपाउंड सब-कंपोनेंट एक्सपोर्ट करें (जैसे, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`)। - ❌ जनरेट की गई shadcn फाइल को इम्पोर्ट करके री-एक्सपोर्ट न करें - लॉजिक को सह-स्थित रखने के लिए प्रिमिटिव को रीफैक्टर की गई फाइल में इनलाइन बनाएं। - ❌ स्पष्ट निर्देश के बिना रेफरेंस कंपोनेंट में मौजूद न होने वाली Tailwind क्लास न जोड़ें। ### रिस्पॉन्सिव व्यवहार (`${responsive_breakpoints:sm md lg}`): मोबाइल-फर्स्ट रिस्पॉन्सिव क्लास लागू करें। पुष्टि करें कि `tailwind.config.ts` में वर्तमान ब्रेकपॉइंट प्रोजेक्ट के कन्वेंशन से मेल खाते हैं। यदि रेफरेंस कंटेनर क्वेरी का उपयोग करता है, तो `@tailwindcss/container-queries` इंस्टॉल करें। ## चरण 5 - कॉन्टेक्स्ट प्रोवाइडर और हुक यदि रेफरेंस कंपोनेंट को कॉन्टेक्स्ट प्रोवाइडर की आवश्यकता है (जैसे, `ToastProvider`, `TooltipProvider`): 1. जांचें कि क्या यह पहले से `${provider_file:app/layout.tsx}` या `${provider_file:app/providers.tsx}` में माउंटेड है। 2. यदि नहीं, तो इसे उपयुक्त लेआउट फाइल में जोड़ें। सटीक डिफ प्रदान करें। 3. यदि कस्टम हुक की आवश्यकता है (जैसे, `useToast`, `useDialog`), तो इसे `${hooks_dir:hooks/}` में रखें और वहां से इम्पोर्ट करें। ## चरण 6 - स्पष्टीकरण प्रश्न (अज्ञात होने पर जनरेट करने से पहले पूछें) यदि निम्न में से कोई भी मौजूदा कोड से निर्धारित नहीं किया जा सकता है, तो लिखने से पहले पूछें: 1. **डेटा/प्रॉप्स**: किस आकार का डेटा पास किया जाएगा? (यदि सहायक हो तो एक नमूना ऑब्जेक्ट प्रदान करें।) 2. **स्टेट मैनेजमेंट**: क्या कंपोनेंट स्टेट लोकल है, या बाहरी रूप से प्रबंधित है (Zustand, Redux, React Query)? 3. **एसेट्स**: क्या lucide-react द्वारा कवर नहीं किए गए आवश्यक इमेज, लोगो या कस्टम आइकन हैं? 4. **रिस्पॉन्सिव**: `${responsive_breakpoints:sm md lg}` ब्रेकपॉइंट पर अपेक्षित लेआउट क्या है? 5. **प्लेसमेंट**: यह कंपोनेंट ऐप रूटिंग/लेआउट ट्री में कहां रहेगा? (कॉन्टेक्स्ट प्रोवाइडर प्लेसमेंट के लिए महत्वपूर्ण।) ## चरण 7 - आउटपुट प्रारूप परिणाम इस प्रकार प्रदान करें: 1. **`${component_file_path}`** - पूरी रीफैक्टर की गई कंपोनेंट फाइल। 2. **`${components_dir:components/ui}/${shadcn_component_slug}.tsx`** - shadcn प्रिमिटिव (केवल यदि आवश्यक हो और CLI द्वारा जनरेट न किया गया हो)। 3. **`lib/utils.ts`** - केवल यदि इसे बनाने या अपडेट करने की आवश्यकता है। 4. **लेआउट/प्रोवाइडर डिफ** - केवल यदि प्रोवाइडर जोड़ने की आवश्यकता है। 5. एक संक्षिप्त **माइग्रेशन नोट्स** अनुभाग जिसमें सूची हो: - हटाई गई डिपेंडेंसीज़ - नाम बदले गए प्रॉप्स (यदि कोई हों) - कोई भी मैनुअल चरण आवश्यक (जैसे, `globals.css` में CSS वेरिएबल जोड़ना) ## Tailwind CSS वेरिएबल (shadcn डिज़ाइन टोकन) पुष्टि करें कि `globals.css` में आवश्यक CSS कस्टम प्रॉपर्टीज़ मौजूद हैं। यदि रेफरेंस कंपोनेंट `--radius`, `--background`, `--foreground`, `--primary`, `--ring` जैसे टोकन का उपयोग करता है, तो लापता वेरिएबल जोड़ें। जब तक प्रोजेक्ट पहले से कस्टम थीम परिभाषित न करता हो, `${color_theme:zinc}` के लिए shadcn डिफ़ॉल्ट टोकन सेट का उपयोग करें। ## बाधाएं - फ्रेमवर्क: **${framework:Next.js 14+ App Router}** - स्टाइलिंग: **केवल Tailwind CSS ${tailwind_version:3}** - कोई इनलाइन स्टाइल नहीं, कोई CSS मॉड्यूल नहीं, कोई styled-components नहीं। - TypeScript: **स्ट्रिक्ट मोड**। सभी नया कोड पूरी तरह से टाइप किया हुआ होना चाहिए। - किसी भी मौजूदा डिपेंडेंसी वर्जन को अपग्रेड या डाउनग्रेड न करें जब तक कि सीधा पीयर कॉन्फ्लिक्ट न हो।