@podoba/react 0.0.1

package/src/layout/topbar.tsx

@@ -0,0 +1,220 @@
+import type { ComponentProps, Key, ReactNode } from 'react'
+import {
+	Button as RACButton,
+	ComboBox as RACComboBox,
+	type ComboBoxProps as RACComboBoxProps,
+	Input as RACInput,
+	Label,
+	ListBox,
+	ListBoxItem,
+	type ListBoxItemProps,
+	Menu as RACMenu,
+	MenuItem as RACMenuItem,
+	type MenuItemProps,
+	MenuTrigger,
+	Popover,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Topbar — sticky application header (ported pattern from gs-manager's
+ * `Topbar` / `AppShell.topbar`; gs AppHeader bar ~52px → `h-14`).
+ *
+ * The gs-manager original is a flex row (`justify-between`, `height: 72px`,
+ * bottom border, background) with a left "brand row" (logo + primary subnav)
+ * and a right "actions" cluster (theme toggle, user info, logout). That SCSS
+ * intent is reimplemented here in Tailwind via `uic`, decomposed into slots so
+ * `@app/ui` consumers compose their own brand / nav / actions content:
+ *
+ *   <Topbar>
+ *     <Topbar.Brand>…</Topbar.Brand>
+ *     <Topbar.Nav>…</Topbar.Nav>      // grows to fill, holds NavLink items
+ *     <Topbar.Actions>…</Topbar.Actions>
+ *   </Topbar>
+ *
+ * Landmark: renders a `<header>` so it is an accessible banner landmark.
+ * AppShell keeps it visually sticky via its grid rows (`auto 1fr`).
+ */
+// gs-manager `Topbar.topbar`: title/logo left, nav + actions clustered on the
+// right — with a 1px bottom border (`--color-border`). gs sets
+// `padding: 0 spacing-6`; the horizontal page padding is supplied by AppShell's
+// sticky topbar row, so only the fixed height + border live here. The border sits
+// on this header so it aligns (inset) with the padded content below. Height is the
+// gs AppHeader bar (~52px) → `h-14` (56px).
+const TopbarRoot = uic('header', {
+	displayName: 'Topbar',
+	baseClass: 'flex h-14 w-full items-center gap-5 border-b border-border',
+})
+
+// gs-manager `.logo`: nav-tab-sized label (13px compact, weight-500, tight
+// tracking) — matches the AppHeader nav-item scale, NOT a page heading.
+const TopbarBrand = uic('div', {
+	displayName: 'Topbar.Brand',
+	baseClass:
+		'flex min-w-0 items-center gap-3 text-compact leading-4 font-medium tracking-tight text-fg',
+})
+
+// `ml-auto` pushes the nav (and the actions after it) to the right, matching gs's
+// title-left / nav-right layout.
+const TopbarNavBase = uic('nav', {
+	displayName: 'Topbar.Nav',
+	baseClass: 'ml-auto flex min-w-0 items-center gap-2 overflow-x-auto',
+})
+
+// `@app/ui` ships no i18n — the accessible name of the nav landmark is REQUIRED
+// from the consumer (translated there), never an English default baked in here.
+type TopbarNavProps = ComponentProps<typeof TopbarNavBase> & { 'aria-label': string }
+const TopbarNav = (props: TopbarNavProps) => <TopbarNavBase {...props} />
+
+const TopbarActions = uic('div', {
+	displayName: 'Topbar.Actions',
+	baseClass: 'ml-auto flex items-center gap-4',
+})
+
+/**
+ * NavLink — a single primary-navigation item. Mirrors gs-manager's AppHeader
+ * nav-tab styling (`Button.module.scss` `_tab`): `6px 13px` padding
+ * (→ `py-[6px] px-[13px]`), `radius-sm` (2px) corners, 13px dense text, neutral-400
+ * foreground → neutral-100 fill on hover/active. The active tab is the SAME weight
+ * as the resting tab (only the fill + color change — gs `_tab` has no weight bump).
+ * gs maps BOTH `--color-background-hover` and `--color-background-active` to
+ * `--color-neutral-100`, so a single `surface-muted` token covers both states
+ * (no distinct active token to map). Renders an `<a>` by default; pass `asChild`
+ * to delegate to a router `Link`.
+ *
+ * Active state keys on the bare `data-active` attribute (presence). `@buzola/router`'s
+ * `<Link>` sets `data-active=""` when the target matches the current URL (and, with
+ * `activeExact={false}`, on prefix match too), so the selector must be `data-[active]`,
+ * NOT `data-[active=true]` — the latter never matches buzola's empty-string value.
+ */
+const TopbarNavLink = uic('a', {
+	displayName: 'Topbar.NavLink',
+	baseClass:
+		'inline-flex items-center rounded-sm px-[13px] py-[6px] text-compact leading-4 whitespace-nowrap ' +
+		'text-fg no-underline transition-colors hover:bg-surface-muted hover:text-fg outline-none ' +
+		'focus-visible:ring-2 focus-visible:ring-ring ' +
+		'data-[active]:bg-surface-muted data-[active]:text-fg',
+	// `active` is accepted both as an explicit prop (uic emits `data-active=""` when
+	// true, nothing when false/unset — see dataAttribute) and, via `asChild`, from
+	// @buzola/router's <Link> which also sets `data-active=""` on match. Either way the
+	// `data-[active]` presence selectors above apply. NOTE the value is the EMPTY
+	// string, so a `data-[active=true]` selector would never match — keep `data-[active]`.
+	variants: {
+		active: { true: '', false: '' },
+	},
+	variantsAsDataAttrs: ['active'],
+})
+
+export type WorkspaceOption = {
+	id: string
+	name: string
+}
+
+export type WorkspaceSwitcherProps = Omit<
+	RACComboBoxProps<WorkspaceOption>,
+	'children' | 'items'
+> & {
+	/**
+	 * Visible (or screen-reader-only) label for the combobox. REQUIRED — `@app/ui`
+	 * ships no i18n, so the consumer passes a translated string.
+	 */
+	label: ReactNode
+	/** Workspaces available to the current user (from the `whoami` query). */
+	workspaces: WorkspaceOption[]
+	/** Hide the visible label, keeping it for assistive tech only. */
+	hideLabel?: boolean
+}
+
+/**
+ * WorkspaceSwitcher — RAC `ComboBox` listing the user's workspaces. Phase 1
+ * is presentational: the consumer feeds `workspaces` (from `whoami`) and wires
+ * `selectedKey` / `onSelectionChange`. RAC supplies the combobox ARIA pattern,
+ * typeahead filtering and keyboard nav.
+ */
+export const WorkspaceSwitcher = ({
+	label,
+	workspaces,
+	hideLabel = true,
+	...props
+}: WorkspaceSwitcherProps) => (
+	<RACComboBox {...props} items={workspaces} className="flex flex-col gap-1">
+		<Label className={hideLabel ? 'sr-only' : 'text-sm font-medium text-fg'}>{label}</Label>
+		<div className="flex items-center">
+			<RACInput
+				className={
+					'h-9 w-48 rounded-md border border-border bg-surface px-3 text-sm text-fg outline-none ' +
+					'data-[focused]:ring-2 data-[focused]:ring-ring'
+				}
+			/>
+		</div>
+		<Popover className="min-w-[var(--trigger-width)] rounded-md border border-border bg-surface p-1 shadow-lg">
+			<ListBox>
+				{(workspace: WorkspaceOption) => (
+					<WorkspaceSwitcherItem id={workspace.id} textValue={workspace.name}>
+						{workspace.name}
+					</WorkspaceSwitcherItem>
+				)}
+			</ListBox>
+		</Popover>
+	</RACComboBox>
+)
+
+const WorkspaceSwitcherItem = uic(ListBoxItem, {
+	displayName: 'WorkspaceSwitcher.Item',
+	baseClass:
+		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm text-fg outline-none ' +
+		'data-[focused]:bg-surface-muted data-[selected]:font-medium',
+}) as (props: ListBoxItemProps) => ReactNode
+
+export type UserMenuProps = {
+	/** Trigger label / avatar content (e.g. user initials or name). */
+	trigger: ReactNode
+	/**
+	 * Accessible label for the trigger button. REQUIRED — `@app/ui` ships no
+	 * i18n, so the consumer passes a translated string.
+	 */
+	triggerLabel: string
+	/** Called when the user activates a menu item; the item's `id` is passed. */
+	onAction?: (key: Key) => void
+	children: ReactNode
+}
+
+/**
+ * UserMenu — RAC `Menu` for the account cluster (settings link, sign out).
+ * gs-manager rendered avatar + name + a logout button inline; here it is a
+ * proper menu so additional items (settings, profile) compose cleanly. RAC
+ * handles the menu ARIA pattern, focus trapping and keyboard nav.
+ */
+export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenuProps) => (
+	<MenuTrigger>
+		<RACButton
+			aria-label={triggerLabel}
+			className={
+				'flex h-9 items-center gap-2 rounded-md px-2 text-sm font-medium text-fg outline-none ' +
+				'transition-colors hover:bg-surface-muted ' +
+				'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
+			}
+		>
+			{trigger}
+		</RACButton>
+		<Popover className="min-w-40 rounded-md border border-border bg-surface p-1 shadow-lg">
+			<RACMenu onAction={onAction} className="outline-none">
+				{children}
+			</RACMenu>
+		</Popover>
+	</MenuTrigger>
+)
+
+export const UserMenuItem = uic(RACMenuItem, {
+	displayName: 'UserMenu.Item',
+	baseClass:
+		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm text-fg outline-none ' +
+		'data-[focused]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+}) as (props: MenuItemProps) => ReactNode
+
+export const Topbar = Object.assign(TopbarRoot, {
+	Brand: TopbarBrand,
+	Nav: TopbarNav,
+	NavLink: TopbarNavLink,
+	Actions: TopbarActions,
+})

package/src/utils/uic.ts

@@ -0,0 +1,232 @@
+/**
+ * uic — a small, self-contained component factory combining:
+ *   - clsx (conditional class composition)
+ *   - cva (class-variance-authority — type-safe variants)
+ *   - tailwind-merge (dedupe conflicting Tailwind utilities)
+ *   - Radix Slot (the `asChild` pattern for string elements)
+ *
+ * Ported from Contember's `uic` helper, but with the two `@contember/*`
+ * dependencies inlined so this package stays dependency-light:
+ *   - `dataAttribute(v)` (was `@contember/utilities`) — boolean → ''/undefined,
+ *     null/undefined passthrough, everything else → String(v). Used to emit
+ *     `data-*` attributes for variant-driven CSS hooks.
+ *   - `useStableMemo(obj)` (was `@contember/react-utils`'s `useObjectMemo`) —
+ *     memoizes the variant object keyed on a shallow JSON signature so the
+ *     className recompute only runs when a variant value actually changes.
+ *
+ * Signature (matches the source — `baseClass` / `displayName` naming kept):
+ *   uic(Component, {
+ *     baseClass?, variants, defaultVariants?, compoundVariants?,
+ *     variantsAsDataAttrs?, passVariantProps?, defaultProps?,
+ *     displayName?, style?
+ *   })
+ * Returns a `forwardRef` component with type-safe variant props plus
+ * `asChild` (Slot) support when `Component` is a string element.
+ *
+ * Uses `createElement` (not JSX) so this stays a `.ts` file.
+ */
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import { type ClassValue, clsx } from 'clsx'
+import {
+	type ComponentProps,
+	type ComponentRef,
+	createElement,
+	type CSSProperties,
+	type ElementType,
+	forwardRef,
+	type ReactNode,
+	useMemo,
+	useRef,
+} from 'react'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+// tailwind-merge configured for OUR theme extensions (packages/ui/tailwind.config.ts).
+// Default tailwind-merge only recognises stock scale keys — without this,
+// `text-compact` (custom fontSize) would be classified as a text COLOR and
+// wrongly deduped against `text-fg-*`, and `px-nav-x` (custom spacing) would
+// not participate in padding conflict resolution at all.
+const twMerge = extendTailwindMerge({
+	extend: {
+		classGroups: {
+			'font-size': [
+				{
+					text: [
+						// Size-only text ramp (must be registered or they'd be treated as
+						// text COLORs and wrongly merged against `text-fg-*`).
+						'micro',
+						'caption',
+						'label',
+						'compact',
+						'callout',
+						'body',
+						'subtitle',
+						'title',
+						'headline',
+						'display',
+						// Heading ramp (size + line-height).
+						'heading1',
+						'heading2',
+						'heading3',
+						'heading4',
+						'heading5',
+					],
+				},
+			],
+		},
+		theme: {
+			spacing: ['nav-x'],
+			// Custom card/panel radius key (rounded-panel) → dedupes against other
+			// rounded-* utilities. xl/2xl are stock keys tailwind-merge already knows.
+			radius: ['panel'],
+		},
+	},
+})
+
+// --- inlined `dataAttribute` (was @contember/utilities) ---------------------
+type DataAttrValue = boolean | string | number | undefined | null
+const dataAttribute = (value: DataAttrValue): string | undefined => {
+	if (typeof value === 'boolean') {
+		return value ? '' : undefined
+	}
+	if (value === undefined || value === null) {
+		return undefined
+	}
+	return String(value)
+}
+
+// --- inlined `useObjectMemo` (was @contember/react-utils) --------------------
+// Returns a stable reference for `obj` that only changes when its shallow JSON
+// signature changes, so a downstream `useMemo` keyed on it stays cheap.
+const useStableMemo = <T extends object>(obj: T): T => {
+	const signature = JSON.stringify(obj)
+	const ref = useRef<{ signature: string; value: T }>({ signature, value: obj })
+	if (ref.current.signature !== signature) {
+		ref.current = { signature, value: obj }
+	}
+	return ref.current.value
+}
+
+// --- variant typing (verbatim from source) ----------------------------------
+type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+type ConfigSchema = Record<string, Record<string, ClassValue>>
+
+export type ConfigVariants<T extends ConfigSchema | undefined> = T extends ConfigSchema
+	? {
+			[Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined
+	  }
+	: {}
+
+type ConfigVariantsMulti<T extends ConfigSchema | undefined> = T extends ConfigSchema
+	? {
+			[Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined
+	  }
+	: {}
+
+type DataAttr<T extends ConfigSchema | undefined> = T extends ConfigSchema ? `data-${keyof T & string}` : never
+
+type AnyComponent = (props: Record<string, unknown>) => ReactNode
+
+type Config<T extends ConfigSchema | undefined, El extends ElementType> = {
+	baseClass?: ClassValue
+	variants?: T
+	passVariantProps?: string[]
+	defaultProps?: Partial<
+		ComponentProps<El> & {
+			[K in `data-${string}`]?: DataAttrValue
+		}
+	>
+	defaultVariants?: ConfigVariants<T>
+	compoundVariants?: ((ConfigVariants<T> | ConfigVariantsMulti<T>) & { className?: string })[]
+	variantsAsDataAttrs?: (keyof ConfigVariants<T>)[]
+	displayName?: string
+	style?: CSSProperties
+}
+
+export type NoInfer<T> = T & { [K in keyof T]: T[K] }
+
+export const uiconfig = <T extends ConfigSchema | undefined>(config: Config<T, AnyComponent>) => config
+
+export const uic = <El extends ElementType, Variants extends ConfigSchema | undefined = undefined>(
+	Component: El,
+	config: Config<Variants, NoInfer<El>>,
+) => {
+	// cva's generics are keyed on the concrete variant schema; `uic` is generic
+	// over an unknown schema, so we widen to `ConfigSchema` via `unknown` (never
+	// `any`) and call the result with a plain variant record below.
+	type Cva = (props?: Record<string, unknown>) => string
+	const cls = cva(config?.baseClass, {
+		variants: config?.variants,
+		defaultVariants: config?.defaultVariants,
+		compoundVariants: config?.compoundVariants,
+	} as unknown as Parameters<typeof cva>[1]) as unknown as Cva
+	const passVariantProps = config?.passVariantProps ? new Set(config.passVariantProps) : undefined
+
+	const component = forwardRef<
+		ComponentRef<El>,
+		ComponentProps<El> & {
+			asChild?: boolean
+			children?: ReactNode
+			className?: string
+		} & ConfigVariants<Variants>
+	>((props, ref) => {
+		const { children, ...rest } = props as Record<string, unknown> & {
+			className?: string
+			children?: ReactNode
+		}
+		const classNameProp = rest.className as string | undefined
+		delete rest.className
+
+		const variants: Record<string, unknown> = {}
+		for (const key in config?.variants) {
+			variants[key] = rest[key]
+			if (key in rest && !passVariantProps?.has(key)) {
+				delete rest[key]
+			}
+		}
+		const variantsMemoized = useStableMemo(variants)
+
+		const dataAttrs: Partial<Record<DataAttr<Variants>, string | undefined>> = {}
+		if (config?.variantsAsDataAttrs && config.variants) {
+			for (const key of config.variantsAsDataAttrs) {
+				const keyAsString = key.toString()
+				const variantValue =
+					(props as Record<string, DataAttrValue>)[keyAsString] ??
+					(config.defaultVariants?.[key] as DataAttrValue)
+				dataAttrs[`data-${keyAsString}` as DataAttr<Variants>] = dataAttribute(variantValue)
+			}
+		}
+
+		const inlineStyle = rest.style as CSSProperties | undefined
+		const style = useMemo(
+			() => (config?.style ? { ...config.style, ...inlineStyle } : inlineStyle),
+			[inlineStyle],
+		)
+		const finalClassName = useMemo(
+			() => twMerge(clsx(cls(variantsMemoized), classNameProp)),
+			[variantsMemoized, classNameProp],
+		)
+
+		let FinalComponent: ElementType = Component
+		if (props.asChild && typeof Component === 'string') {
+			FinalComponent = Slot
+			delete rest.asChild
+		}
+
+		return createElement(
+			FinalComponent,
+			{
+				ref,
+				className: finalClassName,
+				...config.defaultProps,
+				...dataAttrs,
+				...rest,
+				style,
+			},
+			children,
+		)
+	})
+	component.displayName = config?.displayName ?? 'uic'
+
+	return component
+}