@talelk/newui-organisms 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talelk/newui-organisms",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Application regions, sidebars, tables and widgets built from atoms and molecules.",
   "exports": {
@@ -14,8 +14,8 @@
     "src"
   ],
   "dependencies": {
-    "@talelk/newui-atoms": "1.0.0",
-    "@talelk/newui-molecules": "1.0.0",
+    "@talelk/newui-atoms": "1.0.1",
+    "@talelk/newui-molecules": "2.0.0",
     "@tanstack/solid-table": "^9.3.1",
     "@tanstack/solid-virtual": "^3.13.47"
   },

package/src/organisms/AppSidebar/AppSidebar.test.tsx

@@ -69,6 +69,42 @@ describe('AppSidebar', () => {
     expect(screen.getByRole('button', { name: /Rhea Kapoor/ })).toBeTruthy()
   })
 
+  it('keeps a compact utility slot and an expand control in the rail', () => {
+    render(() => (
+      <AppSidebar
+        brand={<span>Acme</span>}
+        collapsed
+        utilities={<span>Preferences</span>}
+        utilitiesCollapsed={<button type="button">Theme</button>}
+        groups={[{ items: [] }]}
+      />
+    ))
+    expect(screen.queryByText('Preferences')).toBeNull()
+    expect(screen.getByRole('button', { name: 'Theme' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Expand sidebar/ })).toBeTruthy()
+    expect(
+      screen.queryByRole('button', { name: /Collapse sidebar/ }),
+    ).toBeNull()
+  })
+
+  it('has no fold or compact utilities when it cannot collapse', () => {
+    render(() => (
+      <AppSidebar
+        brand={<span>Acme</span>}
+        collapsible={false}
+        utilities={<span>Preferences</span>}
+        utilitiesCollapsed={<button type="button">Theme</button>}
+        groups={[{ items: [] }]}
+      />
+    ))
+    expect(screen.getByText('Preferences')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Theme' })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Expand sidebar/ })).toBeNull()
+    expect(
+      screen.queryByRole('button', { name: /Collapse sidebar/ }),
+    ).toBeNull()
+  })
+
   it('collapses labels, preserves a compact tenant control and reports the state', async () => {
     const onCollapsedChange = vi.fn()
     sidebar(onCollapsedChange)

package/src/organisms/AppSidebar/AppSidebar.tsx

@@ -2,10 +2,10 @@ import { type IconProp, ScrollArea } from '@talelk/newui-atoms'
 import { For, type JSX, Show } from 'solid-js'
 import {
   Sidebar,
-  SidebarCollapseToggle,
   SidebarItem,
   SidebarLabel,
   type SidebarProps,
+  SidebarTrigger,
   useSidebar,
 } from '../Sidebar'
 
@@ -44,6 +44,10 @@ export interface AppSidebarProps {
   groups?: AppSidebarGroup[]
   /** Advanced navigation composition, still inside this single sidebar. */
   children?: JSX.Element | (() => JSX.Element)
+  /** Global utilities rendered above Settings while the sidebar is expanded. */
+  utilities?: JSX.Element
+  /** Compact icon form of `utilities`, shown while the sidebar is collapsed. */
+  utilitiesCollapsed?: JSX.Element
   settings?: JSX.Element
   account?: JSX.Element
   accountCollapsed?: JSX.Element
@@ -78,13 +82,29 @@ function AppSidebarIdentity(props: {
   brandCollapsed?: JSX.Element
   tenant?: JSX.Element
   tenantCollapsed?: JSX.Element
+  collapsible: boolean
 }): JSX.Element {
   const { collapsed } = useSidebar()
   return (
     <>
-      <div data-slot="app-sidebar-brand" class="shrink-0 px-2 pt-3 pb-2">
-        <Show when={collapsed()} fallback={props.brand}>
-          {props.brandCollapsed ?? props.brand}
+      <div
+        data-slot="app-sidebar-brand"
+        class="flex h-12 shrink-0 items-center gap-1 ps-2 pe-1"
+        classList={{ 'justify-center px-1': collapsed() }}
+      >
+        <div
+          class="flex min-w-0 flex-1 items-center"
+          classList={{ 'justify-center': collapsed() }}
+        >
+          <Show when={collapsed()} fallback={props.brand}>
+            {props.brandCollapsed ?? props.brand}
+          </Show>
+        </div>
+        {/* The fold is chrome, not a destination: keeping it in the identity
+            row keeps it out of the menu in the expanded state; the rail
+            repeats the same control under the tenant. */}
+        <Show when={!collapsed() && props.collapsible}>
+          <SidebarTrigger />
         </Show>
       </div>
       <Show when={props.tenant}>
@@ -92,30 +112,50 @@ function AppSidebarIdentity(props: {
           data-slot="app-sidebar-tenant"
           data-keep-drawer
           class="shrink-0 px-2 pb-2"
+          classList={{ 'flex justify-center': collapsed() }}
         >
           <Show when={collapsed()} fallback={props.tenant}>
             {props.tenantCollapsed}
           </Show>
         </div>
       </Show>
+      <Show when={collapsed() && props.collapsible}>
+        <div
+          data-slot="app-sidebar-expand"
+          class="flex shrink-0 justify-center border-b border-outline-gray-1 px-2 pt-1 pb-2"
+        >
+          <SidebarTrigger />
+        </div>
+      </Show>
     </>
   )
 }
 
 function AppSidebarFooter(props: {
+  utilities?: JSX.Element
+  utilitiesCollapsed?: JSX.Element
   settings?: JSX.Element
   account?: JSX.Element
   accountCollapsed?: JSX.Element
-  collapsible: boolean
 }): JSX.Element {
   const { collapsed } = useSidebar()
   return (
     <div
       data-slot="app-sidebar-footer"
-      class="mt-auto flex shrink-0 flex-col gap-1 px-2 pt-2 pb-2"
+      class="mt-auto flex shrink-0 flex-col gap-1 border-t border-outline-gray-1 px-2 pt-2 pb-2"
     >
-      <Show when={props.collapsible}>
-        <SidebarCollapseToggle />
+      <Show when={!collapsed() && props.utilities}>
+        <div data-slot="app-sidebar-utilities" class="pb-1">
+          {props.utilities}
+        </div>
+      </Show>
+      <Show when={collapsed() && props.utilitiesCollapsed}>
+        <div
+          data-slot="app-sidebar-utilities"
+          class="flex justify-center pb-0.5"
+        >
+          {props.utilitiesCollapsed}
+        </div>
       </Show>
       <Show when={props.settings}>{props.settings}</Show>
       <Show
@@ -136,7 +176,6 @@ export function AppSidebar(props: AppSidebarProps): JSX.Element {
       collapsed={props.collapsed}
       onCollapsedChange={props.onCollapsedChange}
       collapsible={props.collapsible}
-      shortcut={false}
       ariaLabel={props.ariaLabel ?? 'Application navigation'}
       class={props.class}
     >
@@ -145,6 +184,7 @@ export function AppSidebar(props: AppSidebarProps): JSX.Element {
         brandCollapsed={props.brandCollapsed}
         tenant={props.tenant}
         tenantCollapsed={props.tenantCollapsed}
+        collapsible={props.collapsible !== false}
       />
 
       <Show when={props.search}>
@@ -174,14 +214,18 @@ export function AppSidebar(props: AppSidebarProps): JSX.Element {
                         {(item) => (
                           <SidebarItem
                             active={item.active}
-                            label={item.label}
+                            label={
+                              item.count
+                                ? `${item.label}, ${item.count}`
+                                : item.label
+                            }
                             icon={item.icon}
                             route={item.route}
                             href={item.href}
                             onClick={() => item.onClick?.()}
                             suffix={
                               item.count ? (
-                                <span class="rounded-full bg-surface-gray-2 px-1.5 py-px text-caption tabular-nums text-ink-gray-7">
+                                <span class="rounded-full bg-surface-gray-2 px-1.5 py-px text-caption tabular-nums text-ink-gray-7 group-data-[active]:bg-surface-blue-2 group-data-[active]:text-ink-blue-8">
                                   {item.count}
                                 </span>
                               ) : undefined
@@ -204,10 +248,11 @@ export function AppSidebar(props: AppSidebarProps): JSX.Element {
       </ScrollArea.Root>
 
       <AppSidebarFooter
+        utilities={props.utilities}
+        utilitiesCollapsed={props.utilitiesCollapsed}
         settings={props.settings}
         account={props.account}
         accountCollapsed={props.accountCollapsed}
-        collapsible={props.collapsible !== false}
       />
     </Sidebar>
   )

package/src/organisms/AuthCard/AuthCard.tsx

@@ -13,6 +13,8 @@ export interface AuthCardProps {
   description?: JSX.Element
   /** The form itself — fields and the submit button. */
   children: JSX.Element
+  /** Form-level failure summary, above the fields. */
+  error?: JSX.Element
   /** Social sign-in buttons, in order. */
   providers?: AuthProvider[]
   /** The line under the form: "Don't have an account? Sign up". */
@@ -38,43 +40,50 @@ export function AuthCard(props: AuthCardProps): JSX.Element {
   return (
     <div
       data-slot="auth-card"
-      class={`flex min-h-screen items-center justify-center bg-surface-base px-4 py-12 ${props.class ?? ''}`}
+      class={`flex w-full max-w-sm flex-col gap-section-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad-wide ${props.class ?? ''}`}
     >
-      <div class="flex w-full max-w-sm flex-col gap-section-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad-wide shadow-sm">
-        <div class="flex flex-col items-center gap-3 text-center">
-          <Show when={props.logo}>{props.logo}</Show>
-          <div class="flex flex-col gap-1">
-            <h1 class="text-metric text-ink-gray-9">{props.title}</h1>
-            <Show when={props.description}>
-              <p class="text-base text-ink-gray-7">{props.description}</p>
-            </Show>
-          </div>
+      <div class="flex flex-col items-center gap-3 text-center">
+        <Show when={props.logo}>{props.logo}</Show>
+        <div class="flex flex-col gap-1">
+          <h1 class="text-heading text-ink-gray-9">{props.title}</h1>
+          <Show when={props.description}>
+            <p class="text-base text-ink-gray-7">{props.description}</p>
+          </Show>
         </div>
+      </div>
 
-        <div class="flex flex-col gap-4">{props.children}</div>
+      <Show when={props.error}>
+        <div
+          role="alert"
+          class="rounded-control border border-outline-red-3 bg-surface-red-1 px-3 py-2 text-interface text-ink-red-8"
+        >
+          {props.error}
+        </div>
+      </Show>
 
-        <Show when={hasProviders()}>
-          <Divider label="or" />
-          <div class="flex flex-col gap-2">
-            <For each={props.providers}>
-              {(provider) => (
-                <Button
-                  variant="outline"
-                  theme="gray"
-                  onClick={provider.onClick}
-                  iconLeft={provider.icon}
-                >
-                  {provider.label}
-                </Button>
-              )}
-            </For>
-          </div>
-        </Show>
+      <div class="flex flex-col gap-4">{props.children}</div>
 
-        <Show when={props.footer}>
-          <p class="text-center text-base text-ink-gray-7">{props.footer}</p>
-        </Show>
-      </div>
+      <Show when={hasProviders()}>
+        <Divider label="or" />
+        <div class="flex flex-col gap-2">
+          <For each={props.providers}>
+            {(provider) => (
+              <Button
+                variant="outline"
+                theme="gray"
+                onClick={provider.onClick}
+                iconLeft={provider.icon}
+              >
+                {provider.label}
+              </Button>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={props.footer}>
+        <p class="text-center text-base text-ink-gray-7">{props.footer}</p>
+      </Show>
     </div>
   )
 }

package/src/organisms/CommandPalette/CommandPalette.tsx

@@ -121,6 +121,8 @@ export interface CommandPaletteProps {
   size?: 'sm' | 'md' | 'lg' | 'xl'
   /** Rendered when nothing matches. */
   empty?: JSX.Element
+  /** Replaces the list with a loading row while commands register. */
+  loading?: boolean
   class?: string
   children: JSX.Element
 }
@@ -306,8 +308,17 @@ export function CommandPalette(props: CommandPaletteProps): JSX.Element {
                 so hiding the list until the registry is non-empty deadlocks —
                 no items, so no registry, so the empty state, forever.
               */}
-              {props.children}
-              <Show when={isEmpty()}>
+              <Show when={!props.loading}>{props.children}</Show>
+              <Show when={props.loading}>
+                <div
+                  role="option"
+                  aria-disabled="true"
+                  class="px-2 py-6 text-center text-base text-ink-gray-6"
+                >
+                  Loading commands…
+                </div>
+              </Show>
+              <Show when={!props.loading && isEmpty()}>
                 {/* A listbox may only contain options/groups: the empty
                     message is a disabled option, the one shape a screen
                     reader can address inside the list. */}

package/src/organisms/DataState/DataState.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { DataState } from './DataState'
+
+describe('DataState', () => {
+  it('renders ready children unchanged', () => {
+    render(() => (
+      <DataState status="ready">
+        <p>Rows</p>
+      </DataState>
+    ))
+    expect(screen.getByText('Rows')).toBeTruthy()
+  })
+
+  it('announces loading and renders the requested skeleton', () => {
+    const { container } = render(() => (
+      <DataState status="loading" skeleton="cards" />
+    ))
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeTruthy()
+    expect(container.querySelectorAll('[data-slot="skeleton"]').length).toBe(4)
+  })
+
+  it('renders an empty state action', () => {
+    render(() => (
+      <DataState
+        status="empty"
+        title="No expenses"
+        action={<button type="button">Clear filters</button>}
+      />
+    ))
+    expect(screen.getByText('No expenses')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Clear filters' })).toBeTruthy()
+  })
+
+  it('offers retry on error', async () => {
+    const onRetry = vi.fn()
+    render(() => (
+      <DataState status="error" error="The request failed" onRetry={onRetry} />
+    ))
+    expect(screen.getByRole('alert')).toBeTruthy()
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(onRetry).toHaveBeenCalled()
+  })
+})

package/src/organisms/DataState/DataState.tsx

@@ -0,0 +1,111 @@
+import { Button, type IconProp, Skeleton } from '@talelk/newui-atoms'
+import { EmptyState } from '@talelk/newui-molecules'
+import { For, type JSX, Show } from 'solid-js'
+
+export type DataStatus = 'ready' | 'loading' | 'empty' | 'error'
+export type DataSkeleton = 'rows' | 'cards' | 'chart'
+
+export interface DataStateProps {
+  status: DataStatus
+  /** Skeleton shape while loading. @default 'rows' */
+  skeleton?: DataSkeleton
+  /** Skeleton row count. @default 5 */
+  rows?: number
+  title?: JSX.Element
+  description?: JSX.Element
+  action?: JSX.Element
+  /** Icon shown in the empty state. @default 'lucide-inbox' */
+  icon?: IconProp
+  error?: JSX.Element
+  onRetry?: () => void
+  children?: JSX.Element
+}
+
+function Loading(props: { skeleton: DataSkeleton; rows: number }): JSX.Element {
+  return (
+    <div
+      data-slot="data-state-loading"
+      role="status"
+      aria-label="Loading"
+      class="p-card-pad"
+    >
+      <Show when={props.skeleton === 'rows'}>
+        <div class="flex flex-col gap-2">
+          <For each={Array.from({ length: props.rows })}>
+            {() => <Skeleton lines={1} class="h-9" />}
+          </For>
+        </div>
+      </Show>
+      <Show when={props.skeleton === 'cards'}>
+        <div class="grid grid-cols-1 gap-3 min-[360px]:grid-cols-2 xl:grid-cols-4">
+          <For each={Array.from({ length: 4 })}>
+            {() => <Skeleton lines={3} class="h-24" />}
+          </For>
+        </div>
+      </Show>
+      <Show when={props.skeleton === 'chart'}>
+        <Skeleton lines={4} class="h-64" />
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * The one loading / empty / error contract for data organisms.
+ *
+ * It composes the existing `Skeleton` and `EmptyState` molecules, so every
+ * region uses the same tone and action placement. `ready` renders its children
+ * unchanged.
+ */
+export function DataState(props: DataStateProps): JSX.Element {
+  return (
+    <Show
+      when={props.status === 'ready'}
+      fallback={<StateFallback {...props} />}
+    >
+      {props.children}
+    </Show>
+  )
+}
+
+function StateFallback(props: DataStateProps): JSX.Element {
+  return (
+    <Show
+      when={props.status === 'loading'}
+      fallback={
+        <Show
+          when={props.status === 'error'}
+          fallback={
+            <div data-slot="data-state-empty">
+              <EmptyState
+                icon={props.icon ?? 'lucide-inbox'}
+                title={props.title ?? 'Nothing here yet'}
+                description={props.description}
+                action={props.action}
+              />
+            </div>
+          }
+        >
+          <div data-slot="data-state-error" role="alert">
+            <EmptyState
+              icon="lucide-triangle-alert"
+              title={props.title ?? 'Could not load this'}
+              description={props.error ?? props.description}
+              action={
+                props.onRetry ? (
+                  <Button variant="outline" onClick={props.onRetry}>
+                    Try again
+                  </Button>
+                ) : (
+                  props.action
+                )
+              }
+            />
+          </div>
+        </Show>
+      }
+    >
+      <Loading skeleton={props.skeleton ?? 'rows'} rows={props.rows ?? 5} />
+    </Show>
+  )
+}

package/src/organisms/DataState/index.ts

@@ -0,0 +1,6 @@
+export {
+  type DataSkeleton,
+  DataState,
+  type DataStateProps,
+  type DataStatus,
+} from './DataState'

package/src/organisms/DataTable/DataTable.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@solidjs/testing-library'
+import { render, screen, waitFor, within } from '@solidjs/testing-library'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { DataTable, type DataTableColumn } from './DataTable'
@@ -25,6 +25,16 @@ const COLUMNS: DataTableColumn<Row>[] = [
   },
 ]
 
+const MOBILE_COLUMNS: DataTableColumn<Row>[] = [
+  { accessorKey: 'name', header: 'Name', meta: { mobile: 'title' } },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: (context) => `$${context.getValue()}`,
+    meta: { align: 'end', mobile: 'amount' },
+  },
+]
+
 function table(props: Partial<Parameters<typeof DataTable<Row>>[0]> = {}) {
   return render(() => (
     <DataTable
@@ -82,6 +92,68 @@ describe('DataTable', () => {
     })
   })
 
+  it('renders mobile cards from column meta', () => {
+    table({ columns: MOBILE_COLUMNS })
+    const cards = document.querySelector('[data-slot="data-table-cards"]')
+    expect(cards).toBeTruthy()
+    expect(within(cards as HTMLElement).getByText('Alpha')).toBeTruthy()
+    expect(within(cards as HTMLElement).getByText('$30')).toBeTruthy()
+  })
+
+  it('skips ineligible rows in selection and select-all', async () => {
+    const onRowsAction = vi.fn()
+    table({
+      columns: MOBILE_COLUMNS,
+      rowSelectable: (row) => row.id !== '2',
+      onRowsAction,
+    })
+    const tableRegion = screen.getByRole('region', { name: 'Rows table' })
+    expect(
+      within(tableRegion)
+        .getAllByRole('checkbox', { name: 'Select 2' })
+        .every((box) => box.hasAttribute('disabled')),
+    ).toBe(true)
+    await userEvent.click(
+      within(tableRegion).getByRole('checkbox', {
+        name: 'Select all rows on this page',
+      }),
+    )
+    const bulk = await screen.findByRole('button', {
+      name: /Update selected \(2\)/,
+    })
+    await userEvent.click(bulk)
+    expect(onRowsAction).toHaveBeenCalledWith(['1', '3'])
+  })
+
+  it('keeps a stable titled toolbar when an external filter bar owns search', () => {
+    render(() => (
+      <DataTable title="Rows" rows={ROWS} columns={COLUMNS} hideSearch />
+    ))
+    const toolbar = document.querySelector('[data-slot="data-table-toolbar"]')
+    expect(toolbar?.textContent).toContain('Rows')
+    expect(
+      document.querySelector('[data-slot="data-table-columns"]'),
+    ).toBeTruthy()
+  })
+
+  it('renders the shared loading and error states', () => {
+    const loading = render(() => (
+      <DataTable title="Rows" rows={[]} columns={COLUMNS} loading />
+    ))
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeTruthy()
+    loading.unmount()
+    render(() => (
+      <DataTable title="Rows" rows={[]} columns={COLUMNS} error="Failed" />
+    ))
+    expect(screen.getByRole('alert')).toBeTruthy()
+  })
+
+  it('shows the mobile selection bar once a row is selected', async () => {
+    table({ onRowsAction: () => {} })
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Select 1' }))
+    expect(document.querySelector('[data-slot="selection-bar"]')).toBeTruthy()
+  })
+
   it('can be a read-only table with no selection column', () => {
     table({ selectable: false })
     expect(screen.queryByRole('checkbox', { name: /Select/ })).toBeNull()