@maestro-js/components 1.0.0-alpha.0

package/src/components/labeled-value.tsx

@@ -0,0 +1,480 @@
+import * as React from 'react'
+import { tw } from '../utils/tw'
+import {
+  type Iso,
+  dateFns,
+  timeFns,
+  dateTimeFns,
+  instantFns,
+  zonedDateTimeFns,
+  yearMonthFns,
+  monthDayFns,
+  durationFns
+} from 'iso-fns'
+
+type LabeledValueBaseProps = {
+  label?: React.ReactNode
+  align?: 'start' | 'end'
+  labelAlign?: 'start' | 'end'
+  orientation?: 'horizontal' | 'vertical'
+  emptyText?: React.ReactNode
+  className?: string
+  labelClassName?: string
+  valueClassName?: string
+  id?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+}
+
+type RangeValue<T> = { start: T; end: T }
+
+type StringProps = {
+  value: string | null | undefined
+  formatOptions?: never
+}
+
+type NumberProps = {
+  value: number | RangeValue<number> | null | undefined
+  formatOptions?: Intl.NumberFormatOptions
+}
+
+type BooleanProps = {
+  value: boolean | null | undefined
+  formatOptions?: {
+    trueLabel?: string
+    falseLabel?: string
+  }
+}
+
+type ReactNodeProps = {
+  value: React.ReactNode
+  formatOptions?: never
+}
+
+type StringListProps = {
+  value: string[] | null | undefined
+  formatOptions?: Intl.ListFormatOptions
+}
+
+type DateProps = {
+  value: Iso.Date | RangeValue<Iso.Date> | null | undefined
+  formatOptions?: {
+    dateFormat?: string
+  }
+}
+
+type TimeProps = {
+  value: Iso.Time | RangeValue<Iso.Time> | null | undefined
+  formatOptions?: {
+    timeFormat?: string
+  }
+}
+
+type DateTimeProps = {
+  value: Iso.DateTime | RangeValue<Iso.DateTime> | null | undefined
+  formatOptions?: {
+    dateTimeFormat?: string
+  }
+}
+
+type InstantProps = {
+  value: Iso.Instant | RangeValue<Iso.Instant> | null | undefined
+  formatOptions?: {
+    dateTimeFormat?: string
+    timeZone?: string
+  }
+}
+
+type ZonedDateTimeProps = {
+  value: Iso.ZonedDateTime | RangeValue<Iso.ZonedDateTime> | null | undefined
+  formatOptions?: {
+    dateTimeFormat?: string
+  }
+}
+
+type YearMonthProps = {
+  value: Iso.YearMonth | RangeValue<Iso.YearMonth> | null | undefined
+  formatOptions?: {
+    dateFormat?: string
+  }
+}
+
+type MonthDayProps = {
+  value: Iso.MonthDay | RangeValue<Iso.MonthDay> | null | undefined
+  formatOptions?: {
+    dateFormat?: string
+  }
+}
+
+type DurationProps = {
+  value: Iso.Duration | RangeValue<Iso.Duration> | null | undefined
+  formatOptions?: {
+    style?: 'short' | 'long'
+  }
+}
+
+type LabeledValueFormatProps =
+  | StringProps
+  | NumberProps
+  | BooleanProps
+  | ReactNodeProps
+  | StringListProps
+  | DateProps
+  | TimeProps
+  | DateTimeProps
+  | InstantProps
+  | ZonedDateTimeProps
+  | YearMonthProps
+  | MonthDayProps
+  | DurationProps
+
+export type LabeledValueProps = LabeledValueBaseProps & LabeledValueFormatProps
+
+export const LabeledValue = React.forwardRef<HTMLDivElement, LabeledValueProps>(function LabeledValue(props, ref) {
+  const {
+    label,
+    align = 'start',
+    labelAlign = 'start',
+    orientation = 'vertical',
+    className,
+    labelClassName,
+    valueClassName,
+    id,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  } = props
+
+  const labelId = React.useId()
+  const actualLabelId = id ?? labelId
+
+  const formattedValue = FormattedValue(props)
+
+  return (
+    <div
+      ref={ref}
+      className={tw('relative', orientation === 'horizontal' ? 'flex items-baseline gap-4' : 'block', className)}
+    >
+      {label && (
+        <LabeledValueLabel
+          id={actualLabelId}
+          className={tw(
+            orientation === 'horizontal' ? 'flex-shrink-0' : 'mb-1',
+            labelAlign === 'end' && 'text-right',
+            labelClassName
+          )}
+        >
+          {label}
+        </LabeledValueLabel>
+      )}
+
+      <div
+        className={tw(
+          'text-sm text-neutral-900 min-h-4 max-w-full break-words overflow-wrap-anywhere',
+          align === 'end' && 'text-right',
+          !formattedValue && 'text-neutral-400',
+          valueClassName
+        )}
+        aria-labelledby={ariaLabelledBy ?? (label ? actualLabelId : undefined)}
+        aria-describedby={ariaDescribedBy}
+      >
+        {formattedValue}
+      </div>
+    </div>
+  )
+})
+
+LabeledValue.displayName = 'LabeledValue'
+
+function FormattedValue(props: LabeledValueFormatProps & { emptyText?: React.ReactNode }) {
+  if (props.value == null || props.value === '') {
+    return <>{props.emptyText}</>
+  }
+
+  if (React.isValidElement(props.value)) {
+    return <>{props.value}</>
+  }
+
+  if (typeof props.value === 'boolean') {
+    const boolProps = props as BooleanProps
+    return <>{props.value ? (boolProps.formatOptions?.trueLabel ?? 'Yes') : (boolProps.formatOptions?.falseLabel ?? 'No')}</>
+  }
+
+  if (Array.isArray(props.value)) {
+    return <ListValue {...(props as StringListProps)} />
+  }
+
+  if (typeof props.value === 'object' && props.value && 'start' in props.value && 'end' in props.value) {
+    if (typeof props.value.start === 'number') {
+      return <NumberValue {...(props as NumberProps)} />
+    }
+    if (typeof props.value.start === 'string' && dateFns.isValid(props.value.start)) {
+      return <DateValue {...(props as DateProps)} />
+    }
+    if (typeof props.value.start === 'string' && timeFns.isValid(props.value.start)) {
+      return <TimeValue {...(props as TimeProps)} />
+    }
+    if (typeof props.value.start === 'string' && dateTimeFns.isValid(props.value.start)) {
+      return <DateTimeValue {...(props as DateTimeProps)} />
+    }
+    if (typeof props.value.start === 'string' && instantFns.isValid(props.value.start)) {
+      return <InstantValue {...(props as InstantProps)} />
+    }
+    if (typeof props.value.start === 'string' && zonedDateTimeFns.isValid(props.value.start)) {
+      return <ZonedDateTimeValue {...(props as ZonedDateTimeProps)} />
+    }
+    if (typeof props.value.start === 'string' && yearMonthFns.isValid(props.value.start)) {
+      return <YearMonthValue {...(props as YearMonthProps)} />
+    }
+    if (typeof props.value.start === 'string' && monthDayFns.isValid(props.value.start)) {
+      return <MonthDayValue {...(props as MonthDayProps)} />
+    }
+    if (typeof props.value.start === 'string' && durationFns.isValid(props.value.start)) {
+      return <DurationValue {...(props as DurationProps)} />
+    }
+  }
+
+  if (typeof props.value === 'string') {
+    if (dateFns.isValid(props.value)) {
+      return <DateValue {...(props as DateProps)} />
+    }
+    if (timeFns.isValid(props.value)) {
+      return <TimeValue {...(props as TimeProps)} />
+    }
+    if (dateTimeFns.isValid(props.value)) {
+      return <DateTimeValue {...(props as DateTimeProps)} />
+    }
+    if (instantFns.isValid(props.value)) {
+      return <InstantValue {...(props as InstantProps)} />
+    }
+    if (zonedDateTimeFns.isValid(props.value)) {
+      return <ZonedDateTimeValue {...(props as ZonedDateTimeProps)} />
+    }
+    if (yearMonthFns.isValid(props.value)) {
+      return <YearMonthValue {...(props as YearMonthProps)} />
+    }
+    if (monthDayFns.isValid(props.value)) {
+      return <MonthDayValue {...(props as MonthDayProps)} />
+    }
+    if (durationFns.isValid(props.value)) {
+      return <DurationValue {...(props as DurationProps)} />
+    }
+
+    return <>{props.value}</>
+  }
+
+  if (typeof props.value === 'number') {
+    return <NumberValue {...(props as NumberProps)} />
+  }
+
+  return <>{String(props.value)}</>
+}
+
+function NumberValue(props: NumberProps) {
+  const formatter = React.useMemo(() => new Intl.NumberFormat('en-us', props.formatOptions ?? {}), [props.formatOptions])
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${formatter.format(props.value.start)} – ${formatter.format(props.value.end)}`
+    } else if (typeof props.value === 'number') {
+      return formatter.format(props.value)
+    } else {
+      return props.value ?? null
+    }
+  }, [props.value, formatter])
+  return <>{formatted}</>
+}
+
+function ListValue(props: StringListProps) {
+  const formatter = React.useMemo(
+    () => new Intl.ListFormat('en-us', props.formatOptions ?? { style: 'short' }),
+    [props.formatOptions]
+  )
+  const formatted = React.useMemo(() => {
+    if (props.value && props.value.length) {
+      return formatter.format(props.value)
+    } else {
+      return null
+    }
+  }, [props.value, formatter])
+  return <>{formatted}</>
+}
+
+function DateValue(props: DateProps) {
+  const format = props.formatOptions?.dateFormat ?? 'M/d/yyyy'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${dateFns.format(props.value.start, format)} – ${dateFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return dateFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function TimeValue(props: TimeProps) {
+  const format = props.formatOptions?.timeFormat ?? 'h:mm a'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${timeFns.format(props.value.start, format)} – ${timeFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return timeFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function DateTimeValue(props: DateTimeProps) {
+  const format = props.formatOptions?.dateTimeFormat ?? 'M/d/yyyy h:mm a'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${dateTimeFns.format(props.value.start, format)} – ${dateTimeFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return dateTimeFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function InstantValue(props: InstantProps) {
+  const timeZone = props.formatOptions?.timeZone
+  const format = props.formatOptions?.dateTimeFormat ?? (timeZone ? 'M/d/yyyy h:mm a z' : 'M/d/yyyy h:mm a')
+
+  const formatted = React.useMemo(() => {
+    const formatInstant = (instant: Iso.Instant) => {
+      if (timeZone) {
+        const zonedDateTime = instantFns.toZonedDateTime(instant, timeZone)
+        return zonedDateTimeFns.format(zonedDateTime, format)
+      }
+      return instantFns.chain(instant).toZonedDateTime('UTC').format(format).value()
+    }
+
+    if (props.value && typeof props.value === 'object') {
+      return `${formatInstant(props.value.start)} – ${formatInstant(props.value.end)}`
+    } else if (typeof props.value === 'string') {
+      return formatInstant(props.value)
+    } else {
+      return null
+    }
+  }, [props.value, format, timeZone])
+  return <>{formatted}</>
+}
+
+function ZonedDateTimeValue(props: ZonedDateTimeProps) {
+  const format = props.formatOptions?.dateTimeFormat ?? 'M/d/yyyy h:mm a z'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${zonedDateTimeFns.format(props.value.start, format)} – ${zonedDateTimeFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return zonedDateTimeFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function YearMonthValue(props: YearMonthProps) {
+  const format = props.formatOptions?.dateFormat ?? 'MMMM yyyy'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${yearMonthFns.format(props.value.start, format)} – ${yearMonthFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return yearMonthFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function MonthDayValue(props: MonthDayProps) {
+  const format = props.formatOptions?.dateFormat ?? 'MMMM d'
+  const formatted = React.useMemo(() => {
+    if (props.value && typeof props.value === 'object') {
+      return `${monthDayFns.format(props.value.start, format)} – ${monthDayFns.format(props.value.end, format)}`
+    } else if (typeof props.value === 'string') {
+      return monthDayFns.format(props.value, format)
+    } else {
+      return null
+    }
+  }, [props.value, format])
+  return <>{formatted}</>
+}
+
+function DurationValue(props: DurationProps) {
+  const durationFormat = props.formatOptions?.style ?? 'short'
+
+  const formatted = React.useMemo(() => {
+    const formatDuration = (duration: Iso.Duration) => {
+      const fields = durationFns.getFields(duration)
+
+      const partFormatters: Record<string, Record<string, string>> = {
+        years: {
+          long: Math.abs(fields.years) > 1 ? `${fields.years} years` : `${fields.years} year`,
+          short: `${fields.years}y`
+        },
+        months: {
+          long: Math.abs(fields.months) > 1 ? `${fields.months} months` : `${fields.months} month`,
+          short: `${fields.months}M`
+        },
+        weeks: {
+          long: Math.abs(fields.weeks) > 1 ? `${fields.weeks} weeks` : `${fields.weeks} week`,
+          short: `${fields.weeks}w`
+        },
+        days: {
+          long: Math.abs(fields.days) > 1 ? `${fields.days} days` : `${fields.days} day`,
+          short: `${fields.days}d`
+        },
+        hours: {
+          long: Math.abs(fields.hours) > 1 ? `${fields.hours} hours` : `${fields.hours} hour`,
+          short: `${fields.hours}h`
+        },
+        minutes: {
+          long: Math.abs(fields.minutes) > 1 ? `${fields.minutes} minutes` : `${fields.minutes} minute`,
+          short: `${fields.minutes}m`
+        },
+        seconds: {
+          long: Math.abs(fields.seconds) > 1 ? `${fields.seconds} seconds` : `${fields.seconds} second`,
+          short: `${fields.seconds}s`
+        },
+        milliseconds: {
+          long:
+            Math.abs(fields.milliseconds) > 1 ? `${fields.milliseconds} milliseconds` : `${fields.milliseconds} millisecond`,
+          short: `${fields.milliseconds}ms`
+        }
+      }
+
+      const parts = Object.entries(partFormatters)
+        .map(([key, value]) => (fields[key as keyof typeof fields] !== 0 ? value[durationFormat] : null))
+        .filter(Boolean) as string[]
+      if (!parts.length) {
+        return durationFormat === 'long' ? '0 seconds' : '0s'
+      } else {
+        return parts.join(' ')
+      }
+    }
+
+    if (props.value && typeof props.value === 'object') {
+      return `${formatDuration(props.value.start)} – ${formatDuration(props.value.end)}`
+    } else if (typeof props.value === 'string') {
+      return formatDuration(props.value)
+    } else {
+      return null
+    }
+  }, [props.value, durationFormat])
+  return <>{formatted}</>
+}
+
+export function LabeledValueLabel(props: React.ComponentProps<'label'>) {
+  return (
+    <label
+      {...props}
+      className={tw('block uppercase text-xs tracking-widest font-normal text-neutral-400', props.className)}
+    />
+  )
+}

package/src/components/link-tabs.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react'
+import { NavLink } from 'react-router'
+import type { To } from 'react-router'
+import { tw } from '../utils/tw'
+import {
+  TAB_BASE_CLASSES,
+  TAB_DISABLED_CLASSES,
+  TAB_INACTIVE_CLASSES,
+  TAB_OVAL_BASE_CLASSES,
+  TAB_OVAL_SELECTED_CLASSES,
+  tabColorMap,
+  tabListContainerClasses,
+  tabListInnerClasses,
+  getIndicatorClasses,
+  useAnimatedIndicator
+} from '../utils/use-tab-indicator'
+import type { TabColor, TabVariant } from '../utils/use-tab-indicator'
+
+// --- Types ---
+
+export type LinkTabListProps = {
+  children: React.ReactNode
+  className?: string
+  color?: TabColor
+  variant?: TabVariant
+}
+
+export type LinkTabProps = {
+  to: To
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  replace?: boolean
+  end?: boolean
+}
+
+// --- LinkTabList ---
+
+const LinkTabListContext = React.createContext<{ color: TabColor; variant: TabVariant }>({ color: 'primary', variant: 'underline' })
+
+function LinkTabList({ children, className, color = 'primary', variant = 'underline' }: LinkTabListProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const indicatorRef = useAnimatedIndicator(containerRef, '[aria-current="page"]', 'aria-current')
+
+  return (
+    <LinkTabListContext.Provider value={{ color, variant }}>
+      <div ref={containerRef} className={tabListContainerClasses[variant]}>
+        <div role="tablist" className={tw(tabListInnerClasses[variant], className)}>
+          {children}
+        </div>
+        <div
+          ref={indicatorRef}
+          className={getIndicatorClasses(variant, color)}
+          style={{ opacity: 0 }}
+        />
+      </div>
+    </LinkTabListContext.Provider>
+  )
+}
+
+LinkTabList.displayName = 'LinkTabList'
+
+// --- LinkTab ---
+
+function LinkTab({ to, children, className, disabled, replace, end }: LinkTabProps) {
+  const { color, variant } = React.useContext(LinkTabListContext)
+  const colors = tabColorMap[color]
+  const baseClasses = variant === 'oval' ? TAB_OVAL_BASE_CLASSES : TAB_BASE_CLASSES
+  const focusClasses = `outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:${colors.outline}`
+
+  if (disabled) {
+    return (
+      <span
+        role="tab"
+        aria-disabled="true"
+        className={tw(
+          baseClasses,
+          'outline-none',
+          TAB_INACTIVE_CLASSES,
+          TAB_DISABLED_CLASSES,
+          className
+        )}
+      >
+        {children}
+      </span>
+    )
+  }
+
+  return (
+    <NavLink
+      to={to}
+      replace={replace}
+      end={end}
+      role="tab"
+      className={({ isActive }) =>
+        tw(
+          baseClasses,
+          focusClasses,
+          isActive
+            ? (variant === 'oval' ? TAB_OVAL_SELECTED_CLASSES : `${colors.text} font-bold`)
+            : `${TAB_INACTIVE_CLASSES} hover:text-neutral-700`,
+          className
+        )
+      }
+    >
+      {children}
+    </NavLink>
+  )
+}
+
+LinkTab.displayName = 'LinkTab'
+
+// --- Export ---
+
+export const LinkTabs = {
+  List: LinkTabList,
+  Tab: LinkTab
+}