Use theme-aware background in DataViews (#74)

* Use theme-aware background in DataViews and SkeletonTable

Replace hardcoded bg-white with bg-background CSS variable so
DataViews table and skeleton loader respect the active theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Refactor PosterGrid component and enhance theme-aware background styles in DataViews

* Enhance user data generation with first and last names, improve SkeletonTable rendering for grid and list views, and add vertical alignment to table cells

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Kamruzzaman <kzamanbn@gmail.com>

Author: 3 people

src/components/wordpress/DataViews.stories.tsx

@@ -17,18 +17,35 @@ interface User {
 }
 
 // Generate sample data
+const firstNames = [
+  "James", "Emma", "Liam", "Olivia", "Noah", "Ava", "William", "Sophia",
+  "Benjamin", "Isabella", "Lucas", "Mia", "Henry", "Charlotte", "Alexander",
+  "Amelia", "Daniel", "Harper", "Matthew", "Evelyn", "Sebastian", "Aria",
+  "Jack", "Chloe", "Owen",
+];
+const lastNames = [
+  "Anderson", "Martinez", "Thompson", "Garcia", "Robinson", "Clark", "Lewis",
+  "Walker", "Hall", "Young", "King", "Wright", "Lopez", "Hill", "Scott",
+  "Green", "Adams", "Baker", "Nelson", "Carter", "Mitchell", "Perez",
+  "Roberts", "Turner", "Phillips",
+];
+
 const generateUsers = (count: number): User[] => {
   const statuses: User["status"][] = ["active", "inactive", "pending"];
   const roles = ["Admin", "Editor", "Viewer", "Manager"];
-  
-  return Array.from({ length: count }, (_, i) => ({
-    id: `user-${i + 1}`,
-    name: `User ${i + 1}`,
-    email: `user${i + 1}@example.com`,
-    status: statuses[i % 3],
-    role: roles[i % 4],
-    joinedAt: new Date(2024, i % 12, (i % 28) + 1).toLocaleDateString(),
-  }));
+
+  return Array.from({ length: count }, (_, i) => {
+    const first = firstNames[i % firstNames.length];
+    const last = lastNames[i % lastNames.length];
+    return {
+      id: `user-${i + 1}`,
+      name: `${first} ${last}`,
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+      status: statuses[i % 3],
+      role: roles[i % 4],
+      joinedAt: new Date(2024, i % 12, (i % 28) + 1).toLocaleDateString(),
+    };
+  });
 };
 
 const allUsers = generateUsers(100);
@@ -959,80 +976,24 @@ FullFeatured.storyName = "Full Featured";
  */
 function PosterGrid({ items }: { items: User[] }) {
   return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-        gap: "16px",
-        padding: "16px 0",
-      }}
-    >
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 py-4">
       {items.map((item) => (
         <div
           key={item.id}
-          style={{
-            position: "relative",
-            aspectRatio: "4 / 3",
-            borderRadius: "8px",
-            overflow: "hidden",
-            backgroundColor: "#cbd5e1", // Placeholder background
-          }}
+          className="relative aspect-4/3 rounded-lg overflow-hidden bg-slate-300"
         >
-          <div
-            style={{
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              padding: "48px 16px 16px",
-              background:
-                "linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
-              color: "white",
-            }}
-          >
-            <h3
-              style={{
-                margin: "0 0 4px",
-                fontSize: "18px",
-                fontWeight: 600,
-                textShadow: "0 1px 2px rgba(0,0,0,0.5)",
-              }}
-            >
+          <div className="absolute bottom-0 left-0 right-0 pt-12 px-4 pb-4 bg-linear-to-t from-black/80 via-black/40 to-transparent text-white">
+            <h3 className="mb-1 text-lg font-semibold drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">
               {item.name}
             </h3>
-            <p
-              style={{
-                margin: "0 0 8px",
-                fontSize: "13px",
-                opacity: 0.9,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
+            <p className="mb-2 text-[13px] opacity-90 overflow-hidden text-ellipsis whitespace-nowrap">
               {item.email}
             </p>
-            <div style={{ display: "flex", gap: "6px" }}>
-              <span
-                style={{
-                  fontSize: "11px",
-                  padding: "2px 8px",
-                  borderRadius: "4px",
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  textTransform: "capitalize",
-                }}
-              >
+            <div className="flex gap-1.5">
+              <span className="text-[11px] px-2 py-0.5 rounded bg-white/20 capitalize">
                 {item.role}
               </span>
-              <span
-                style={{
-                  fontSize: "11px",
-                  padding: "2px 8px",
-                  borderRadius: "4px",
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  textTransform: "capitalize",
-                }}
-              >
+              <span className="text-[11px] px-2 py-0.5 rounded bg-white/20 capitalize">
                 {item.status}
               </span>
             </div>
@@ -1083,9 +1044,8 @@ export const LayoutCustomComponent: StoryFn = () => {
         view={view}
         fields={fields}
         onChangeView={setView}
-        defaultLayouts={{ table: {} }}
       >
-        <div style={{ padding: "2px" }}>
+        <div className="p-0.5">
           {DataViews.Search && <DataViews.Search />}
           <PosterGrid items={paginatedData} />
         </div>

src/components/wordpress/dataviews.tsx

@@ -228,7 +228,7 @@ const FilterItems = ({
 
     return (
         <Fragment>
-            <div className={cn('flex w-full justify-between items-center', className)}>
+            <div className={cn('sm:flex w-full justify-between items-center', className)}>
                 <div className="flex flex-row flex-wrap gap-4 items-center">
                     {activeFilters.map((id) => {
                         const field = fields.find((f) => f.id === id);
@@ -368,27 +368,63 @@ const ListEmpty = ({ icon, description, title }: ListEmptyProps) => {
 };
 
 /**
- * Renders a skeleton table with real column headers and animated placeholder rows.
+ * Renders a skeleton loading state matching the current view type.
  */
 function SkeletonTable({
     rows,
     headers,
     hasActions,
-    hasBulkActions
+    hasBulkActions,
+    viewType = 'table'
 }: {
     rows: number;
     headers: string[];
     hasActions: boolean;
     hasBulkActions: boolean;
+    viewType?: string;
 }) {
+    if (viewType === 'grid') {
+        return (
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4 p-4">
+                {Array.from({ length: rows }, (_, i) => (
+                    <div key={i} className="rounded-lg border border-border bg-background p-4 space-y-3">
+                        <Skeleton className="aspect-video w-full rounded-md" />
+                        <Skeleton className="h-4 w-3/4" />
+                        <Skeleton className="h-3 w-1/2" />
+                        <div className="flex gap-2 pt-1">
+                            <Skeleton className="h-5 w-14 rounded-full" />
+                            <Skeleton className="h-5 w-14 rounded-full" />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    if (viewType === 'list') {
+        return (
+            <div className="divide-y divide-border">
+                {Array.from({ length: rows }, (_, i) => (
+                    <div key={i} className="flex items-center gap-4 px-5 py-4">
+                        <div className="flex-1 space-y-2">
+                            <Skeleton className="h-4 w-1/3" />
+                            <Skeleton className="h-3 w-1/2" />
+                        </div>
+                        {hasActions && <Skeleton className="h-4 w-8 shrink-0" />}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
     const widths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-5/6', 'w-2/5'];
 
     return (
         <table className="w-full text-sm border-collapse">
             <thead>
-                <tr className="border-b border-border">
+                <tr className="bg-background border-b border-border">
                     {hasBulkActions && (
-                        <th className="h-12 bg-white w-12 px-5 align-middle">
+                        <th className="h-12 bg-background w-12 px-5 align-middle">
                             <Skeleton className="h-4 w-4 rounded-sm" />
                         </th>
                     )}
@@ -398,7 +434,7 @@ function SkeletonTable({
                             <th
                                 key={colIdx}
                                 className={cn(
-                                    'h-12 bg-white px-5 align-middle text-[11px] font-medium text-foreground uppercase tracking-normal',
+                                    'h-12 bg-background px-5 align-middle text-[11px] font-medium text-foreground uppercase tracking-normal',
                                     isActions ? 'text-right' : 'text-left'
                                 )}>
                                 {label}
@@ -409,7 +445,7 @@ function SkeletonTable({
             </thead>
             <tbody>
                 {Array.from({ length: rows }, (_, rowIdx) => (
-                    <tr key={rowIdx} className="border-b border-border last:border-b-0">
+                    <tr key={rowIdx} className="bg-background border-b border-border last:border-b-0">
                         {hasBulkActions && (
                             <td className="h-12 w-12 px-5 align-middle">
                                 <Skeleton className="h-4 w-4 rounded-sm" />
@@ -710,7 +746,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                 {header && <div className="font-semibold text-sm text-foreground">{header}</div>}
                 <div
                     className={cn(
-                        'flex gap-2 md:flex-row flex-col justify-between w-full items-center',
+                        'flex gap-2 md:flex-row flex-col justify-between w-full',
                         (tabItems.length || search || headerContent.length) &&
                             'border-b border-border p-4 md:px-4 md:py-0'
                     )}>
@@ -796,6 +832,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                         )}
                         {isLoading ? (
                             <SkeletonTable
+                                viewType={view.type}
                                 rows={viewPerPageValue}
                                 hasActions={!!props.actions?.length}
                                 hasBulkActions={!!props.onChangeSelection}

src/components/wordpress/style.css

@@ -3,15 +3,19 @@
 @import "@wordpress/dataviews/build-style/style.css";
 @import '@wordpress/theme/design-tokens.css';
 
+.pui-root-dataviews,
+.pui-root-dataviews .dataviews-wrapper {
+    background-color: var(--background, #FFFFFF);
+}
 .pui-root-dataviews:not(.custom-layout) {
     border-radius: 6px;
     border: 1px solid var(--border, #E7E7E7);
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843);
-    background-color: var(--background, #FFFFFF);
     color: var(--foreground, #1D1D1D);
   }
   .pui-root-dataviews .dataviews-no-results {
       border-top: 1px solid var(--border, #E7E7E7);
+      background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews:not(.custom-layout) .dataviews-wrapper {
     border-radius: 6px;
@@ -46,6 +50,7 @@
     color: var(--foreground, #1D1D1D);
     border-bottom-color: var(--border, #E7E7E7);
     background-color: var(--background, #FFFFFF);
+    vertical-align: middle;
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table td,
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table th {
@@ -65,6 +70,7 @@
     display: flex;
     justify-content: space-between !important;
     padding: 16px;
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tr td:first-child,
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tr th:first-child {