Skip to content

Commit 765dac5

Browse files
wingkwongInnei
wingkwong
and
Innei
authored
refactor(docs): dx improvement in accordion (#3856)
* refactor: improve dx for writing a docs component (#2544) * refactor: improve dx for write a docs component Signed-off-by: Innei <[email protected]> * refactor(docs): switch to contentlayer2 * chore(docs): rename to avoid conflict * refactor(docs): switch to next-contentlayer2 * refactor(docs): revise docs lib * chore(deps): bump docs related dependencies * fix(use-aria-multiselect): type issue due to ts version bump --------- Signed-off-by: Innei <[email protected]> Co-authored-by: WK Wong <[email protected]> * refactor(docs): accordion codes * feat(docs): declare module `*.jsx?raw` * feat(docs): include `**/*.jsx` * fix(docs): incorrect content * chore(docs): add new lines * refactor(docs): lint --------- Signed-off-by: Innei <[email protected]> Co-authored-by: Innei <[email protected]>
1 parent 38a54ab commit 765dac5

Some content is hidden

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

53 files changed

+2390
-1868
lines changed

‎apps/docs/app/blog/[slug]/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type {Metadata} from "next";
22

33
import {notFound} from "next/navigation";
4-
import {allBlogPosts} from "contentlayer/generated";
4+
import {allBlogPosts} from "contentlayer2/generated";
55
import {Link, User} from "@nextui-org/react";
66
import {format, parseISO} from "date-fns";
77
import NextLink from "next/link";

‎apps/docs/app/blog/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {allBlogPosts} from "contentlayer/generated";
1+
import {allBlogPosts} from "contentlayer2/generated";
22
import {compareDesc} from "date-fns";
33

44
import {BlogPostList} from "@/components/blog-post";

‎apps/docs/app/docs/[[...slug]]/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type {Metadata} from "next";
22

33
import {notFound} from "next/navigation";
4-
import {allDocs} from "contentlayer/generated";
4+
import {allDocs} from "contentlayer2/generated";
55
import {Link} from "@nextui-org/react";
66

77
import {MDXContent} from "@/components/mdx-content";

‎apps/docs/app/feed.xml/route.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Rss from "rss";
2-
import {allBlogPosts} from "contentlayer/generated";
2+
import {allBlogPosts} from "contentlayer2/generated";
33

44
import {siteConfig} from "@/config/site";
55
import {allCoreContent} from "@/libs/contentlayer";

‎apps/docs/components/blog-post.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import {BlogPost} from "contentlayer/generated";
3+
import {BlogPost} from "contentlayer2/generated";
44
import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
55
import Balancer from "react-wrap-balancer";
66
import {format, parseISO} from "date-fns";

‎apps/docs/components/code-window/code-block.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import jsx from "refractor/lang/jsx";
66
import bash from "refractor/lang/bash";
77
import css from "refractor/lang/css";
88
import diff from "refractor/lang/diff";
9-
import hastToHtml from "hast-util-to-html";
9+
import {toHtml} from "hast-util-to-html";
1010
import rangeParser from "parse-numeric-range";
1111
import {clsx} from "@nextui-org/shared-utils";
1212

@@ -137,7 +137,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
137137
result = highlightWord(result);
138138

139139
// convert to html
140-
result = hastToHtml(result);
140+
result = toHtml(result);
141141

142142
// TODO reset theme
143143
const classes = `language-${language}`;

‎apps/docs/components/mdx-content.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"use client";
33
import type {MDXComponents as MDXComponentsType} from "mdx/types";
44

5-
import {useMDXComponent} from "next-contentlayer/hooks";
5+
import {useMDXComponent} from "next-contentlayer2/hooks";
66

77
import {MDXComponents} from "./mdx-components";
88

‎apps/docs/content/components/accordion/bordered-variant.raw.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Accordion, AccordionItem} from "@nextui-org/react";
2+
3+
export default function App() {
4+
const defaultContent =
5+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6+
7+
return (
8+
<Accordion variant="bordered">
9+
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
10+
{defaultContent}
11+
</AccordionItem>
12+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
13+
{defaultContent}
14+
</AccordionItem>
15+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
16+
{defaultContent}
17+
</AccordionItem>
18+
</Accordion>
19+
);
20+
}

‎apps/docs/content/components/accordion/bordered-variant.ts

+1-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,4 @@
1-
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
2-
3-
export default function App() {
4-
const defaultContent =
5-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6-
7-
return (
8-
<Accordion variant="bordered">
9-
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
10-
{defaultContent}
11-
</AccordionItem>
12-
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
13-
{defaultContent}
14-
</AccordionItem>
15-
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
16-
{defaultContent}
17-
</AccordionItem>
18-
</Accordion>
19-
);
20-
}`;
1+
import App from "./bordered-variant.raw.jsx?raw";
212

223
const react = {
234
"/App.jsx": App,

‎apps/docs/content/components/accordion/compact.raw.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Accordion, AccordionItem} from "@nextui-org/react";
2+
3+
export default function App() {
4+
const defaultContent =
5+
"Lorem Innei ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6+
7+
return (
8+
<Accordion isCompact>
9+
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
10+
{defaultContent}
11+
</AccordionItem>
12+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
13+
{defaultContent}
14+
</AccordionItem>
15+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
16+
{defaultContent}
17+
</AccordionItem>
18+
</Accordion>
19+
);
20+
}

‎apps/docs/content/components/accordion/compact.ts

+1-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,4 @@
1-
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
2-
3-
export default function App() {
4-
const defaultContent =
5-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6-
7-
return (
8-
<Accordion isCompact>
9-
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
10-
{defaultContent}
11-
</AccordionItem>
12-
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
13-
{defaultContent}
14-
</AccordionItem>
15-
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
16-
{defaultContent}
17-
</AccordionItem>
18-
</Accordion>
19-
);
20-
}`;
1+
import App from "./compact.raw.jsx?raw";
212

223
const react = {
234
"/App.jsx": App,

‎apps/docs/content/components/accordion/controlled.raw.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import {Accordion, AccordionItem} from "@nextui-org/react";
3+
4+
export default function App() {
5+
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
6+
const defaultContent =
7+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
8+
9+
return (
10+
<Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
11+
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
12+
{defaultContent}
13+
</AccordionItem>
14+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
15+
{defaultContent}
16+
</AccordionItem>
17+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
18+
{defaultContent}
19+
</AccordionItem>
20+
</Accordion>
21+
);
22+
}

‎apps/docs/content/components/accordion/controlled.raw.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type {Selection} from "@nextui-org/react";
2+
3+
import React from "react";
4+
import {Accordion, AccordionItem} from "@nextui-org/react";
5+
6+
export default function App() {
7+
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
8+
const defaultContent =
9+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
10+
11+
return (
12+
<Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
13+
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
14+
{defaultContent}
15+
</AccordionItem>
16+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
17+
{defaultContent}
18+
</AccordionItem>
19+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
20+
{defaultContent}
21+
</AccordionItem>
22+
</Accordion>
23+
);
24+
}

‎apps/docs/content/components/accordion/controlled.ts

+2-51
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,5 @@
1-
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
2-
3-
export default function App() {
4-
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
5-
6-
const defaultContent =
7-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
8-
9-
return (
10-
<Accordion
11-
selectedKeys={selectedKeys}
12-
onSelectionChange={setSelectedKeys}
13-
>
14-
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
15-
{defaultContent}
16-
</AccordionItem>
17-
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
18-
{defaultContent}
19-
</AccordionItem>
20-
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
21-
{defaultContent}
22-
</AccordionItem>
23-
</Accordion>
24-
);
25-
}`;
26-
27-
const AppTs = `import type {Selection} from "@nextui-org/react";
28-
29-
import {Accordion, AccordionItem} from "@nextui-org/react";
30-
31-
export default function App() {
32-
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
33-
const defaultContent =
34-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
35-
return (
36-
<Accordion
37-
selectedKeys={selectedKeys}
38-
onSelectionChange={setSelectedKeys}
39-
>
40-
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
41-
{defaultContent}
42-
</AccordionItem>
43-
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
44-
{defaultContent}
45-
</AccordionItem>
46-
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
47-
{defaultContent}
48-
</AccordionItem>
49-
</Accordion>
50-
);
51-
}`;
1+
import App from "./controlled.raw.jsx?raw";
2+
import AppTs from "./controlled.raw.tsx?raw";
523

534
const react = {
545
"/App.jsx": App,

‎apps/docs/content/components/accordion/custom-motion.raw.jsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {Accordion, AccordionItem} from "@nextui-org/react";
2+
3+
export default function App() {
4+
const defaultContent =
5+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6+
7+
return (
8+
<Accordion
9+
motionProps={{
10+
variants: {
11+
enter: {
12+
y: 0,
13+
opacity: 1,
14+
height: "auto",
15+
overflowY: "unset",
16+
transition: {
17+
height: {
18+
type: "spring",
19+
stiffness: 500,
20+
damping: 30,
21+
duration: 1,
22+
},
23+
opacity: {
24+
easings: "ease",
25+
duration: 1,
26+
},
27+
},
28+
},
29+
exit: {
30+
y: -10,
31+
opacity: 0,
32+
height: 0,
33+
overflowY: "hidden",
34+
transition: {
35+
height: {
36+
easings: "ease",
37+
duration: 0.25,
38+
},
39+
opacity: {
40+
easings: "ease",
41+
duration: 0.3,
42+
},
43+
},
44+
},
45+
},
46+
}}
47+
>
48+
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
49+
{defaultContent}
50+
</AccordionItem>
51+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
52+
{defaultContent}
53+
</AccordionItem>
54+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
55+
{defaultContent}
56+
</AccordionItem>
57+
</Accordion>
58+
);
59+
}

‎apps/docs/content/components/accordion/custom-motion.ts

+1-59
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,4 @@
1-
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
2-
3-
export default function App() {
4-
const defaultContent =
5-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6-
7-
return (
8-
<Accordion
9-
motionProps={{
10-
variants: {
11-
enter: {
12-
y: 0,
13-
opacity: 1,
14-
height: "auto",
15-
overflowY: "unset",
16-
transition: {
17-
height: {
18-
type: "spring",
19-
stiffness: 500,
20-
damping: 30,
21-
duration: 1,
22-
},
23-
opacity: {
24-
easings: "ease",
25-
duration: 1,
26-
},
27-
},
28-
},
29-
exit: {
30-
y: -10,
31-
opacity: 0,
32-
height: 0,
33-
overflowY: "hidden",
34-
transition: {
35-
height: {
36-
easings: "ease",
37-
duration: 0.25,
38-
},
39-
opacity: {
40-
easings: "ease",
41-
duration: 0.3,
42-
},
43-
},
44-
},
45-
},
46-
}}
47-
>
48-
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
49-
{defaultContent}
50-
</AccordionItem>
51-
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
52-
{defaultContent}
53-
</AccordionItem>
54-
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
55-
{defaultContent}
56-
</AccordionItem>
57-
</Accordion>
58-
);
59-
}`;
1+
import App from "./custom-motion.raw.jsx?raw";
602

613
const react = {
624
"/App.jsx": App,

0 commit comments

Comments
 (0)