archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

refactor(docs): dx improvement in accordion (#3856)

Browse Source 
* 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>
This commit is contained in:
աӄա 2024-10-20 00:54:13 +08:00 committed by GitHub
parent 38a54ab497
commit 765dac53cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
53 changed files with 2391 additions and 1869 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/app/blog/[slug]/page.tsx
View File

@ -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";

2
apps/docs/app/blog/page.tsx
View File

@ -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";

2
apps/docs/app/docs/[[...slug]]/page.tsx
View File

@ -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";

2
apps/docs/app/feed.xml/route.ts
View File

@ -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";

2
apps/docs/components/blog-post.tsx
View File

@ -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";

4
apps/docs/components/code-window/code-block.tsx
View File

@ -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}`;

2
apps/docs/components/mdx-content.tsx
View File

@ -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";

20
apps/docs/content/components/accordion/bordered-variant.raw.jsx Normal file
View File

@ -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>
);
}

21
apps/docs/content/components/accordion/bordered-variant.ts
View File

@ -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,

20
apps/docs/content/components/accordion/compact.raw.jsx Normal file
View File

@ -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>
);
}

21
apps/docs/content/components/accordion/compact.ts
View File

@ -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,

22
apps/docs/content/components/accordion/controlled.raw.jsx Normal file
View File

@ -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>
);
}

24
apps/docs/content/components/accordion/controlled.raw.tsx Normal file
View File

@ -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>
);
}

53
apps/docs/content/components/accordion/controlled.ts
View File

@ -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,

59
apps/docs/content/components/accordion/custom-motion.raw.jsx Normal file
View File

@ -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>
);
}

60
apps/docs/content/components/accordion/custom-motion.ts
View File

@ -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,

255
apps/docs/content/components/accordion/custom-styles.raw.jsx Normal file
View File

@ -0,0 +1,255 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const MonitorMobileIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
const ShieldSecurityIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
<path
d="M12 12.5V15.5"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
</svg>
);
const InfoIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 8V13"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M11.9945 16H12.0035"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
const InvalidCardIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);
export default function App() {
const itemClasses = {
base: "py-0 w-full",
title: "font-normal text-medium",
trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
indicator: "text-medium",
content: "text-small px-2",
};
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
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
itemClasses={itemClasses}
showDivider={false}
variant="shadow"
>
<AccordionItem
key="1"
aria-label="Connected devices"
startContent={<MonitorMobileIcon className="text-primary" />}
subtitle={
<p className="flex">
2 issues to <span className="text-primary ml-1">fix now</span>
</p>
}
title="Connected devices"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Apps Permissions"
startContent={<ShieldSecurityIcon />}
subtitle="3 apps have read permissions"
title="Apps Permissions"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Pending tasks"
classNames={{subtitle: "text-warning"}}
startContent={<InfoIcon className="text-warning" />}
subtitle="Complete your profile"
title="Pending tasks"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="4"
aria-label="Card expired"
classNames={{subtitle: "text-danger"}}
startContent={<InvalidCardIcon className="text-danger" />}
subtitle="Please, update now"
title={
<p className="flex gap-1 items-center">
Card expired
<span className="text-default-400 text-small">*4812</span>
</p>
}
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}

265
apps/docs/content/components/accordion/custom-styles.ts
View File

@ -1,270 +1,7 @@
const MonitorMobileIcon = `export const MonitorMobileIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);`;
const ShieldSecurityIcon = `export const ShieldSecurityIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
<path
d="M12 12.5V15.5"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="1.5"
/>
</svg>
);`;
const InfoIcon = `export const InfoIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12 8V13"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M11.9945 16H12.0035"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);`;
const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M10 21.4699V16.95"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M2 12.95H10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.73999 21.47H9.99999"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.2445 18.25H17.2535"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
);`;
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
import {MonitorMobileIcon} from "./MonitorMobileIcon";
import {ShieldSecurityIcon} from "./ShieldSecurityIcon";
import {InfoIcon} from "./InfoIcon";
import {InvalidCardIcon} from "./InvalidCardIcon";
export default function App() {
const itemClasses = {
base: "py-0 w-full",
title: "font-normal text-medium",
trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
indicator: "text-medium",
content: "text-small px-2",
};
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
showDivider={false}
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
variant="shadow"
itemClasses={itemClasses}
>
<AccordionItem
key="1"
aria-label="Connected devices"
startContent={<MonitorMobileIcon className="text-primary" />}
subtitle={
<p className="flex">
2 issues to <span className="text-primary ml-1">fix now</span>
</p>
}
title="Connected devices"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Apps Permissions"
startContent={<ShieldSecurityIcon />}
subtitle="3 apps have read permissions"
title="Apps Permissions"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Pending tasks"
classNames={{ subtitle: "text-warning" }}
startContent={<InfoIcon className="text-warning" />}
subtitle="Complete your profile"
title="Pending tasks"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="4"
aria-label="Card expired"
classNames={{ subtitle: "text-danger" }}
startContent={<InvalidCardIcon className="text-danger" />}
subtitle="Please, update now"
title={
<p className="flex gap-1 items-center">
Card expired
<span className="text-default-400 text-small">*4812</span>
</p>
}
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./custom-styles.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/MonitorMobileIcon.jsx": MonitorMobileIcon,
"/ShieldSecurityIcon.jsx": ShieldSecurityIcon,
"/InfoIcon.jsx": InfoIcon,
"/InvalidCardIcon.jsx": InvalidCardIcon,
};
export default {

39
apps/docs/content/components/accordion/default-expanded-keys.raw.jsx Normal file
View File

@ -0,0 +1,39 @@
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 defaultExpandedKeys={["2"]}>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="Press to expand"
title="Accordion 1"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Accordion 3"
subtitle="Press to expand"
title="Accordion 3"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}

30
apps/docs/content/components/accordion/default-expanded-keys.ts
View File

@ -1,32 +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 defaultExpandedKeys={["2"]}>
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./default-expanded-keys.raw.jsx?raw";
const react = {
"/App.jsx": App,

39
apps/docs/content/components/accordion/disabled-keys.raw.jsx Normal file
View File

@ -0,0 +1,39 @@
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 disabledKeys={["2"]}>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="Press to expand"
title="Accordion 1"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Accordion 3"
subtitle="Press to expand"
title="Accordion 3"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}

30
apps/docs/content/components/accordion/disabled-keys.ts
View File

@ -1,32 +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 disabledKeys={["2"]}>
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./disabled-keys.raw.jsx?raw";
const react = {
"/App.jsx": App,

98
apps/docs/content/components/accordion/indicator-function.raw.jsx Normal file
View File

@ -0,0 +1,98 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
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 defaultExpandedKeys={["theme"]}>
<AccordionItem
key="theme"
aria-label="Theme"
indicator={({isOpen}) => (isOpen ? <SunIcon /> : <MoonIcon />)}
title="Theme"
>
{defaultContent}
</AccordionItem>
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
{defaultContent}
</AccordionItem>
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
{defaultContent}
</AccordionItem>
</Accordion>
);
}

115
apps/docs/content/components/accordion/indicator-function.ts
View File

@ -1,120 +1,7 @@
const AnchorIcon = `export const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);`;
const MoonIcon = `export const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);`;
const SunIcon = `export const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);`;
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
import {AnchorIcon} from "./AnchorIcon";
import {MoonIcon} from "./MoonIcon";
import {SunIcon} from "./SunIcon";
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 defaultExpandedKeys={["theme"]}>
<AccordionItem
key="theme"
aria-label="Theme"
indicator={({ isOpen }) => (isOpen ? <SunIcon /> : <MoonIcon />)}
title="Theme"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="anchor"
aria-label="Anchor"
indicator={<AnchorIcon />}
title="Anchor"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="sun"
aria-label="Sun"
indicator={<SunIcon />}
title="Sun"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./indicator-function.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/AnchorIcon.jsx": AnchorIcon,
"/MoonIcon.jsx": MoonIcon,
"/SunIcon.jsx": SunIcon,
};
export default {

93
apps/docs/content/components/accordion/indicator.raw.jsx Normal file
View File

@ -0,0 +1,93 @@
import {Accordion, AccordionItem} from "@nextui-org/react";
const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);
const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);
const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);
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>
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
{defaultContent}
</AccordionItem>
<AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
{defaultContent}
</AccordionItem>
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
{defaultContent}
</AccordionItem>
</Accordion>
);
}

100
apps/docs/content/components/accordion/indicator.ts
View File

@ -1,105 +1,7 @@
const AnchorIcon = `export const AnchorIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
{...props}
>
<path
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
fill="currentColor"
/>
<path
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
fill="currentColor"
/>
</svg>
);`;
const MoonIcon = `export const MoonIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
/>
</svg>
);`;
const SunIcon = `export const SunIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 512 512"
width="24"
{...props}
>
<path
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
<circle
cx={256}
cy={256}
fill="none"
r={80}
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={32}
/>
</svg>
);`;
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
import {AnchorIcon} from './AnchorIcon';
import {MoonIcon} from './MoonIcon';
import {SunIcon} from './SunIcon';
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>
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
{defaultContent}
</AccordionItem>
<AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
{defaultContent}
</AccordionItem>
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./indicator.raw.jsx?raw";
const react = {
"/App.jsx": App,
"/AnchorIcon.jsx": AnchorIcon,
"/MoonIcon.jsx": MoonIcon,
"/SunIcon.jsx": SunIcon,
};
export default {

20
apps/docs/content/components/accordion/light-variant.raw.jsx Normal file
View File

@ -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="light">
<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>
);
}

21
apps/docs/content/components/accordion/light-variant.ts
View File

@ -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="light">
<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 "./light-variant.raw.jsx?raw";
const react = {
"/App.jsx": App,

20
apps/docs/content/components/accordion/multiple.raw.jsx Normal file
View File

@ -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 selectionMode="multiple">
<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>
);
}

21
apps/docs/content/components/accordion/multiple.ts
View File

@ -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 selectionMode="multiple">
<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 "./multiple.raw.jsx?raw";
const react = {
"/App.jsx": App,

20
apps/docs/content/components/accordion/shadow-variant.raw.jsx Normal file
View File

@ -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="shadow">
<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>
);
}

21
apps/docs/content/components/accordion/shadow-variant.ts
View File

@ -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="shadow">
<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 "./shadow-variant.raw.jsx?raw";
const react = {
"/App.jsx": App,

20
apps/docs/content/components/accordion/splitted-variant.raw.jsx Normal file
View File

@ -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="splitted">
<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>
);
}

21
apps/docs/content/components/accordion/splitted-variant.ts
View File

@ -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="splitted">
<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 "./splitted-variant.raw.jsx?raw";
const react = {
"/App.jsx": App,

63
apps/docs/content/components/accordion/start-content.raw.jsx Normal file
View File

@ -0,0 +1,63 @@
import {Accordion, AccordionItem, Avatar} 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 selectionMode="multiple">
<AccordionItem
key="1"
aria-label="Chung Miller"
startContent={
<Avatar
isBordered
color="primary"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
}
subtitle="4 unread messages"
title="Chung Miller"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Janelle Lenard"
startContent={
<Avatar
isBordered
color="success"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
}
subtitle="3 incompleted steps"
title="Janelle Lenard"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Zoey Lang"
startContent={
<Avatar
isBordered
color="warning"
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
/>
}
subtitle={
<p className="flex">
2 issues to<span className="text-primary ml-1">fix now</span>
</p>
}
title="Zoey Lang"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}

64
apps/docs/content/components/accordion/start-content.ts
View File

@ -1,66 +1,4 @@
const App = `import {Accordion, AccordionItem, Avatar} 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 selectionMode="multiple">
<AccordionItem
key="1"
aria-label="Chung Miller"
startContent={
<Avatar
isBordered
color="primary"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
}
subtitle="4 unread messages"
title="Chung Miller"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Janelle Lenard"
startContent={
<Avatar
isBordered
color="success"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
}
subtitle="3 incompleted steps"
title="Janelle Lenard"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Zoey Lang"
startContent={
<Avatar
isBordered
color="warning"
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
/>
}
subtitle={
<p className="flex">
2 issues to<span className="text-primary ml-1">fix now</span>
</p>
}
title="Zoey Lang"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./start-content.raw.jsx?raw";
const react = {
"/App.jsx": App,

39
apps/docs/content/components/accordion/subtitle.raw.jsx Normal file
View File

@ -0,0 +1,39 @@
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>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="Press to expand"
title="Accordion 1"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Accordion 3"
subtitle="Press to expand"
title="Accordion 3"
>
{defaultContent}
</AccordionItem>
</Accordion>
);
}

30
apps/docs/content/components/accordion/subtitle.ts
View File

@ -1,32 +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>
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
);
}`;
import App from "./subtitle.raw.jsx?raw";
const react = {
"/App.jsx": App,

20
apps/docs/content/components/accordion/usage.raw.jsx Normal file
View File

@ -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>
<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>
);
}

21
apps/docs/content/components/accordion/usage.ts
View File

@ -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>
<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 "./usage.raw.jsx?raw";
const react = {
"/App.jsx": App,

67
apps/docs/content/components/accordion/variant.raw.jsx Normal file
View File

@ -0,0 +1,67 @@
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 (
<div className="w-full grid grid-cols-12 gap-4">
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Light</h3>
<Accordion variant="light">
<AccordionItem key="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Bordered</h3>
<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>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Shadow</h3>
<Accordion variant="shadow">
<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>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Splitted</h3>
<Accordion fullWidth variant="splitted">
<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>
</div>
</div>
);
}

68
apps/docs/content/components/accordion/variants.ts
View File

@ -1,70 +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 (
<div className="w-full grid grid-cols-12 gap-4">
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Light</h3>
<Accordion variant="light">
<AccordionItem key="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Bordered</h3>
<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>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Shadow</h3>
<Accordion variant="shadow">
<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>
</div>
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
<h3>Splitted</h3>
<Accordion variant="splitted" fullWidth>
<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>
</div>
</div>
);
}`;
import App from "./variants.raw.jsx?raw";
const react = {
"/App.jsx": App,

31
apps/docs/contentlayer.config.js
View File

@ -1,10 +1,11 @@
import {defineDocumentType, defineNestedType, makeSource} from "contentlayer/source-files";
import {defineDocumentType, defineNestedType, makeSource} from "contentlayer2/source-files";
import remarkGfm from "remark-gfm";
import rehypeSlug from "rehype-slug";
import {visit} from "unist-util-visit";
import RawPlugin from 'esbuild-plugin-raw'
import pluginCodeBlock from "./plugins/codeBlock";
/** @type {import('contentlayer/source-files').ComputedFields} */
/** @type {import('contentlayer2/source-files').ComputedFields} */
const computedFields = {
slug: {
type: "string",
@ -15,8 +16,7 @@ const computedFields = {
resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
},
url: {type: "string", resolve: (doc) => `/${doc._raw.flattenedPath}`},
}
};
export const Doc = defineDocumentType(() => ({
name: "Doc",
@ -27,10 +27,9 @@ export const Doc = defineDocumentType(() => ({
description: {type: "string", required: false},
date: {type: "date", required: false},
},
computedFields
computedFields,
}));
const AuthorProperties = defineNestedType(() => ({
name: "AuthorProperties",
fields: {
@ -38,7 +37,7 @@ const AuthorProperties = defineNestedType(() => ({
link: {type: "string", required: false},
avatar: {type: "string", required: false},
username: {type: "string", required: false},
}
},
}));
export const BlogPost = defineDocumentType(() => ({
@ -50,8 +49,8 @@ export const BlogPost = defineDocumentType(() => ({
description: {type: "string", required: true},
date: {type: "date", required: true},
draft: {type: "boolean", required: false},
tags: { type: 'list', of: { type: 'string' } },
author: {type: "nested",of: AuthorProperties, required: false},
tags: {type: "list", of: {type: "string"}},
author: {type: "nested", of: AuthorProperties, required: false},
image: {type: "string", required: false},
},
computedFields: {
@ -63,7 +62,7 @@ export const BlogPost = defineDocumentType(() => ({
const date = new Date(doc.date);
const options = {year: "numeric", month: "long", day: "numeric"};
return date.toLocaleDateString("en-US", options);
}
},
},
// add https://nextui.org to the image path
imageAsParams: {
@ -73,9 +72,9 @@ export const BlogPost = defineDocumentType(() => ({
if (image) {
return `https://nextui.org${image}`;
}
}
}
}
},
},
},
}));
export default makeSource({
@ -83,6 +82,12 @@ export default makeSource({
documentTypes: [Doc, BlogPost],
mdx: {
remarkPlugins: [remarkGfm, pluginCodeBlock],
esbuildOptions(options) {
options.plugins ||= [];
options.plugins.unshift(RawPlugin());
return options;
},
rehypePlugins: [
rehypeSlug,
() => (tree) => {

9
apps/docs/global.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module "*.tsx?raw" {
const content: string;
export default content;
}
declare module "*.jsx?raw" {
const content: string;
export default content;
}

2
apps/docs/libs/contentlayer.ts
View File

@ -1,4 +1,4 @@
import type {Document, MDX} from "contentlayer/core";
import type {Document, MDX} from "contentlayer2/core";
import {slug} from "github-slugger";

4
apps/docs/libs/docs/page.ts
View File

@ -1,6 +1,6 @@
import type {MDX} from "contentlayer/core";
import type {MDX} from "contentlayer2/core";
import * as Local from "contentlayer/source-files";
import * as Local from "contentlayer2/source-files";
import {TAG, FORCE_TAG, CONTENT_PATH, ASSETS_PATH} from "./config";

14
apps/docs/libs/rehype-highlight-line.js
View File

@ -1,8 +1,8 @@
// Inspired by https://github.dev/modulz/stitches-site
const hastToHtml = require("hast-util-to-html");
const unified = require("unified");
const parse = require("rehype-parse");
import {unified} from "unified";
import {toHtml} from "hast-util-to-html";
import rehypeParse from "rehype-parse";
const lineNumberify = function lineNumberify(ast, lineNum = 1) {
let lineNumber = lineNum;
@ -101,7 +101,7 @@ const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g
const applyMultilineFix = function (ast) {
// AST to HTML
let html = hastToHtml(ast);
let html = toHtml(ast);
// Fix JSX issue
html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
@ -109,14 +109,14 @@ const applyMultilineFix = function (ast) {
);
// HTML to AST
const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(html);
const hast = unified().use(rehypeParse, {emitParseErrors: true, fragment: true}).parse(html);
return hast.children;
};
module.exports = function (ast, lines) {
export default function (ast, lines) {
const formattedAst = applyMultilineFix(ast);
const numbered = lineNumberify(formattedAst).nodes;
return wrapLines(numbered, lines);
};
}

14
apps/docs/libs/rehype-highlight-word.js
View File

@ -1,13 +1,13 @@
const hastToHtml = require("hast-util-to-html");
const unified = require("unified");
const parse = require("rehype-parse");
import {unified} from "unified";
import {toHtml} from "hast-util-to-html";
import rehypeParse from "rehype-parse";
const CALLOUT = /__(.*?)__/g;
module.exports = (code) => {
const html = hastToHtml(code);
export default function (code) {
const html = toHtml(code);
const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(result);
const hast = unified().use(rehypeParse, {emitParseErrors: true, fragment: true}).parse(result);
return hast.children;
};
}

2
apps/docs/next.config.js
View File

@ -1,4 +1,4 @@
const withContentlayer = require("next-contentlayer").withContentlayer;
const withContentlayer = require("next-contentlayer2").withContentlayer;
/** @type {import('next').NextConfig} */
const nextConfig = {

33
apps/docs/package.json
View File

@ -3,12 +3,12 @@
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "rimraf .contentlayer && concurrently \"contentlayer dev\" \"next dev\"",
"build": "contentlayer build && next build",
"dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev\"",
"build": "contentlayer2 build && next build",
"build:analyze": "ANALYZE=true next build",
"start": "next start",
"lint": "next lint",
"typecheck": "contentlayer build && tsc --noEmit",
"typecheck": "contentlayer2 build && tsc --noEmit",
"preinstall": "node preinstall.js",
"build:sponsors": "tsx scripts/build-sponsors.ts",
"update:search-meta": "tsx scripts/update-search-meta.ts",
@ -53,19 +53,19 @@
"canvas-confetti": "^1.9.2",
"cmdk": "^0.2.0",
"color2k": "^2.0.2",
"contentlayer": "^0.3.4",
"contentlayer2": "^0.5.1",
"date-fns": "^2.30.0",
"framer-motion": "^11.1.7",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"hast-util-to-html": "7.1.2",
"hast-util-to-html": "9.0.3",
"lodash": "^4.17.21",
"marked": "^5.1.0",
"match-sorter": "^6.3.1",
"mini-svg-data-uri": "^1.4.3",
"mitt": "3.0.0",
"next": "13.5.1",
"next-contentlayer": "^0.3.4",
"next-contentlayer2": "^0.5.1",
"next-themes": "^0.2.1",
"nprogress": "^0.2.0",
"parse-numeric-range": "1.2.0",
@ -78,22 +78,20 @@
"react-multi-ref": "^1.0.1",
"react-wrap-balancer": "^1.0.0",
"refractor": "3.3.1",
"rehype": "11.0.0",
"rehype-parse": "7.0.1",
"rehype-pretty-code": "^0.10.0",
"rehype-slug": "^5.1.0",
"remark": "^14.0.3",
"remark-autolink-headings": "^6.0.1",
"remark-gfm": "^3.0.1",
"remark-slug": "^6.0.0",
"rehype": "13.0.2",
"rehype-parse": "9.0.1",
"rehype-pretty-code": "^0.14.0",
"rehype-slug": "^6.0.0",
"remark": "^15.0.1",
"remark-gfm": "^4.0.0",
"rss": "^1.2.2",
"scroll-into-view-if-needed": "3.0.10",
"sharp": "^0.32.1",
"shelljs": "^0.8.4",
"swr": "^2.2.1",
"tailwind-variants": "^0.1.20",
"unified": "^9.2.2",
"unist-util-visit": "^4.1.2",
"unified": "^11.0.5",
"unist-util-visit": "^5.0.0",
"usehooks-ts": "^2.9.1",
"zustand": "^4.3.8"
},
@ -119,6 +117,7 @@
"algoliasearch": "^4.10.3",
"autoprefixer": "^10.4.14",
"dotenv": "^16.0.1",
"esbuild-plugin-raw": "0.1.8",
"eslint-config-next": "^13.5.1",
"markdown-toc": "^1.2.0",
"next-sitemap": "^4.1.8",
@ -127,7 +126,7 @@
"prettier": "^2.7.1",
"tailwindcss": "^3.4.0",
"tsx": "^3.8.2",
"typescript": "^4.9.5",
"typescript": "^5.5.0",
"uuid": "^8.3.2"
}
}

6
apps/docs/tsconfig.json
View File

@ -5,7 +5,7 @@
"paths": {
"@/*": ["./*"],
"tailwind-variants": ["./node_modules/tailwind-variants"],
"contentlayer/generated": ["./.contentlayer/generated"]
"contentlayer2/generated": ["./.contentlayer/generated"]
},
"allowJs": true,
"forceConsistentCasingInFileNames": true,
@ -23,8 +23,10 @@
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.jsx",
".next/types/**/*.ts",
".contentlayer/generated"
".contentlayer/generated",
"global.d.ts"
],
"exclude": ["node_modules", "next-redirect.js"]
}

6
packages/hooks/use-aria-multiselect/src/use-multiselect.ts
View File

@ -11,7 +11,7 @@ import {AriaListBoxOptions} from "@react-aria/listbox";
import {useMenuTrigger} from "@react-aria/menu";
import {ListKeyboardDelegate, useTypeSelect} from "@react-aria/selection";
import {chain, filterDOMProps, mergeProps, useId} from "@react-aria/utils";
import {FocusEvent, HTMLAttributes, RefObject, useMemo} from "react";
import {FocusEvent, HTMLAttributes, RefObject, useMemo, Key} from "react";
import {ValidationResult} from "@react-types/shared";
export type MultiSelectProps<T> = MultiSelectStateProps<T>;
@ -64,7 +64,7 @@ export function useMultiSelect<T>(
const key =
state.selectedKeys.size > 0
? delegate.getKeyAbove(state.selectedKeys.values().next().value)
? delegate.getKeyAbove(state.selectedKeys.values().next().value as Key)
: delegate.getFirstKey();
if (key) {
@ -78,7 +78,7 @@ export function useMultiSelect<T>(
const key =
state.selectedKeys.size > 0
? delegate.getKeyBelow(state.selectedKeys.values().next().value)
? delegate.getKeyBelow(state.selectedKeys.values().next().value as Key)
: delegate.getFirstKey();
if (key) {

2223
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff