@pagedotapp/page-section-utils

Utility functions and types for building Page UI sections with responsive props and component overrides.

Installation

npm install @pagedotapp/page-section-utils

Usage

Basic Section Hook

import { useSection, SectionBaseProps } from "@pagedotapp/page-section-utils"

interface MySectionComponents {
	PageText: PageTextProps
	PageButton: PageButtonProps
}

interface MySectionProps extends SectionBaseProps<MySectionComponents> {
	title: string
	ctaText: string
}

export const MySection: React.FC<MySectionProps> = (props) => {
	const { resolveProps, cssVars } = useSection(props)

	return (
		<div style={cssVars}>
			<PageText {...resolveProps("PageText", { variant: "h1" })}>
				{props.title}
			</PageText>
			<PageButton {...resolveProps("PageButton", { variant: "primary" })}>
				{props.ctaText}
			</PageButton>
		</div>
	)
}

Using Component Overrides

<MySection
	title="Welcome"
	ctaText="Get Started"
	overrides={{
		PageText: {
			color: "#333",
			fontSize: "2rem",
			'[data-variant="h1"]': {
				fontWeight: "bold",
			},
		},
		PageButton: {
			size: "lg",
			variant: "secondary",
		},
	}}
	styles={{
		"--section-bg": "#f5f5f5",
		"--section-padding": "2rem",
	}}
/>

Responsive Values

import { ResponsiveValue } from "@pagedotapp/page-section-utils"

interface Props {
	padding?: ResponsiveValue<SpacingSize>
	columns?: ResponsiveValue<number>
}

// Usage
;<Component
	padding={{ base: "sm", md: "md", lg: "lg" }}
	columns={{ base: 1, md: 2, lg: 3 }}
/>

API Reference

Types

• ResponsiveValue<T> - Allows values to vary by breakpoint
• SectionBaseProps<T> - Base props for all sections
• ComponentOverrides<T> - Type-safe component prop overrides
• SpacingSize - Standard spacing sizes (xs, sm, md, lg, xl, etc.)

Hooks

• useSection(props) - Main hook for managing section props and overrides

Utilities

• resolveResponsiveValue(value) - Resolve responsive value to current
• generateResponsiveClasses(value, prefix) - Generate responsive CSS classes
• mergeProps(a, b) - Merge two props objects
• spacingToPixels(size) - Convert spacing size to pixels
• deepMerge(...objects) - Deep merge multiple objects

License

MIT