पाठ 25 / 25
Key Concepts Review
Stories, controls और decorators से लेकर addons, testing और deployment तक Storybook की मुख्य अवधारणाएँ दोहराएँ।
Core concepts
Stories component behavior को document करते हैं। Decorators components को context के साथ wrap करते हैं। Controls interactive prop exploration enable करते हैं। Addons functionality को extend करते हैं। Tests behavior को verify करते हैं। a11y, interactions, और visual testing जैसे addons quality ensure करते हैं।
Integration points
Storybook design tools (Figma), CI/CD systems (GitHub Actions), visual testing (Chromatic), और deployment platforms (Vercel, Netlify) के साथ integrate होता है।
त्वरित ज्ञान जाँच
त्वरित जाँच: Storybook का primary purpose क्या है?
- Unit testing को replace करना
- Project dependencies को manage करना
- UI components को isolation में develop और test करना
- Production के लिए JavaScript bundle करना
Answer
UI components को isolation में develop और test करना — Storybook component development और testing के लिए एक isolated environment प्रदान करता है, अन्य testing approaches को replace करने की बजाय complement करता है।
Storybook myths और misconceptions
Storybook testing के लिए एक replacement नहीं है; यह एक complement है। यह केवल design systems के लिए नहीं है; यह किसी भी component library के लिए काम करता है।
अपनी Storybook journey शुरू करना
एक single component से छोटा शुरू करें, gradually अपनी stories को expand करें, और जाते हुए best practices को build करें।
Storybook workflow visualization
एक visual representation कि कैसे Storybook आपके development workflow में fit होता है।
अंतिम क्विज़ 1/8
अंतिम क्विज़
त्वरित जाँच: Storybook में story क्या दर्शाती है?
- A database table
- A build pipeline
- One state of a component
- A route in the app
Answer
One state of a component — हर story component को किसी विशेष state में render करती है।
अंतिम क्विज़ 2/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा addon UI में props live बदलने देता है?
- Docs
- Viewport
- Backgrounds
- Controls
Answer
Controls — Controls args को real time में बदलता है।
अंतिम क्विज़ 3/8
अंतिम क्विज़
त्वरित जाँच: Decorator किसलिए उपयोग होता है?
- Wrapping stories with providers, themes or layout
- Compiling TypeScript
- Deploying Storybook
- Generating screenshots
Answer
Wrapping stories with providers, themes or layout — Decorators हर story के चारों ओर साझा context जोड़ते हैं।
अंतिम क्विज़ 4/8
अंतिम क्विज़
त्वरित जाँच: `play` function कहाँ चलता है?
- Before the build
- After the story renders, simulating user actions
- Only in production
- Inside the Figma plugin
Answer
After the story renders, simulating user actions — Play functions render हुई story पर interactions और assertions चलाते हैं।
अंतिम क्विज़ 5/8
अंतिम क्विज़
त्वरित जाँच: बिल्ड्स के बीच अनपेक्षित visual बदलाव कौन-सा tool पकड़ता है?
- ESLint
- Prettier
- Chromatic or Percy
- npm audit
Answer
Chromatic or Percy — Visual testing हर story के screenshots की तुलना करता है।
अंतिम क्विज़ 6/8
अंतिम क्विज़
त्वरित जाँच: a11y addon क्या जाँचता है?
- Bundle size
- Network speed
- Git history
- Accessibility violations such as missing labels and low contrast
Answer
Accessibility violations such as missing labels and low contrast — यह हर story पर axe checks चलाता है।
अंतिम क्विज़ 7/8
अंतिम क्विज़
त्वरित जाँच: Storybook में समृद्ध documentation pages कैसे लिखें?
- MDX with DocsPage
- Plain JSON
- SQL scripts
- Shell aliases
Answer
MDX with DocsPage — MDX Markdown को live component examples के साथ मिलाता है।
अंतिम क्विज़ 8/8
अंतिम क्विज़
त्वरित जाँच: CI में Storybook tests क्यों चलाएँ?
- To replace code review
- To catch component regressions on every commit
- To minify CSS
- To rename stories
Answer
To catch component regressions on every commit — Automated interaction, a11y और visual tests UI गुणवत्ता की रक्षा करते हैं।