@startsimpli/ui 0.4.124 → 0.4.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.124",
+  "version": "0.4.125",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -47,9 +47,9 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "^0.5.59",
-    "@startsimpli/i18n": "^0.1.3",
-    "@startsimpli/auth": "^0.4.35"
+    "@startsimpli/api": "^0.5.60",
+    "@startsimpli/auth": "^0.4.35",
+    "@startsimpli/i18n": "^0.1.3"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -123,8 +123,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/realtime": "0.0.2",
-    "@startsimpli/i18n": "0.1.3"
+    "@startsimpli/i18n": "0.1.3",
+    "@startsimpli/realtime": "0.0.2"
   },
   "keywords": [
     "ui",

package/src/components/dashboard/DashboardGrid.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 export interface DashboardGridProps {
   children: React.ReactNode
   /** Number of columns at lg breakpoint */
-  columns?: 1 | 2 | 3 | 4
+  columns?: 1 | 2 | 3 | 4 | 5
   /** Gap size between items */
   gap?: 'sm' | 'md' | 'lg'
   className?: string
@@ -16,6 +16,8 @@ const colMap = {
   2: 'lg:grid-cols-2',
   3: 'lg:grid-cols-3',
   4: 'sm:grid-cols-2 lg:grid-cols-4',
+  // Five cards are too narrow at lg once a sidebar takes its share.
+  5: 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
 } as const
 
 export function DashboardGrid({

package/src/components/dashboard/MetricCard.tsx

@@ -4,7 +4,12 @@ import { Numeral } from './Numeral'
 import { SparklineTrend } from './SparklineTrend'
 
 export interface MetricCardTrend {
-  value: number
+  /**
+   * Percent change, already in percent units (12 renders '+12%'). Omit it to
+   * show only `label`, for a caption that is not a percent change (a ratio,
+   * a rank) and must not be rendered as one.
+   */
+  value?: number
   isPositive?: boolean
   label?: string
 }
@@ -70,8 +75,8 @@ export function MetricCard({
           </p>
 
           {/* Trend Indicator */}
-          {trend && !isLoading && !error && (
-            <TrendIndicator trend={trend} />
+          {trend?.value != null && !isLoading && !error && (
+            <TrendIndicator value={trend.value} isPositive={trend.isPositive} />
           )}
         </div>
 
@@ -108,34 +113,34 @@ export function MetricCard({
   return content
 }
 
-function TrendIndicator({ trend }: { trend: MetricCardTrend }) {
+function TrendIndicator({ value, isPositive }: { value: number; isPositive?: boolean }) {
   const colorClass =
-    trend.isPositive === true
+    isPositive === true
       ? 'text-green-600'
-      : trend.isPositive === false
+      : isPositive === false
         ? 'text-red-600'
         : 'text-gray-500'
 
   return (
     <div className={`flex items-center gap-1 text-xs font-medium ${colorClass}`}>
-      {trend.isPositive === true && (
+      {isPositive === true && (
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
           <path strokeLinecap="round" strokeLinejoin="round" d="M2 17L12 7l10 10" />
         </svg>
       )}
-      {trend.isPositive === false && (
+      {isPositive === false && (
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
           <path strokeLinecap="round" strokeLinejoin="round" d="M2 7l10 10L22 7" />
         </svg>
       )}
-      {trend.isPositive === undefined && (
+      {isPositive === undefined && (
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
           <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
         </svg>
       )}
       {/* Sign and '%' are both bidi-neutral — unpinned, '+12%' reorders. */}
       <Numeral>
-        {trend.value > 0 ? '+' : ''}{trend.value}%
+        {value > 0 ? '+' : ''}{value}%
       </Numeral>
     </div>
   )

package/src/components/dashboard/__tests__/dashboard.test.tsx

@@ -122,6 +122,17 @@ describe('MetricCard', () => {
       )
       expect(screen.queryByText('+5%')).not.toBeInTheDocument()
     })
+
+    // A caption that is not a percent change (a ratio, a rank) must not be
+    // dressed up as one: label only, no '%' chip.
+    it('renders a label-only trend without a percent chip', () => {
+      const { container } = render(
+        <MetricCard {...baseProps} trend={{ label: 'OI 1.41' }} />
+      )
+      expect(screen.getByText('OI 1.41')).toBeInTheDocument()
+      expect(container.textContent).not.toContain('%')
+      expect(container.querySelector('.text-gray-500 svg, .text-green-600 svg, .text-red-600 svg')).toBeNull()
+    })
   })
 
   describe('sparkline', () => {
@@ -674,6 +685,14 @@ describe('DashboardGrid', () => {
     expect(grid).toHaveClass('lg:grid-cols-4')
   })
 
+  it('steps 5 columns down to 3 at lg so cards keep their width', () => {
+    const { container } = render(<DashboardGrid columns={5}><div /></DashboardGrid>)
+    const grid = container.firstChild as HTMLElement
+    expect(grid).toHaveClass('sm:grid-cols-2')
+    expect(grid).toHaveClass('lg:grid-cols-3')
+    expect(grid).toHaveClass('xl:grid-cols-5')
+  })
+
   it('applies gap-4 for gap="sm"', () => {
     const { container } = render(<DashboardGrid gap="sm"><div /></DashboardGrid>)
     expect(container.firstChild).toHaveClass('gap-4')