نوشته الیجا اسائولو✏️
توسعه کامپوننت محور نحوه ایجاد برنامه های کاربردی وب را تغییر داده است. این رویکرد توسعه مدیریت و نگهداری پایگاه های کد برنامه را آسان تر می کند و در عین حال سازگاری طراحی و همکاری بین توسعه دهندگان را تسهیل می کند.
یکی از مزایای اصلی توسعه مبتنی بر کامپوننت، جداسازی کامپوننت است، که به شما امکان می‌دهد به طور مستقل روی اجزای سازنده کار کنید بدون اینکه حواس‌تان به برنامه‌های اطراف منحرف شود. Storybook.js یکی از ابزارهایی است که می تواند در این زمینه کمک کند.
در این آموزش، ما به این خواهیم پرداخت که Storybook چیست، چگونه کار می‌کند، و چگونه می‌توان با ایجاد داستان در برنامه Next.js با استفاده از Tailwind CSS برای استایل‌سازی شروع کرد. پوشش خواهیم داد:
برای ادامه این آموزش، باید با Next.js و Tailwind CSS آشنا باشید. تجربه قبلی با Storybook نیز ممکن است مفید باشد. با این حال، این مقاله سعی خواهد کرد تا اصول اولیه را به سرعت پوشش دهد.
کتاب داستان چیست؟
Storybook یک ابزار وب برای توسعه و آزمایش اجزای رابط کاربری جدا از یک برنامه خاص است. این به شما امکان می دهد برای هر جزء “داستان” ایجاد کنید، که نمونه هایی از نحوه ظاهر و رفتار مولفه در زمینه های مختلف است: 
پس از آن استوری هایی که ایجاد می کنید می توانند در یک مرورگر در یک محیط توسعه نمایش داده شوند و به شما این امکان را می دهند که به راحتی اجزای خود را آزمایش و اشکال زدایی کنید.
کتاب داستان شامل چندین ویژگی مفید است، مانند توانایی اضافه کردن یادداشت، کنترل وضعیت مؤلفه و بررسی قوانین دسترسی.
همچنین به شما این امکان را می‌دهد تا با اجزای سازنده تعامل داشته باشید و پیش‌نمایش کنید که چگونه کامپوننت در حالات و حالات مختلف به نظر می‌رسد، که به نوبه خود به شما امکان می‌دهد به طور موثر تست و اشکال‌زدایی کنید.
شروع به کار با Next.js، Storybook و Tailwind
بیایید با اجرای دستور زیر شروع به ایجاد یک برنامه Next.js جدید کنیم:
npx create-next-app next-storybook
بعد، دایرکتوری را تغییر دهید (cd) به برنامه جدید، سپس دستور زیر را برای نصب Tailwind CSS و وابستگی های آن اجرا کنید:
npm install -D tailwindcss postcss autoprefixer
پس از این، دستور زیر را اجرا کنید تا هر دو تولید شوند tailwind.config.js و postcss.config.js همانطور که توسط Tailwind CSS مورد نیاز است:
npx tailwindcss init -p
باز کن tailwind.config.js و کد آن را به کد زیر به‌روزرسانی کنید تا محتوای صادراتی شامل فایل‌هایی در پروژه ما باشد /pages و /components دایرکتوری ها
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
در نهایت، پیش فرض را باز کنید styles/global.css فایل و اضافه کنید @tailwind دستورالعمل های زیر در بالای کد نشان داده شده است:
@tailwind base;
@tailwind components;
@tailwind utilities;
در این مرحله، ما با موفقیت برنامه Next.js خود را برای کار با Tailwind CSS پیکربندی کردیم و می‌توانیم از کلاس‌های ابزار Tailwind استفاده کنیم.
افزودن کتاب داستان به برنامه Next.js
شما می توانید Storybook را به سادگی با اجرای دستور زیر به برنامه Next.js اضافه کنید:
npx sb init
اگر از Next.js نسخه 11 و جدیدتر استفاده می‌کنید، توصیه می‌شود از webpack 5 برای یکپارچگی و عملکرد بهتر استفاده کنید:
npx sb init --builder webpack5
اجرای هر یک از این دستورات وابستگی های مورد نیاز را نصب می کند و یک محیط کتاب داستان برای پروژه شما راه اندازی می کند. همچنین باید دو پوشه جدید ایجاد شود – .storybook و stories.
را .storybook دایرکتوری حاوی a main.js فایل و الف preview.js فایل. اینها به ما اجازه می دهند ظاهر و احساس برنامه خود را پیکربندی کنیم، و همچنین به ما امکان می دهد محیط Storybook خود را مطابق با اولویت های خود مهندسی کنیم.
را stories پوشه حاوی داستان ها و اسناد پیش فرض است. ما در یک لحظه یاد خواهیم گرفت که چگونه خودمان را بسازیم.
برای آزمایش موارد، از دستور زیر برای راه اندازی رابط Storybook استفاده کنید:
npm run storybook
# OR
yarn storybook
یک صفحه وب جدید باید در باز شود http://localhost:6006، و شما باید چیزی شبیه به این را ببینید: 
در اطراف این محیط بازی کنید تا درک بهتری از نحوه کار داستان‌ها و مستندات در Storybook قبل از شروع ایجاد محیط خود داشته باشید.
پس از اتمام بازی، ادامه دهید و آن را حذف کنید /stories دایرکتوری، سپس محتوای آن را به روز کنید .storybook/main.js برای مطابقت با موارد زیر:
module.exports = {
stories: [
"../components/**/*.stories.mdx",
"../components/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-controls",
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
});
return config;
},
};
در کد بالا، Storybook را به گونه‌ای پیکربندی کردیم که به دنبال داستان‌ها/مستندات در آن بگردد /components دایرکتوری به جای پیش فرض /stories دایرکتوری، به ما این امکان را می دهد که اجزای خود و همچنین داستان های مربوط به آنها را در یک فهرست قرار دهیم.
افزودن پشتیبانی Tailwind CSS برای Storybook
Storybook به طور پیش فرض با Tailwind CSS کار نمی کند. در نتیجه، اگر یک کامپوننت React را با استفاده از کلاس های ابزار Tailwind ایجاد کنیم و سپس یک داستان بر اساس این مؤلفه ایجاد کنیم، تغییرات CSS Tailwind در محیط Storybook منعکس نمی شود.
برای رسیدگی به این مشکل، ما یک را اضافه کرده ایم webpackFinal گزینه به .storybook/main.js فایل کانفیگ در کد قبلی این به Storybook دستور می دهد تا با وابستگی های لازم مورد نیاز Tailwind CSS بسازد:
. . .
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
});
return config;
},
همچنین، به روز رسانی کنید .stories/preview.js فایل با کد زیر:
import "../styles/globals.css";
import * as nextImage from "next/image";
Object.defineProperty(nextImage, "default", {
configurable: true,
value: (props) => <img {...props} />,
});
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
};
این فایل برای وارد کردن شیوه نامه جهانی و پشتیبانی به روز شد next-image. در نتیجه، هر دو Tailwind CSS و next-image باید در محیط Storybook ما به درستی عمل کند.
ایجاد داستان برای پروژه Next.js و Tailwind ما
برای ایجاد یک داستان جدید، ابتدا باید مؤلفه ای را ایجاد کنیم که داستان بر اساس آن ساخته می شود. جدید ایجاد کنید /components/Card پوشه در پوشه ریشه پروژه شما. سپس، در داخل این فهرست جدید، دو فایل ایجاد کنید:
-
index.js– حاوی کد اصلی جزء کارت ما خواهد بود -
card.stories.js– حاوی کد داستان برای جزء کارت ما خواهد بود
وقتی کارمان تمام شد، ساختار فایل پروژه ما باید به شکل زیر باشد:
.
├── . . .
├── components
│ └── Card
│ ├── index.js
│ └── card.stories.js
├── pages
│ └── index.js
├── public
└── . . .
درون Card/index.js فایل، کد زیر را قرار دهید:
import PropTypes from "prop-types";
const Card = ({ title, showSub, background, imgUrl, children }) => {
return (
<div class="flex justify-center">
<div
class={`flex flex-col md:flex-row md:max-w-xl rounded-lg bg-${background} shadow-lg`}
>
<img
class=" w-full h-96 md:h-auto object-cover md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
src={imgUrl}
/>
<div class="p-6 flex flex-col justify-center">
<h5 class="text-gray-900 text-xl font-medium mb-2">{title}</h5>
{showSub && (
<p class="text-gray-500 text-sm mt-2">This is the card subtitle</p>
)}
<p class="text-gray-700 text-base mt-4 mb-4">{children}</p>
<button
type="button"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs uppercase rounded shadow-md"
>
Some action
</button>
</div>
</div>
</div>
);
};
export default Card;
Card.propTypes = {
title: PropTypes.string,
sub: PropTypes.string,
showSub: PropTypes.bool,
imgUrl: PropTypes.string,
background: PropTypes.string,
};
با استفاده از کلاس‌های کاربردی Tailwind CSS، یک مؤلفه در کد بالا ایجاد کردیم که می‌پذیرد title، showSub، imgUrl، background، و children prop و یک کارت پایه با پروپ های عبوری تولید می کند.
شاید متوجه شده باشید که ما از React نیز استفاده کرده ایم PropTypes بسته ای برای تعریف انواع پایه ما. ما باید آن را به این صورت نصب کنیم:
npm install prop-types
برای ایجاد داستان کارت، کد زیر را در داخل آن قرار دهید card.stories.js فایل:
import Card from "./index";
export default {
title: "My Cards",
};
const Template = (arguments_) => <Card {...arguments_} />;
export const GreenCard = Template.bind({});
GreenCard.args = {
title: "Hello World",
showSub: false,
background: "yellow-600",
imgUrl: "https://path/to/some/image",
Children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, soluta?",
};
در کد بالا، ما یک داستان جدید به نام “کارت های من” ایجاد کردیم که الگوی داستان را به آن متصل می کند Card جزء که قبلا ایجاد کردیم.
سپس یک نمونه جدید از the ایجاد کردیم Card داستان به نام GreenCard و موارد فوق را پاس کرد GreenCard.args ارزش‌ها به‌عنوان لوازمی که باید با ما ارائه شوند Card جزء.
برای راه اندازی مجدد محیط Storybook دستور زیر را اجرا کنید:
npm run storybook
پس از شروع، باید ببینید که داستان کارت ما اکنون همانطور که در تصویر زیر نشان داده شده است ایجاد شده است: 
همچنین باید توجه داشته باشید که با ایجاد تغییرات در بخش کنترل، مؤلفه ما به طور خودکار به روز می شود.
علاوه بر این، ما گزینه‌های سفارشی‌سازی زیادی را در نوار منو برای اندازه‌گیری اندازه‌های مؤلفه خود و همچنین نحوه نمایش آن در نماها و شرایط مختلف داریم: 
این تمام چیزی است که وجود دارد! ما توانستیم Storybook را در پروژه Next.js نصب کنیم و آن را طوری تنظیم کنیم که با Tailwind CSS کار کند.
نتیجه
در طول این مقاله، ما بر اهمیت جداسازی اجزا تاکید کرده‌ایم. ما همچنین نحوه استفاده از Storybook – یک ابزار وب برای توسعه و آزمایش اجزای UI به صورت مجزا – در برنامه Next.js و همچنین نحوه پیکربندی Tailwind CSS برای چنین پروژه ای را مورد بحث قرار دادیم.
همچنین می توانید کد منبع کامل این آموزش را در GitHub بیابید.
LogRocket: مشاهده کامل برنامه های Next.js تولیدی
اشکال زدایی برنامه های بعدی می تواند دشوار باشد، به خصوص زمانی که کاربران مشکلاتی را تجربه می کنند که بازتولید آن ها دشوار است. اگر به نظارت و ردیابی وضعیت Redux، نمایش خودکار خطاهای جاوا اسکریپت، و ردیابی درخواست‌های کند شبکه و زمان بارگذاری مؤلفه علاقه دارید، LogRocket را امتحان کنید.
LogRocket مانند یک DVR برای برنامه های وب و تلفن همراه است که به معنای واقعی کلمه هر چیزی را که در برنامه Next شما اتفاق می افتد ضبط می کند. به جای حدس زدن چرایی مشکلات، می توانید در مورد وضعیتی که برنامه شما در هنگام بروز مشکل در آن قرار داشت، جمع آوری کرده و گزارش دهید. LogRocket همچنین عملکرد برنامه شما را نظارت می کند و با معیارهایی مانند بار CPU مشتری، استفاده از حافظه مشتری و موارد دیگر گزارش می دهد.
بسته میان افزاری LogRocket Redux یک لایه دید اضافی را به جلسات کاربر شما اضافه می کند. LogRocket تمام اقدامات و وضعیت ها را از فروشگاه های Redux شما ثبت می کند.
نحوه اشکال زدایی برنامه های Next.js خود را مدرن کنید — نظارت را به صورت رایگان شروع کنید.
