اشتباهات رایج

// ❌ غلط
<span className="text-gray-500">توضیحات</span>
<div className="bg-gray-900 text-white">محتوا</div>
<div style={{ color: '#22c55e' }}>موفقیت</div>

// ✅ درست
<span className="text-muted-foreground">توضیحات</span>
<div className="bg-foreground text-background">محتوا</div>
<Badge variant="success">موفقیت</Badge>

// ❌ غلط — رنگ نامعتبر می‌سازد، بی‌صدا
<div className="bg-[hsl(var(--brand-default))]">محتوا</div>

// ✅ درست — توکن از قبل یک رنگ کامل است
<div className="bg-[var(--brand-default)]">محتوا</div>
<div className="bg-brand">محتوا</div>

// ❌ غلط — در RTL چیدمان معکوس می‌شود
<div className="ml-4 pl-6 border-l-2 text-left">محتوا</div>

// ✅ درست — با RTL و LTR هر دو کار می‌کند
<div className="ms-4 ps-6 border-s-2 text-start">محتوا</div>

// ❌ غلط — کاربر نمی‌داند کجا کلیک کند
<div className="flex gap-2">
  <Button variant="primary">ذخیره</Button>
  <Button variant="primary">انتشار</Button>
  <Button variant="primary">پیش‌نویس</Button>
</div>

// ✅ درست — سلسله‌مراتب واضح
<div className="flex gap-2">
  <Button variant="primary">انتشار</Button>
  <Button variant="default">ذخیره</Button>
  <Button variant="outline">پیش‌نویس</Button>
</div>

// ❌ غلط — Dialog در موبایل فضای کمی دارد
<Dialog>
  <DialogContent>
    <FilterForm />
  </DialogContent>
</Dialog>

// ✅ درست — Drawer از پایین صفحه باز می‌شود
<Drawer>
  <DrawerContent>
    <FilterForm />
  </DrawerContent>
</Drawer>

// ❌ غلط — چرخ را دوباره اختراع نکنید
function MyEngagementRate({ rate }: { rate: number }) {
  const color = rate > 5 ? 'green' : rate > 3 ? 'yellow' : 'red'
  return <div style={{ color }}>{rate}%</div>
}

// ✅ درست — استانداردهای دامنه داخل کامپوننت کد شده
import { EngagementRate } from '@partodata/ui'
;<EngagementRate currentRate={0.042} followers={15000} />

// ❌ غلط — MetricCard بدون MetricCardContent
<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>کاربران</MetricCardLabel>
  </MetricCardHeader>
  <p>1,234</p>
</MetricCard>

// ✅ درست
<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>کاربران</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>1,234</MetricCardValue>
    <MetricCardDifferential direction="up" tone="positive">+5٪</MetricCardDifferential>
  </MetricCardContent>
</MetricCard>

// ❌ غلط — validation و error message کار نمی‌کند
<form onSubmit={handleSubmit(onSubmit)}>
  <Input {...register('email')} />
</form>

// ✅ درست — FormPage (فرم، کارت و دکمهٔ ثبت) و هر فیلد یک FormRow
<Form {...form}>
  <FormPage title="نمایهٔ من" onSubmit={form.handleSubmit(onSubmit)} onCancel={() => form.reset()} submitLabel="ذخیره">
    <FormField
      control={form.control}
      name="email"
      rules={{ required: 'نشانی ایمیل را وارد کنید' }}
      render={({ field, fieldState }) => (
        <FormRow label="نشانی ایمیل" required error={fieldState.error?.message}>
          <Input kind="email" {...field} />
        </FormRow>
      )}
    />
  </FormPage>
</Form>

// ❌ غلط — Skeleton با ابعاد random
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-48" />

// ✅ درست — Skeleton شکل محتوای واقعی را تقلید می‌کند
<div className="bg-surface-100 p-4 rounded-lg border space-y-2">
  <div className="flex items-center gap-3">
    <Skeleton className="h-10 w-10 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-3 w-20" />
    </div>
  </div>
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

// ❌ غلط — ظرف ارتفاع ندارد، پس نمودار با اندازهٔ صفر رندر می‌شود
<div>
  <PartoLineChart data={data} />
</div>

// ✅ درست — ارتفاع مشخص روی ظرف
<div className="h-[400px]">
  <PartoLineChart data={data} />
</div>

// ❌ اشتباه — هر یادداشت وقفه ایجاد می‌کند
{ id: 'saved-filters', channel: 'spotlight', /* … */ }
{ id: 'faster-dashboard', channel: 'spotlight', /* … */ }

// ✅ درست — spotlight یک بودجه است، نه یک سطحِ اهمیت
{ id: 'saved-filters', channel: 'announce', /* … */ }
{ id: 'faster-dashboard', channel: 'silent', /* … */ }

// ❌ اشتباه — عدد یعنی «صفی هست که باید خالی شود»
<WhatsNewBell indicator="count" unseenCount={feed.announcedCount} />

// ✅ درست — نقطه یعنی «چیز خوبی هست»
<WhatsNewBell unseenCount={feed.announcedCount} />

// ❌ اشتباه — عنوانی که نسخه را اعلام می‌کند، و «دیده‌شده» که با نسخه سنجیده می‌شود
{ id: 'release-2-4-0', title: 'نسخهٔ 2.4.0 منتشر شد', /* … */ }
if (localStorage.getItem('lastSeenVersion') !== appVersion) openSpotlight()

// ✅ درست — نسخه نامِ نمایشیِ ریلیز است و عنوانی در کار نیست؛ کلید «دیده‌شده» شناسهٔ پایدار id است
{
  id: 'campaign-compare',
  date: '2026-09-21',
  channel: 'announce',
  version: '2.4.0',
  changes: [{ type: 'feature', text: 'دو کمپین را می‌توانید کنار هم مقایسه کنید' }],
}
const feed = useWhatsNew({ notes: whatsNewFeed.notes, productKey: 'monitor' })