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 <i@innei.in> * 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 <i@innei.in> Co-authored-by: WK Wong <wingkwong.code@gmail.com> * 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 <i@innei.in> Co-authored-by: Innei <tukon479@gmail.com>
nextui-org · Oct 19, 2024 · 765dac5 · 765dac5
1 parent 38a54ab
commit 765dac5
Show file tree

Hide file tree

Showing 53 changed files with 2,390 additions and 1,868 deletions.
diff --git a/apps/docs/app/blog/[slug]/page.tsx b/apps/docs/app/blog/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {Link, User} from "@nextui-org/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";

diff --git a/apps/docs/app/blog/page.tsx b/apps/docs/app/blog/page.tsx
@@ -1,4 +1,4 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";

diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx
@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
+import {allDocs} from "contentlayer2/generated";
 import {Link} from "@nextui-org/react";
 
 import {MDXContent} from "@/components/mdx-content";

diff --git a/apps/docs/app/feed.xml/route.ts b/apps/docs/app/feed.xml/route.ts
@@ -1,5 +1,5 @@
 import Rss from "rss";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 
 import {siteConfig} from "@/config/site";
 import {allCoreContent} from "@/libs/contentlayer";

diff --git a/apps/docs/components/blog-post.tsx b/apps/docs/components/blog-post.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
+import {BlogPost} from "contentlayer2/generated";
 import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";

diff --git a/apps/docs/components/code-window/code-block.tsx b/apps/docs/components/code-window/code-block.tsx
@@ -6,7 +6,7 @@ import jsx from "refractor/lang/jsx";
 import bash from "refractor/lang/bash";
 import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
-import hastToHtml from "hast-util-to-html";
+import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
 import {clsx} from "@nextui-org/shared-utils";
 
@@ -137,7 +137,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = highlightWord(result);
 
   // convert to html
-  result = hastToHtml(result);
+  result = toHtml(result);
 
   // TODO reset theme
   const classes = `language-${language}`;

diff --git a/apps/docs/components/mdx-content.tsx b/apps/docs/components/mdx-content.tsx
@@ -2,7 +2,7 @@
 "use client";
 import type {MDXComponents as MDXComponentsType} from "mdx/types";
 
-import {useMDXComponent} from "next-contentlayer/hooks";
+import {useMDXComponent} from "next-contentlayer2/hooks";
 
 import {MDXComponents} from "./mdx-components";
 

diff --git a/apps/docs/content/components/accordion/bordered-variant.raw.jsx b/apps/docs/content/components/accordion/bordered-variant.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "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.";
+
+  return (
+    <Accordion variant="bordered">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/bordered-variant.ts b/apps/docs/content/components/accordion/bordered-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "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.";
-
-  return (
-    <Accordion variant="bordered">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./bordered-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/accordion/compact.raw.jsx b/apps/docs/content/components/accordion/compact.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "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.";
+
+  return (
+    <Accordion isCompact>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/compact.ts b/apps/docs/content/components/accordion/compact.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "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.";
-
-  return (
-    <Accordion isCompact>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/accordion/controlled.raw.jsx b/apps/docs/content/components/accordion/controlled.raw.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
+  const defaultContent =
+    "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.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/controlled.raw.tsx b/apps/docs/content/components/accordion/controlled.raw.tsx
@@ -0,0 +1,24 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
+  const defaultContent =
+    "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.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/controlled.ts b/apps/docs/content/components/accordion/controlled.ts
@@ -1,54 +1,5 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
-
-  const defaultContent =
-    "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.";
-
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
-
-const AppTs = `import type {Selection} from "@nextui-org/react";
-
-import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
-  const defaultContent =
-    "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.";
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/accordion/custom-motion.raw.jsx b/apps/docs/content/components/accordion/custom-motion.raw.jsx
@@ -0,0 +1,59 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "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.";
+
+  return (
+    <Accordion
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            height: "auto",
+            overflowY: "unset",
+            transition: {
+              height: {
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+                duration: 1,
+              },
+              opacity: {
+                easings: "ease",
+                duration: 1,
+              },
+            },
+          },
+          exit: {
+            y: -10,
+            opacity: 0,
+            height: 0,
+            overflowY: "hidden",
+            transition: {
+              height: {
+                easings: "ease",
+                duration: 0.25,
+              },
+              opacity: {
+                easings: "ease",
+                duration: 0.3,
+              },
+            },
+          },
+        },
+      }}
+    >
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/custom-motion.ts b/apps/docs/content/components/accordion/custom-motion.ts
@@ -1,62 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "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.";
-
-  return (
-    <Accordion
-      motionProps={{
-        variants: {
-          enter: {
-            y: 0,
-            opacity: 1,
-            height: "auto",
-            overflowY: "unset",
-            transition: {
-              height: {
-                type: "spring",
-                stiffness: 500,
-                damping: 30,
-                duration: 1,
-              },
-              opacity: {
-                easings: "ease",
-                duration: 1,
-              },
-            },
-          },
-          exit: {
-            y: -10,
-            opacity: 0,
-            height: 0,
-            overflowY: "hidden",
-            transition: {
-              height: {
-                easings: "ease",
-                duration: 0.25,
-              },
-              opacity: {
-                easings: "ease",
-                duration: 0.3,
-              },
-            },
-          },
-        },
-      }}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,