add: Examples Docs

app/(docs)/docs/[[...slug]]/page.tsx

@@ -1,18 +1,21 @@
-import { source } from "@/lib/source";
-// import { AutoTypeTable } from "fumadocs-typescript/ui";
 import ComponentPreview from "@/components/component-preview";
+import MarkdownAccordion from "@/components/markdown-accordion";
 import { Button } from "@/components/ui/button";
+import { source } from "@/lib/source";
+import { cn } from "@/lib/utils";
+import { findNeighbour } from "fumadocs-core/server";
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
 import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
 import { ImageZoom } from "fumadocs-ui/components/image-zoom";
+import { Step, Steps } from "fumadocs-ui/components/steps";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { TypeTable } from "fumadocs-ui/components/type-table";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
 import { SquareArrowOutUpRight } from "lucide-react";
 import { Metadata } from "next";
 import { Link } from "next-view-transitions";
 import { notFound } from "next/navigation";
-import { cn } from "@/lib/utils";
-import { TypeTable } from "fumadocs-ui/components/type-table";
 
 export async function generateStaticParams() {
   return source.generateParams();
@@ -49,12 +52,17 @@ export default async function DocIndividualPage(props: { params: Promise<{ slug?
           : {}
       }
       full={page.data.full}
-      article={{ className: "max-w-[800px] mt-4" }}
+      article={{ className: "mx-auto max-w-[800px] mt-4" }}
     >
       <div className="mb-8 space-y-3 lg:space-y-4">
         <DocsTitle className="font-semibold">{page.data.title}</DocsTitle>
         <div className={cn(referenceLinks && "space-y-2.5")}>
-          <DocsDescription className={cn("mb-0 text-base")}>{page.data.description}</DocsDescription>
+          <div className="space-y-1">
+            <DocsDescription className={cn("mb-0 text-base")}>{page.data.description}</DocsDescription>
+            {page.data?.subdescription && (
+              <DocsDescription className={cn("mb-0 text-base")}>{page.data?.subdescription}</DocsDescription>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             {referenceLinks && referenceLinks.dialog && (
               <Link
@@ -79,11 +87,15 @@ export default async function DocIndividualPage(props: { params: Promise<{ slug?
           </div>
         </div>
       </div>
-
       <DocsBody>
         <MDXContent
           components={{
             ...defaultMdxComponents,
+            Accordions,
+            Accordion,
+            MarkdownAccordion,
+            Steps,
+            Step,
             Tab,
             Tabs,
             a: (props) => <Link target={props.href.startsWith("https") ? "_blank" : "_self"} {...props} />,
@@ -98,7 +110,9 @@ export default async function DocIndividualPage(props: { params: Promise<{ slug?
             ),
             pre: ({ ref, children, ...props }) => (
               <CodeBlock ref={ref} {...props}>
-                <Pre className="*:border-none *:bg-transparent *:py-[3px]">{children}</Pre>
+                <Pre className="*:border-none *:bg-transparent *:py-[3px] has-[[data-slot=tabs]]:p-0 has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0">
+                  {children}
+                </Pre>
               </CodeBlock>
             ),
             TypeTable,
@@ -107,6 +121,18 @@ export default async function DocIndividualPage(props: { params: Promise<{ slug?
           }}
         />
       </DocsBody>
+      {/* <Cards>
+        <Card title="" href={neighbour.previous?.url}>
+          <h2 className="flex items-center gap-0.5 text-foreground">
+            <ChevronLeft size={16} />
+            Previous
+          </h2>
+          {neighbour.previous?.name}
+        </Card>
+        <Card title="Next >" href={neighbour.next?.url}>
+          {neighbour.next?.name}
+        </Card>
+      </Cards> */}
     </DocsPage>
   );
 }

app/iphone-preview/vaul/default/controlled/page.tsx

@@ -0,0 +1,9 @@
+import NativeModalVaulDefaultControlledDemo from "@/components/native-modal/examples/vaul/default/controlled-demo";
+
+export default function VaulControlledExample() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <NativeModalVaulDefaultControlledDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/default/page.tsx

@@ -0,0 +1,10 @@
+import NativeModalVaulDefaultDemo from "@/components/native-modal/examples/vaul/default/default-demo";
+import React from "react";
+
+export default function VaulDefaultExample() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <NativeModalVaulDefaultDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/default/scrollable/page.tsx

@@ -0,0 +1,9 @@
+import NativeModalVaulDefaultScrollableDemo from "@/components/native-modal/examples/vaul/default/scrollable-demo";
+
+export default function VaulScrollableExample() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <NativeModalVaulDefaultScrollableDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/default/side-drawer/page.tsx

@@ -0,0 +1,9 @@
+import VaulSideDrawerDefaultDemo from "@/components/native-modal/examples/vaul/default/side-drawer-demo";
+
+export default function VaulSideDrawerExample() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulSideDrawerDefaultDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/input/no-repositioning/page.tsx

@@ -0,0 +1,10 @@
+import VaulNoRepositioningDemo from "@/components/native-modal/examples/vaul/inputs/no-repositioning";
+import React from "react";
+
+export default function NoRepositioningDemoPage() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulNoRepositioningDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/input/page.tsx

@@ -0,0 +1,10 @@
+import VaulInputDefaultDemo from "@/components/native-modal/examples/vaul/inputs/default";
+import React from "react";
+
+export default function VaulInputDefaultDemoPage() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulInputDefaultDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/other/non-dismissible/page.tsx

@@ -0,0 +1,10 @@
+import VaulNonDismissiableDemo from "@/components/native-modal/examples/vaul/other/non-dismissiable";
+import React from "react";
+
+export default function VaulNonDismissibleDemo() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulNonDismissiableDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/other/page.tsx

@@ -0,0 +1,10 @@
+import VaulOtherDemo from "@/components/native-modal/examples/vaul/other/default";
+import React from "react";
+
+export default function VaulOtherDefaultDemo() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulOtherDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/snap-points/custom-fade-index/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import VaulCustomFadeIndexDemo from "@/components/native-modal/examples/vaul/snap-points/custom-fade-index";
+
+export default function CustomFadeIndexMobileDemoPage() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulCustomFadeIndexDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/snap-points/interact-with-background/page.tsx

@@ -0,0 +1,10 @@
+import InteractWithBackgroundVaulDemo from "@/components/native-modal/examples/vaul/snap-points/interact-with-background";
+import React from "react";
+
+export default function SnapPointsInteractWithBackgroundMobileDemo() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <InteractWithBackgroundVaulDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/snap-points/page.tsx

@@ -0,0 +1,10 @@
+import VaulSnapPointsDefaultDemo from "@/components/native-modal/examples/vaul/snap-points/default";
+import React from "react";
+
+export default function SnapPointsDefaultDemo() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulSnapPointsDefaultDemo />
+    </main>
+  );
+}

app/iphone-preview/vaul/snap-points/snap-to-sequential-points/page.tsx

@@ -0,0 +1,10 @@
+import VaulSnapToSequentialPointsDemo from "@/components/native-modal/examples/vaul/snap-points/snap-to-sequential-points";
+import React from "react";
+
+export default function SnapToSequentialPointsMobileDemoPage() {
+  return (
+    <main className="grid min-h-dvh place-content-center">
+      <VaulSnapToSequentialPointsDemo />
+    </main>
+  );
+}

components/component-preview.tsx

@@ -12,6 +12,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string;
   align?: "center" | "start" | "end";
   hideCode?: boolean;
+  mobilePreviewLink: string;
 }
 
 interface Code extends React.ReactElement {
@@ -25,6 +26,7 @@ export default function ComponentPreview({
   className,
   align = "center",
   hideCode = false,
+  mobilePreviewLink,
   ...props
 }: ComponentPreviewProps) {
   const Codes = React.Children.toArray(children) as Code[];
@@ -69,7 +71,7 @@ export default function ComponentPreview({
         </div>
         <TabsContent value="preview" className="relative rounded-md border bg-border/50">
           <div className="absolute right-4 top-4 max-lg:hidden">
-            <MobilePreview />
+            <MobilePreview previewLink={mobilePreviewLink} />
           </div>
           <div
             className={cn("preview flex min-h-[350px] w-full justify-center p-10", {

components/markdown-accordion.tsx

@@ -0,0 +1,18 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { BadgeInfo } from "lucide-react";
+import { PropsWithChildren, ReactNode } from "react";
+
+export default function MarkdownAccordion({ children, title }: { children: ReactNode; title: string }) {
+  return (
+    <Accordion type="single" collapsible className="rounded-lg bg-fd-card px-4 shadow">
+      <AccordionItem value="if-you-haven't-installed-shadcn" className="border-none">
+        <AccordionTrigger className="hover:no-underline">
+          <div className="flex items-center gap-2">
+            <BadgeInfo size={20} className="fill-blue-500 text-fd-card" /> {title}
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>{children}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

components/mobile-preview.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import IphoneMockup from "@/components/iphone-mockup";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useMediaQuery from "@/hooks/use-media-query";
@@ -7,9 +8,10 @@ import { Smartphone } from "lucide-react";
 import { useState } from "react";
 import { Drawer } from "vaul";
 
-export default function MobilePreview() {
+export default function MobilePreview({ previewLink }: { previewLink: string }) {
   const [isOpen, setIsOpen] = useState(false);
   const isRequiredHeight = useMediaQuery("(min-height: 750px)");
+  const preview = `${process.env.NEXT_PUBLIC_BASE_URL}/iphone-preview${previewLink}`;
 
   return (
     <Drawer.Root open={isOpen} onOpenChange={setIsOpen} direction="right" modal={false}>
@@ -59,7 +61,7 @@ export default function MobilePreview() {
           <div className="flex size-full grow flex-col justify-center">
             <IphoneMockup fullScreen className="h-full [&_div[data-canvas]]:bg-border/50">
               <div className="flex h-[calc(100%-(-1px))] flex-col justify-between">
-                <iframe src="http://localhost:3000/iphone-preview/vaul/default" className="size-full border-none" />
+                <iframe src={preview} className="size-full border-none" />
               </div>
             </IphoneMockup>
           </div>

components/native-modal/examples/vaul/default/controlled-demo.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  NativeModal,
+  NativeModalTrigger,
+  NativeModalContent,
+  NativeModalHeader,
+  NativeModalTitle,
+  NativeModalDescription,
+  NativeModalFooter,
+} from "@/components/native-modal";
+
+export default function NativeModalVaulDefaultControlledDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <NativeModal open={open} onOpenChange={setOpen}>
+      <NativeModalTrigger asChild>
+        <Button variant="outline" className="h-12 rounded-full px-6">
+          Vaul Default Controlled Demo
+        </Button>
+      </NativeModalTrigger>
+
+      <NativeModalContent>
+        <div className="mx-auto mb-2 max-w-md bg-fd-background">
+          <NativeModalHeader className="gap-4 px-6 text-left sm:gap-4 sm:pt-6">
+            <NativeModalTitle className="text-base font-medium leading-6 tracking-normal">
+              A controlled drawer.
+            </NativeModalTitle>
+            <NativeModalDescription className="space-y-2 max-md:text-base">
+              <span className="block">
+                This means that the drawer no longer manages its own state. Instead, you can control it programmatically
+                from the outside.
+              </span>
+              <span className="block">
+                But you can still let the drawer help you a bit by passing the `onOpenChange` prop. This way, the drawer
+                will change your open state when the user clicks outside of it, or when they press the escape key for
+                example.
+              </span>
+            </NativeModalDescription>
+          </NativeModalHeader>
+        </div>
+
+        <NativeModalFooter className="border-t border-border bg-secondary/25 px-6 dark:bg-secondary/50 sm:pb-4 sm:pt-4">
+          <div className="mx-auto flex w-full max-w-md justify-end gap-6">
+            <a
+              className="gap-0.25 flex items-center text-xs text-secondary-foreground"
+              href="https://github.com/SameerJS6/native-modal"
+              target="_blank"
+            >
+              GitHub
+              <svg
+                fill="none"
+                height="16"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="16"
+                aria-hidden="true"
+                className="ml-1 h-3 w-3"
+              >
+                <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
+                <path d="M15 3h6v6"></path>
+                <path d="M10 14L21 3"></path>
+              </svg>
+            </a>
+            <a
+              className="gap-0.25 flex items-center text-xs text-secondary-foreground"
+              href="https://twitter.com/sameerjs6"
+              target="_blank"
+            >
+              Twitter
+              <svg
+                fill="none"
+                height="16"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="16"
+                aria-hidden="true"
+                className="ml-1 h-3 w-3"
+              >
+                <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
+                <path d="M15 3h6v6"></path>
+                <path d="M10 14L21 3"></path>
+              </svg>
+            </a>
+          </div>
+        </NativeModalFooter>
+      </NativeModalContent>
+    </NativeModal>
+  );
+}