defunkt/howl
1
0
Fork 0
Code Issues Pull Requests Activity

support id and ref attributes

Browse Source
This commit is contained in:
Chris Wanstrath 2025-12-18 10:05:53 -08:00
parent 97772b28bd
commit c622073f6c
15 changed files with 88 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/avatar.tsx
View File

@ -13,10 +13,12 @@ export type AvatarProps = {
rounded?: boolean
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const Avatar: FC<AvatarProps> = (props) => {
const { src, size = 32, rounded, class: className, style, alt = "" } = props
const { src, size = 32, rounded, class: className, style, id, ref, alt = "" } = props
const avatarStyle: JSX.CSSProperties = {
width: `${size}px`,
@ -25,7 +27,7 @@ export const Avatar: FC<AvatarProps> = (props) => {
...style,
}
return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} />
return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} />
}
export const Test = () => {

6
src/box.tsx
View File

@ -9,9 +9,11 @@ type BoxProps = PropsWithChildren & {
p?: number
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style }) => {
export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style, id, ref }) => {
const boxStyle: JSX.CSSProperties = {
backgroundColor: bg,
color: color,
@ -19,7 +21,7 @@ export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, st
...style,
}
return <div class={cn("Box", className)} style={boxStyle}>{children}</div>
return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref}>{children}</div>
}
// Common demo box colors

4
src/button.tsx
View File

@ -12,7 +12,7 @@ export type ButtonProps = JSX.IntrinsicElements["button"] & {
}
export const Button: FC<ButtonProps> = (props) => {
const { variant = "primary", size = "md", style, class: className, ...buttonProps } = props
const { variant = "primary", size = "md", style, class: className, id, ref, ...buttonProps } = props
const baseStyles: JSX.CSSProperties = {
display: "inline-flex",
@ -75,7 +75,7 @@ export const Button: FC<ButtonProps> = (props) => {
...(style as JSX.CSSProperties),
}
return <button {...buttonProps} class={cn("Button", className)} style={combinedStyles} />
return <button {...buttonProps} class={cn("Button", className)} style={combinedStyles} id={id} ref={ref} />
}
export const Test = () => {

6
src/divider.tsx
View File

@ -9,9 +9,11 @@ import { cn } from "./cn"
type DividerProps = PropsWithChildren & {
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const Divider: FC<DividerProps> = ({ children, class: className, style }) => {
export const Divider: FC<DividerProps> = ({ children, class: className, style, id, ref }) => {
const containerStyle: JSX.CSSProperties = {
display: "flex",
alignItems: "center",
@ -32,7 +34,7 @@ export const Divider: FC<DividerProps> = ({ children, class: className, style })
}
return (
<div class={cn("Divider", className)} style={containerStyle}>
<div class={cn("Divider", className)} style={containerStyle} id={id} ref={ref}>
<div style={lineStyle}></div>
{children && (
<>

6
src/grid.tsx
View File

@ -15,12 +15,14 @@ type GridProps = PropsWithChildren & {
h?: keyof typeof justifyItemsMap
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }
export const Grid: FC<GridProps> = (props) => {
const { cols = 2, gap = 4, v, h, class: className, style, children } = props
const { cols = 2, gap = 4, v, h, class: className, style, id, ref, children } = props
const gapPx = gap * 4
@ -43,7 +45,7 @@ export const Grid: FC<GridProps> = (props) => {
...style,
}
return <div class={cn("Grid", className)} style={combinedStyles}>{children}</div>
return <div class={cn("Grid", className)} style={combinedStyles} id={id} ref={ref}>{children}</div>
}
function getColumnsValue(cols: GridCols): string {

10
src/icon.tsx
View File

@ -15,6 +15,8 @@ type IconProps = {
size?: number
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
type IconLinkProps = IconProps & {
@ -23,7 +25,7 @@ type IconLinkProps = IconProps & {
}
export const Icon: FC<IconProps> = (props) => {
const { name, size = 6, class: className, style } = props
const { name, size = 6, class: className, style, id, ref } = props
const iconSvg = icons[name]
@ -50,11 +52,11 @@ export const Icon: FC<IconProps> = (props) => {
`<svg$1 style="display: block; flex-shrink: 0; width: ${pixelSize}px; height: ${pixelSize}px;" class="${cn("Icon", className)}">`
)
return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} style={iconStyle} />
return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} style={iconStyle} id={id} ref={ref} />
}
export const IconLink: FC<IconLinkProps> = (props) => {
const { href = "#", target, class: className, style, ...iconProps } = props
const { href = "#", target, class: className, style, id, ref, ...iconProps } = props
const linkStyle: JSX.CSSProperties = {
display: "inline-flex",
@ -65,7 +67,7 @@ export const IconLink: FC<IconLinkProps> = (props) => {
}
return (
<a href={href} target={target} class={cn("IconLink", className)} style={linkStyle}>
<a href={href} target={target} class={cn("IconLink", className)} style={linkStyle} id={id} ref={ref}>
<Icon {...iconProps} />
</a>
)

6
src/image.tsx
View File

@ -15,9 +15,11 @@ export type ImageProps = {
objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down"
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style }) => {
export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style, id, ref }) => {
const imageStyle: JSX.CSSProperties = {
width: width ? `${width}px` : undefined,
height: height ? `${height}px` : undefined,
@ -25,7 +27,7 @@ export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit,
...style,
}
return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} />
return <img src={src} alt={alt} class={cn("Image", className)} style={imageStyle} id={id} ref={ref} />
}
export const Test = () => {

2
src/index.tsx
View File

@ -33,4 +33,4 @@ export { Box, RedBox, GreenBox, BlueBox, GrayBox } from "./box"
export { Section } from "./section"
export type { TailwindSize } from "./types"
export type { TailwindSize, CommonHTMLProps } from "./types"

12
src/input.tsx
View File

@ -12,7 +12,7 @@ export type InputProps = JSX.IntrinsicElements["input"] & {
}
export const Input: FC<InputProps> = (props) => {
const { labelPosition = "above", children, style, class: className, ...inputProps } = props
const { labelPosition = "above", children, style, class: className, id, ref, ...inputProps } = props
const inputStyle: JSX.CSSProperties = {
height: "40px",
@ -26,7 +26,7 @@ export const Input: FC<InputProps> = (props) => {
}
if (!children) {
return <input style={inputStyle} {...inputProps} class={cn("Input", className)} />
return <input style={inputStyle} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
}
const labelStyle: JSX.CSSProperties = {
@ -36,7 +36,7 @@ export const Input: FC<InputProps> = (props) => {
}
const labelElement = (
<label for={inputProps.id} style={labelStyle}>
<label for={id} style={labelStyle}>
{children}
</label>
)
@ -45,7 +45,7 @@ export const Input: FC<InputProps> = (props) => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }}>
{labelElement}
<input style={inputStyle} {...inputProps} class={cn("Input", className)} />
<input style={inputStyle} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
</div>
)
}
@ -54,7 +54,7 @@ export const Input: FC<InputProps> = (props) => {
return (
<div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
{labelElement}
<input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} />
<input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
</div>
)
}
@ -62,7 +62,7 @@ export const Input: FC<InputProps> = (props) => {
if (labelPosition === "right") {
return (
<div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
<input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} />
<input style={{ ...inputStyle, flex: 1 }} {...inputProps} class={cn("Input", className)} id={id} ref={ref} />
{labelElement}
</div>
)

8
src/placeholder.tsx
View File

@ -11,7 +11,7 @@ import { CodeExamples } from "./code"
export const Placeholder = {
Avatar(props: PlaceholderAvatarProps) {
const { size = 32, seed = "seed", type = "dylan", transparent, alt, style, rounded } = props
const { size = 32, seed = "seed", type = "dylan", transparent, alt, style, rounded, id, ref, class: className } = props
// Generate DiceBear avatar URL
const url = new URL(`https://api.dicebear.com/9.x/${type}/svg`)
@ -22,16 +22,16 @@ export const Placeholder = {
url.searchParams.set("backgroundColor", "transparent")
}
return <Avatar src={url.toString()} alt={alt} style={style} size={size} rounded={rounded} />
return <Avatar src={url.toString()} alt={alt} style={style} size={size} rounded={rounded} id={id} ref={ref} class={className} />
},
Image(props: PlaceholderImageProps) {
const { width = 200, height = 200, seed = 1, alt = "Placeholder image", objectFit, style } = props
const { width = 200, height = 200, seed = 1, alt = "Placeholder image", objectFit, style, id, ref, class: className } = props
// Generate Picsum Photos URL with seed for consistent images
const src = `https://picsum.photos/${width}/${height}?random=${seed}`
return <Image src={src} alt={alt} width={width} height={height} objectFit={objectFit} style={style} />
return <Image src={src} alt={alt} width={width} height={height} objectFit={objectFit} style={style} id={id} ref={ref} class={className} />
},
}

6
src/section.tsx
View File

@ -9,11 +9,13 @@ type SectionProps = PropsWithChildren & {
maxWidth?: string
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style }) => {
export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style, id, ref }) => {
return (
<VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }}>
<VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }} id={id} ref={ref}>
{children}
</VStack>
)

14
src/select.tsx
View File

@ -20,12 +20,10 @@ export type SelectProps = Omit<JSX.IntrinsicElements["select"], "children"> & {
}
export const Select: FC<SelectProps> = (props) => {
const { options, placeholder, labelPosition = "above", children, style, class: className, ...selectProps } = props
const { options, placeholder, labelPosition = "above", children, style, class: className, id, ref, ...selectProps } = props
// If a label is provided but no id, generate a random id so the label can be clicked
if (children && !selectProps.id) {
selectProps.id = `random-${Math.random().toString(36)}`
}
const elementId = id || (children ? `random-${Math.random().toString(36)}` : undefined)
const selectStyle: JSX.CSSProperties = {
height: "40px",
@ -44,7 +42,7 @@ export const Select: FC<SelectProps> = (props) => {
}
const selectElement = (
<select style={selectStyle} {...selectProps} class={cn("Select", className)}>
<select style={selectStyle} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
{placeholder && (
<option value="" disabled>
{placeholder}
@ -74,7 +72,7 @@ export const Select: FC<SelectProps> = (props) => {
}
const labelElement = (
<label for={selectProps.id} style={labelStyle}>
<label for={elementId} style={labelStyle}>
{children}
</label>
)
@ -92,7 +90,7 @@ export const Select: FC<SelectProps> = (props) => {
return (
<div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
{labelElement}
<select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)}>
<select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
{placeholder && (
<option value="" disabled>
{placeholder}
@ -111,7 +109,7 @@ export const Select: FC<SelectProps> = (props) => {
if (labelPosition === "right") {
return (
<div style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}>
<select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)}>
<select style={{ ...selectStyle, flex: 1 }} {...selectProps} class={cn("Select", className)} id={elementId} ref={ref}>
{placeholder && (
<option value="" disabled>
{placeholder}

12
src/stack.tsx
View File

@ -21,6 +21,8 @@ export const VStack: FC<VStackProps> = (props) => {
componentName="VStack"
class={props.class}
style={props.style}
id={props.id}
ref={props.ref}
>
{props.children}
</Stack>
@ -40,6 +42,8 @@ export const HStack: FC<HStackProps> = (props) => {
componentName="HStack"
class={props.class}
style={props.style}
id={props.id}
ref={props.ref}
>
{props.children}
</Stack>
@ -70,7 +74,7 @@ const Stack: FC<StackProps> = (props) => {
...props.style,
}
return <div class={cn(props.componentName, props.class)} style={combinedStyles}>{props.children}</div>
return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
}
// Default flexbox behavior
@ -95,7 +99,7 @@ const Stack: FC<StackProps> = (props) => {
...props.style,
}
return <div class={cn(props.componentName, props.class)} style={combinedStyles}>{props.children}</div>
return <div class={cn(props.componentName, props.class)} style={combinedStyles} id={props.id} ref={props.ref}>{props.children}</div>
}
export const Test = () => {
@ -291,6 +295,8 @@ type StackProps = {
componentName?: string // for data-howl attribute
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
children?: any
}
@ -303,6 +309,8 @@ type CommonStackProps = PropsWithChildren & {
maxWidth?: string
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
type VStackProps = CommonStackProps & {

30
src/text.tsx
View File

@ -6,34 +6,36 @@ import { cn } from "./cn"
type TextProps = PropsWithChildren & {
class?: string
style?: JSX.CSSProperties
id?: string
ref?: any
}
export const H1: FC<TextProps> = ({ children, class: className, style }) => (
<h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
export const H1: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<h1 class={cn("H1", className)} style={{ fontSize: "24px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h1>
)
export const H2: FC<TextProps> = ({ children, class: className, style }) => (
<h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
export const H2: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<h2 class={cn("H2", className)} style={{ fontSize: "20px", fontWeight: "bold", ...style }} id={id} ref={ref}>{children}</h2>
)
export const H3: FC<TextProps> = ({ children, class: className, style }) => (
<h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
export const H3: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<h3 class={cn("H3", className)} style={{ fontSize: "18px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h3>
)
export const H4: FC<TextProps> = ({ children, class: className, style }) => (
<h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
export const H4: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<h4 class={cn("H4", className)} style={{ fontSize: "16px", fontWeight: "600", ...style }} id={id} ref={ref}>{children}</h4>
)
export const H5: FC<TextProps> = ({ children, class: className, style }) => (
<h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
export const H5: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<h5 class={cn("H5", className)} style={{ fontSize: "14px", fontWeight: "500", ...style }} id={id} ref={ref}>{children}</h5>
)
export const Text: FC<TextProps> = ({ children, class: className, style }) => (
<p class={cn("Text", className)} style={{ fontSize: "14px", ...style }}>{children}</p>
export const Text: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<p class={cn("Text", className)} style={{ fontSize: "14px", ...style }} id={id} ref={ref}>{children}</p>
)
export const SmallText: FC<TextProps> = ({ children, class: className, style }) => (
<p class={cn("SmallText", className)} style={{ fontSize: "12px", ...style }}>{children}</p>
export const SmallText: FC<TextProps> = ({ children, class: className, style, id, ref }) => (
<p class={cn("SmallText", className)} style={{ fontSize: "12px", ...style }} id={id} ref={ref}>{children}</p>
)
export const Test = () => {

13
src/types.ts
View File

@ -1 +1,14 @@
import "hono/jsx"
import type { JSX } from "hono/jsx"
export type TailwindSize = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96
/**
* Common HTML attributes that should be supported by all components
*/
export type CommonHTMLProps = {
class?: string
id?: string
style?: JSX.CSSProperties
ref?: any
}