@duro-app/ui 5.6.0 → 5.7.0

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,332 @@
+import {createContext, useContext, useMemo, type ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {DragDrop, type DragDropItemData, type DragDropVerdict} from '../DragDrop/DragDrop'
+import {styles} from './styles.css'
+
+// ---------------------------------------------------------------------------
+// Timeline — rows of date bars against a date axis: milestones, releases,
+// sprints. Dates are calendar days ('YYYY-MM-DD', read as UTC) so a bar
+// never shifts with the viewer's time zone.
+//
+// A bar is a toggle button (select it) with a progress fill, and can be a
+// DragDrop.Zone target (`dropZone`) inside a DragDrop.Root. Its two edges are
+// sliders whose value text is a date: Left/Right move a day, PageUp/PageDown
+// a week, Home/End to the limit. They are keyboard-only — there is no
+// pointer drag of an edge.
+// ---------------------------------------------------------------------------
+
+/** A calendar day, 'YYYY-MM-DD'. */
+export type TimelineDate = string
+
+const DAY_MS = 86_400_000
+
+const dayOf = (date: TimelineDate): number => Math.floor(Date.parse(`${date}T00:00:00Z`) / DAY_MS)
+const dateOf = (day: number): TimelineDate => new Date(day * DAY_MS).toISOString().slice(0, 10)
+
+interface TimelineContextValue {
+  readonly first: number
+  readonly days: number
+  readonly today: number | null
+  readonly todayLabel: string
+  readonly formatDate: (date: TimelineDate) => string
+}
+
+const TimelineContext = createContext<TimelineContextValue | null>(null)
+
+const useTimeline = (part: string) => {
+  const ctx = useContext(TimelineContext)
+  if (!ctx) throw new Error(`Timeline.${part} must be used within Timeline.Root`)
+  return ctx
+}
+
+/** Percent of the axis from its first day to `day`. */
+const at = (ctx: TimelineContextValue, day: number) => ((day - ctx.first) / ctx.days) * 100
+
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
+export interface TimelineRootProps {
+  /** First day on the axis. */
+  start: TimelineDate
+  /** Last day on the axis (included). */
+  end: TimelineDate
+  /** Draws the today marker when inside the range. */
+  today?: TimelineDate
+  /** The timeline's accessible name. */
+  'aria-label': string
+  /** Text above the row labels, e.g. "Milestones". */
+  heading?: ReactNode
+  /** The today marker's text. */
+  todayLabel?: string
+  /** BCP 47 locale for the default date format. */
+  locale?: string
+  /** Formats a day for the axis and the edge sliders' value text. */
+  formatDate?: (date: TimelineDate) => string
+  children: ReactNode
+}
+
+function Root({
+  start,
+  end,
+  today,
+  'aria-label': ariaLabel,
+  heading,
+  todayLabel = 'Today',
+  locale,
+  formatDate,
+  children,
+}: TimelineRootProps) {
+  const ctx = useMemo<TimelineContextValue>(() => {
+    const first = dayOf(start)
+    const days = Math.max(dayOf(end) - first + 1, 1)
+    const t = today === undefined ? null : dayOf(today)
+    return {
+      first,
+      days,
+      today: t !== null && t >= first && t < first + days ? t : null,
+      todayLabel,
+      formatDate:
+        formatDate ??
+        ((date) =>
+          new Date(`${date}T00:00:00Z`).toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            timeZone: 'UTC',
+          })),
+    }
+  }, [start, end, today, todayLabel, locale, formatDate])
+
+  // Daily ticks for up to three weeks, weekly beyond.
+  const step = ctx.days > 21 ? 7 : 1
+  const ticks: number[] = []
+  for (let d = ctx.first; d < ctx.first + ctx.days; d += step) ticks.push(d)
+
+  return (
+    <TimelineContext.Provider value={ctx}>
+      <html.div role="group" aria-label={ariaLabel} style={styles.root}>
+        <html.div style={styles.heading}>{heading}</html.div>
+        <html.div aria-hidden style={styles.axis}>
+          {ticks.map((d) => (
+            <html.span key={d} style={[styles.tick, styles.left(at(ctx, d))]}>
+              {ctx.formatDate(dateOf(d))}
+            </html.span>
+          ))}
+          {ctx.today !== null && (
+            <html.span style={[styles.todayLabel, styles.left(at(ctx, ctx.today + 0.5))]}>
+              {todayLabel}
+            </html.span>
+          )}
+        </html.div>
+        {children}
+      </html.div>
+    </TimelineContext.Provider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Row
+// ---------------------------------------------------------------------------
+
+export interface TimelineRowProps {
+  /** The row's name, shown in the label column. */
+  label: string
+  /** A second line under the label, e.g. "4 of 7 done". */
+  description?: ReactNode
+  children?: ReactNode
+}
+
+function Row({label, description, children}: TimelineRowProps) {
+  const ctx = useTimeline('Row')
+  return (
+    <>
+      <html.div style={styles.label}>
+        <html.span style={styles.labelText}>{label}</html.span>
+        {description !== undefined && (
+          <html.span style={styles.labelDescription}>{description}</html.span>
+        )}
+      </html.div>
+      <html.div role="group" aria-label={label} style={styles.track}>
+        {ctx.today !== null && (
+          <html.div aria-hidden style={[styles.today, styles.left(at(ctx, ctx.today + 0.5))]} />
+        )}
+        {children}
+      </html.div>
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Bar
+// ---------------------------------------------------------------------------
+
+export interface TimelineBarDropZone<T = unknown> {
+  /** The DragDrop zone id; drops arrive in the Root's onDrop with it. */
+  id: string
+  /** Read to screen readers when an item moves or drops here. */
+  label: string
+  accepts?: (item: DragDropItemData<T>) => DragDropVerdict
+}
+
+export interface TimelineBarProps<T = unknown> {
+  start: TimelineDate
+  end: TimelineDate
+  /** The bar's accessible name. */
+  label: string
+  /** Done fraction, 0–1, drawn as a fill from the start edge. */
+  progress?: number
+  /** `planned` draws a dashed outline; `done` the success tone. */
+  tone?: 'default' | 'planned' | 'done'
+  /** Makes the bar a toggle button (aria-pressed). */
+  selected?: boolean
+  onSelect?: () => void
+  /** Adds the start-edge slider. */
+  onStartChange?: (date: TimelineDate) => void
+  /** Adds the end-edge slider. */
+  onEndChange?: (date: TimelineDate) => void
+  /** Names of the edge sliders; default "<label>, start" / "<label>, end". */
+  startLabel?: string
+  endLabel?: string
+  /** Makes the bar a DragDrop.Zone (needs a DragDrop.Root above). */
+  dropZone?: TimelineBarDropZone<T>
+  /** Text inside the bar, e.g. "4/7". */
+  children?: ReactNode
+}
+
+const toneStyle = {
+  default: null,
+  planned: styles.barPlanned,
+  done: styles.barDone,
+} as const
+
+function Bar<T = unknown>({
+  start,
+  end,
+  label,
+  progress,
+  tone = 'default',
+  selected,
+  onSelect,
+  onStartChange,
+  onEndChange,
+  startLabel,
+  endLabel,
+  dropZone,
+  children,
+}: TimelineBarProps<T>) {
+  const ctx = useTimeline('Bar')
+  const s = dayOf(start)
+  const e = dayOf(end)
+  const left = at(ctx, s)
+  const width = ((e - s + 1) / ctx.days) * 100
+  const last = ctx.first + ctx.days - 1
+
+  const face = (
+    <>
+      <html.button
+        type="button"
+        aria-label={label}
+        aria-pressed={selected}
+        onClick={onSelect}
+        style={[styles.face, toneStyle[tone], selected === true && styles.faceSelected]}
+      >
+        {progress !== undefined && progress > 0 && (
+          <html.span
+            aria-hidden
+            style={[
+              styles.fill,
+              tone === 'done' && styles.fillDone,
+              styles.width(Math.min(Math.max(progress, 0), 1) * 100),
+            ]}
+          />
+        )}
+        {children !== undefined && <html.span style={styles.barText}>{children}</html.span>}
+      </html.button>
+      {onStartChange && (
+        <EdgeSlider
+          edge="start"
+          label={startLabel ?? `${label}, start`}
+          day={s}
+          min={ctx.first}
+          max={e}
+          onChange={onStartChange}
+        />
+      )}
+      {onEndChange && (
+        <EdgeSlider
+          edge="end"
+          label={endLabel ?? `${label}, end`}
+          day={e}
+          min={s}
+          max={last}
+          onChange={onEndChange}
+        />
+      )}
+    </>
+  )
+
+  return (
+    <html.div style={[styles.bar, styles.left(left), styles.width(width)]}>
+      {dropZone ? (
+        <DragDrop.Zone<T> id={dropZone.id} label={dropZone.label} accepts={dropZone.accepts} fill>
+          {face}
+        </DragDrop.Zone>
+      ) : (
+        face
+      )}
+    </html.div>
+  )
+}
+
+function EdgeSlider({
+  edge,
+  label,
+  day,
+  min,
+  max,
+  onChange,
+}: {
+  edge: 'start' | 'end'
+  label: string
+  day: number
+  min: number
+  max: number
+  onChange: (date: TimelineDate) => void
+}) {
+  const ctx = useTimeline('Bar')
+  const onKeyDown = (event: unknown) => {
+    const e = event as {key: string; preventDefault(): void}
+    const by: Record<string, number> = {
+      ArrowLeft: -1,
+      ArrowDown: -1,
+      ArrowRight: 1,
+      ArrowUp: 1,
+      PageDown: -7,
+      PageUp: 7,
+    }
+    let next: number
+    if (e.key in by) next = day + by[e.key]
+    else if (e.key === 'Home') next = min
+    else if (e.key === 'End') next = max
+    else return
+    e.preventDefault()
+    next = Math.min(Math.max(next, min), max)
+    if (next !== day) onChange(dateOf(next))
+  }
+  return (
+    <html.div
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      aria-orientation="horizontal"
+      aria-valuemin={min - ctx.first}
+      aria-valuemax={max - ctx.first}
+      aria-valuenow={day - ctx.first}
+      aria-valuetext={ctx.formatDate(dateOf(day))}
+      onKeyDown={onKeyDown}
+      style={[styles.edge, edge === 'start' ? styles.edgeStart : styles.edgeEnd]}
+    />
+  )
+}
+
+export const Timeline = {Root, Row, Bar}

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

@@ -0,0 +1,162 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+export const styles = css.create({
+  // Two columns — row labels, date track — with the axis as the first row.
+  root: {
+    display: 'grid',
+    gridTemplateColumns: `${sizes.timelineLabelW} 1fr`,
+    rowGap: spacing.xs,
+    color: colors.text,
+  },
+  heading: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+  },
+  axis: {
+    position: 'relative',
+    height: sizes.chip,
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+    whiteSpace: 'nowrap',
+  },
+  tick: {
+    position: 'absolute',
+    top: 0,
+    paddingLeft: spacing.xs,
+    borderLeftWidth: borders.hairline,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.border,
+  },
+  todayLabel: {
+    position: 'absolute',
+    bottom: 0,
+    transform: 'translateX(-50%)',
+    color: colors.errorText,
+    fontWeight: typography.fontWeightMedium,
+  },
+  left: (percent: number) => ({left: `${percent}%`}),
+  width: (percent: number) => ({width: `${percent}%`}),
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minWidth: 0,
+    paddingRight: spacing.sm,
+  },
+  labelText: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  labelDescription: {
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+    whiteSpace: 'nowrap',
+  },
+  track: {
+    position: 'relative',
+    height: sizes.controlMd,
+  },
+  today: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    borderLeftWidth: borders.strong,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.error,
+    pointerEvents: 'none',
+    zIndex: 2,
+  },
+  bar: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    boxSizing: 'border-box',
+    height: sizes.controlSm,
+  },
+  face: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    overflow: 'hidden',
+    borderRadius: radii.xs,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: {default: colors.border, ':hover': colors.accent},
+    backgroundColor: colors.bg,
+    color: colors.text,
+    cursor: 'pointer',
+    textAlign: 'left',
+    transitionProperty: 'box-shadow, border-color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: borders.focusRing,
+    outlineColor: colors.accent,
+    outlineOffset: borders.focusOffset,
+  },
+  faceSelected: {
+    borderColor: colors.accent,
+    boxShadow: `0 0 0 ${microSpacing.px1} ${colors.accent}`,
+  },
+  barPlanned: {
+    borderStyle: 'dashed',
+  },
+  barDone: {
+    backgroundColor: colors.successBg,
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: colors.infoBg,
+    borderRightWidth: borders.strong,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.accent,
+  },
+  fillDone: {
+    backgroundColor: colors.successBg,
+    borderRightColor: colors.success,
+  },
+  barText: {
+    position: 'relative',
+    paddingLeft: spacing.sm,
+    fontSize: typography.fontSizeXs,
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+  },
+  // The edges: keyboard sliders, drawn only while focused.
+  edge: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: spacing.sm,
+    borderRadius: radii.xs,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: borders.focusRing,
+    outlineColor: colors.accent,
+    backgroundColor: {default: 'transparent', ':focus-visible': colors.accent},
+    zIndex: 3,
+  },
+  edgeStart: {
+    left: `calc(-1 * ${spacing.xs})`,
+  },
+  edgeEnd: {
+    right: `calc(-1 * ${spacing.xs})`,
+  },
+})

package/src/components/Toast/Toast.meta.ts

@@ -2,11 +2,12 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.',
+    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).',
   whenToUse: [
     'Confirming an action succeeded (e.g. "Grant revoked")',
     'Reporting an action failed, with the reason',
     'Reversible actions that benefit from an inline Undo',
+    'A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit',
   ],
   whenNotToUse: [
     'In-form validation errors — use Field.Error or an inline Alert',

package/src/components/Toast/Toast.stories.tsx

@@ -47,6 +47,31 @@ function Triggers() {
       >
         Show with undo
       </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'warning',
+            message: 'In progress is over its WIP limit (4/3)',
+            duration: 0,
+          })
+        }
+      >
+        Show warning
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'success',
+            message: 'Moved to Done',
+            duration: 600,
+            action: {label: 'Undo', onClick: () => {}},
+          })
+        }
+      >
+        Show short
+      </html.button>
     </html.div>
   )
 }
@@ -87,3 +112,62 @@ export const Dismiss: Story = {
     await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
   },
 }
+
+/** The WIP-limit shape: a warning, announced politely, with its own tone. */
+export const Warning: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show warning'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await expect(toast).toHaveTextContent('In progress is over its WIP limit (4/3)')
+  },
+}
+
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+/** The countdown stops while the pointer is on the toast and resumes with
+ *  what was left when it leaves. */
+export const PausesOnHover: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show short'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await userEvent.hover(toast)
+    await wait(1000)
+    await expect(canvas.getByRole('status')).toHaveTextContent('Moved to Done')
+    await userEvent.unhover(toast)
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument(), {
+      timeout: 2000,
+    })
+  },
+}
+
+/** Focus inside the toast (its Undo, its close button) holds it too. */
+export const PausesOnFocus: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show short'))
+    await waitFor(() => canvas.getByRole('status'))
+    canvas.getByRole('button', {name: 'Undo'}).focus()
+    await wait(1000)
+    // Moving between the toast's own buttons keeps it paused.
+    canvas.getByRole('button', {name: 'Dismiss'}).focus()
+    await wait(300)
+    await expect(canvas.getByRole('status')).toHaveTextContent('Moved to Done')
+    canvas.getByText('Show short').focus()
+    await waitFor(() => expect(canvas.queryByText('Moved to Done')).not.toBeInTheDocument(), {
+      timeout: 2000,
+    })
+  },
+}
+
+/** The close button's name comes from the app (dismissLabel). */
+export const LocalisedClose: Story = {
+  render: () => (
+    <ToastProvider dismissLabel="Fermer">
+      <Triggers />
+    </ToastProvider>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show warning'))
+    await userEvent.click(await canvas.findByRole('button', {name: 'Fermer'}))
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
+  },
+}