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

docs

Browse Source
This commit is contained in:
Chris Wanstrath 2025-11-29 22:44:51 -08:00
parent 6c3b3e80b0
commit 438aa3f5b4
14 changed files with 109 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -2,6 +2,7 @@
"name": "howl", "name": "howl",
"module": "index.tsx", "module": "index.tsx",
"type": "module", "type": "module",
"exports": "./src/index.tsx",
"scripts": { "scripts": {
"dev": "bun run --hot test/server.tsx" "dev": "bun run --hot test/server.tsx"
}, },

8
src/avatar.tsx
View File

@ -35,6 +35,14 @@ export const Test = () => {
return ( return (
<Section> <Section>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Avatar src="/user.jpg" /&gt;</div>
<div>&lt;Avatar src="/user.jpg" size=&#123;64&#125; /&gt;</div>
<div>&lt;Avatar src="/user.jpg" size=&#123;48&#125; rounded /&gt;</div>
<div>&lt;Avatar src="/user.jpg" style=&#123;&#123; border: "2px solid blue" &#125;&#125; /&gt;</div>
</VStack>
{/* Size variations */} {/* Size variations */}
<VStack gap={4}> <VStack gap={4}>
<H2>Size Variations</H2> <H2>Size Variations</H2>

8
src/box.tsx
View File

@ -47,6 +47,14 @@ export const GrayBox: FC<PropsWithChildren & { style?: JSX.CSSProperties }> = ({
export const Test = () => { export const Test = () => {
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px" }}>
{/* API Usage Examples */}
<div style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px", display: "flex", flexDirection: "column", gap: "8px" }}>
<div>&lt;Box&gt;Content&lt;/Box&gt;</div>
<div>&lt;Box bg="#3b82f6" p=&#123;16&#125;&gt;Content&lt;/Box&gt;</div>
<div>&lt;RedBox&gt;Content&lt;/RedBox&gt;</div>
<div>&lt;GrayBox&gt;Content&lt;/GrayBox&gt;</div>
</div>
<div> <div>
<h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Box Component</h2> <h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Box Component</h2>
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>

8
src/button.tsx
View File

@ -79,6 +79,14 @@ export const Button: FC<ButtonProps> = (props) => {
export const Test = () => { export const Test = () => {
return ( return (
<Section> <Section>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Button&gt;Click Me&lt;/Button&gt;</div>
<div>&lt;Button variant="secondary"&gt;Secondary&lt;/Button&gt;</div>
<div>&lt;Button variant="outline" size="lg"&gt;Large&lt;/Button&gt;</div>
<div>&lt;Button onClick=&#123;handleClick&#125;&gt;Action&lt;/Button&gt;</div>
</VStack>
{/* Variants */} {/* Variants */}
<VStack gap={4}> <VStack gap={4}>
<H2>Button Variants</H2> <H2>Button Variants</H2>

7
src/divider.tsx
View File

@ -44,6 +44,13 @@ export const Divider: FC<DividerProps> = ({ children, style }) => {
export const Test = () => { export const Test = () => {
return ( return (
<Section gap={4} maxWidth="448px" style={{ padding: "16px" }}> <Section gap={4} maxWidth="448px" style={{ padding: "16px" }}>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Divider /&gt;</div>
<div>&lt;Divider&gt;OR&lt;/Divider&gt;</div>
<div>&lt;Divider style=&#123;&#123; margin: "24px 0" &#125;&#125; /&gt;</div>
</VStack>
<H2>Divider Examples</H2> <H2>Divider Examples</H2>
<VStack gap={0}> <VStack gap={0}>

8
src/grid.tsx
View File

@ -72,6 +72,14 @@ const justifyItemsMap = {
export const Test = () => { export const Test = () => {
return ( return (
<Section gap={4} style={{ padding: "16px" }}> <Section gap={4} style={{ padding: "16px" }}>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Grid cols=&#123;3&#125;&gt;...&lt;/Grid&gt;</div>
<div>&lt;Grid cols=&#123;4&#125; gap=&#123;6&#125;&gt;...&lt;/Grid&gt;</div>
<div>&lt;Grid cols=&#123;&#123; sm: 1, md: 2, lg: 3 &#125;&#125;&gt;...&lt;/Grid&gt;</div>
<div>&lt;Grid cols=&#123;2&#125; v="center" h="center"&gt;...&lt;/Grid&gt;</div>
</VStack>
<VStack gap={6}> <VStack gap={6}>
<H2>Grid Examples</H2> <H2>Grid Examples</H2>

8
src/icon.tsx
View File

@ -72,6 +72,14 @@ export const IconLink: FC<IconLinkProps> = (props) => {
export const Test = () => { export const Test = () => {
return ( return (
<Section> <Section>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Icon name="Heart" /&gt;</div>
<div>&lt;Icon name="Star" size=&#123;8&#125; /&gt;</div>
<div>&lt;Icon name="Home" style=&#123;&#123; color: "#3b82f6" &#125;&#125; /&gt;</div>
<div>&lt;IconLink name="ExternalLink" href="/link" /&gt;</div>
</VStack>
{/* === ICON TESTS === */} {/* === ICON TESTS === */}
{/* Size variations */} {/* Size variations */}

8
src/image.tsx
View File

@ -35,6 +35,14 @@ export const Test = () => {
return ( return (
<Section> <Section>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Image src="/photo.jpg" /&gt;</div>
<div>&lt;Image src="/photo.jpg" width=&#123;200&#125; height=&#123;200&#125; /&gt;</div>
<div>&lt;Image src="/photo.jpg" objectFit="cover" /&gt;</div>
<div>&lt;Image src="/photo.jpg" style=&#123;&#123; borderRadius: "8px" &#125;&#125; /&gt;</div>
</VStack>
<H2>Image Examples</H2> <H2>Image Examples</H2>
{/* Size variations */} {/* Size variations */}

10
src/input.tsx
View File

@ -72,6 +72,14 @@ export const Input: FC<InputProps> = (props) => {
export const Test = () => { export const Test = () => {
return ( return (
<Section maxWidth="448px"> <Section maxWidth="448px">
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Input placeholder="Enter name" /&gt;</div>
<div>&lt;Input type="email" placeholder="Email" /&gt;</div>
<div>&lt;Input&gt;Label&lt;/Input&gt;</div>
<div>&lt;Input labelPosition="left"&gt;Name&lt;/Input&gt;</div>
</VStack>
{/* Basic inputs */} {/* Basic inputs */}
<VStack gap={4}> <VStack gap={4}>
<H2>Basic Inputs</H2> <H2>Basic Inputs</H2>
@ -178,6 +186,6 @@ export const Test = () => {
</Input> </Input>
</VStack> </VStack>
</VStack> </VStack>
</VStack> </Section>
) )
} }

12
src/placeholder.tsx
View File

@ -37,6 +37,14 @@ export const Placeholder = {
export const Test = () => { export const Test = () => {
return ( return (
<Section> <Section>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Placeholder.Avatar /&gt;</div>
<div>&lt;Placeholder.Avatar type="avataaars" size=&#123;64&#125; /&gt;</div>
<div>&lt;Placeholder.Image width=&#123;200&#125; height=&#123;200&#125; /&gt;</div>
<div>&lt;Placeholder.Image seed=&#123;42&#125; /&gt;</div>
</VStack>
{/* === AVATAR TESTS === */} {/* === AVATAR TESTS === */}
{/* Show all available avatar styles */} {/* Show all available avatar styles */}
@ -48,7 +56,7 @@ export const Test = () => {
{allStyles.map((style) => ( {allStyles.map((style) => (
<VStack h="center" gap={1} key={style}> <VStack h="center" gap={1} key={style}>
<Placeholder.Avatar type={style} size={48} /> <Placeholder.Avatar type={style} size={48} />
<SmallText style={{ fontWeight: "500" }}>{style}</Text> <SmallText style={{ fontWeight: "500" }}>{style}</SmallText>
</VStack> </VStack>
))} ))}
</Grid> </Grid>
@ -189,7 +197,7 @@ export const Test = () => {
</HStack> </HStack>
</VStack> </VStack>
</VStack> </VStack>
</VStack> </Section>
) )
} }

8
src/section.tsx
View File

@ -20,6 +20,14 @@ export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, style }
export const Test = () => { export const Test = () => {
return ( return (
<div> <div>
{/* API Usage Examples */}
<div style={{ backgroundColor: "#f9fafb", padding: "16px", margin: "24px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px", display: "flex", flexDirection: "column", gap: "8px" }}>
<div>&lt;Section&gt;...&lt;/Section&gt;</div>
<div>&lt;Section gap=&#123;4&#125;&gt;...&lt;/Section&gt;</div>
<div>&lt;Section maxWidth="600px"&gt;...&lt;/Section&gt;</div>
<div>&lt;Section style=&#123;&#123; backgroundColor: "#f3f4f6" &#125;&#125;&gt;...&lt;/Section&gt;</div>
</div>
<Section> <Section>
<h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Default Section</h2> <h2 style={{ fontSize: "20px", fontWeight: "bold" }}>Default Section</h2>
<p>This is a section with default gap (8)</p> <p>This is a section with default gap (8)</p>

10
src/select.tsx
View File

@ -130,6 +130,8 @@ export const Select: FC<SelectProps> = (props) => {
} }
export const Test = () => { export const Test = () => {
const options = [{ value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }]
const months = [ const months = [
{ value: "01", label: "January" }, { value: "01", label: "January" },
{ value: "02", label: "February" }, { value: "02", label: "February" },
@ -161,6 +163,14 @@ export const Test = () => {
return ( return (
<Section maxWidth="448px"> <Section maxWidth="448px">
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;Select options=&#123;options&#125; /&gt;</div>
<div>&lt;Select options=&#123;options&#125; placeholder="Choose" /&gt;</div>
<div>&lt;Select options=&#123;options&#125;&gt;Label&lt;/Select&gt;</div>
<div>&lt;Select options=&#123;options&#125; labelPosition="left"&gt;Label&lt;/Select&gt;</div>
</VStack>
{/* Basic selects */} {/* Basic selects */}
<VStack gap={4}> <VStack gap={4}>
<H2>Basic Selects</H2> <H2>Basic Selects</H2>

8
src/stack.tsx
View File

@ -68,6 +68,14 @@ export const Test = () => {
return ( return (
<Section gap={8} style={{ padding: "16px" }}> <Section gap={8} style={{ padding: "16px" }}>
{/* API Usage Examples */}
<VStack gap={2} style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px" }}>
<div>&lt;VStack&gt;...&lt;/VStack&gt;</div>
<div>&lt;VStack gap=&#123;4&#125; v="center"&gt;...&lt;/VStack&gt;</div>
<div>&lt;HStack&gt;...&lt;/HStack&gt;</div>
<div>&lt;HStack gap=&#123;6&#125; h="between" v="center"&gt;...&lt;/HStack&gt;</div>
</VStack>
{/* HStack layout matrix */} {/* HStack layout matrix */}
<VStack gap={2}> <VStack gap={2}>
<H2>HStack Layout</H2> <H2>HStack Layout</H2>

8
src/text.tsx
View File

@ -36,6 +36,14 @@ export const SmallText: FC<TextProps> = ({ children, style }) => (
export const Test = () => { export const Test = () => {
return ( return (
<div style={{ padding: "24px", display: "flex", flexDirection: "column", gap: "32px" }}> <div style={{ padding: "24px", display: "flex", flexDirection: "column", gap: "32px" }}>
{/* API Usage Examples */}
<div style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px", fontFamily: "monospace", fontSize: "12px", display: "flex", flexDirection: "column", gap: "8px" }}>
<div>&lt;H1&gt;Heading 1&lt;/H1&gt;</div>
<div>&lt;H2&gt;Heading 2&lt;/H2&gt;</div>
<div>&lt;Text&gt;Regular text&lt;/Text&gt;</div>
<div>&lt;SmallText&gt;Small text&lt;/SmallText&gt;</div>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
<H1>Heading 1 (24px, bold)</H1> <H1>Heading 1 (24px, bold)</H1>
<H2>Heading 2 (20px, bold)</H2> <H2>Heading 2 (20px, bold)</H2>