الگوهای ریسپانسیو

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>دنبال‌کننده‌ها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>125 هزار</MetricCardValue>
    </MetricCardContent>
  </MetricCard>
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>تعامل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>4.2٪</MetricCardValue>
    </MetricCardContent>
  </MetricCard>
  {/* ... */}
</div>

import { CustomPage, PageSection } from '@partodata/ui/templates'
import { TableOfContents } from '@partodata/ui'
import { BarChart3, FileText, Smile } from 'lucide-react'

const sections = [
  { id: 'summary', label: 'خلاصه', icon: <FileText /> },
  { id: 'trend', label: 'روند منشن‌ها', icon: <BarChart3 /> },
  { id: 'sentiment', label: 'احساس مخاطبان', icon: <Smile /> },
]

export default function WeeklyReportPage() {
  return (
    <CustomPage
      dsGap="DS-GAP-14: فهرست بخش‌های گزارش در ستون کناری صفحه"
      title="گزارش هفتگی کمپین"
      description="عملکرد کمپین تخفیف فصلی در هفتهٔ گذشته"
      width="wide"
    >
      <PageSection>
        {/* موبایل: فهرست بالای محتوا · از lg: ستون کناری چسبان در سمت شروع (راست) */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[220px_1fr]">
          <aside className="lg:sticky lg:top-20 lg:h-fit">
            <TableOfContents items={sections} offset={80} title="بخش‌های گزارش" />
          </aside>
          <div className="flex flex-col gap-8">
            <section id="summary">…</section>
            <section id="trend">…</section>
            <section id="sentiment">…</section>
          </div>
        </div>
      </PageSection>
    </CustomPage>
  )
}

import { DataTable, type DataTableColumn } from '@partodata/ui'

// 1. جدول با scroll افقی برای موبایل
;<div className="overflow-x-auto">
  <DataTable columns={columns} data={data} />
</div>

// 2. پنهان کردن ستون‌های کم‌اهمیت در موبایل
const columns: DataTableColumn<Row>[] = [
  { id: 'name', header: 'نام', cell: (row) => row.name },
  {
    id: 'followers',
    header: 'دنبال‌کننده‌ها',
    cell: (row) => row.followers.toLocaleString('en-US'),
    // این ستون در موبایل پنهان می‌شود (با className)
    className: 'hidden sm:table-cell',
  },
  {
    id: 'engagement',
    header: 'تعامل',
    cell: (row) => `${row.engagement}٪`,
    className: 'hidden md:table-cell',
  },
  {
    id: 'status',
    header: 'وضعیت',
    cell: (row) => <Badge>{row.status}</Badge>,
  },
]

import { Avatar, AvatarImage, AvatarFallback, Badge } from '@partodata/ui'
import { PlatformMark } from '@partodata/ui/social'

function InfluencerProfileHeader({ influencer }) {
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      {/* اطلاعات اصلی */}
      <div className="flex items-center gap-4">
        <Avatar className="size-16">
          <AvatarImage src={influencer.avatar} />
          <AvatarFallback>{influencer.name[0]}</AvatarFallback>
        </Avatar>

        <div className="flex flex-col gap-1">
          <h1 className="text-display">{influencer.name}</h1>
          <div className="flex flex-wrap items-center gap-2">
            <PlatformMark source={influencer.platform} />
            <Badge variant="outline">@{influencer.username}</Badge>
          </div>
        </div>
      </div>

      {/* آمار — در موبایل زیر اطلاعات، در دسکتاپ کنار */}
      <div className="grid grid-cols-3 gap-4 rounded-lg border p-4 sm:flex sm:gap-8">
        <div className="text-center">
          <p className="text-stat">{influencer.followers.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">دنبال‌کننده</p>
        </div>
        <div className="text-center">
          <p className="text-stat">{influencer.following.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">دنبال‌کننده</p>
        </div>
        <div className="text-center">
          <p className="text-stat">{influencer.posts.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">پست</p>
        </div>
      </div>
    </div>
  )
}

'use client'

import { useState } from 'react'
import {
  Button,
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
  DrawerClose,
  SearchInput,
  ToggleGroup,
  ToggleGroupItem,
} from '@partodata/ui'
import { SlidersHorizontal } from 'lucide-react'

function SearchWithFilters() {
  const [filtersOpen, setFiltersOpen] = useState(false)
  const [activeFilters, setActiveFilters] = useState<string[]>([])

  const filterOptions = [
    { label: 'اینستاگرام', value: 'instagram' },
    { label: 'تیک‌تاک', value: 'tiktok' },
    { label: 'میکرو اینفلوئنسر', value: 'micro' },
    { label: 'ماکرو اینفلوئنسر', value: 'macro' },
  ]

  return (
    <div className="flex flex-col gap-3">
      {/* نوار جستجو + دکمه فیلتر */}
      <div className="flex gap-2">
        <SearchInput placeholder="جستجوی اینفلوئنسر..." className="flex-1" />
        {/* دکمه فیلتر — در موبایل نمایش داده می‌شود */}
        <Button variant="outline" size="sm" className="md:hidden" onClick={() => setFiltersOpen(true)}>
          <SlidersHorizontal className="size-4" />
          فیلترها
        </Button>
      </div>

      {/* فیلترهای inline — فقط در دسکتاپ */}
      <div className="hidden flex-wrap gap-2 md:flex">
        <ToggleGroup type="multiple" value={activeFilters} onValueChange={setActiveFilters}>
          {filterOptions.map((filter) => (
            <ToggleGroupItem key={filter.value} value={filter.value}>
              {filter.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>

      {/* Drawer فیلتر برای موبایل */}
      <Drawer open={filtersOpen} onOpenChange={setFiltersOpen} direction="bottom">
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>فیلترها</DrawerTitle>
          </DrawerHeader>

          <div className="flex flex-wrap gap-2 p-4">
            <ToggleGroup type="multiple" value={activeFilters} onValueChange={setActiveFilters}>
              {filterOptions.map((filter) => (
                <ToggleGroupItem key={filter.value} value={filter.value}>
                  {filter.label}
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
          </div>

          <DrawerFooter>
            <DrawerClose asChild>
              <Button variant="primary">اعمال فیلترها</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  )
}

import { PartoLineChart } from '@partodata/ui'

// ارتفاع نمودار بر اساس اندازه صفحه
function ResponsiveChart({ data }) {
  return (
    <div>
      {/* موبایل: ارتفاع کمتر */}
      <div className="block sm:hidden">
        <PartoLineChart data={data} height={200} />
      </div>
      {/* تبلت و دسکتاپ: ارتفاع معمول */}
      <div className="hidden sm:block">
        <PartoLineChart data={data} height={350} />
      </div>
    </div>
  )
}

import { useIsMobile } from '@partodata/ui'

function FiltersArea() {
  const isMobile = useIsMobile()

  // در SSR و اولین paint، مقدار همیشه false است؛
  // کاربر موبایل یک فریم FiltersInline را می‌بیند (فلش کوتاه).
  return isMobile ? <FiltersDrawer /> : <FiltersInline />
}

// WRONG — physical
<div className="ml-4 sm:ml-0">

// CORRECT — logical (RTL-safe)
<div className="ms-4 sm:ms-0">

// ❌ غلط — فیزیکی؛ فقط در نمای دسکتاپِ RTL خراب می‌شود و در تست موبایل دیده نمی‌شود
<div className="flex flex-col md:flex-row">
  <Button variant="primary" className="md:ml-auto">
    ذخیره گزارش کمپین
  </Button>
</div>

// ✅ درست — خواص منطقی (logical) در همهٔ breakpointها
<div className="flex flex-col md:flex-row">
  <Button variant="primary" className="md:ms-auto">
    ذخیره گزارش کمپین
  </Button>
</div>

// ❌ غلط — رنگ ثابت؛ در تم تیرهٔ پیش‌فرض، یک نوار سفید ناهماهنگ ظاهر می‌شود
<div className="flex items-center gap-2 border-b border-gray-200 bg-white p-4 md:hidden">
  <Button variant="default">فیلترها</Button>
</div>

// ✅ درست — توکن‌های معنایی؛ در هر دو تم درست رندر می‌شود
<div className="flex items-center gap-2 border-b border-border bg-background p-4 md:hidden">
  <Button variant="default">فیلترها</Button>
</div>

// ❌ غلط — هر دو نمونه mount می‌شوند: دو بار fetch و دو state صفحه‌بندی جداگانه
<div className="sm:hidden">
  <CampaignPostsTable pageSize={10} />
</div>
<div className="hidden sm:block">
  <CampaignPostsTable pageSize={50} />
</div>

// ✅ درست — یک ListPage با fetch واحد و صفحه‌بندی قالب؛ تفاوت نمایش با className ستون‌ها (الگوی 3)
<ListPage title="پست‌های کمپین" state={state} pagination={pagination}>
  <DataTable columns={columns} data={rows} />
</ListPage>

// ❌ غلط — نمای موبایل برای همیشه در 10 ردیف اولِ همان یک صفحه‌ای که سرور برگردانده گیر می‌کند
{
  isMobile ? (
    rows.slice(0, 10).map((post) => <Post key={post.id} post={post} />)
  ) : (
    <DataTable columns={columns} data={rows} pagination={pagination} />
  )
}

// ✅ درست — fetch، state و صفحه‌بندی مال ListPage است، بیرون از دو شاخه؛ دو شاخه فقط نمایش‌اند
;<ListPage
  title="پست‌های کمپین"
  state={state}
  pagination={{ currentPage: page, totalPages, onPageChange: setPage, totalRows, pageSize: 25 }}
>
  <div className="sm:hidden">
    <EntityCollection
      entity="post"
      items={rows}
      getId={(post) => post.id}
      layouts={['card']}
      label="پست‌ها"
      renderItem={(post, item) => <Post post={post} {...item} />}
    />
  </div>
  <div className="hidden sm:block">
    <DataTable columns={columns} data={rows} />
  </div>
</ListPage>

// ❌ غلط — تغییر لحن؛ محاوره‌ای در موبایل، رسمی در دسکتاپ
<Button variant="primary" className="sm:hidden">
  اعمال کن
</Button>

// ✅ درست — کوتاه‌سازی با حذف واژه، نه حذف رسمیت
<Button variant="primary" className="sm:hidden">
  اعمال فیلترها
</Button>

// ✅ درست — یا فقط آیکون با برچسب دسترس‌پذیر کامل
<Button icon={<Check />} className="sm:hidden" aria-label="اعمال فیلترها" />