@talelk/newui-organisms 1.0.0 → 2.0.0

package/src/organisms/StatGrid/StatGrid.tsx

@@ -1,4 +1,4 @@
-import { cn, Icon, type IconProp } from '@talelk/newui-atoms'
+import { cn, Icon, type IconProp, Skeleton } from '@talelk/newui-atoms'
 import { For, type JSX, Show } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 
@@ -17,6 +17,10 @@ export interface StatGridProps {
   stats: Stat[]
   /** Columns at the widest breakpoint. Defaults to the number of stats, capped. */
   columns?: 2 | 3 | 4
+  /** Tighter cards without the icon tile; for table-led screens. */
+  compact?: boolean
+  /** Replaces the cards with the shared skeleton geometry. */
+  loading?: boolean
   class?: string
 }
 
@@ -34,9 +38,16 @@ export interface StatGridProps {
  * to fail it.
  */
 const COLUMNS: Record<2 | 3 | 4, string> = {
-  2: 'sm:grid-cols-2',
-  3: 'sm:grid-cols-2 xl:grid-cols-3',
-  4: 'sm:grid-cols-2 xl:grid-cols-4',
+  2: 'min-[360px]:grid-cols-2',
+  3: 'min-[360px]:grid-cols-2 xl:grid-cols-3',
+  4: 'min-[360px]:grid-cols-2 xl:grid-cols-4',
+}
+
+/** Compact table-led screens earn a four-up row on tablets. */
+const COMPACT_COLUMNS: Record<2 | 3 | 4, string> = {
+  2: 'min-[360px]:grid-cols-2',
+  3: 'min-[360px]:grid-cols-2 md:grid-cols-3',
+  4: 'min-[360px]:grid-cols-2 md:grid-cols-4',
 }
 
 export function StatGrid(props: StatGridProps): JSX.Element {
@@ -44,76 +55,92 @@ export function StatGrid(props: StatGridProps): JSX.Element {
     props.columns ?? (Math.min(4, Math.max(2, props.stats.length)) as 2 | 3 | 4)
 
   return (
-    <div
-      data-slot="stat-grid"
-      class={`grid gap-card-gap ${COLUMNS[columns()]} ${props.class ?? ''}`}
+    <Show
+      when={!props.loading}
+      fallback={
+        <div
+          data-slot="stat-grid"
+          data-loading
+          class={`grid gap-card-gap ${props.compact ? COMPACT_COLUMNS[columns()] : COLUMNS[columns()]} ${props.class ?? ''}`}
+        >
+          <For each={Array.from({ length: columns() })}>
+            {() => <Skeleton lines={3} class="h-24" />}
+          </For>
+        </div>
+      }
     >
-      <For each={props.stats}>
-        {(stat) => (
-          // A stat that navigates is a button, not a div with a click handler:
-          // it has to be reachable by keyboard and announced as interactive.
-          <Dynamic
-            component={stat.onClick ? 'button' : 'div'}
-            {...(stat.onClick ? { type: 'button' as const } : {})}
-            data-slot="stat"
-            onClick={stat.onClick}
-            class={cn(
-              'flex flex-col gap-control-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad text-start',
-              stat.onClick &&
-                'cursor-pointer transition-[border-color,box-shadow] hover:border-outline-gray-3 hover:shadow-sm focus-visible:focus-ring motion-reduce:transition-none',
-            )}
-          >
-            <div class="flex items-start gap-2">
-              <Show when={stat.icon}>
-                {(icon) => (
-                  <span class="grid size-8 shrink-0 place-items-center rounded-4 bg-surface-gray-2">
-                    <Icon icon={icon()} class="size-4 text-ink-gray-7" />
-                  </span>
-                )}
-              </Show>
-              <span class="min-w-0 flex-1 text-sm-medium [overflow-wrap:anywhere] text-ink-gray-7">
-                {stat.label}
+      <div
+        data-slot="stat-grid"
+        class={`grid gap-card-gap ${props.compact ? COMPACT_COLUMNS[columns()] : COLUMNS[columns()]} ${props.class ?? ''}`}
+      >
+        <For each={props.stats}>
+          {(stat) => (
+            // A stat that navigates is a button, not a div with a click handler:
+            // it has to be reachable by keyboard and announced as interactive.
+            <Dynamic
+              component={stat.onClick ? 'button' : 'div'}
+              {...(stat.onClick ? { type: 'button' as const } : {})}
+              data-slot="stat"
+              onClick={stat.onClick}
+              class={cn(
+                'flex flex-col rounded-card border border-outline-gray-1 bg-surface-elevation-1 text-start',
+                props.compact ? 'gap-1 p-2.5' : 'gap-control-gap p-card-pad',
+                stat.onClick &&
+                  'cursor-pointer transition-[border-color,box-shadow] hover:border-outline-gray-3 hover:shadow-sm focus-visible:focus-ring motion-reduce:transition-none',
+              )}
+            >
+              <div class="flex items-start gap-2">
+                <Show when={props.compact ? undefined : stat.icon}>
+                  {(icon) => (
+                    <span class="grid size-8 shrink-0 place-items-center rounded-4 bg-surface-gray-2">
+                      <Icon icon={icon()} class="size-4 text-ink-gray-7" />
+                    </span>
+                  )}
+                </Show>
+                <span class="min-w-0 flex-1 text-sm-medium [overflow-wrap:anywhere] text-ink-gray-7">
+                  {stat.label}
+                </span>
+                <Show when={stat.delta}>
+                  {(delta) => (
+                    <span
+                      class="inline-flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs-medium tabular-nums"
+                      classList={{
+                        'bg-surface-green-2 text-ink-green-8':
+                          delta().direction !== 'flat' && isGood(delta()),
+                        'bg-surface-red-2 text-ink-red-8':
+                          delta().direction !== 'flat' && !isGood(delta()),
+                        'bg-surface-gray-2 text-ink-gray-7':
+                          delta().direction === 'flat',
+                      }}
+                    >
+                      <Icon
+                        icon={
+                          delta().direction === 'up'
+                            ? 'lucide-arrow-up'
+                            : delta().direction === 'down'
+                              ? 'lucide-arrow-down'
+                              : 'lucide-minus'
+                        }
+                        class="size-3"
+                      />
+                      {delta().value}
+                    </span>
+                  )}
+                </Show>
+              </div>
+              <span class="text-metric tabular-nums [overflow-wrap:anywhere] text-ink-gray-9">
+                {stat.value}
               </span>
-              <Show when={stat.delta}>
-                {(delta) => (
-                  <span
-                    class="inline-flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs-medium tabular-nums"
-                    classList={{
-                      'bg-surface-green-2 text-ink-green-8':
-                        delta().direction !== 'flat' && isGood(delta()),
-                      'bg-surface-red-2 text-ink-red-8':
-                        delta().direction !== 'flat' && !isGood(delta()),
-                      'bg-surface-gray-2 text-ink-gray-7':
-                        delta().direction === 'flat',
-                    }}
-                  >
-                    <Icon
-                      icon={
-                        delta().direction === 'up'
-                          ? 'lucide-arrow-up'
-                          : delta().direction === 'down'
-                            ? 'lucide-arrow-down'
-                            : 'lucide-minus'
-                      }
-                      class="size-3"
-                    />
-                    {delta().value}
-                  </span>
-                )}
+              <Show when={stat.hint}>
+                <span class="text-xs [overflow-wrap:anywhere] text-ink-gray-7">
+                  {stat.hint}
+                </span>
               </Show>
-            </div>
-            <span class="text-metric tabular-nums [overflow-wrap:anywhere] text-ink-gray-9">
-              {stat.value}
-            </span>
-            <Show when={stat.hint}>
-              <span class="text-xs [overflow-wrap:anywhere] text-ink-gray-7">
-                {stat.hint}
-              </span>
-            </Show>
-          </Dynamic>
-        )}
-      </For>
-    </div>
+            </Dynamic>
+          )}
+        </For>
+      </div>
+    </Show>
   )
 }
 

package/src/organisms/VirtualList/VirtualList.tsx

@@ -1,5 +1,6 @@
 import { createVirtualizer } from '@tanstack/solid-virtual'
-import { For, type JSX, untrack } from 'solid-js'
+import { For, type JSX, Show, untrack } from 'solid-js'
+import { DataState } from '../DataState'
 
 /**
  * A bounded DOM for a long list.
@@ -26,6 +27,14 @@ export interface VirtualListProps<T> {
   height?: string
   /** Rows rendered beyond the viewport. Default `6`. */
   overscan?: number
+  /** Replaces the list with the shared loading skeleton. */
+  loading?: boolean
+  /** Replaces the list with the shared error state. */
+  error?: JSX.Element
+  onRetry?: () => void
+  emptyTitle?: JSX.Element
+  emptyDescription?: JSX.Element
+  emptyAction?: JSX.Element
   /** One row's content; the `li` and its position belong to the list. */
   children: (item: T, index: number) => JSX.Element
 }
@@ -43,6 +52,15 @@ export function VirtualList<T>(props: VirtualListProps<T>): JSX.Element {
     overscan: untrack(() => props.overscan) ?? 6,
   })
 
+  const status = () =>
+    props.loading
+      ? ('loading' as const)
+      : props.error
+        ? ('error' as const)
+        : props.items.length === 0
+          ? ('empty' as const)
+          : ('ready' as const)
+
   return (
     <section
       ref={viewport}
@@ -52,28 +70,44 @@ export function VirtualList<T>(props: VirtualListProps<T>): JSX.Element {
       class="relative overflow-auto rounded-3 focus-visible:focus-ring"
       data-slot="virtual-list"
     >
-      <ul
-        class="relative m-0 list-none p-0"
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
+      <Show
+        when={status() === 'ready'}
+        fallback={
+          <DataState
+            status={status()}
+            skeleton="rows"
+            rows={5}
+            title={props.emptyTitle}
+            description={props.emptyDescription}
+            action={props.emptyAction}
+            error={props.error}
+            onRetry={props.onRetry}
+          />
+        }
       >
-        <For each={virtualizer.getVirtualItems()}>
-          {(row) => (
-            <li
-              class="absolute inset-x-0 top-0"
-              style={{
-                height: `${props.itemSize}px`,
-                transform: `translateY(${row.start}px)`,
-              }}
-              aria-posinset={row.index + 1}
-              aria-setsize={props.items.length}
-            >
-              {/* The virtualiser's count is the array's length, so the index
-                  is a valid key for the mapped row. */}
-              {props.children(props.items[row.index] as T, row.index)}
-            </li>
-          )}
-        </For>
-      </ul>
+        <ul
+          class="relative m-0 list-none p-0"
+          style={{ height: `${virtualizer.getTotalSize()}px` }}
+        >
+          <For each={virtualizer.getVirtualItems()}>
+            {(row) => (
+              <li
+                class="absolute inset-x-0 top-0"
+                style={{
+                  height: `${props.itemSize}px`,
+                  transform: `translateY(${row.start}px)`,
+                }}
+                aria-posinset={row.index + 1}
+                aria-setsize={props.items.length}
+              >
+                {/* The virtualiser's count is the array's length, so the index
+                    is a valid key for the mapped row. */}
+                {props.children(props.items[row.index] as T, row.index)}
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
     </section>
   )
 }

package/src/organisms/index.ts

@@ -1,12 +1,15 @@
 export * from './AppSidebar'
 export * from './AuthCard'
 export * from './CommandPalette'
+export * from './DataState'
 export * from './DataTable'
 export * from './DetailHeader'
 export * from './FilterBar'
 export * from './KanbanBoard'
 export * from './MobileNav'
 export * from './PageToolbar'
+export * from './Section'
+export * from './SelectionBar'
 export * from './SettingsDialog'
 export * from './Sidebar'
 export * from './StatGrid'