@duro-app/ui 4.5.0 → 5.1.0

package/src/components/VirtualTable/VirtualTable.stories.tsx

@@ -3,10 +3,11 @@ import {expect, fn, waitFor} from 'storybook/test'
 import {createColumnHelper} from '@tanstack/react-table'
 import {css, html} from 'react-strict-dom'
 import {VirtualTable} from './VirtualTable'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const storyStyles = css.create({
   // Phone-width wrapper: below VirtualTable's 640px stackBelow default.
-  narrow: {width: 400},
+  narrow: {width: sizes.dialogSm},
 })
 
 interface Item {
@@ -49,7 +50,7 @@ export const SmallList: Story = {
 export const Virtualized: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     rangeLabel: ({from, to, total}) => `${from}-${to} of ${total}`,
     onVisiblePageChange: fn(),
   },
@@ -69,7 +70,7 @@ export const Virtualized: Story = {
 export const ScrollReportsPage: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     pageSize: 50,
     rangeLabel: ({page, pages}) => `page ${page}/${pages}`,
     onVisiblePageChange: fn(),

package/src/components/VirtualTable/VirtualTable.tsx

@@ -13,6 +13,8 @@ import {
 import {useVirtualizer} from '@tanstack/react-virtual'
 import {breakpointsPx, type Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
 import {styles} from './styles.css'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {resolveLength, type Length} from '../../shared/length'
 
 // Measure + commit before paint on the client; no-op-safe on the server.
 const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
@@ -56,7 +58,7 @@ interface VirtualTableProps<TData> {
   /** Estimated row height for the virtualizer. Default 44. */
   estimateRowHeight?: number
   /** Max height of the scroll viewport once virtualized. Default '70vh'. */
-  maxHeight?: number | string
+  maxHeight?: Length
   /** Render every row (no windowing) at or below this count. Default 150. */
   virtualizeThreshold?: number
   /**
@@ -94,7 +96,7 @@ export function VirtualTable<TData>({
   onVisiblePageChange,
   rangeLabel,
   pageSize = 50,
-  estimateRowHeight = 44,
+  estimateRowHeight = SIZES_PX.touchTarget,
   maxHeight = '70vh',
   virtualizeThreshold = 150,
   stackBelow = 'sm',
@@ -288,7 +290,7 @@ export function VirtualTable<TData>({
         role="table"
         style={[
           stacked ? styles.stackScroll : styles.scroll,
-          virtualize && styles.scrollMax(maxHeight),
+          virtualize && styles.scrollMax(resolveLength(maxHeight)),
         ]}
       >
         {stacked ? null : (

package/src/components/VirtualTable/styles.css.ts

@@ -1,7 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   wrap: {
@@ -11,7 +12,7 @@ export const styles = css.create({
   scroll: {
     position: 'relative',
     width: '100%',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
@@ -32,7 +33,7 @@ export const styles = css.create({
   headRow: {
     display: 'flex',
     flexDirection: 'row',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -71,7 +72,7 @@ export const styles = css.create({
     flexDirection: 'row',
     alignItems: 'center',
     width: '100%',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -124,7 +125,7 @@ export const styles = css.create({
     gap: spacing.xs,
     width: '100%',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -161,13 +162,13 @@ export const styles = css.create({
     position: 'absolute',
     right: spacing.sm,
     bottom: spacing.sm,
-    paddingTop: 3,
-    paddingBottom: 3,
+    paddingTop: microSpacing.px3,
+    paddingBottom: microSpacing.px3,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     borderRadius: radii.full,
     backgroundColor: colors.bgCardHover,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     color: colors.textMuted,

package/src/docs/Spacing.stories.tsx

@@ -7,6 +7,8 @@ import {Inline} from '../components/Inline/Inline'
 import {useContainerQuery} from '../hooks/useContainerQuery'
 import {TokenTable} from './helpers'
 import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const primitiveTokens: Record<string, string> = {
   xs: '4px',
@@ -33,7 +35,7 @@ export default meta
 
 const styles = css.create({
   wrapper: {
-    maxWidth: 640,
+    maxWidth: sizes.panelLg,
   },
   hint: {
     fontSize: typography.fontSizeXs,
@@ -41,10 +43,10 @@ const styles = css.create({
     fontStyle: 'italic',
   },
   baselineRow: {
-    height: 24,
+    height: sizes.iconLg,
     display: 'flex',
     alignItems: 'center',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'dashed',
     borderBottomColor: colors.border,
   },
@@ -52,11 +54,10 @@ const styles = css.create({
     fontSize: typography.fontSizeXs,
     fontFamily: 'monospace',
     color: colors.textMuted,
-    width: 50,
+    width: sizes.iconXxl,
   },
   baselineBlock: {
-    flexGrow: 1,
-    height: 24,
+    height: sizes.iconLg,
     backgroundColor: colors.accent,
     opacity: 0.15,
     borderRadius: radii.xs,
@@ -64,13 +65,13 @@ const styles = css.create({
   resizableContainer: {
     resize: 'horizontal',
     overflow: 'auto',
-    borderWidth: 2,
+    borderWidth: borders.strong,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
-    minWidth: 200,
+    minWidth: sizes.listMaxHSm,
     maxWidth: '100%',
-    width: 600,
+    width: sizes.pageSm,
   },
   sizeLabel: {
     fontSize: typography.fontSizeHeading,
@@ -87,7 +88,7 @@ const styles = css.create({
     color: colors.successText,
   },
   mappingRow: {
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     fontFamily: 'monospace',

package/src/docs/Typography.stories.tsx

@@ -8,6 +8,8 @@ import {Text} from '../components/Text/Text'
 import {Heading} from '../components/Heading/Heading'
 import {TypeScaleTable} from './helpers'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Foundations/Typography',
@@ -169,7 +171,7 @@ export const TextVariants: StoryObj = {
 
 const localStyles = css.create({
   wrapper: {
-    maxWidth: 720,
+    maxWidth: sizes.dialogLg,
   },
   hint: {
     fontSize: typography.fontSizeXs,
@@ -187,8 +189,8 @@ const localStyles = css.create({
     position: 'relative',
   },
   gridLine: {
-    height: 24,
-    borderBottomWidth: 1,
+    height: sizes.iconLg,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'dashed',
     borderBottomColor: colors.border,
   },
@@ -201,12 +203,12 @@ const localStyles = css.create({
   resizableContainer: {
     resize: 'horizontal',
     overflow: 'auto',
-    borderWidth: 2,
+    borderWidth: borders.strong,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
-    minWidth: 280,
+    minWidth: sizes.gridColMd,
     maxWidth: '100%',
-    width: 700,
+    width: sizes.dialogLg,
   },
 })

package/src/docs/helpers.tsx

@@ -1,12 +1,13 @@
 import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {Table} from '../components/Table/Table'
 import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const styles = css.create({
   bar: {
-    height: 12,
+    height: sizes.glyphSm,
     borderRadius: radii.xs,
     backgroundColor: colors.accent,
   },

package/src/shared/length.ts

@@ -0,0 +1,70 @@
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {SIZE_KEYS, type SizeToken} from '@duro-app/tokens/keys'
+
+/**
+ * A length a measure prop accepts without a token: zero, a relative unit or a
+ * keyword. These are the exemptions of design-system.every-measure-is-a-token
+ * (ADR-0027); a px value is not one of them.
+ */
+export type RelativeLength =
+  | 0
+  | '0'
+  | 'auto'
+  | 'none'
+  | 'min-content'
+  | 'max-content'
+  | 'fit-content'
+  | `${number}%`
+  | `${number}vh`
+  | `${number}vw`
+  | `${number}dvh`
+  | `${number}svh`
+  | `${number}lvh`
+  | `${number}em`
+  | `${number}rem`
+  | `${number}ch`
+
+/** A measure prop: a `sizes` token key (`"gridColMd"`) or a relative length. */
+export type Length = SizeToken | RelativeLength
+
+/** A Length written as a string, as it appears inside a track function. */
+type LengthString = Exclude<Length, number>
+
+/** One argument of `minmax()`: a Length or a fraction. */
+type TrackBreadth = LengthString | `${number}fr`
+
+/**
+ * A CSS grid track: a Length, a fraction, or a track function whose
+ * arguments are themselves Lengths or fractions — `'minmax(gridColSm, 1fr)'`,
+ * `'minmax(0, 2fr)'`, `'fit-content(labelMinW)'`. A px inside is a type
+ * error, as it is anywhere else. Arguments are separated by `, `.
+ */
+export type GridTrack =
+  | Length
+  | `${number}fr`
+  | `minmax(${TrackBreadth}, ${TrackBreadth})`
+  | `fit-content(${LengthString})`
+
+const sizeKeys: ReadonlySet<string> = new Set(SIZE_KEYS)
+
+/** The CSS value for a Length: a size token key becomes its variable. */
+export function resolveLength(value: Length): string | number {
+  return typeof value === 'string' && sizeKeys.has(value) ? sizes[value as SizeToken] : value
+}
+
+/**
+ * The CSS value for a GridTrack: a size token key becomes its variable, also
+ * as an argument of `minmax()` / `fit-content()`.
+ */
+export function resolveTrack(track: GridTrack): string | number {
+  // Read as a plain value: narrowing the template-literal union is more than
+  // the checker will represent (TS2590), and the callers only need the CSS.
+  const value: string | number = track
+  if (typeof value !== 'string') return value
+  const fn = /^(minmax|fit-content)\((.*)\)$/.exec(value)
+  if (fn) {
+    const args = fn[2]!.split(',').map((arg) => String(resolveLength(arg.trim() as Length)))
+    return `${fn[1]}(${args.join(', ')})`
+  }
+  return sizeKeys.has(value) ? sizes[value as SizeToken] : value
+}

package/src/shared/length.typecheck.tsx

@@ -0,0 +1,56 @@
+// Compile-only fixtures for measure props (ADR-0027, plan 2c′). `pnpm typecheck`
+// fails if a raw px becomes assignable to a measure prop, or if a token key or
+// a relative length stops being. Never imported at runtime.
+
+import type {Grid} from '../components/Grid/Grid'
+import type {InputGroup} from '../components/InputGroup/InputGroup'
+import type {ScrollArea} from '../components/ScrollArea/ScrollArea'
+import type {Table} from '../components/Table/Table'
+import type {VirtualTable} from '../components/VirtualTable/VirtualTable'
+import type {GridTrack, Length} from './length'
+
+/** `true` when every member of T is assignable to U. */
+type Assignable<T, U> = [T] extends [U] ? true : false
+
+/** The props a function component takes. */
+type PropsOf<C> = C extends (props: infer P) => unknown ? P : never
+type Prop<C, K extends keyof PropsOf<C>> = NonNullable<PropsOf<C>[K]>
+
+// Accepted: token keys, zero, relative lengths, keywords.
+export const lengthTokens: Assignable<'gridColMd' | 'touchTarget', Length> = true
+export const lengthRelative: Assignable<0 | '0' | '100%' | '70vh' | '2rem' | 'auto', Length> = true
+export const trackForms: Assignable<
+  'iconButton' | '2fr' | 'max-content' | 'minmax(0, 2fr)',
+  GridTrack
+> = true
+
+// Refused: px as a string or a number.
+export const lengthPxString: Assignable<'280px', Length> = false
+export const lengthPxNumber: Assignable<44, Length> = false
+export const trackPx: Assignable<'40px', GridTrack> = false
+export const trackMinmaxPx: Assignable<'minmax(40px, 1fr)', GridTrack> = false
+export const trackFitPx: Assignable<'fit-content(120px)', GridTrack> = false
+export const trackMinmaxTokens: Assignable<
+  | 'minmax(gridColSm, 1fr)'
+  | 'minmax(0, 2fr)'
+  | 'minmax(labelMinW, auto)'
+  | 'fit-content(labelMinW)',
+  GridTrack
+> = true
+
+// The props themselves.
+export const gridMin: Assignable<'280px', Prop<typeof Grid, 'minColumnWidth'>> = false
+export const gridMinToken: Assignable<'gridColMd', Prop<typeof Grid, 'minColumnWidth'>> = true
+export const addonMin: Assignable<80, Prop<typeof InputGroup.Addon, 'minWidth'>> = false
+export const viewportMax: Assignable<300, Prop<typeof ScrollArea.Viewport, 'maxHeight'>> = false
+export const viewportMaxToken: Assignable<
+  'listMaxH',
+  Prop<typeof ScrollArea.Viewport, 'maxHeight'>
+> = true
+export const tableMin: Assignable<120, Prop<typeof Table.Root, 'minColumnWidth'>> = false
+export const headerWidth: Assignable<'40px', Prop<typeof Table.HeaderCell, 'width'>> = false
+export const headerWidthToken: Assignable<
+  'iconButton',
+  Prop<typeof Table.HeaderCell, 'width'>
+> = true
+export const virtualMax: Assignable<300, Prop<typeof VirtualTable, 'maxHeight'>> = false

package/src/styles/visually-hidden.css.ts

@@ -0,0 +1,16 @@
+import {css} from 'react-strict-dom'
+
+// The visually-hidden technique: a 1×1 box clipped by overflow, still in the
+// accessibility tree and still focusable where the element is. The 1px is the
+// technique, not a design measure, so this module is the one file the
+// every-measure-is-a-token rule exempts (ADR-0027; `exemptFiles` in
+// eslint.config.js). Components layer their own extras on top (`opacity: 0`
+// for a native input, `clip` for a label).
+export const visuallyHidden = css.create({
+  base: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+  },
+})