149 lines
6.8 KiB
Plaintext
149 lines
6.8 KiB
Plaintext
---
|
|
alwaysApply: true
|
|
description: استانداردهای سازماندهی و مدیریت کامپوننت‌ها در پروژه
|
|
---
|
|
|
|
# استاندارد سازماندهی کامپوننت‌ها
|
|
|
|
این پروژه از یک ساختار پوشه‌بندی استاندارد برای سازماندهی کامپوننت‌ها استفاده می‌کند.
|
|
|
|
## ساختار پوشه‌بندی
|
|
|
|
کامپوننت‌ها در پوشه `components/` بر اساس نوع و کاربردشان سازماندهی شده‌اند:
|
|
|
|
### 1. `components/layout/`
|
|
کامپوننت‌های مرتبط با ساختار کلی صفحه:
|
|
- `conditional-layout.tsx` - لایه‌بندی شرطی برای صفحات
|
|
- `theme-provider.tsx` - ارائه‌دهنده تم
|
|
- `top-progress-bar.tsx` - نوار پیشرفت بالا
|
|
|
|
### 2. `components/navigation/`
|
|
کامپوننت‌های مرتبط با ناوبری و هدر/فوتر:
|
|
- `header.tsx` - هدر اصلی
|
|
- `header-main.tsx` - هدر اصلی (نسخه tailark)
|
|
- `footer.tsx` - فوتر
|
|
- `logo.tsx` - لوگو
|
|
- `logo-main.tsx` - لوگو اصلی (نسخه tailark)
|
|
- `theme-toggle.tsx` - دکمه تغییر تم
|
|
|
|
### 3. `components/sections/`
|
|
کامپوننت‌های بخش‌های مختلف صفحه که به زیرپوشه‌ها تقسیم می‌شوند:
|
|
|
|
#### `sections/hero/`
|
|
بخش‌های Hero:
|
|
- `hero-product.tsx` - Hero صفحه محصول
|
|
- `hero-partners.tsx` - Hero صفحه همکاران
|
|
- `hero-home.tsx` - Hero صفحه اصلی
|
|
- `hero-section-main.tsx` - Hero اصلی (نسخه tailark)
|
|
- `hero-alternative.tsx` - Hero جایگزین
|
|
|
|
#### `sections/feature/`
|
|
بخش‌های ویژگی‌ها:
|
|
- `feature-text-section.tsx` - بخش متن ویژگی
|
|
- `feature-grid-with-icons.tsx` - شبکه ویژگی با آیکون
|
|
- `feature-carousel-grid.tsx` - شبکه کاروسل ویژگی
|
|
- `feature-list-section.tsx` - بخش لیست ویژگی
|
|
- `feature-carousel.tsx` - کاروسل ویژگی
|
|
- `features-card-grid.tsx` - شبکه کارت ویژگی
|
|
- `features-icon-grid.tsx` - شبکه آیکون ویژگی
|
|
- `features-primary.tsx` - ویژگی‌های اصلی
|
|
|
|
#### `sections/cta/`
|
|
بخش‌های Call-to-Action:
|
|
- `cta-product.tsx` - CTA صفحه محصول
|
|
- `cta-home.tsx` - CTA صفحه اصلی
|
|
- `cta-default.tsx` - CTA پیش‌فرض
|
|
- `cta-alternative.tsx` - CTA جایگزین
|
|
|
|
#### `sections/other/`
|
|
سایر بخش‌های صفحه:
|
|
- `timeline-section.tsx` - بخش تایم‌لاین
|
|
- `pricing-section.tsx` - بخش قیمت‌گذاری
|
|
- `pricing-comparator.tsx` - مقایسه‌کننده قیمت
|
|
- `faqs-section.tsx` - بخش سوالات متداول
|
|
- `logo-cloud.tsx` - ابر لوگو
|
|
- `solutions-showcase.tsx` - نمایش راهکارها
|
|
- `apple-cards-carousel.tsx` - کاروسل کارت‌های اپل
|
|
- `content-section.tsx` - بخش محتوا
|
|
|
|
### 4. `components/blog/`
|
|
کامپوننت‌های مرتبط با وبلاگ:
|
|
- `blog-blockquote.tsx` - نقل قول وبلاگ
|
|
- `blog-card.tsx` - کارت وبلاگ
|
|
- `blog-collapse-section.tsx` - بخش تاشو وبلاگ
|
|
- `blog-post-card.tsx` - کارت پست وبلاگ
|
|
- `blog-post-meta.tsx` - متادیتای پست وبلاگ
|
|
- `blog-pullquote.tsx` - نقل قول کشیده وبلاگ
|
|
- `blog-tip.tsx` - نکته وبلاگ
|
|
- `blog-toc.tsx` - فهرست مطالب وبلاگ
|
|
- `featured-posts-grid.tsx` - شبکه پست‌های ویژه
|
|
|
|
### 5. `components/utilities/`
|
|
کامپوننت‌های کمکی:
|
|
- `scroll-to-top.tsx` - اسکرول به بالا
|
|
|
|
### 6. `components/ui/`
|
|
کامپوننت‌های UI پایه (از shadcn/ui) - این پوشه دست نخورده باقی می‌ماند.
|
|
|
|
### 7. `components/home-page/`
|
|
کامپوننت‌های اختصاصی صفحه اصلی - این پوشه دست نخورده باقی می‌ماند.
|
|
|
|
### 8. `components/motion-primitives/`
|
|
پریمییتیوهای انیمیشن - این پوشه دست نخورده باقی می‌ماند.
|
|
|
|
## قوانین نام‌گذاری
|
|
|
|
### نام فایل‌ها
|
|
- از نام‌های توصیفی و معنادار استفاده کنید
|
|
- از camelCase برای نام فایل‌ها استفاده کنید
|
|
- نام فایل باید نوع کامپوننت را مشخص کند (مثلاً `hero-product.tsx` نه `hero47.tsx`)
|
|
- برای کامپوننت‌های مشابه، از پسوندهای واضح استفاده کنید (مثلاً `-home`, `-product`, `-alternative`)
|
|
|
|
### نام Export ها
|
|
- نام export باید با نام فایل همخوانی داشته باشد و معنادار باشد
|
|
- از PascalCase برای نام کامپوننت‌ها استفاده کنید
|
|
- از نام‌های عددی یا غیرمعنادار (مثل Hero47، Feature55) خودداری کنید
|
|
- نام export باید نوع و کاربرد کامپوننت را مشخص کند (مثلاً `HeroProduct` نه `Hero47`)
|
|
|
|
## قوانین Import
|
|
|
|
هنگام import کردن کامپوننت‌ها، از مسیرهای کامل و نام‌های معنادار استفاده کنید:
|
|
|
|
```typescript
|
|
// ✅ درست
|
|
import { HeroProduct } from '@/components/sections/hero/hero-product'
|
|
import { FeatureTextSection } from '@/components/sections/feature/feature-text-section'
|
|
import { FeatureCarousel } from '@/components/sections/feature/feature-carousel'
|
|
import Footer5 from '@/components/navigation/footer'
|
|
import CtaHome from '@/components/sections/cta/cta-home'
|
|
|
|
// ❌ اشتباه
|
|
import { Hero47 } from '@/components/hero47'
|
|
import { Feature55 } from '@/components/feature55'
|
|
import { Feature240 } from '@/components/feature240'
|
|
```
|
|
|
|
## افزودن کامپوننت جدید
|
|
|
|
هنگام افزودن کامپوننت جدید:
|
|
|
|
1. **تعیین نوع کامپوننت**: کامپوننت شما در کدام دسته قرار می‌گیرد؟
|
|
- Layout → `components/layout/`
|
|
- Navigation → `components/navigation/`
|
|
- Hero Section → `components/sections/hero/`
|
|
- Feature Section → `components/sections/feature/`
|
|
- CTA Section → `components/sections/cta/`
|
|
- Other Section → `components/sections/other/`
|
|
- Blog Component → `components/blog/`
|
|
- Utility → `components/utilities/`
|
|
|
|
2. **نام‌گذاری مناسب**: نام فایل باید توصیفی باشد و نوع کامپوننت را مشخص کند.
|
|
|
|
3. **به‌روزرسانی این فایل**: اگر دسته جدیدی ایجاد کردید، این فایل را به‌روزرسانی کنید.
|
|
|
|
## نکات مهم
|
|
|
|
- **پوشه‌های موجود**: پوشه‌های `ui/`, `home-page/`, و `motion-primitives/` دست نخورده باقی می‌مانند.
|
|
- **سازماندهی مداوم**: همیشه کامپوننت‌های جدید را در پوشه مناسب قرار دهید.
|
|
- **یکپارچگی**: از قرار دادن فایل‌ها در root پوشه `components/` خودداری کنید (به جز پوشه‌های خاص).
|