Component Differences with PWA Kit

PWA Kit components are typically JavaScript + PropTypes with Chakra primitives and style props. Storefront Next components are TypeScript-first and generally composed from Radix/shadcn patterns with utility-class styling and CVA-based variants. The main shift is from runtime styling and theme objects to compile-time class composition and typed component contracts.

Component Architecture

Styling Comparison

Responsive Design Patterns

PWA Kit:

// Object syntax for breakpoints
<Box display={{base: 'block', md: 'flex', lg: 'grid'}}>

// Array syntax (base, sm, md, lg, xl)
<Grid templateColumns={['1fr', '1fr', 'repeat(2, 1fr)', 'repeat(4, 1fr)']}>

// Hook-based
const [isDesktop] = useMediaQuery('(min-width: 992px)')

Storefront Next:

// Breakpoint prefixes (mobile-first)
<div className="block md:flex lg:grid">

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

// JavaScript detection
const isDesktop = typeof window !== 'undefined' &&
    window.matchMedia('(min-width: 1024px)').matches;

Component Variants

PWA Kit (Theme-based):

// In theme/components/button.js
export default {
    baseStyle: {...},
    variants: {
        solid: {...},
        outline: {...},
    },
    sizes: {
        sm: {...},
        md: {...},
    }
}

// Usage
<Button variant="solid" size="md">Click</Button>

Storefront Next (CVA):

// In component file
const buttonVariants = cva("base-classes", {
  variants: {
    variant: { solid: "...", outline: "..." },
    size: { sm: "...", md: "..." },
  },
});

// Usage
<Button variant="solid" size="md">
  Click
</Button>;

Key Similarities

• Composition over inheritance: Both use functional components composed from primitives
• Props passthrough: Both spread ...rest props to underlying elements
• Responsive-first: Both prioritize mobile-first responsive design
• Variant systems: Both support component variants for consistent styling
• Accessibility: Both build on accessible component foundations (Chakra/Radix)
• HOC patterns: Both use HOCs for cross-cutting concerns (auth, suspense)

Conversion Considerations

Here are some tips for moving from Chakra to Tailwind.

• Style props vs. Utility classes: Convert padding="4" to className="p-4".
• Theme tokens vs. Tailwind config: Map color/spacing scales.
• useMultiStyleConfig vs. CVA: Convert component style objects to variant functions.
• Responsive objects vs. breakpoint prefixes: Replace {{base: 'x', lg: 'y'}} with "x lg:y".

Component Library Conversion

TypeScript Adoption

• Convert PropTypes to TypeScript interfaces.
• Add explicit return types to functions.
• Use React.ComponentProps<'element'> for HTML element props.
• Replace PropTypes.shape({...}) with interface definitions.