گاهی اوقات ممکن است هنگام کار با Storybook و استفاده از یک کتابخانه خاص مانند ParkUI با خطاهایی مواجه شوید. در اینجا ما قصد داریم به بررسی برخی از دلایل و راه‌حل‌های ممکن برای این خطاها بپردازیم.
اولین نکته‌ای که باید در نظر بگیرید این است که مطمئن شوید تمامی وابستگی‌های نوشته شده در مستندات ParkUI را به درستی نصب کرده‌اید. معمولا اینگونه کتابخانه‌ها نیاز به نسخه خاصی از React یا دیگر وابستگی‌ها دارند.
از دیگر موارد مهم، بررسی فایل‌های تنظیمات Storybook است. فایل‌هایی مثل main.js یا preview.js که ممکن است نیاز به تغییرات خاصی برای سازگاری با ParkUI داشته باشند.
همچنین به یاد داشته باشید که یک سری کتابخانه‌ها از نسخه‌های خاصی از Webpack یا Babel استفاده می‌کنند، بنابراین لازم است پیکربندی‌های خاصی را اعمال کنید تا همه چیز به درستی کار کند. مشکل می‌تواند به دلیل تغییرات در نسخه‌های جدید Storybook یا وابستگی‌های دیگر نیز باشد.
در نهایت، اگر فایل‌های استایل یا CSS خاصی نیاز دارید که با کامپوننت‌های ParkUI تطابق پیدا کند، مطمئن شوید این استایل‌ها به درستی در Storybook بارگذاری شده‌اند.
نمونه کد تنظیمات Storybook برای ParkUI
// main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
};
// preview.js
import '../src/index.css';
توضیحات خط به خط کد
// main.jsاین فایل حاوی تنظیمات اصلی Storybook است.
storiesآدرس فایل‌هایی که حاوی داستان‌های Storybook هستند را مشخص می‌کند.
addonsلیستی از افزونه‌های مورد نیاز Storybook که کارکردهای اضافی را فراهم می‌کنند.
@storybook/preset-create-react-appاین افزونه تنظیمات اولیه برای پروژه‌هایی که با Create React App ایجاد شده‌اند فراهم می‌کند.
// preview.jsاین فایل برای بارگذاری فایل‌های CSS یا پیکربندی‌های دیگر به کار می‌رود.
import '../src/index.css';استایل‌های اصلی پروژه شما را بارگذاری می‌کند تا ظاهر استایل‌ها در Storybook به درستی نمایش داده شود.