@advtr/tidy

@advtr/tidy is a small React component library built on @advtr/tidy-core, styled-components, and TypeScript. It provides the shared UI foundation used across ADVTR applications: theme wiring, base form/layout primitives, and a few composed controls that can be reused without copying application-specific implementations between projects.

The package is intentionally a foundation rather than a complete design system. The current release cleans up the base layer and dependency stack so more application components can be moved here over time and maintained in one place.

Installation

npm install @advtr/tidy

@advtr/tidy expects the matching peer dependency majors listed in package.json. For 0.5.x, that means React 19, React DOM 19, React Intl 10, and styled-components 6.

Usage

Wrap your application with ThemeProvider, add GlobalStyle once near the app root, then import components from the package entrypoint.

import {
  GlobalStyle,
  Search,
  ThemeProvider,
  ThemeSwitch,
} from '@advtr/tidy'

export function App() {
  return (
    <ThemeProvider colorScheme="light">
      <GlobalStyle />
      <Search listener />
      <ThemeSwitch />
    </ThemeProvider>
  )
}

Exports

The package re-exports @advtr/tidy-core, plus the React APIs below.

Base components

• Container - responsive content wrapper with tidy theme props.
• Header - typed heading wrapper for semantic headings and display heading classes.
• Input - low-level text input with disabled, read-only, focus, and value props.
• Select and SelectValue - select control with typed option values, optional groups, custom option rendering, and selection callbacks.
• Dropdown and Item - listbox-style dropdown primitives with typed item rendering and selection callbacks.
• Glow - theme-aware loading/skeleton block.

Composed components

• Search - themed search input with optional icon and keyboard listener affordance.
• LanguageSelect - locale selector built on Select and react-intl.
• ThemeSwitch - theme color-scheme toggle for use inside ThemeProvider.
• GlobalStyle - global reset and tidy theme class styles.

Providers, contexts, and hooks

• ThemeProvider, ThemeContext, useTheme, and withThemeProvider for tidy theme and color-scheme state.
• LanguageProvider for react-intl message wiring.
• SearchListenerProvider, SearchListenerContext, useSearchListener, and useKeyboardEventListener for shared keyboard listener behavior.
• useAutocorrect for small input string corrections.

Shared types and utilities

• Component prop types are exported alongside their components, including ContainerProps, DropdownProps, HeaderProps, InputProps, SelectProps, LanguageSelectProps, SearchProps, ThemeSwitchProps, and provider props.
• Shared prop interfaces are exported from @advtr/tidy, including DOMProps, ThemeProps, InputBase, SelectionProps, and AriaLabelingProps.
• Theme helpers include get, border, breakpoints, media, resolve, and color helpers such as alpha, darken, desaturate, lighten, and mix.

Project direction

The next phase for this package is to move more shared components out of applications that already depend on @advtr/tidy. Keeping those components here should make cross-application maintenance easier, reduce local duplication, and keep new UI elements aligned with the same theme and base prop contracts.

Migrating from 0.4.1 to 0.5.x

0.5.0 is a breaking release that moves @advtr/tidy to the current React ecosystem versions used by the library build and test suite.

Runtime prop validation

Runtime PropTypes validation has been removed. @advtr/tidy now relies on its exported TypeScript prop types for component contracts, so consumers no longer need to install prop-types for this package.

If you previously depended on React console warnings from PropTypes, replace that workflow with TypeScript checks against the exported component prop types, such as SearchProps, SelectProps, ThemeProps, and the shared prop interfaces exported from @advtr/tidy.

Peer dependencies

The package now targets these peer dependency majors:

• react@19
• react-dom@19
• react-intl@10
• styled-components@6

Projects on earlier peer majors should upgrade those packages before adopting @advtr/[email protected].

React Intl

react-intl usage has been updated for v10. Internally, components now use the hook-based API instead of the removed injectIntl higher-order component. Public LanguageSelect props are unchanged.

Styled Components

styled-components now uses v6 and its bundled TypeScript types. Consumers should remove @types/styled-components if it is only present for @advtr/tidy.

The ThemeProps contract remains adv and sx, but TypeScript consumers may see stricter styled-components interpolation types from v6.

React 19

The library has been adjusted for React 19 runtime and type behavior. Component defaults that previously relied on defaultProps now resolve during render where needed, and internal styled-only props use transient props to avoid React DOM attribute warnings.