Skip to content

Releases: platform-blocks/react-ui-library

1.0.0

Choose a tag to compare

@joshstovall joshstovall released this 26 Jul 01:33
v1.0.0

1.0.0 — first stable release

v0.11.0

Choose a tag to compare

@joshstovall joshstovall released this 03 Jul 19:09

0.11.0

A large feature release. Two headline efforts land here: @platform-blocks/charts gets a new unified interaction engine (every chart now shares one pointer, hit-test, and tooltip pipeline), and @platform-blocks/ui gains a new theming color-role system plus several new components. There are a handful of breaking changes — all removals of superseded APIs — collected under Migration notes at the end.

Charts: a unified interaction engine

Previously every chart re-implemented pointer handling roughly its own way (~20 variations), tooltips flowed through a two-renderer pipeline (registerSeries + setCrosshairuseTooltipAggregatorChartPopover), and touch/hover support was uneven — several charts were web-onMouseMove-only. This release replaces all of that with one frame + hit-test + pointer architecture that every chart type now shares. See packages/charts/src/interaction/TOOLTIP_MIGRATION.md for the full design.

Three new layers do the work:

  • core/framecreateFrame and the ChartFrame / CartesianFrame / RadialFrame types are a memoizable, non-React source of truth for the plot rect, scales, and pixel↔data transforms. This establishes a single container-origin pixel convention across the whole library, so charts no longer hand-roll padding math.
  • core/hittest — one pluggable HitTester interface (createHitTester plus PointSeriesHitTester, BandCategoryHitTester, CellGridHitTester, AngularSliceHitTester, RadarAxisHitTester). hit() returns the nearest single target; the optional slice() returns every series' target at a given x/angle for multi-series tooltips. This replaces the four overlapping nearest-point routines and the per-chart inline hit-test loops.
  • interaction/normalizePointer is the single coordinate-truth function that emits container / plot / page spaces (plus inside-plot flags) for every web and native event. useChartPointer is the one cross-platform input path (web PointerEvents vs. native Responder, hidden behind one hook), ChartGestureSurface is a declarative full-bleed overlay around it, and ChartActiveTooltip is the single themed tooltip (web-portaled, native absolute). Optional two-finger pinch is provided by useOptionalPinch (touchDistance / touchCenter / resolveGestureHandler), which uses react-native-gesture-handler only if installed and never hard-depends on it.

What you get from this:

  • Consistent, richer tooltips across every chart type — single-point and multi-series "slice" tooltips, with renderHeader, renderEntry, sortEntries, filterEntry, maxEntries, and full customTooltip control, all through ChartActiveTooltip.
  • Native touch hover on charts that were previously web-only — Histogram, Heatmap, Radar, Funnel, Marimekko, and Sankey now respond to touch as well as mouse.
  • The enableCrosshair guide line is engine-driven from the active target's pixel position rather than a per-chart crosshair state.

RadialBarChart was expanded onto the new angular hit-test archetype and gained centerLabel / centerSubLabel props (text in the empty center of the ring). DonutChart's center-label focus (focusedSliceId) now actually tracks the hovered slice instead of only ever resetting. GaugeChart moved from the feedback category into charts.

New chart demos

  • LineChartzoom — scroll-to-zoom, drag-to-pan, Shift-drag box-zoom, and double-tap reset, showcasing enablePanZoom / enableWheelZoom / enableBrushZoom / resetOnDoubleTap / zoomMode / minZoom.
  • RadialBarChartgoal-progress and satisfaction-gauge.

Charts test coverage

The tests/components/* suite was entirely broken under pnpm (the Jest transformIgnorePatterns never matched @testing-library/react-native, so no component test could run). That's fixed with a pnpm-aware pattern, and ~19 new chart component test suites were added (BarChart, BubbleChart, CandlestickChart, ComboChart, FunnelChart, GroupedBarChart, HeatmapChart, HistogramChart, MarimekkoChart, NetworkChart, PieChart, RadarChart, RadialBarChart, RidgeChart, SankeyChart, StackedAreaChart, StackedBarChart, ViolinChart) alongside new unit tests for the frame, hit-test, pointer-normalization, and geometry primitives.

New UI components

  • ColorInput — a full form field for picking a color: a labeled trigger with a live color preview plus hex / RGB / HSL text entry in a positioned dropdown. Supports value / defaultValue / onChange, format ('hex' | 'rgb' | 'hsl'), withAlpha, swatches / withSwatches, showPreview, showInput, clearable, and the same positioning API as AutoComplete (placement, flip, shift, offset, keyboardAvoidance).
  • DataList — a description / key-value list with compound parts DataList.Item, DataList.ItemLabel, and DataList.ItemValue. Render from a data={[{ label, value }]} shorthand or by composing children. Supports orientation ('horizontal' | 'vertical'), withDivider, size, spacing, labelWidth, and color overrides.
  • Menu.Sub (MenuSub) — nested flyout submenus inside a Menu.Dropdown. Opens on hover on web (press elsewhere), nested overlays unmount as a chain, and selecting a leaf item closes the whole chain. Props: label, startSection, disabled, color, w, maxH.
  • GradientText is now exported from the package root. It fills glyphs with a multi-stop linear gradient (native via @react-native-masked-view + optional expo-linear-gradient, with a graceful fallback when the gradient dependency is absent). Props include colors (required, ≥2), locations, angle, start / end, and position.

New theming primitives

Two new modules are exported for building theme-aware, legible color variants — the same machinery Chip and Button now use internally.

variantRoles resolves a component-agnostic variant vocabulary so a light Chip, a light Badge, and any other component render identically on any theme:

  • resolveVariantRoles(theme, { variant, color, gradientStops }) returns { fill, border, text } for a variant ('filled' | 'outline' | 'light' | 'subtle' | 'gradient'). Because palettes invert between light and dark schemes, tinted variants are built by alpha-compositing the strong color over the live backgrounds.surface rather than hardcoding palette indices, and the text color is chosen by measured WCAG contrast against the real composited background — so it stays legible on custom themes and arbitrary hex colors.
  • CORE_COLORS — the six token names (primary, secondary, success, warning, error, gray) treated as palettes; anything else is a raw color.
  • Types: VariantRole, VariantRoles, ResolveVariantOptions.

colorUtils provides the underlying contrast helpers:

  • withAlpha(hex, alpha) — an rgba() wash from a solid hex.
  • readableTextOn(fill) — the text color for a solid fill; prefers white on saturated fills and only falls back to dark when white would drop below 3:1 (keeps white on iOS blue, fixes orange/yellow).
  • contrastRatio(a, b) — WCAG contrast ratio.
  • composite(fg, bg, alpha) — Porter–Duff "over" to an opaque hex, so contrast can be measured against a real tint result.
  • pickReadable(candidates, surface, min) — the first candidate clearing min contrast, else the highest-contrast one.

A new variantContrast test walks every theme × color × variant combination and asserts the resolved text clears a legible contrast ratio, guarding against regressions.

PlatformBlocksThemeProvider (and PlatformBlocksThemeProviderProps) is now exported from the package root. It was previously an internal-only symbol; consumers can now wrap their app or nest scoped themes directly, with granular sub-contexts (useThemeVisuals, useThemeLayout) so components subscribe only to the slice they need.

Additions

  • DataTable gained a large set of props: row grouping and aggregation (groupBy, groupsDefaultExpanded, renderGroupHeader, per-column aggregate / aggregateFormat, showFooterTotals, footerLabel), server-side pagination (manualPagination + paginationProps), CSV export (exportable, exportFileName, onExport), column reordering (enableColumnReordering, columnOrder, onColumnOrderChange), and an ariaLabel.
  • Toast viewport-offset API — new exports useToastViewportOffset / setToastViewportOffset and type ToastViewportOffset ({ top, bottom, left, right }), plus ToastProvider props offset (static) and defaultVariant. Because the ToastProvider usually sits above the app shell, it can't read header/safe-area layout from context; a component inside the shell can now publish the header height and safe-area insets so toast stacks position clear of the chrome (centered stacks shift to stay centered between side navs).
  • Switch — new variant prop: 'filled' | 'outline' | 'ios' | 'android'.
  • AutoComplete — new renderValue (a rich single-select value overlay), caretHidden, and highlightQuery; freeSolo now works together with multiSelect.
  • Chip — new dot / dotColor props for a leading status dot.
  • Accordion — per-item color override so one accordion can mix accents.
  • Pagination — the page-size changer is now wired up in the toolbar (showSizeChanger, pageSizeOptions, onPageSizeChange).
  • Buttoncolor now accepts any palette token or raw hex across filled / light / subtle / outline / gradient (and ghost/link text); the variant union is documented to include secondary and none.
  • ClearButton — new iconSize and stroke props to override the computed close-glyph size and stroke width.
  • Gallery — toggles for the metadata panel, thumbnail strip, download button, keyboard/swipe navigation, backdrop opacity, and animation duration.

Fixes

  • **Text merges nested sty...
Read more

v0.10.0

Choose a tag to compare

@joshstovall joshstovall released this 30 May 19:12

This is a platform-compatibility release: Platform Blocks now targets Expo SDK 56 and React Native 0.85, along with the runtime fixes that the React 19 / RN 0.85 / Hermes upgrade surfaced. No public component APIs changed or were removed.

Expo SDK 56 / React Native 0.85

@platform-blocks/ui and @platform-blocks/charts now build and test against the SDK 56 toolchain:

Package Version
react / react-dom 19.2.3
react-native 0.85.3
react-native-reanimated 4.3.1
react-native-worklets 0.8.3
react-native-safe-area-context ~5.7.0
react-native-screens ~4.25.2
react-native-svg 15.15.4
typescript ~6.0.3

Peer-dependency ranges remain permissive (react >=18, react-native >=0.73), so the packages still work on older toolchains — but everything is now verified on React 19.2 / RN 0.85.

Fixes

ContextMenu no longer crashes on iOS / Android

<ContextMenu> registered document / window event listeners inside a useEffect unconditionally. Hermes evaluated that effect on native and threw because those globals don't exist there. The listeners are now guarded behind Platform.OS === 'web', so ContextMenu mounts cleanly on iOS and Android (where it uses the long-press path instead).

AppShell status bar no longer crashes on Android (SDK 56 edge-to-edge)

expo-navigation-bar removed setBackgroundColorAsync / setButtonStyleAsync in SDK 56 (Android edge-to-edge) in favor of a synchronous setStyle. StatusBarManager called the removed methods and threw undefined is not a function. It now feature-detects the API — preferring setStyle, falling back to the legacy async methods, and only setting a navigation-bar background color when that (legacy) method still exists — so it works across expo-navigation-bar versions.

StyleSheet.absoluteFillObjectStyleSheet.absoluteFill

React Native 0.85 dropped StyleSheet.absoluteFillObject from both its types and its runtime export. Eight components (Badge, Card, Chip, Dialog, Overlay, ShimmerText, DrawerNavigator, and the overlay renderer) referenced it, which silently broke absolute-fill positioning on native. They now use the equivalent StyleSheet.absoluteFill.

@platform-blocks/charts resolved to unpublished source on React Native

The charts package's react-native export condition pointed at ./src/index.ts, but src/ is not part of the published tarball — so Metro / Expo consumers installing from npm hit a module-not-found error. It now resolves to the built ./lib/esm/index.js, matching @platform-blocks/ui.

Quieter charts without a ChartInteractionProvider

LineChart, CandlestickChart, and the charts provider logged a console.warn on every render when used outside a ChartInteractionProvider. The interaction context is optional (standalone charts are fully supported), so the warnings have been removed — bringing those components in line with the other ~17 chart types that already treated it as optional.

Maintenance

  • @platform-blocks/charts now ships a LICENSE file (MIT), matching @platform-blocks/ui.
  • Charts type declarations are now emitted as a full .d.ts tree via tsc (matching ui) instead of a single bundled file. The stricter tsc pass surfaced and removed 55 dead @ts-ignore directives that were suppressing nothing, and the charts source now passes the same ESLint config as ui.
  • Charts react peer range widened from >=18.0.0 <20.0.0 to >=18.0.0, matching ui and reflecting React 19 support.
  • Tooling parity between the two packages: shared ESLint flat config, rollup resolve / commonjs settings, and .npmignore.
  • Reanimated 4.3 AnimatedStyle typing fix in Knob.
  • Docs site: the component playground no longer crashes under React 19 when an example's props include a React node (non-serializable defaults are now handled when computing the change-detection key), and the landing page uses a valid download icon.

Migration notes

To adopt 0.10.0, move your app to Expo SDK 56 / React Native 0.85 (React 19.2). The fastest path:

npx expo install expo@^56
npx expo install --fix

That aligns react, react-native, react-native-reanimated (4.3), react-native-worklets (0.8), and the Expo modules to their SDK 56 versions. If you depend on the optional native modules that the UI package integrates with (expo-navigation-bar, expo-haptics, etc.), reinstall them via expo install so they land on SDK 56 builds.

No public component APIs changed in this release, so no application code changes are required beyond the platform bump.

v0.9.0

Choose a tag to compare

@joshstovall joshstovall released this 03 May 18:25

New Features

Slot props for inner Text and View elements

Most components now accept *Props overrides for the inner <Text> / <View> slots they render. Consumers can pass through any TextProps / ViewProps (style, weight, font family, accessibility, etc.) without rewriting the component or fighting children-prop precedence.

  • Label slots (labelProps): Accordion (titleProps), Avatar, Badge, Breadcrumbs (labelProps + separatorProps), Button, Checkbox, Chip, Indicator, Pagination (labelProps + activeLabelProps), Radio, Slider, Stepper, Switch, Tabs, Tooltip
  • Title / body slots (titleProps / bodyProps): Dialog, Notice, Toast
  • Description slots (descriptionProps): AutoComplete, Avatar, Checkbox, Input, Radio, Stepper, Switch, TimePicker
  • Section / control slots: AutoComplete + Input + TimePicker (startSectionProps, endSectionProps), Spoiler (controlProps), DataTable cell text customization
  • mergeSlotProps is now exported from @platform-blocks/ui so custom components can adopt the same merge semantics (theme defaults → slot props override → explicit props win).

useDisclosure, useDebouncedValue, useDebouncedCallback, useMediaQuery, useHover

Five hooks promoted to the public API. All have tests, demos, and metadata.

import { useDisclosure, useDebouncedValue, useMediaQuery } from '@platform-blocks/ui';

const [opened, { open, close, toggle }] = useDisclosure(false);
const [debounced] = useDebouncedValue(query, 200);
const isCompact = useMediaQuery('(max-width: 640px)');

Slider variants

<Slider> and <RangeSlider> accept a new variant prop with six visual treatments:

Variant Description
default Standard track, filled active range, solid thumb
filled Thicker, fully opaque inactive track (iOS-style)
outline Transparent track + border; active range is a colored fill
minimal Hairline track and a smaller, flatter thumb for dense UIs
segmented Track is divided at tick boundaries; active region fills whole segments
unstyled Strips all chrome — consumer styles via trackStyle / thumbStyle

Variant size multipliers are applied at the consumer level so the thumb stays visually aligned with the track ends.

RadioGroup variants

<RadioGroup> accepts a variant prop with four layouts:

Variant Description
default Classic stacked radio dots with labels
card Each option is a bordered, padded surface; selected card gets a colored border, tinted background, and a check icon — ideal when options have descriptions
segmented Joined buttons with shared borders, like an iOS/macOS segmented control (always horizontal)
chip Compact rounded pills that wrap onto multiple lines — great for filters and tag pickers

orientation is honored only by default; segmented is always horizontal and chip always wraps. Keyboard navigation (arrow-key cycling) and accessibilityRole="radio" are preserved across all variants.

Card.Section

Card gains a new <Card.Section> sub-component for full-bleed banners, dividers, and banded rows. Position-aware: the parent walks its children and tags the first/last sections so they only negate the relevant edges.

<Card padding={20} withBorder>
  <Card.Section>
    <Image source={hero} />
  </Card.Section>
  <Text>Body content keeps the parent padding.</Text>
  <Card.Section withBorder>
    <Text>Footer with a top divider.</Text>
  </Card.Section>
</Card>

Card also gains withBorder, borderColor, borderWidth, bg (palette name or CSS color), and testID. padding is widened from number to SizeValue (token or pixel).

Input variants and slot overrides

BaseInputProps exposes a variant of 'default' | 'filled' | 'outline' | 'unstyled', plus placeholderTextColor, labelProps, descriptionProps, startSectionProps, and endSectionProps. The variant set propagates to every component that extends BaseInputProps (Input, NumberInput, AutoComplete, TimePicker, etc.).

Divider enhancements

Divider is no longer just a line — it now supports:

  • variant: 'solid' | 'dashed' | 'dotted' | 'gradient'
  • colorVariant: 'border' | 'subtle' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gray'
  • label (centered, start, or end content rendered in the middle of the line) + labelProps
  • opacity shorthand
  • size accepts a token or pixel thickness

Block bg shorthand and Text c / ff shorthands

  • <Block bg="primary"> resolves to the palette's shade-1 tint; <Block bg="primary.6"> picks an explicit shade; theme background keys ('surface', 'subtle', 'elevated', 'base') are also supported.
  • <Text c="dimmed"> for color shorthand and <Text ff="mono"> for font-family shorthand.

Demo coverage

36 new demos shipped across the UI package, including: label-customization / title-customization / text-customization for the components that gained slot props, Slider/variants, Radio/variants + Radio/theming, Card/sections + Card/border-and-bg, Input/variants + Input/slot-styling, Divider/gradient-opacity, Block/bg-shorthand, and Text/c-shorthand + Text/ff.

Improvements

DataTableFilter is now publicly typed

DataTableFilter was already exported from ./components/DataTable but missed the public re-export at the package root. It's now reachable via import type { DataTableFilter } from '@platform-blocks/ui'.

Playground exposes RadioGroup, not just Radio

The Radio playground entry now mounts <RadioGroup> (matching the convention used by Tabs, Select, and SegmentedControl — the playground exposes the parent/group rather than the inner element). Variant and orientation are surfaced as live segmented controls.

Slider playground covers variants

The Slider playground entry surfaces variant as a segmented control across all six values, with valueLabelPosition, valueLabelOffset, valueLabelAlwaysOn, and valueLabelAsCard pinned for live tweaking.

Fixes

Typecheck regressions cleared

The docs app + UI package now typecheck cleanly (down from 71 errors to 0). Touched areas:

  • Demo cleanup — removed references to props that no longer exist (mobileMode, touchOptimized, swipeToClose, floatingPosition, etc.) on TableOfContents; xxs size token replaced with xs; <Row wrap> boolean → wrap="wrap" string; <Column bg=…><Block bg=…> (Column doesn't accept bg); renderExpandedRowexpandableRowRender on DataTable.
  • Test infrastructureCard.testID (legitimately missing from CardProps) added; react-test-renderer types replaced with a structural shim so the Divider rendering test compiles without @types/react-test-renderer; renderHook callbacks for the debounce hooks now annotate their props parameter so the generic infers correctly.
  • Wrong import path in apps/platform-blocks.com/utils/sourceCode.ts (../data/sourceCodeMap./sourceCodeMap).
  • Strictness fixes in NumberInput, Rating, Ring, and QRCode demos/tests (typed callback params, palette fallbacks, narrowed reduce).

RadioGroup no longer requires theme.backgrounds for the default variant

Variant-only color tokens (accentTint, surfaceColor, etc.) are now computed lazily and only when variant !== 'default'. The default radio-dot path doesn't depend on theme.backgrounds anymore, which fixes 10 Radio tests that mocked a slim theme.

Migration notes

This release is predominantly additive. A few demos that referenced removed TableOfContents mobile props will need to drop those props if you copied them — the props were never on TableOfContentsProps, so they were silently broken anyway. If you imported DataTableFilter from @platform-blocks/ui/components/DataTable, the type is now also re-exported from the package root.

v0.8.0

Choose a tag to compare

@joshstovall joshstovall released this 29 Mar 03:44

Breaking Changes

Monorepo Restructure

The repository layout has been reorganized for clarity and scalability:

  • ui/packages/ui/
  • charts/packages/charts/
  • docs/apps/platform-blocks.com/

Migration: Update any local scripts, CI pipelines, or tooling that reference the old paths. All internal references (tsconfig paths, metro config, workspace definitions, build scripts, CI workflows) have been updated.

Workspace References

npm workspace names now use directory-based paths:

// Before
"workspaces": ["ui", "docs", "charts", "icons", "packages/create-platform-blocks"]

// After
"workspaces": ["packages/ui", "packages/charts", "apps/platform-blocks.com", "packages/create-platform-blocks"]

Scripts that used --workspace=ui, --workspace=docs, or --workspace=charts now use --workspace=packages/ui, --workspace=apps/platform-blocks.com, and --workspace=packages/charts respectively.

Improvements

Dependency Alignment (Expo SDK 55)

All packages are now aligned to Expo SDK 55 expected versions, eliminating the Metro Bundler compatibility warnings:

Package From To
expo 55.0.0-preview.7 ~55.0.9
react-native 0.83.1 0.83.2
react-native-svg 15.15.1 15.15.3
react-native-safe-area-context ~5.6.0 ~5.6.2
react-native-screens ~4.20.0 ~4.23.0
react-native-reanimated ~4.2.1 4.2.1
@types/react-dom ~19.2.2 ~19.1.7

Charts Test Stack Upgrade

Aligned @platform-blocks/charts testing dependencies to match @platform-blocks/ui:

Package From To
jest ^29.7.0 ^30.2.0
babel-jest ^29.7.0 ^30.2.0
@types/jest ^29.5.12 ^30.0.0
@testing-library/react-native ^12.4.3 ^13.3.0
@rollup/plugin-commonjs ^28.0.1 ^29.0.0

UI Expo DevDependency Alignment

The @platform-blocks/ui package previously referenced legacy Expo module versions as devDependencies. These are now pinned to SDK 55:

  • expo-audio ^1.1.0 → ~55.0.2
  • expo-document-picker ^14.0.0 → ~55.0.2
  • expo-haptics ^15.0.0 → ~55.0.2
  • expo-linear-gradient ^15.0.0 → ~55.0.2
  • expo-status-bar ^3.0.0 → ~55.0.2
  • jest-expo ^54.0.0 → ~55.0.0

Other Package Updates

  • @shopify/flash-list 2.0.2 → 2.3.1

Deprecated Package Removal

Removed deprecated packages from @platform-blocks/charts:

  • @testing-library/jest-native — superseded by built-in matchers in @testing-library/react-native 12.4+
  • metro-react-native-babel-preset — superseded by @react-native/babel-preset

Stale Workspace Cleanup

Removed the icons workspace entry from the root package.json (directory did not exist).

Infrastructure

CI/CD Updates

  • GitHub Actions deploy workflow updated for new directory structure
  • Playwright config updated to reference apps/platform-blocks.com/
  • EAS build post-install script updated for new nesting depth

Script Path Updates

All root-level scripts (generate-demos, validate-demos, generate-llms, generate-sitemap, scan-i18n-keys, publish-release) updated to resolve packages and app directories from the new layout.

v0.7.1

Choose a tag to compare

@joshstovall joshstovall released this 01 Mar 19:32

Features

Interactive Playgrounds (20 New Components)

Added interactive playground configurations for 20 additional components in the documentation site, bringing the total to 42 components with live playgrounds:

  • Dialog, Badge, Chip, Notice, Checkbox, Toggle, Radio, Skeleton, Rating, Divider, Breadcrumbs, Pagination, IconButton, TextArea, NumberInput, Popover, SegmentedControl, Highlight, CodeBlock, Toast

Each playground allows real-time prop editing with tailored controls (color pickers, segmented selectors, number sliders, etc.) directly in the documentation.

BrandButton Dark Mode Support

  • The plain variant now adapts to dark mode, using theme-aware background and text colors instead of hardcoded white/black
  • Improves visibility and consistency when using BrandButton in dark color schemes

Fixes

Text Hydration Error (Web)

  • Fixed React hydration mismatch caused by block-level elements (e.g., View, Pressable) rendered inside <p> tags on web
  • Added containsBlockElement() detection that automatically switches the Text wrapper from <p> to <div> when children contain block-level React Native components
  • Eliminates the <div> cannot appear as a descendant of <p> browser warning

Carousel Demo Migrations

  • Updated all 5 Carousel demos (basic, multi, motionControls, performance, vertical) to use Block instead of the deprecated Column component

Documentation TypeScript Fixes

Resolved numerous TypeScript errors across the docs site:

  • Layout prop renames: Updated width/height to w/h across Header, HeaderMobile, FooterPage, SkeletonShowcase, MediaShowcase, EverythingShowcase, PhotoGalleryExample, ExampleListScreen, HookListScreen
  • Component API updates:
    • Switch valuechecked
    • Button colorcolorVariant
    • Text variant 'body''p'
    • IconButton iconVariant ternary fix
    • getAllUISoundsgetAllSounds
  • Import corrections: Fixed DataTableDataTableSort import, SliderShowcase props, ChatroomExample missing import, PreviewFile unused import
  • Type fixes: NodeJS.Timeout type annotation, ColorSchemeName narrowing for "unspecified" value

v0.7.0

Choose a tag to compare

@joshstovall joshstovall released this 01 Mar 18:39

Fixes

Dialog: Bottom Sheet Pan Responder Fix

  • Fixed pan responder behavior for the bottom sheet variant to prevent gesture conflicts with child interactive elements (buttons, pressables)
  • Previously, the capture phase would immediately claim gestures on touch start, which could block taps on child elements like buttons inside the bottom sheet
  • Now the pan responder only claims gestures in the bubble phase, allowing child components to handle their own touch events first
  • Swipe-to-dismiss still works as expected when touching empty space or the drag handle

Improvements

StyleProp Type Flexibility

  • Updated style prop types across 38+ components to use StyleProp<ViewStyle> and StyleProp<TextStyle> instead of ViewStyle and TextStyle directly
  • This allows passing arrays, false, null, undefined, or registered style references as style values — matching React Native's standard style prop pattern
  • Affected components: Accordion, AutoComplete, Avatar, Badge, Block, Blockquote, Breadcrumbs, Calendar, Carousel, Chip, CodeBlock, ColorPicker, CopyButton, DatePicker, Divider, Grid, HoverCard, Image, Indicator, Knob, ListGroup, Loader, Masonry, Navigation, Notice, Pagination, Progress, QRCode, Rating, Ring, SegmentedControl, Skeleton, Slider, Spotlight, Tabs, Toast, Tooltip, Video

setTimeout Type Compatibility

  • Fixed setTimeout return type for cross-platform TypeScript compatibility

0.5.0

Choose a tag to compare

@joshstovall joshstovall released this 02 Dec 00:14

UI Package (@platform-blocks/ui)

  • Carousel picked up a full Embla-style responsive system: media-query breakpoints, slidesToScroll, startIndex, align, containScroll, drag-free momentum, snap skipping, manual duration, and deterministic page virtualization so multi-item decks render identically across web/native (ui/src/components/Carousel/Carousel.tsx, ui/src/components/Carousel/types.ts). New demos (including motionControls) walk through drag-free and locked-snap setups.
  • Slider + RangeSlider now accept palette-driven overrides (colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor) along with trackSize, custom thumb sizing/styling, and smarter default value labels so they can adopt product branding without re-implementing the primitive (ui/src/components/Slider/Slider.tsx, ui/src/components/Slider/SliderCore.tsx, ui/src/components/Slider/types.ts). The new customStyles demo shows both single-value and range palettes in action.
  • DataTable exposes a dedicated striped prop that can force alternating row backgrounds independent of the broader variant you choose (ui/src/components/DataTable/DataTable.tsx, ui/src/components/DataTable/types.ts).
  • Input borders no longer disappear when the field is disabled—neutral borders remain in place for accessibility clarity (ui/src/components/Input/styles.ts).
  • AppShell keeps the header mounted on mobile so the docs header/search/shortcuts stay reachable regardless of breakpoint (ui/src/components/AppShell/AppShell.tsx, docs/components/layout/Header.tsx).

Documentation & Demos

  • Component detail pages now show a "Further reading" card whenever a component supplies resources metadata. The loader and sample metadata were updated accordingly (docs/screens/ComponentDetailScreen.tsx, docs/utils/demosLoader.ts, ui/src/components/Button/meta/component.md, ui/src/components/Avatar/meta/component.md).
  • The playground builder allows control-specific labels so we can rename options without forking the control type (docs/components/playground/ComponentPlayground.tsx, docs/components/playground/registry.ts).
  • Header tweaks keep the command palette shortcut, search affordance, and nav toggle aligned for both desktop and mobile (docs/components/layout/Header.tsx).

Tooling & Release

  • scripts/generate-demos.ts now parses structured frontmatter (arrays/objects) instead of plain strings, which lets contributors declare tags, highlightLines, or translation metadata without breaking the generator.
  • The workspace manifest knows about the new CLI package and the release script performs a UI build before running publish-release.ts to ensure artifacts are up to date (package.json, package-lock.json).

0.4.0

Choose a tag to compare

@joshstovall joshstovall released this 23 Nov 23:48

UI Package (@platform-blocks/ui)

  • Introduced Notice, a flexible replacement for Alert that supports severity-aware defaults, light/filled/outline/subtle variants, optional icons, close buttons, and full-width banners across web and native.
  • Rebuilt Knob with the new appearance/interaction system (layer-level styling, partial arcs, pointer + progress controls, multi-gesture input) plus extensive demos, README, and customization spec to document the behavior.
  • Reworked QRCode rendering to use an internal encoder, support rounded/diamond modules, gradients, portal logos, and graceful error fallbacks; added a dedicated test suite to keep regressions out.
  • Added the shared Collapse primitive and refit Accordion, Spoiler, and Tree to use it so that expand/collapse timing, easing, and fade behavior remain consistent across components.
  • Hardened optional dependency loading through the centralized resolveOptionalModule cache and migrated hooks such as useClipboard, useHotkeys, useMaskedInput, useHaptics, useDeviceInfo, and useSpotlightToggle into their own folders with metadata + demos, making the docs pipeline aware of first-party hooks.
  • Polished dozens of components and demos: new chart-sparkline icon assets, a caption text variant (with matching tests), web-only Radio keyboard fixes, ColorPicker style cleanups, updated App Store badges/buttons, refreshed markdown + gradient docs, and brand-new Jest coverage across Accordion, Breadcrumbs, Card, Checkbox, Dialog, Divider, Grid, Indicator, Menu, Overlay, Popover, Progress, QRCode, Radio, Ring, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Space, Spoiler, Spotlight, Stepper, Tabs, Title, Toggle, Tooltip, Tree, and more.

Charts Package (@platform-blocks/charts)

  • Expanded ChartInteractionProvider with portal-aware popovers, sticky crosshairs, pointer/crosshair throttling, wheel zoom controls, and follow modes so charts remain responsive on both touch and desktop pointer devices.
  • Updated ChartPopover to animate toward pointer coordinates, optionally render inside document.body, and better format candlestick, bubble, histogram, funnel, radar, and violin data via the enriched metadata supplied by each series.
  • Rebuilt useTooltipAggregator to combine crosshair distance + pointer offset, cap series counts, and expose shared anchors that all Cartesian charts (Bar, Line, Scatter, Histogram, Violin, Combo, Donut, etc.) now feed to eliminate mismatched tooltips.
  • Synced every chart component to the new interaction contracts—fixing clipped padding, improving grouped/stacked hover alignment, and wiring up the docs’ DOCS_CHART_INTERACTION_CONFIG so previews feel identical to production usage.

Documentation & Site

  • Adopted a new docsLayout shell with AppShell support: upgraded header (language toggle, Spotlight trigger, GitHub shortcut), collapsible desktop nav, mobile navbar + bottom bar, floating theme actions, keyboard focus restoration, and localization strings for en/es/fr.
  • Component detail pages now include the dynamic ComponentPlayground, consolidated “showcase” previews, a smarter DemoRenderer, persistent scrolling via PageLayout, and the CopyPageMenu button that copies Markdown or opens ChatGPT/Claude with page context.
  • Hooks received first-class coverage: scripts/generate-demos emits hook metadata/code, hooksLoader exposes it to the app, /hooks lists and filters entries, /hooks/[hookName] renders dedicated detail screens, and a comprehensive useDeviceInfo hook documents runtime/platform heuristics.
  • Refreshed the example apps and doc content (Accessibility, Finder, Music Player, Photo Gallery, Settings, Social Feed, etc.), added breadcrumb helpers, standardized section headers (DocsPageHeader), and wired every page through the updated layout wrappers.
  • SEO + sharing improvements: app/+html.tsx now stamps full meta tags, the Expo export pipeline injects them into the static bundle, docs/public ships robots/sitemap/llms assets, CopyPageMenu exposes copy/share actions, and chart playgrounds use the shared interaction config for stable previews.

Tooling & Release

  • scripts/generate-demos.ts now parses hook directories alongside UI/charts components, emits code maps + metadata for every entry, and flags doc coverage gaps during generation.

  • Added scripts/generate-sitemap.ts, scripts/generate-llms.ts, docs/scripts/inject-seo-tags.ts, and docs/scripts/check-prerender.ts so the docs build can produce crawlable HTML, verify prerender output, and capture a trimmed knowledge base for LLM ingestion.

  • docs/package.json gained generate-seo, build-web, inject-seo, check-prerender, and preview helpers; the top-level publish-release.ts now runs the SEO pipeline before bumping/publishing packages to guarantee fresh sitemap + llms artifacts.

  • Repository tooling picked up path aliases in tsconfig.json, refreshed ESLint/Jest setups inside ui/, and tighter package scripts (verify:packages, site:build) to keep CI/CD reproducible.

  • Replace any Alert usages with Notice (or your own wrapper) and remove imports for Container, PressAnimation, Reveal, Accessibility, Disclaimer, and the legacy form helpers—they no longer ship as public exports.

  • If you load optional native modules (expo-clipboard, expo-haptics, linear gradient, etc.), rely on resolveOptionalModule instead of calling require yourself so the guardrails and caching stay consistent.

  • When hosting the docs, make sure the contents of docs/public are served as-is and update release automation to run npm run generate-seo --workspace=docs so the sitemap/llms files stay current.

  • Swap any references to the removed playground files with the new ComponentPlayground registry (or embed the showcase helpers) to keep the /components/[name]#playground tab functioning.

0.3.1

Choose a tag to compare

@joshstovall joshstovall released this 21 Nov 01:30

UI Package (@platform-blocks/ui)

  • Introduced a global KeyboardManagerProvider along with optional keyboardFocusId support so inputs, pickers, and overlays can coordinate refocus without dropping the keyboard. A new KeyboardAwareLayout component wraps forms to automatically pad for the current keyboard height on web and native.
  • Rebuilt overlay selection flows (handleSelectionComplete, useOverlayApi) and adopted them in Select, AutoComplete, NumberInput, and other inputs. This fixes the lingering overlay hook regressions and keeps focus stable after picks or clears.
  • Added hold-friendly controls to NumberInput: optional side buttons, shift-click multipliers, refined continuous stepping behaviour, and fresh side-button demos that call out the new ergonomics.
  • Upgraded Select and AutoComplete positioning to share the dropdown positioning hook, restored overlay exports, and tightened accessibility defaults (aria/role wiring, labels, keyboard navigation).
  • Delivered a fully featured Knob component: support for marks with labels, endless mode, text selection suppression on web, and new documentation/demo coverage.
  • Replaced the legacy TimePicker implementation with TimePickerInput, adding second-level precision, configurable columns, and direct re-export via TimePicker for backwards compatibility.
  • Hardened optional dependency loading with the new resolveOptionalModule helper, refreshed component sizing utilities (including the new ComponentSizeValue union + clamp helpers), and synced icon registries so apps no longer need to patch missing glyphs.

Charts Package (@platform-blocks/charts)

  • Shipped two new data visualisations: ParetoChart for cumulative distribution analysis and MarimekkoChart for weighted categorical comparisons. Each includes typed props, themed demos, and metadata for the docs site.
  • Updated ChartPopover, ChartBase, and provider interactions to accommodate stacked categories, shared hover state, and the new weighted layouts.
  • Expanded chart typings and exports so mixed-series dashboards can consume the new components without manual wiring.

Documentation & Examples

  • Added a dedicated "Keyboard Management" guide describing the provider, layout wrapper, and migration tips. The docs shell now wraps all pages in KeyboardManagerProvider and KeyboardAwareLayout to mirror production usage.
  • Refreshed major example apps (Dashboard, Finder, Music Player, Ecommerce, Todo, DAW) to demonstrate the latest component APIs, streamlined keyboard behaviour, and updated spacing defaults.
  • Published new demos covering Card variants, multiple NumberInput scenarios (basic formatter, drag gestures, side buttons), Knob endless mode, and the Pareto/Marimekko charts; removed outdated keyboard roadmap content in favour of the new guide.

Migration Notes

  • Wrap your host app with KeyboardManagerProvider to opt into the shared keyboard state. Set EXPO_PUBLIC_ENABLE_KEYBOARD_MANAGER=false temporarily if you need to defer rollout.
  • Verify native applications that depend on Select, AutoComplete, NumberInput, or the new TimePicker flows—the keyboard focus behaviour has changed and should be smoke-tested before shipping to production.