@duro-app/ui 5.0.0 → 5.2.0

package/src/docs/FlexGrow.stories.tsx

@@ -0,0 +1,83 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+// The premise of `duro/no-flex-grow-web` was that react-strict-dom's web
+// runtime forces `flex-grow: 0`, so a growing child collapses. These stories
+// hold RSD on web to what it actually does, so the rule follows the evidence.
+const meta: Meta = {
+  title: 'Foundations/flexGrow on web',
+}
+
+export default meta
+type Story = StoryObj
+
+const styles = css.create({
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: sizes.panelLg,
+    gap: spacing.sm,
+    backgroundColor: colors.bgCard,
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: sizes.panelSm,
+    width: sizes.panelSm,
+    backgroundColor: colors.bgCard,
+  },
+  fixed: {
+    width: sizes.iconXxl,
+    height: sizes.iconXxl,
+    flexShrink: 0,
+    backgroundColor: colors.border,
+  },
+  grow: {
+    flexGrow: 1,
+    backgroundColor: colors.accent,
+  },
+  growFromZero: {
+    flexGrow: 1,
+    flexBasis: 0,
+    backgroundColor: colors.accent,
+  },
+})
+
+export const GrowInRow: Story = {
+  render: () => (
+    <html.div style={styles.row} role="group" aria-label="row">
+      <html.div style={styles.fixed} />
+      <html.div style={styles.grow} role="group" aria-label="grow" />
+      <html.div style={styles.growFromZero} role="group" aria-label="grow from zero" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const row = canvas.getByRole('group', {name: 'row'}).getBoundingClientRect().width
+    const grow = canvas.getByRole('group', {name: 'grow'})
+    const zero = canvas.getByRole('group', {name: 'grow from zero'})
+    await expect(getComputedStyle(grow).flexGrow).toBe('1')
+    await expect(getComputedStyle(zero).flexGrow).toBe('1')
+    // The two growing children share what the fixed one leaves.
+    await expect(grow.getBoundingClientRect().width).toBeGreaterThan(row / 3)
+    await expect(zero.getBoundingClientRect().width).toBeGreaterThan(row / 3)
+  },
+}
+
+export const GrowInColumn: Story = {
+  render: () => (
+    <html.div style={styles.column} role="group" aria-label="column">
+      <html.div style={styles.fixed} />
+      <html.div style={styles.growFromZero} role="group" aria-label="grow" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const column = canvas.getByRole('group', {name: 'column'}).getBoundingClientRect().height
+    const grow = canvas.getByRole('group', {name: 'grow'})
+    await expect(getComputedStyle(grow).flexGrow).toBe('1')
+    await expect(grow.getBoundingClientRect().height).toBeGreaterThan(column / 2)
+  },
+}

package/src/index.native.ts

@@ -34,6 +34,7 @@ export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
 export {Grid} from './components/Grid/Grid'
+export type {GridTrack} from './shared/length'
 
 // Theming — resolves to ThemeProvider.native.tsx on Metro (RN-safe variant:
 // no display:contents / portal mount; applies the theme to a flex container).

package/src/index.ts

@@ -48,6 +48,10 @@ export {Panel} from './components/Panel/Panel'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Combobox} from './components/Combobox/Combobox'
+export {Listbox} from './components/Listbox/Listbox'
+export {VisuallyHidden} from './components/VisuallyHidden/VisuallyHidden'
+export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
+export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
@@ -99,6 +103,7 @@ export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
 export {Grid} from './components/Grid/Grid'
+export type {GridTrack} from './shared/length'
 export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
 
 // Hooks

package/src/shared/length.ts

@@ -27,16 +27,23 @@ export type RelativeLength =
 /** 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. The arguments
- * of `minmax()` / `fit-content()` are not checked by the type — pass tokens
- * through `resolveLength` or `sizes.*` when building one.
- *
- * holds-until: a structured track type (`{min: Length, max: GridTrack}`)
- * replaces the template-literal functions; a type cannot see inside
- * `minmax(${string})`, so a px there is the one measure lint and types miss.
+ * 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(${string})` | `fit-content(${string})`
+export type GridTrack =
+  | Length
+  | `${number}fr`
+  | `minmax(${TrackBreadth}, ${TrackBreadth})`
+  | `fit-content(${LengthString})`
 
 const sizeKeys: ReadonlySet<string> = new Set(SIZE_KEYS)
 
@@ -45,7 +52,19 @@ 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. */
+/**
+ * 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 {
-  return typeof track === 'string' && sizeKeys.has(track) ? sizes[track as SizeToken] : track
+  // 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

@@ -28,6 +28,15 @@ export const trackForms: Assignable<
 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

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

@@ -13,4 +13,12 @@ export const visuallyHidden = css.create({
     height: 1,
     overflow: 'hidden',
   },
+  // For text (VisuallyHidden): clipped to nothing, kept on one line so a
+  // screen reader reads it whole.
+  text: {
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    borderWidth: 0,
+    padding: 0,
+  },
 })