refactor(bpk-component-layout): migrate from Chakra UI to inline styles

[Gert-Jan Vercauteren (gert-janvercauteren)]

Summary

• Remove Chakra UI dependency from bpk-component-layout and replace with validated inline styles that enforce Backpack design tokens
• Components (BpkBox, BpkFlex, BpkGrid, BpkGridItem, BpkStack/HStack/VStack) now convert spacing tokens to rem values, validate size/position props, and strip disallowed className/style props with dev warnings
• Set up Panda CSS infrastructure (config, PostCSS, Storybook webpack integration) for future CSS-based responsive breakpoint support

Test plan

• All 61 unit tests pass
• TypeScript compiles cleanly
• Storybook renders all layout examples correctly
• Manual verification of all Storybook stories (Box, Flex, Grid, Stack)
• Verify no regressions in downstream consumers

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Refactors bpk-component-layout to remove Chakra UI usage, replacing it with inline-style layout primitives that enforce Backpack token constraints, while also introducing Panda CSS scaffolding for future responsive styling.

Changes:

• Added token types + runtime validation/conversion utilities for spacing/size/position + responsive values.
• Re-implemented layout primitives (BpkBox, BpkFlex, BpkGrid, BpkGridItem, BpkStack/HStack/VStack) using processed inline styles and stripped className/style props (dev warnings).
• Added Panda CSS + PostCSS + Storybook wiring (including styled-system output integration).

Reviewed changes

Copilot reviewed 44 out of 48 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
postcss.config.cjs	Adds Panda CSS PostCSS pipeline support.
panda.config.ts	Defines Panda tokens/conditions and output directory for generated CSS.
packages/bpk-component-layout/src/types.ts	Introduces new public prop types for layout primitives and token-based values.
packages/bpk-component-layout/src/tokens.ts	Adds Backpack spacing/breakpoint tokens and runtime validators.
packages/bpk-component-layout/src/tokenUtils.ts	Adds core prop filtering + token conversion + responsive flattening for inline styles.
packages/bpk-component-layout/src/tokenUtils-test.ts	Adds unit tests for token conversion/filtering/responsive flattening behavior.
packages/bpk-component-layout/src/theme.ts	Adds temporary spacing token mapping used by token conversion.
packages/bpk-component-layout/src/commonProps.ts	Defines shared “layout-only” prop surface and excludes className/style/visual props.
packages/bpk-component-layout/src/accessibility-test.tsx	Adds baseline a11y assertions for new primitives via jest-axe.
packages/bpk-component-layout/src/BpkVessel.tsx	Adds migration-hatch component that forwards all HTML attributes including className/style.
packages/bpk-component-layout/src/BpkVessel-test.tsx	Adds coverage for BpkVessel prop forwarding.
packages/bpk-component-layout/src/BpkStack.tsx	Implements Stack primitives using processed inline styles and responsive flattening.
packages/bpk-component-layout/src/BpkStack.constant.ts	Defines allowlisted responsive prop keys for Stack processing.
packages/bpk-component-layout/src/BpkStack-test.tsx	Adds tests for Stack rendering and filtering forbidden props.
packages/bpk-component-layout/src/BpkProvider.tsx	Adds provider wrapper (currently passthrough) to match new layout API.
packages/bpk-component-layout/src/BpkProvider-test.tsx	Adds tests for provider rendering behavior.
packages/bpk-component-layout/src/BpkGridItem.tsx	Implements GridItem using processed spacing props + grid placement props w/ inline styles.
packages/bpk-component-layout/src/BpkGridItem-test.tsx	Adds GridItem rendering and basic prop acceptance tests.
packages/bpk-component-layout/src/BpkGrid.tsx	Implements Grid using processed inline styles for grid-related props.
packages/bpk-component-layout/src/BpkGrid-test.tsx	Adds Grid rendering/basic prop acceptance tests.
packages/bpk-component-layout/src/BpkFlex.tsx	Implements Flex using processed inline styles for flex-related props.
packages/bpk-component-layout/src/BpkFlex-test.tsx	Adds Flex rendering/basic prop acceptance tests.
packages/bpk-component-layout/src/BpkBox.tsx	Implements Box using processed inline styles + HTML prop passthrough.
packages/bpk-component-layout/src/BpkBox-test.tsx	Adds Box rendering + interaction + forbidden className filtering tests.
packages/bpk-component-layout/index.ts	Exposes new primitives, types, and token utilities from package entrypoint.
packages/bpk-component-layout/README.md	Documents new layout primitives, tokens, constraints, and responsive API.
package.json	Adds Panda deps, styled-system jest mapping, and runs panda codegen in prepare.
examples/bpk-component-layout/vessel.stories.tsx	Adds Storybook story for BpkVessel.
examples/bpk-component-layout/vessel-examples.tsx	Adds example usage for migration hatch support.
examples/bpk-component-layout/stories.tsx	Updates examples index to include new primitives + vessel showcase.
examples/bpk-component-layout/stack.stories.tsx	Adds Stack stories/docs wiring.
examples/bpk-component-layout/stack-examples.tsx	Adds Stack examples including responsive token usage.
examples/bpk-component-layout/layout-wrapper.tsx	Wraps examples with provider and basic frame styling.
examples/bpk-component-layout/grid.stories.tsx	Adds Grid stories/docs wiring.
examples/bpk-component-layout/grid-examples.tsx	Adds Grid examples including responsive usage.
examples/bpk-component-layout/flex.stories.tsx	Adds Flex stories/docs wiring.
examples/bpk-component-layout/flex-examples.tsx	Adds Flex examples including responsive usage.
examples/bpk-component-layout/examples.module.scss	Adds non-primitive visual outlines/frames for Storybook examples.
examples/bpk-component-layout/box.stories.tsx	Adds Box stories/docs wiring.
examples/bpk-component-layout/box-examples.tsx	Adds Box examples including spacing/size/position/responsive.
.storybook/webpack.config.js	Ensures Panda generated CSS is loaded and avoids loader conflicts.
.storybook/preview.tsx	Imports generated styled-system/styles.css into Storybook preview.
.storybook/main.ts	Expands story glob to include *.stories.* convention.
.github/workflows/release.yml	Fixes release workflow checkout ref to use the release tag.

Files not reviewed (1)

• packages/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

position and fontWeight are defined as BpkBoxProps, but they are not included in processBpkComponentProps’ style routing (and position isn’t in the Box responsive allowlist either). As a result, these props will be forwarded as invalid DOM attributes (e.g. <div position="relative" fontWeight="bold">) instead of being applied to style. Add position and fontWeight to the style key set (and include position in the Box allowlist if you want responsive flattening for it), or remove them from the public API if they’re intentionally unsupported.

[Copilot]

styleKeys doesn’t include position or fontWeight, so those props end up in htmlProps and get spread onto the DOM element as invalid HTML attributes. Include position and fontWeight in styleKeys (and consider validating/flattening position via the responsive pipeline if it’s meant to be responsive).

Suggested change

	'top', 'right', 'bottom', 'left',
	'top', 'right', 'bottom', 'left',
	'position', 'fontWeight',

[Copilot]

BpkSizeValue allows 'full', but the runtime processing path (processSpacingProps) currently leaves size values “as-is” for size props, meaning the generated inline style may become width: "full", which is invalid CSS. Convert 'full' to '100%' during processing (e.g., in the size converter used by processSpacingProps) so valid inputs always produce valid CSS.

Suggested change

	| 'full'
	| 'fit-content';
	/**
	| 'fit-content';
	/**
	/**

[Copilot]

BpkSizeValue allows 'full', but the runtime processing path (processSpacingProps) currently leaves size values “as-is” for size props, meaning the generated inline style may become width: "full", which is invalid CSS. Convert 'full' to '100%' during processing (e.g., in the size converter used by processSpacingProps) so valid inputs always produce valid CSS.

Suggested change

value === 'full' ||

[Copilot]

The “smallest breakpoint” fallback is currently Object.keys(value)[0], which depends on the caller’s object literal insertion order rather than an explicit breakpoint priority. Since you already have a canonical breakpoint set (BpkBreakpoint), consider selecting the fallback in a deterministic order (e.g. base, then small-mobile, mobile, small-tablet, tablet, desktop) so the behavior is stable and matches the documented “mobile-first” intent.

Suggested change

	// If no base value, try the smallest breakpoint
	const fallbackKey = Object.keys(value)[0];
	if (fallbackKey !== undefined) {
	return processResponsiveValue(value[fallbackKey], converter, validator, propName);
	// If no base value, try the smallest breakpoint in a deterministic order
	const breakpointPriority = [
	'small-mobile',
	'mobile',
	'small-tablet',
	'tablet',
	'desktop',
	] as const;
	const prioritizedKey =
	breakpointPriority.find((breakpoint) =>
	Object.prototype.hasOwnProperty.call(value, breakpoint),
	) ?? Object.keys(value)[0];
	if (prioritizedKey !== undefined) {
	return processResponsiveValue(
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	(value as any)[prioritizedKey],
	converter,
	validator,
	propName,
	);

[Copilot]

The README still describes Chakra breakpoint mapping and “generates CSS at runtime”, but this PR migrates away from Chakra and (per processResponsiveValue) currently flattens responsive objects down to a single inline style value (no media queries). Update this section to reflect the current behavior and roadmap (inline-only now; Panda-generated CSS/media queries later) to avoid misleading consumers.

Suggested change

Under the hood, this package is implemented as a **facade over a layout system** and generates **CSS at runtime**, but the public API is Backpack‑flavoured and token‑driven. Consumers should only interact with the Backpack components and tokens described here, not with the underlying system.

Under the hood, this package currently applies layout via **inline styles**. Responsive objects are flattened down to a single value (no media queries yet), but the public API is Backpack‑flavoured and token‑driven. In a future iteration, this API will be backed by Panda‑generated CSS (including media queries) rather than inline styles. Consumers should only interact with the Backpack components and tokens described here, not with the underlying implementation.

[Copilot]

The README still describes Chakra breakpoint mapping and “generates CSS at runtime”, but this PR migrates away from Chakra and (per processResponsiveValue) currently flattens responsive objects down to a single inline style value (no media queries). Update this section to reflect the current behavior and roadmap (inline-only now; Panda-generated CSS/media queries later) to avoid misleading consumers.

[Copilot]

There are tests covering className filtering and event handlers, but no tests that assert position and fontWeight are applied via inline styles (and not forwarded as DOM attributes). Once position/fontWeight handling is fixed, add a test here to validate the rendered style contains the expected values and that the corresponding attributes are not present on the DOM node.