Skip to content

Commit 040fb34

Browse files
mu29mu29
committed
fix: build example components for the showcase
1 parent 91211b2 commit 040fb34

31 files changed

Lines changed: 858 additions & 242 deletions

‎examples/react-router/app/routes/home.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ export default function HomePage() {
33
<main className="flex flex-col items-center justify-center min-h-screen gap-4">
44
<h1 className="text-3xl font-bold">Composify + React Router</h1>
55
<p className="text-neutral-600">
6-
Visit <a href="/editor/foo" className="text-blue-500 hover:underline">/editor/foo</a> to start editing
6+
Visit{' '}
7+
<a href="/editor/foo" className="text-blue-500 hover:underline">
8+
/editor/foo
9+
</a>{' '}
10+
to start editing
711
</p>
812
</main>
913
);

‎packages/docs/app/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { HomePage } from '@app/page-home'
1+
import { HomePage } from '@app/page-home';
22

33
export const frontmatter = {
44
layout: 'landing',
55
title: 'Server Driven UI made easy',
6-
}
6+
};
77

88
export default HomePage;

‎packages/docs/src/page-showcase/ArticleHeader/ArticleHeader.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Body, Caption, Heading, VStack } from '@app/ui-system';
2+
import type { FC } from 'react';
3+
4+
type Props = {
5+
date: string;
6+
readTime: string;
7+
title: string;
8+
excerpt: string;
9+
};
10+
11+
export const ArticleHeader: FC<Props> = ({ date, readTime, title, excerpt }) => (
12+
<VStack alignHorizontal="center" className={['gap-16', 'max-w-[720px]', 'mx-auto']}>
13+
<Caption className={['text-foreground', 'opacity-60']}>{[date, readTime].join(' • ')}</Caption>
14+
<Heading level={1} size="4xl" weight="bold" align="center">
15+
{title}
16+
</Heading>
17+
<Body size="lg" align="center" className={['text-foreground']}>
18+
{excerpt}
19+
</Body>
20+
</VStack>
21+
);

‎packages/docs/src/page-showcase/ArticleHeader/ArticleHeaderCatalog.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Catalog } from '@composify/react/renderer';
2+
import { ArticleHeader } from './ArticleHeader';
3+
4+
Catalog.register('ArticleHeader', {
5+
component: ArticleHeader,
6+
category: 'Showcase / Article',
7+
props: {
8+
date: {
9+
label: 'Date',
10+
type: 'text',
11+
placeholder: 'Dec 10, 2024',
12+
},
13+
readTime: {
14+
label: 'Read Time',
15+
type: 'text',
16+
placeholder: '5 min read',
17+
},
18+
title: {
19+
label: 'Title',
20+
type: 'text',
21+
default: 'Article Title',
22+
},
23+
excerpt: {
24+
label: 'Excerpt',
25+
type: 'text',
26+
placeholder: 'A brief summary of the article...',
27+
},
28+
},
29+
});

‎packages/docs/src/page-showcase/ArticleHeader/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ArticleHeader } from './ArticleHeader';

‎packages/docs/src/page-showcase/BlogPostList/BlogPostCard.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Body, Button, Caption, Heading, Link, VStack } from '@app/ui-system';
2+
import type { FC } from 'react';
3+
4+
export type Props = {
5+
date: string;
6+
readTime: string;
7+
title: string;
8+
excerpt: string;
9+
href: string;
10+
};
11+
12+
export const BlogPostCard: FC<Props> = ({ date, readTime, title, excerpt, href }) => (
13+
<VStack className={['gap-12', 'p-24', 'rounded-sm', 'border']}>
14+
<Caption className={['text-foreground', 'opacity-60']}>
15+
{date} • {readTime}
16+
</Caption>
17+
<VStack className={['gap-8']}>
18+
<Heading level={3} size="xl" weight="semibold">
19+
{title}
20+
</Heading>
21+
<Body className={['text-foreground']}>{excerpt}</Body>
22+
</VStack>
23+
<Button variant="secondary" size="lg" asChild={true}>
24+
<Link href={href} plain={true}>
25+
Read more →
26+
</Link>
27+
</Button>
28+
</VStack>
29+
);

‎packages/docs/src/page-showcase/BlogPostList/BlogPostList.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Body, Grid, Heading, VStack } from '@app/ui-system';
2+
import type { FC } from 'react';
3+
import { BlogPostCard, type Props as BlogPostCardProps } from './BlogPostCard';
4+
5+
type Props = {
6+
title: string;
7+
description: string;
8+
columns: 1 | 2 | 3;
9+
posts: BlogPostCardProps[];
10+
};
11+
12+
const columnClasses: Record<1 | 2 | 3, string> = {
13+
1: 'grid-cols-1',
14+
2: 'max-md:grid-cols-1',
15+
3: 'max-md:grid-cols-1',
16+
};
17+
18+
export const BlogPostList: FC<Props> = ({ title, description, columns, posts }) => (
19+
<VStack className={['gap-24', 'p-24', 'bg-background', 'max-md:px-16']}>
20+
<VStack className={['gap-8']}>
21+
<Heading level={2} size="3xl" weight="bold">
22+
{title}
23+
</Heading>
24+
<Body size="lg" className={['text-foreground']}>
25+
{description}
26+
</Body>
27+
</VStack>
28+
<Grid columns={columns} className={['gap-24', columnClasses[columns]]}>
29+
{posts.map((article) => (
30+
<BlogPostCard key={article.title} {...article} />
31+
))}
32+
</Grid>
33+
</VStack>
34+
);

‎packages/docs/src/page-showcase/BlogPostList/BlogPostListCatalog.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Catalog } from '@composify/react/renderer';
2+
import { BlogPostList } from './BlogPostList';
3+
4+
Catalog.register('BlogPostList', {
5+
component: BlogPostList,
6+
category: 'Showcase / Blog',
7+
props: {
8+
title: {
9+
label: 'Title',
10+
type: 'text',
11+
default: 'From the blog',
12+
},
13+
description: {
14+
label: 'Description',
15+
type: 'text',
16+
default: 'Latest posts and insights',
17+
},
18+
columns: {
19+
label: 'Columns',
20+
type: 'select',
21+
options: [
22+
{ label: '1 Column', value: 1 },
23+
{ label: '2 Columns', value: 2 },
24+
{ label: '3 Columns', value: 3 },
25+
],
26+
default: 2,
27+
},
28+
posts: {
29+
label: 'Posts',
30+
type: 'array',
31+
item: {
32+
label: 'Post',
33+
type: 'object',
34+
fields: {
35+
date: {
36+
label: 'Date',
37+
type: 'text',
38+
default: 'Dec 10, 2024',
39+
},
40+
readTime: {
41+
label: 'Read Time',
42+
type: 'text',
43+
default: '5 min read',
44+
},
45+
title: {
46+
label: 'Title',
47+
type: 'text',
48+
default: 'Post Title',
49+
},
50+
excerpt: {
51+
label: 'Excerpt',
52+
type: 'text',
53+
default: 'Post excerpt goes here.',
54+
},
55+
href: {
56+
label: 'Link',
57+
type: 'text',
58+
default: '#',
59+
},
60+
},
61+
},
62+
default: [
63+
{
64+
date: 'Dec 10, 2024',
65+
readTime: '5 min read',
66+
title: 'How to reduce churn with cohort analysis',
67+
excerpt: 'Learn how leading SaaS companies use cohort analysis to identify at-risk users.',
68+
href: '#',
69+
},
70+
],
71+
},
72+
},
73+
});

‎packages/docs/src/page-showcase/BlogPostList/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { BlogPostList } from './BlogPostList';

‎packages/docs/src/page-showcase/Example/Example.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Example: FC<Props> = ({ id, name, source }) => {
1616
<HStack
1717
alignVertical="center"
1818
alignHorizontal="between"
19-
className={['p-16', 'border-b', 'bg-background-variant']}
19+
className={['p-16', 'gap-8', 'border-b', 'bg-background-variant']}
2020
>
2121
<Body size="md" className={['font-medium', 'text-foreground']}>
2222
{name}

0 commit comments

Comments
 (0)