reactjs - استوریبوک (با Vite/تایپ‌اسکریپت/MDX) جدول آرگومان‌ها را نشان نمی‌دهد
من سعی دارم جدول با props را در یک صفحه مستندات MDX نشان دهم، اما هر کاری که می‌کنم، جدول فقط این را نشان می‌دهد: «هیچ ورودی برای این کامپوننت یافت نشد. مستندات را بخوانید >»
من چندین روش مختلف را امتحان کردم، اما به نظر نمی‌رسد چیزی تغییر کند.
من با نسخه‌های مختلف react-docgen-typescript، react-docgen-typescript-vite، storybook-react-docgen-typescript-vite و react-docgen-typescript-plugin بازی کردم، اما به نظر نمی‌رسد که تفاوتی
ادامه مطلب →تایپ‌اسکریپت - استوریبوک ویو در ابتدا کامپوننت را رندر نمی‌کند
کتاب داستان به خوبی کار می‌کند، به جز اینکه در ابتدا مؤلفه را «رندر» نمی‌کند.
- می‌توانید در اسکرین‌شات ببینید که قالب مؤلفه به نوعی استفاده می‌شود، وگرنه استوریبوک از چیدمان پایه مؤلفه مطلع نمی‌شد.
- شما همچنین می‌توانید ببینید که اقدامات به درستی فراخوانی می‌شوند.
- تنها مشکلی که واقعاً می‌توانم ببینم این است که در ابتدا Storybook سعی می‌کند همه props که کامپوننت دارد را تغییر دهد. نمی‌دانم چرا.
- این خطا در فایل‌های جاوااسکریپت و تایپ‌اسکریپت رخ می‌دهد.
- ادامه مطلب →
reactjs - کنترل‌های Storybook با Typescript keyof
من دارم چند مؤلفه را برای استفاده با استوریبوک می‌سازم و با یک مشکل کوچک در مورد نوع‌های استنتاج‌شده تایپ‌اسکریپت مواجه شده‌ام.
به خاطر کد DRY، ترجیح می‌دهم نیازی به تعریف گزینه‌ها برای یک کنترل داخل خود داستان نباشد، با این حال به نظر نمی‌رسد که گزینه‌ها را به درستی استنتاج کند.
من یک کامپوننت دکمه دارم که یک ویژگی 'option' دارد. گزینه‌های موجود رشته‌هایی هستند که بر اساس مقادیر موجود در یک تم می‌باشند:
ادامه مطلب →جاوااسکریپت - اجرای Storybook روی یک پروژه کتابخانه Angular
من یک ورک‌اسپیس جدید انگولار ایجاد کردم.
ng new workspace --create-application=false cd workspaceو سپس یک کتابخانه درون فضای کاری ایجاد کرد.
ng g library libمن همچنین یک محیط آزمایشی برای تست کتابخانه ایجاد کردم.
ng g application playground ادامه مطلب →reactjs - فایل manager.ts در Storybook باعث بروز خطاهای کامپایل می‌شود
من نمی‌فهمم چرا این اتفاق می‌افتد اما اگر یک فایل ساده manager.ts داشته باشم مانند
import { addons } from "@storybook/addons"; import { create } from "@storybook/theming"; import { palette } from "../theme/src"; // @ds/theme const theme = create({ base: "light", colorPrimary: palette.magenta01, colorSecondary: palette.magenta01, }); addons.setConfig({ theme, });و به جای مسیر نسبی از مسیر مستعار در وارد ک
ادامه مطلب →reactjs - چگونه می‌توان جداسازی علایق بین پوشه‌های 'stories' و '.storybook' ایجاد کرد؟
زمینه
به طور پیش‌فرض، Storybook.js با پروژه‌ی موجود Create-React-App من از طریق ایجاد دو پوشه جدید یکپارچه شده است:
- src/داستان‌ها
من این را دوست ند
ادامه مطلب →typescript - چگونه می‌توان متغیرهای رنگ را هم به پالت استوریبوک و هم به کامپوننت‌ها متصل کرد؟
من کتابخانه اجزای رابط کاربری ایجاد می‌کنم و از استوریبوک برای ارائه مستندات و مثال‌ها برای آن استفاده می‌کنم.
هدف من این است که یک پالت رنگی را در فایل SCSS اعلام کنم و از آن هم در کامپوننت‌ها و هم در پالت استوریبوک استفاده کنم.
پالت استوریبوک یک کامپوننت داخلی استوریبوک است که امکان ایجاد مستندات برای پالت رنگ شما را فراهم می‌کند.
پس من انتظار دارم که اگر رنگ یک سیستم طراحی تغییر کند، بتوانم به سادگی مقدار متغیر SCSS را تغییر دهم و هم پالت رنگ و هم اجزا با مقدار رنگ
ادامه مطلب →جاوااسکریپت - «نمی‌توان ویژگی‌های null را خواند (در حال خواندن 'classList')» در Storybook 7 MDX؟
به‌تازگی پروژه‌ام را از استوریبوک ۶.۵ به ۷ به‌روزرسانی کردم.
تمام داستان‌ها به خوبی کار می‌کنند و خودکار مستندات عالی است. حالا من نیاز داشتم یک مستندات سفارشی برای یک کامپوننت دکمه بنویسم، اما وقتی از تگ Story با ویژگی of استفاده می‌کنم، هنگام باز کردن صفحه مستندات یک خطا دریافت می‌کنم.
فایل مستندات در مکان درست نمایش داده شده و سپس در صفحه «Doc» از کامپوننت Button قرار می‌گیرد.
Button.stories.ts
import { Meta, StoryObj } from '@storybook/angular'; import ScB ادامه مطلب →typescript - چگونه آلیاس‌های مسیر را به پیکربندی webpack استوریبوک اضافه کنیم؟
من از Storybook با Next.js و Webpack استفاده می‌کنم. این فایل .storybook/main.ts من است:
import type { StorybookConfig } from '@storybook/nextjs'; const config: StorybookConfig = { ... framework: { name: '@storybook/nextjs', options: {}, }, ... }; expo ادامه مطلب →vuejs3 - در Storybook 8.0.6، Vue 3.4، Typescript - چگونه می‌توانم یک اسلات کامپوننت Vue را با زیرکامپوننت‌های مختلف از یک استوری پر کنم؟
من از Vue 3 استفاده می‌کنم و یک کامپوننت دارم که نیاز دارد بسته به زمینه، مجموعه‌ای از زیرکامپوننت‌های مختلف را نشان دهد. استفاده از slot در اینجا پاسخ درست در Vue3 برای رسیدن به این هدف است. من از Storybook 8 برای نشان دادن اینکه این مورد چگونه به نظر سهامدارا
ادامه مطلب →