@talelk/newui-organisms 1.0.0 → 2.1.0

package/src/organisms/Sidebar/Sidebar.tsx

@@ -33,11 +33,14 @@ const COLLAPSE_QUERY = '(max-width: 639px)'
 interface SidebarContextValue {
   collapsed: Accessor<boolean>
   toggle: () => void
+  /** Whether `⌘B`/`Ctrl+B` is bound here, so chrome only advertises a real hint. */
+  shortcut: Accessor<boolean>
 }
 
 const SidebarContext = createContext<SidebarContextValue>({
   collapsed: () => false,
   toggle: () => {},
+  shortcut: () => false,
 })
 
 /** Collapsed state + toggle, shared with every part inside a `Sidebar`. */
@@ -83,6 +86,7 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   const [internal, setInternal] = createSignal<boolean | null>(null)
 
   const collapsible = () => local.collapsible ?? true
+  const shortcut = () => local.shortcut !== false && collapsible()
   const shouldCollapse = () =>
     collapsible() &&
     (local.collapsed !== undefined
@@ -96,7 +100,7 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   }
 
   onMount(() => {
-    if (local.shortcut === false || !collapsible()) return
+    if (!shortcut()) return
     const onKey = (event: KeyboardEvent) => {
       if (event.key.toLowerCase() !== 'b') return
       if (!event.metaKey && !event.ctrlKey) return
@@ -108,7 +112,9 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   })
 
   return (
-    <SidebarContext.Provider value={{ collapsed: shouldCollapse, toggle }}>
+    <SidebarContext.Provider
+      value={{ collapsed: shouldCollapse, toggle, shortcut }}
+    >
       <nav
         data-slot="sidebar"
         data-state={shouldCollapse() ? 'collapsed' : 'expanded'}
@@ -162,7 +168,7 @@ export const SidebarHeader: ParentComponent<SidebarHeaderProps> = (props) => {
     <div
       data-slot="sidebar-header"
       class={cn(
-        'flex h-12 shrink-0 items-center justify-between gap-2 px-1',
+        'flex h-12 shrink-0 items-center justify-between gap-2 px-2',
         local.class,
       )}
     >
@@ -235,11 +241,11 @@ export const SidebarLabel: ParentComponent<SidebarLabelProps> = (props) => {
   return (
     <div
       data-slot="sidebar-label"
-      class={cn('relative flex h-7 items-center pl-2', local.class)}
+      class={cn('relative flex h-8 items-center px-2 pt-2', local.class)}
     >
       <div
         class={cn(
-          'text-base leading-tighter text-ink-gray-7',
+          'text-xs font-medium text-ink-gray-6',
           collapsed() ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100',
         )}
       >
@@ -319,9 +325,9 @@ export const SidebarItem: ParentComponent<SidebarItemProps> = (props) => {
 
   const rowClasses = () =>
     cn(
-      'relative flex h-8 w-full items-center rounded-control text-interface text-ink-gray-6',
+      'group relative flex h-8 w-full items-center rounded-control text-interface text-ink-gray-7',
       'transition-colors hover:bg-surface-gray-2 motion-reduce:transition-none',
-      'data-[active]:bg-surface-blue-1 data-[active]:text-ink-blue-8',
+      'data-[active]:bg-surface-blue-1 data-[active]:font-medium data-[active]:text-ink-blue-8',
       local.class,
     )
   const innerClasses = () =>
@@ -439,7 +445,7 @@ export function SidebarSearch(props: SidebarSearchProps): JSX.Element {
 }
 
 export interface SidebarTriggerProps {
-  /** Tooltip copy. Defaults to Collapse/Expand, per state. */
+  /** Tooltip and accessible copy. Defaults to Collapse sidebar/Expand sidebar. */
   label?: string
   class?: string
 }
@@ -453,9 +459,10 @@ export interface SidebarTriggerProps {
  * `SidebarItem` at the bottom of the list); this is the compact one.
  */
 export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
-  const { collapsed, toggle } = useSidebar()
+  const { collapsed, toggle, shortcut } = useSidebar()
   const text = () =>
     props.label ?? (collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
+  const hint = () => (shortcut() ? `${text()} · ⌘B` : text())
 
   return (
     <TooltipRoot placement="bottom" openDelay={300}>
@@ -478,7 +485,7 @@ export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
           )}
         />
       </TooltipTrigger>
-      <TooltipContent>{`${text()} · ⌘B`}</TooltipContent>
+      <TooltipContent>{hint()}</TooltipContent>
     </TooltipRoot>
   )
 }

package/src/organisms/StatGrid/StatGrid.test.tsx

@@ -77,7 +77,19 @@ describe('StatGrid', () => {
     const className = container.querySelector(
       '[data-slot="stat-grid"]',
     )?.className
-    expect(className).toContain('sm:grid-cols-2')
+    expect(className).toContain('min-[360px]:grid-cols-2')
     expect(className).toContain('xl:grid-cols-3')
   })
+
+  it('compact cards use the tight padding and omit the icon tile', () => {
+    const { container } = render(() => (
+      <StatGrid
+        compact
+        stats={[{ label: 'One', value: '1', icon: 'lucide-house' }]}
+      />
+    ))
+    const card = container.querySelector('[data-slot="stat"]')
+    expect(card?.className).toContain('p-2.5')
+    expect(card?.querySelector('.bg-surface-gray-2')).toBeNull()
+  })
 })

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.a11y.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { VirtualList } from './VirtualList'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+const ROWS = Array.from({ length: 1000 }, (_, index) => ({
+  id: `ROW-${index + 1}`,
+  title: `Row ${index + 1}`,
+}))
+
+interface Row {
+  id: string
+  title: string
+}
+
+const EMPTY: Row[] = []
+
+/**
+ * jsdom has no layout, so the viewport reports a zero rect and the virtualiser
+ * renders nothing. The tests give every element a 440px box, which is the only
+ * measurement the list needs.
+ */
+class MeasuredObserver {
+  constructor(private readonly callback: ResizeObserverCallback) {}
+  observe(target: Element) {
+    const rect = target.getBoundingClientRect()
+    this.callback(
+      [
+        {
+          target,
+          contentRect: rect,
+          borderBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
+          contentBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
+        } as unknown as ResizeObserverEntry,
+      ],
+      this as unknown as ResizeObserver,
+    )
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+function withLayout() {
+  const rect = {
+    width: 600,
+    height: 440,
+    top: 0,
+    left: 0,
+    right: 600,
+    bottom: 440,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect
+  const spy = vi
+    .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+    .mockReturnValue(rect)
+  // The jsdom shim observes nothing; the virtualiser needs one measurement.
+  vi.stubGlobal('ResizeObserver', MeasuredObserver)
+  return spy
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.restoreAllMocks()
+})
+
+describe('VirtualList accessibility', () => {
+  it('has no axe violations for a virtualised list of rows', async () => {
+    withLayout()
+    const { container } = render(() => (
+      <VirtualList label="Rows" items={ROWS} itemSize={72} height="440px">
+        {(row) => <span>{row.title}</span>}
+      </VirtualList>
+    ))
+    expect(screen.getAllByRole('listitem').length).toBeGreaterThan(0)
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for the empty state', async () => {
+    const { container } = render(() => (
+      <VirtualList
+        label="Rows"
+        items={EMPTY}
+        itemSize={72}
+        emptyTitle="No rows yet"
+        emptyDescription="Create the first one."
+      >
+        {(row) => <span>{row.title}</span>}
+      </VirtualList>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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'