Skip to content

Commit e0d157f

Browse files
kotAPIkotAPI
authored
V2 Docs Improvement (#887)
1 parent bd89082 commit e0d157f

File tree

49 files changed

+3023
-222
lines changed

Some content is hidden

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

49 files changed

+3023
-222
lines changed

‎docs/app/docs/layout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ const InfoIcon = () => {
77
};
88

99
const layout = ({ children }: any) => {
10-
11-
12-
1310
return (
1411
<div className= " md:flex max-h-screen overflow-y-auto">
1512
<div className='md:flex'>

‎docs/app/docsv2/components/accordion/docs/accordion_anatomy.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Accordion from "@radui/ui/Accordion";
2+
3+
export default ()=>{
4+
return (
5+
<Accordion.Root>
6+
<Accordion.Item>
7+
<Accordion.Header>
8+
<Accordion.Trigger/>
9+
</Accordion.Header>
10+
<Accordion.Content/>
11+
</Accordion.Item>
12+
</Accordion.Root>
13+
)
14+
}

‎docs/app/docsv2/components/accordion/docs/codeUsage.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import Kbd from '@radui/ui/Kbd';
2+
import Text from '@radui/ui/Text';
3+
import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
4+
5+
const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/example_1.tsx');
6+
// console.log(example_1_SourceCode);
7+
8+
9+
const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/accordion.scss');
10+
const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/accordion_anatomy.tsx');
11+
12+
export const code = {
13+
javascript: {
14+
code: example_1_SourceCode
15+
},
16+
scss: {
17+
code: scss_SourceCode
18+
}
19+
};
20+
21+
export const anatomy = {
22+
code: anatomy_SourceCode
23+
}
24+
25+
export const keyboardShortcuts = {
26+
columns: [
27+
{
28+
name: 'Shortcut',
29+
id: 'shortcut'
30+
},
31+
{
32+
name: 'Description',
33+
id: 'description'
34+
}
35+
],
36+
data: [
37+
{
38+
shortcut: <Kbd>Space</Kbd>,
39+
description: <Text>
40+
When focus is on an Accordion.Trigger of a collapsed section, expands the section.
41+
</Text>,
42+
id: "space"
43+
},
44+
{
45+
shortcut: <Kbd>Enter</Kbd>,
46+
description: <Text>
47+
When focus is on an Accordion.Trigger of an expanded section, collapses the section.
48+
</Text>,
49+
id: "enter"
50+
},
51+
{
52+
shortcut: <Kbd>Tab</Kbd>,
53+
description: <Text>
54+
When focus is on an Accordion.Trigger of a collapsed section, focuses the next Accordion.Trigger.
55+
</Text>,
56+
id: "tab"
57+
},
58+
{
59+
shortcut: <Kbd>Shift + Tab</Kbd>,
60+
description: <Text>
61+
When focus is on an Accordion.Trigger of an expanded section, focuses the previous Accordion.Trigger.
62+
</Text>,
63+
id: "shift-tab"
64+
},
65+
{
66+
shortcut: <Kbd>ArrowDown</Kbd>,
67+
description: <Text>
68+
When focus is on an Accordion.Trigger of a collapsed section, focuses the next Accordion.Trigger.
69+
</Text>,
70+
id: "arrow-down"
71+
},
72+
{
73+
shortcut: <Kbd>ArrowUp</Kbd>,
74+
description: <Text>
75+
When focus is on an Accordion.Trigger of an expanded section, focuses the previous Accordion.Trigger.
76+
</Text>,
77+
id: "arrow-up"
78+
},
79+
// {
80+
// shortcut: <Kbd>ArrowRight</Kbd>,
81+
// description: <Text>
82+
// When focus is on an Accordion.Trigger of a collapsed section, focuses the next Accordion.Trigger.
83+
// </Text>
84+
// },
85+
// {
86+
// shortcut: <Kbd>ArrowLeft</Kbd>,
87+
// description: <Text>
88+
// When focus is on an Accordion.Trigger of an expanded section, focuses the previous Accordion.Trigger.
89+
// </Text>
90+
// }
91+
{
92+
shortcut: <Kbd>Home</Kbd>,
93+
description: <Text>
94+
When focus is on an Accordion.Trigger, focuses the first Accordion.Trigger. [TODO]
95+
</Text>,
96+
id: "home"
97+
},
98+
{
99+
shortcut: <Kbd>End</Kbd>,
100+
description: <Text>
101+
When focus is on an Accordion.Trigger, focuses the last Accordion.Trigger. [TODO]
102+
</Text>,
103+
id: "end"
104+
}
105+
]
106+
}
107+
108+
export default code

‎docs/app/docsv2/components/accordion/docs/example_1.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Accordion from "@radui/ui/Accordion";
2+
3+
let items = [
4+
{
5+
title: "React",
6+
content: "React is a JavaScript library for building user interfaces."
7+
},
8+
{
9+
title: "Angular",
10+
content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript."
11+
},
12+
{
13+
title: "Vue",
14+
content: "Vue.js is a progressive framework for building user interfaces."
15+
}
16+
]
17+
18+
const AccordionExample = () => (
19+
<div className="w-64 md:w-96">
20+
<Accordion items={items} />
21+
</div>
22+
)
23+
24+
export default AccordionExample;

‎docs/app/docsv2/components/accordion/page.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Documentation from '@/components/layout/Documentation/Documentation';
2+
import AccordionExample from "./docs/example_1"
3+
import AccordionAnatomy from "./docs/accordion_anatomy"
4+
import {code, anatomy, keyboardShortcuts} from "./docs/codeUsage"
5+
6+
<Documentation
7+
title={`Accordion`}
8+
description='Accordions are used to toggle the visibility of content. They are used in the sidebar, and in the chat.'
9+
>
10+
{/* Component Hero */}
11+
<Documentation.ComponentHero codeUsage={code}>
12+
<AccordionExample />
13+
</Documentation.ComponentHero>
14+
15+
{/* Component Anatomy */}
16+
<Documentation.Anatomy code={anatomy.code} />
17+
18+
{/* Keyboard Shortcuts */}
19+
<Documentation.KeyboardShortcuts keyboardShortcuts={keyboardShortcuts} />
20+
</Documentation>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Aspect Ratio

‎docs/app/docsv2/components/avatar-group/docs/avatarGroup_anatomy.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import AvatarGroup from "@radui/ui/AvatarGroup";
2+
3+
export default ()=>{
4+
return (
5+
<AvatarGroup.Root>
6+
<AvatarGroup.AvatarRoot>
7+
<AvatarGroup.AvatarImage />
8+
<AvatarGroup.AvatarFallback />
9+
</AvatarGroup.AvatarRoot>
10+
</AvatarGroup.Root>
11+
)
12+
}

‎docs/app/docsv2/components/avatar-group/docs/codeUsage.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
2+
const COMPONENT_FOLDER = 'avatar-group';
3+
const example_1_SourceCode = await getSourceCodeFromPath(`docs/app/docs/components/${COMPONENT_FOLDER}/docs/example_1.tsx`);
4+
// console.log(example_1_SourceCode);
5+
6+
7+
const scss_SourceCode = await getSourceCodeFromPath(`styles/themes/components/${COMPONENT_FOLDER}.scss`);
8+
const anatomy_SourceCode = await getSourceCodeFromPath(`docs/app/docs/components/${COMPONENT_FOLDER}/docs/avatarGroup_anatomy.tsx`);
9+
10+
export const code = {
11+
javascript: {
12+
code: example_1_SourceCode
13+
},
14+
scss: {
15+
code: scss_SourceCode
16+
}
17+
};
18+
19+
export const anatomy = {
20+
code: anatomy_SourceCode
21+
}
22+
23+
24+
25+
26+
27+
export default code;

‎docs/app/docsv2/components/avatar-group/docs/example_1.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import AvatarGroup from "@radui/ui/AvatarGroup";
2+
3+
let avatars = [
4+
{ src: 'https://i.pravatar.cc/64', fallback: 'RU', alt: 'Avatar 1' },
5+
{ src: 'https://i.pravatar.cc/65', fallback: 'PK', alt: 'Avatar 2' },
6+
{ src: 'https://i.pravatar.cc/66', fallback: 'RS', alt: 'Avatar 3' },
7+
]
8+
9+
const AvatarGroupExample = () => (
10+
<div>
11+
<AvatarGroup avatars={avatars} />
12+
</div>
13+
)
14+
15+
export default AvatarGroupExample;

‎docs/app/docsv2/components/avatar-group/page.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Documentation from "@/components/layout/Documentation/Documentation"
2+
import codeUsage, { anatomy } from "./docs/codeUsage"
3+
import Example1 from "./docs/example_1"
4+
5+
<Documentation
6+
title='Avatar Group'
7+
description={`Avatar Group is used to represent a group of users or a brand. They are used in the header, sidebar, and in the chat.`}
8+
>
9+
<Documentation.ComponentHero codeUsage={codeUsage}>
10+
<Example1 />
11+
</Documentation.ComponentHero>
12+
13+
<Documentation.Anatomy code={anatomy.code} />
14+
15+
16+
</Documentation>
17+
18+

0 commit comments

Comments
 (0)