Skip to content

Commit 758d8e8

Browse files
kotAPIkotAPI
authored
Docs Improvements for various components (#1029)
1 parent 38c846f commit 758d8e8

File tree

61 files changed

+1926
-263
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1926
-263
lines changed

‎docs/app/docs/components/accordion/docs/api/root.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@ const data = {
1313
{
1414
name: "Default",
1515
id : "default",
16-
},
17-
{
18-
name : "",
19-
id : "info_tooltips",
2016
}
2117
],
2218
data:[

‎docs/app/docs/components/accordion/docs/seo/index.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
const metadata = {
2-
title: 'Accordion | Rad UI',
3-
description: 'Accordions are a common UX pattern that can help reduce the amount of information presented to users. They are used to toggle the visibility of content, condensing information and reducing clutter.',
4-
keywords: 'accordion, react component, UI component, collapsible content, expandable panels, rad ui, accessibility, a11y, keyboard navigation, disclosure component',
2+
title: 'Accordion - Rad UI',
3+
description: 'A versatile accordion component for organizing content in collapsible sections.',
4+
keywords: [
5+
'accordion',
6+
'collapse',
7+
'expandable',
8+
'collapsible',
9+
'disclosure',
10+
'content organization',
11+
'ui component',
12+
'react',
13+
'radui'
14+
],
515
authors: [{ name: 'Rad UI Team' }, { name: 'Pranay Kothapalli' }],
616
// openGraph: {
717
// type: 'website',

‎docs/app/docs/components/aspect-ratio/page.mdx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import Documentation from "@/components/layout/Documentation/Documentation"
22
import AspectRatio from "@radui/ui/AspectRatio"
33
import codeUsage, { AspectRatioTable } from "./docs/codeUsage"
4+
import Card from "@radui/ui/Card"
45

5-
6-
<Documentation title={`AspectRatio`} description={`
7-
Aspect Ratio is used to set the desired ratio.
8-
`}>
9-
<Documentation.ComponentHero codeUsage={codeUsage}>
10-
11-
<AspectRatio ratio='16/9'>
12-
<img
13-
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
14-
className="Image"
15-
src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
16-
alt="Landscape photograph"
17-
/>
18-
</AspectRatio>
19-
20-
</Documentation.ComponentHero>
21-
22-
<Documentation.Table columns={AspectRatioTable.columns} data={AspectRatioTable.data} />
23-
24-
</Documentation>
6+
<Documentation
7+
title="AspectRatio"
8+
description="Aspect Ratio is used to set the desired ratio."
9+
>
10+
<Documentation.ComponentHero codeUsage={codeUsage}>
11+
<Card style={{ width: '300px', height: 'auto' }}>
12+
<AspectRatio ratio="4/3">
13+
<img
14+
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
15+
className="Image"
16+
src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
17+
alt="Landscape photograph"
18+
/>
19+
</AspectRatio>
20+
</Card>
21+
</Documentation.ComponentHero>
22+
23+
<Documentation.Table
24+
columns={AspectRatioTable.columns}
25+
data={AspectRatioTable.data}
26+
/>
27+
</Documentation>

‎docs/app/docs/components/avatar/page.mdx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import Documentation from "@/components/layout/Documentation/Documentation"
2-
32
import AvatarExample from "./docs/AvatarExample"
43
import codeUsage, { avatarBasicUsageExample } from "./docs/codeUsage"
54

6-
75
<Documentation
8-
title='Avatar'
9-
description={`Avatars are used to represent a user or a brand. They are used in the header, sidebar, and in the chat.`}
6+
title="Avatar"
7+
description="Avatars are used to represent a user or a brand. They are used in the header, sidebar, and in the chat."
108
>
11-
<Documentation.ComponentHero codeUsage={codeUsage}>
12-
<AvatarExample />
13-
</Documentation.ComponentHero>
14-
15-
<Documentation.ComponentFeatures features={[
16-
"Adds a fallback if the image is not available",
17-
// "Accepts a custom fallback",
18-
"SSR compatible",
19-
]} />
20-
9+
<Documentation.ComponentHero codeUsage={codeUsage}>
10+
<AvatarExample />
11+
</Documentation.ComponentHero>
12+
13+
<Documentation.ComponentFeatures
14+
features={[
15+
"Adds a fallback if the image is not available",
16+
// "Accepts a custom fallback",
17+
"SSR compatible",
18+
]}
19+
/>
2120

22-
<Documentation.Table columns={avatarBasicUsageExample.columns} data={avatarBasicUsageExample.data} />
21+
<Documentation.Table
22+
columns={avatarBasicUsageExample.columns}
23+
data={avatarBasicUsageExample.data}
24+
/>
2325
</Documentation>
2426

‎docs/app/docs/components/blockquote/docs/api/blockquote.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const data = {
2+
name: "BlockQuote",
3+
description: "A component used to highlight and distinguish quoted content from the surrounding text, often used for testimonials, citations, or emphasis.",
4+
columns: [
5+
{
6+
name: "Prop",
7+
id: "prop",
8+
},
9+
{
10+
name: "Type",
11+
id: "type",
12+
},
13+
{
14+
name: "Default",
15+
id: "default",
16+
}
17+
],
18+
data: [
19+
{
20+
prop: {
21+
name: "children",
22+
info_tooltips: "The content to be displayed inside the blockquote."
23+
},
24+
type: "ReactNode",
25+
default: "--",
26+
},
27+
{
28+
prop: {
29+
name: "className",
30+
info_tooltips: "Additional CSS class names to apply to the blockquote."
31+
},
32+
type: "string",
33+
default: "''",
34+
},
35+
{
36+
prop: {
37+
name: "customRootClass",
38+
info_tooltips: "Custom root class name to override default styling."
39+
},
40+
type: "string",
41+
default: "''",
42+
},
43+
{
44+
prop: {
45+
name: "variant",
46+
info_tooltips: "Style variant of the blockquote."
47+
},
48+
type: "string",
49+
default: "''",
50+
},
51+
{
52+
prop: {
53+
name: "size",
54+
info_tooltips: "Size variant of the blockquote (small, medium, large, x-large)."
55+
},
56+
type: "string",
57+
default: "''",
58+
},
59+
{
60+
prop: {
61+
name: "color",
62+
info_tooltips: "Color theme of the blockquote."
63+
},
64+
type: "string",
65+
default: "''",
66+
}
67+
]
68+
};
69+
70+
export default data;

‎docs/app/docs/components/blockquote/docs/codeUsage.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
// Import API documentation
2+
import blockquote_api_SourceCode from './api/blockquote.tsx';
3+
14
const code = {
25
javascript: {
36
code: `import BlockQuote from "@radui/ui/BlockQuote"
47
58
const BlockQuoteExample = () => (
69
<div>
7-
<BlockQuote> When my time comes, forget the wrong that I've done.
8-
Help me leave behind some reasons to be missed.
9-
Don't resent me and when you're feeling empty, keep me in your memory.
10-
Leave out all the rest, leave out all the rest. </BlockQuote>
10+
<BlockQuote color="green">
11+
"Behind every great man is a woman rolling her eyes." — Jim Carrey
12+
</BlockQuote>
1113
</div>
1214
)`
1315
},
@@ -20,6 +22,21 @@ const BlockQuoteExample = () => (
2022
},
2123
}
2224

25+
// API documentation
26+
export const api_documentation = {
27+
blockquote: blockquote_api_SourceCode
28+
};
29+
30+
// Component features
31+
export const features = [
32+
"Multiple size options: small, medium, large, x-large",
33+
"Customizable with different color themes",
34+
"Clean and simple styling for emphasized quotes",
35+
"Follows typography best practices",
36+
"Perfect for testimonials and citations"
37+
];
38+
39+
// Kept for backwards compatibility
2340
export const BlockQuoteTable = {
2441
columns : [
2542
{name: 'Prop', id: 'prop'},

‎docs/app/docs/components/blockquote/docs/seo.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default {
2+
title: 'BlockQuote - Rad UI',
3+
description: 'A versatile blockquote component for displaying quoted content with different sizes and color options',
4+
keywords: [
5+
'blockquote',
6+
'quote',
7+
'citation',
8+
'testimonial',
9+
'text formatting',
10+
'content emphasis',
11+
'ui component',
12+
'sizes',
13+
'colors',
14+
'react',
15+
'radui'
16+
],
17+
}

‎docs/app/docs/components/blockquote/page.mdx‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,47 @@
1+
import PageDetails from '@/components/seo/PageDetails';
12
import Documentation from "@/components/layout/Documentation/Documentation"
2-
import codeUsage, { BlockQuoteTable } from "./docs/codeUsage"
33
import BlockQuote from "@radui/ui/BlockQuote"
4+
import codeUsage, { BlockQuoteTable, api_documentation, features } from "./docs/codeUsage"
45
import { code as sizeCodeUsage } from './docs/sizeCodeUsage';
56
import { code as colorCodeUsage } from './docs/colorCodeUsage';
67
import BlockQuoteSizes from './examples/BlockQuoteSizes';
78
import BlockQuoteColor from './examples/BlockQuoteColor';
9+
import seo from './docs/seo';
810

9-
<Documentation title={`BlockQuote`} description={`
10-
BlockQuote is used to display a quote.
11-
`}>
12-
<Documentation.ComponentHero codeUsage={codeUsage}>
13-
14-
<BlockQuote color="green">
15-
"Behind every great man is a woman rolling her eyes." — Jim Carrey
16-
</BlockQuote>
17-
18-
</Documentation.ComponentHero>
19-
11+
export const metadata = seo;
2012

21-
<Documentation.ComponentHero title='Sizes' codeUsage={sizeCodeUsage}>
22-
<BlockQuoteSizes />
23-
</Documentation.ComponentHero>
13+
<Documentation
14+
title="BlockQuote"
15+
description="BlockQuote is a component that visually distinguishes quoted content, making it perfect for testimonials, citations, and emphasizing important passages."
16+
>
17+
{/* Component Hero */}
18+
<Documentation.ComponentHero codeUsage={codeUsage}>
19+
<BlockQuote color="green">
20+
"Behind every great man is a woman rolling her eyes." — Jim Carrey
21+
</BlockQuote>
22+
</Documentation.ComponentHero>
2423

25-
<Documentation.ComponentHero title='Color' codeUsage={colorCodeUsage}>
26-
<BlockQuoteColor />
27-
</Documentation.ComponentHero>
24+
{/* Component Features */}
25+
<Documentation.ComponentFeatures
26+
features={features}
27+
/>
28+
29+
{/* Size Examples */}
30+
<Documentation.ComponentHero title='Sizes' codeUsage={sizeCodeUsage}>
31+
<BlockQuoteSizes />
32+
</Documentation.ComponentHero>
2833

34+
{/* Color Examples */}
35+
<Documentation.ComponentHero title='Color' codeUsage={colorCodeUsage}>
36+
<BlockQuoteColor />
37+
</Documentation.ComponentHero>
2938

30-
<Documentation.Table columns={BlockQuoteTable.columns} data={BlockQuoteTable.data} />
31-
32-
</Documentation>
39+
{/* API Documentation */}
40+
<Documentation.Section title="API Documentation" as="h2" />
41+
<Documentation.Table
42+
title="BlockQuote"
43+
description={api_documentation.blockquote.description}
44+
columns={api_documentation.blockquote.columns}
45+
data={api_documentation.blockquote.data}
46+
/>
47+
</Documentation>

0 commit comments

Comments
 (0)