diff --git a/.eslintrc.ts b/.esli similarity index 100% rename from .eslintrc.ts rename to .esli diff --git a/docs/www/.eslintignore b/docs/www/.eslintignore new file mode 100644 index 0000000..7e7767f --- /dev/null +++ b/docs/www/.eslintignore @@ -0,0 +1,3 @@ +node_modules/ +build/ +./**.tsx diff --git a/docs/www/actions/edit-in-v0.ts b/docs/www/actions/edit-in-v0.ts index d7052d4..449b17c 100644 --- a/docs/www/actions/edit-in-v0.ts +++ b/docs/www/actions/edit-in-v0.ts @@ -1,8 +1,8 @@ -"use server" +'use server' -import { track } from "@vercel/analytics/server" +import { track } from '@vercel/analytics/server' -const EDIT_IN_V0_SOURCE = "ui.shadcn.com" +const EDIT_IN_V0_SOURCE = 'ui.shadcn.com' export async function editInV0({ name, @@ -16,7 +16,7 @@ export async function editInV0({ code: string }) { try { - await track("edit_in_v0", { + await track('edit_in_v0', { name, description, style, @@ -24,25 +24,24 @@ export async function editInV0({ // Replace "use client" in the code. // v0 will handle this for us. - code = code.replace(`"use client"`, "") + code = code.replace(`"use client"`, '') const response = await fetch(`${process.env.V0_URL}/api/edit`, { - method: "POST", + method: 'POST', body: JSON.stringify({ description, code, source: EDIT_IN_V0_SOURCE }), headers: { - "x-v0-edit-secret": process.env.V0_EDIT_SECRET!, - "x-vercel-protection-bypass": - process.env.DEPLOYMENT_PROTECTION_BYPASS || "not-set", - "Content-Type": "application/json", + 'x-v0-edit-secret': process.env.V0_EDIT_SECRET!, + 'x-vercel-protection-bypass': process.env.DEPLOYMENT_PROTECTION_BYPASS || 'not-set', + 'Content-Type': 'application/json', }, }) if (!response.ok) { if (response.status === 403) { - throw new Error("Unauthorized") + throw new Error('Unauthorized') } - throw new Error("Something went wrong. Please try again later.") + throw new Error('Something went wrong. Please try again later.') } const result = await response.json() diff --git a/docs/www/app/(app)/docs/[[...slug]]/page.tsx b/docs/www/app/(app)/docs/[[...slug]]/page.tsx index 20a69ab..59cfd98 100644 --- a/docs/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/docs/www/app/(app)/docs/[[...slug]]/page.tsx @@ -1,20 +1,20 @@ -import { notFound } from "next/navigation" -import { allDocs } from "contentlayer/generated" +import { notFound } from 'next/navigation' +import { allDocs } from 'contentlayer/generated' -import "@/styles/mdx.css" -import type { Metadata } from "next" -import Link from "next/link" -import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons" -import Balancer from "react-wrap-balancer" +import '@/styles/mdx.css' +import type { Metadata } from 'next' +import Link from 'next/link' +import { ChevronRightIcon, ExternalLinkIcon } from '@radix-ui/react-icons' +import Balancer from 'react-wrap-balancer' -import { siteConfig } from "@/config/site" -import { getTableOfContents } from "@/lib/toc" -import { absoluteUrl, cn } from "@/lib/utils" -import { Mdx } from "@/components/mdx-components" -import { DocsPager } from "@/components/pager" -import { DashboardTableOfContents } from "@/components/toc" -import { badgeVariants } from "@/registry/default/ui/" -import { ScrollArea } from "@/registry/default/ui/" +import { siteConfig } from '@/config/site' +import { getTableOfContents } from '@/lib/toc' +import { absoluteUrl, cn } from '@/lib/utils' +import { Mdx } from '@/components/mdx-components' +import { DocsPager } from '@/components/pager' +import { DashboardTableOfContents } from '@/components/toc' +import { badgeVariants } from '@/registry/default/ui/' +import { ScrollArea } from '@/registry/default/ui/' interface DocPageProps { params: { @@ -23,7 +23,7 @@ interface DocPageProps { } async function getDocFromParams({ params }: DocPageProps) { - const slug = params.slug?.join("/") || "" + const slug = params.slug?.join('/') || '' const doc = allDocs.find((doc) => doc.slugAsParams === slug) if (!doc) { @@ -33,9 +33,7 @@ async function getDocFromParams({ params }: DocPageProps) { return doc } -export async function generateMetadata({ - params, -}: DocPageProps): Promise { +export async function generateMetadata({ params }: DocPageProps): Promise { const doc = await getDocFromParams({ params }) if (!doc) { @@ -48,7 +46,7 @@ export async function generateMetadata({ openGraph: { title: doc.title, description: doc.description, - type: "article", + type: 'article', url: absoluteUrl(doc.slug), images: [ { @@ -60,20 +58,18 @@ export async function generateMetadata({ ], }, twitter: { - card: "summary_large_image", + card: 'summary_large_image', title: doc.title, description: doc.description, images: [siteConfig.ogImage], - creator: "@shadcn", + creator: '@shadcn', }, } } -export async function generateStaticParams(): Promise< - DocPageProps["params"][] -> { +export async function generateStaticParams(): Promise { return allDocs.map((doc) => ({ - slug: doc.slugAsParams.split("/"), + slug: doc.slugAsParams.split('/'), })) } @@ -95,9 +91,7 @@ export default async function DocPage({ params }: DocPageProps) {
{doc.title}
-

- {doc.title} -

+

{doc.title}

{doc.description && (

{doc.description} @@ -111,7 +105,7 @@ export default async function DocPage({ params }: DocPageProps) { href={doc.links.doc} target="_blank" rel="noreferrer" - className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} + className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')} > Docs @@ -122,7 +116,7 @@ export default async function DocPage({ params }: DocPageProps) { href={doc.links.api} target="_blank" rel="noreferrer" - className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} + className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')} > API Reference diff --git a/docs/www/app/(app)/docs/layout.tsx b/docs/www/app/(app)/docs/layout.tsx index 820f800..98ed405 100644 --- a/docs/www/app/(app)/docs/layout.tsx +++ b/docs/www/app/(app)/docs/layout.tsx @@ -1,6 +1,6 @@ -import { docsConfig } from "@/config/docs" -import { DocsSidebarNav } from "@/components/sidebar-nav" -import { ScrollArea } from "@/registry/default/ui/" +import { docsConfig } from '@/config/docs' +import { DocsSidebarNav } from '@/components/sidebar-nav' +import { ScrollArea } from '@/registry/default/ui/' interface DocsLayoutProps { children: React.ReactNode diff --git a/docs/www/app/(app)/layout.tsx b/docs/www/app/(app)/layout.tsx index 3efb570..7f787ec 100644 --- a/docs/www/app/(app)/layout.tsx +++ b/docs/www/app/(app)/layout.tsx @@ -1,5 +1,5 @@ -import { SiteFooter } from "@/components/site-footer" -import { SiteHeader } from "@/components/site-header" +import { SiteFooter } from '@/components/site-footer' +import { SiteHeader } from '@/components/site-header' interface AppLayoutProps { children: React.ReactNode diff --git a/docs/www/app/(app)/page.tsx b/docs/www/app/(app)/page.tsx index 5b4e9a6..038879f 100644 --- a/docs/www/app/(app)/page.tsx +++ b/docs/www/app/(app)/page.tsx @@ -6,10 +6,10 @@ import { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading } fro import { buttonVariants } from '@/registry/default/ui/' import { CopyButton } from '@/components/copy-button' import { toast } from 'sonner' -import { ThemeWrapper } from '@/components/theme-wrapper' -import { ThemeCustomizer } from '@/components/theme-customizer' -import { ThemesTabs } from './themes/tabs' -import { Announcement } from '@/components/announcement' +// import { ThemeWrapper } from '@/components/theme-wrapper' +// import { ThemeCustomizer } from '@/components/theme-customizer' +// import { ThemesTabs } from './themes/tabs' +// import { Announcement } from '@/components/announcement' export default function IndexPage() { return ( diff --git a/docs/www/app/layout.tsx b/docs/www/app/layout.tsx index e568966..2262eba 100644 --- a/docs/www/app/layout.tsx +++ b/docs/www/app/layout.tsx @@ -6,11 +6,11 @@ import { fontSans } from '@/lib/fonts' import { cn } from '@/lib/utils' import { Analytics } from '@/components/analytics' import { ThemeProvider } from '@/components/providers' -import { TailwindIndicator } from '@/components/tailwind-indicator' +// import { TailwindIndicator } from '@/components/tailwind-indicator' import { ThemeSwitcher } from '@/components/theme-switcher' -import { Toaster as DefaultToaster } from '@/registry/default/ui/' +// import { Toaster as DefaultToaster } from '@/registry/default/ui/' import { Toaster as DefaultSonner } from '@/registry/default/ui/' -import { Toaster as NewYorkToaster } from '@/registry/default/ui/' +// import { Toaster as NewYorkToaster } from '@/registry/default/ui/' export const metadata: Metadata = { title: { diff --git a/docs/www/components/analytics.tsx b/docs/www/components/analytics.tsx index 164e9b7..e6d9681 100644 --- a/docs/www/components/analytics.tsx +++ b/docs/www/components/analytics.tsx @@ -1,6 +1,6 @@ -"use client" +'use client' -import { Analytics as VercelAnalytics } from "@vercel/analytics/react" +import { Analytics as VercelAnalytics } from '@vercel/analytics/react' export function Analytics() { return diff --git a/docs/www/components/announcement.tsx b/docs/www/components/announcement.tsx index 23a5270..2c0e798 100644 --- a/docs/www/components/announcement.tsx +++ b/docs/www/components/announcement.tsx @@ -1,8 +1,8 @@ -import Link from "next/link" -import { ArrowRightIcon } from "@radix-ui/react-icons" -import { Blocks, PieChart } from "lucide-react" +import Link from 'next/link' +import { ArrowRightIcon } from '@radix-ui/react-icons' +import { Blocks, PieChart } from 'lucide-react' -import { Separator } from "@/registry/default/ui/" +import { Separator } from '@/registry/default/ui/' export function Announcement() { return ( @@ -10,11 +10,12 @@ export function Announcement() { href="/docs/components/chart" className="group inline-flex items-center px-0.5 text-sm font-medium" > - {" "} - {" "} - - Introducing Charts - + {' '} + {' '} + Introducing Charts ) diff --git a/docs/www/components/block-chunk.tsx b/docs/www/components/block-chunk.tsx index 2ee0902..cc3ca1c 100644 --- a/docs/www/components/block-chunk.tsx +++ b/docs/www/components/block-chunk.tsx @@ -1,13 +1,13 @@ -"use client" +'use client' -import * as React from "react" -import { AnimatePresence, motion } from "framer-motion" +import * as React from 'react' +import { AnimatePresence, motion } from 'framer-motion' -import { cn } from "@/lib/utils" -import { useLiftMode } from "@/hooks/use-lift-mode" -import { BlockCopyButton } from "@/components/block-copy-button" -import { V0Button } from "@/components/v0-button" -import { Block, type BlockChunk } from "@/registry/schema" +import { cn } from '@/lib/utils' +import { useLiftMode } from '@/hooks/use-lift-mode' +import { BlockCopyButton } from '@/components/block-copy-button' +import { V0Button } from '@/components/v0-button' +import { Block, type BlockChunk } from '@/registry/schema' export function BlockChunk({ block, @@ -29,12 +29,9 @@ export function BlockChunk({ x-chunk-container={chunk.name} initial={{ opacity: 0 }} animate={{ opacity: 1 }} - exit={{ opacity: 0, transition: { ease: "easeOut", duration: 0.2 } }} - transition={{ ease: "easeIn", duration: 0.2 }} - className={cn( - "group rounded-xl bg-background shadow-xl transition", - chunk.container?.className - )} + exit={{ opacity: 0, transition: { ease: 'easeOut', duration: 0.2 } }} + transition={{ ease: 'easeIn', duration: 0.2 }} + className={cn('group rounded-xl bg-background shadow-xl transition', chunk.container?.className)} {...props} >

{children}
@@ -50,7 +47,7 @@ export function BlockChunk({ size="icon" block={{ name: chunk.name, - description: chunk.description || "", + description: chunk.description || '', code: chunk.code, style: block.style, }} diff --git a/docs/www/components/block-copy-button.tsx b/docs/www/components/block-copy-button.tsx index 064eb75..b237ab6 100644 --- a/docs/www/components/block-copy-button.tsx +++ b/docs/www/components/block-copy-button.tsx @@ -1,16 +1,12 @@ -"use client" +'use client' -import * as React from "react" -import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from 'react' +import { CheckIcon, ClipboardIcon } from 'lucide-react' -import { Event, trackEvent } from "@/lib/events" -import { cn } from "@/lib/utils" -import { Button, ButtonProps } from "@/registry/default/ui" -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/registry/default/ui" +import { Event, trackEvent } from '@/lib/events' +import { cn } from '@/lib/utils' +import { Button, ButtonProps } from '@/registry/default/ui' +import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui' export function BlockCopyButton({ event, @@ -19,7 +15,7 @@ export function BlockCopyButton({ className, ...props }: { - event: Event["name"] + event: Event['name'] name: string code: string } & ButtonProps) { @@ -37,10 +33,7 @@ export function BlockCopyButton({
diff --git a/docs/www/components/color-format-selector.tsx b/docs/www/components/color-format-selector.tsx index 94ef423..9d936d4 100644 --- a/docs/www/components/color-format-selector.tsx +++ b/docs/www/components/color-format-selector.tsx @@ -1,24 +1,18 @@ -"use client" +'use client' -import * as React from "react" +import * as React from 'react' -import { getColorFormat, type Color } from "@/lib/colors" -import { cn } from "@/lib/utils" -import { useColors } from "@/hooks/use-colors" -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/registry/default/ui" -import { Skeleton } from "@/registry/default/ui" +import { getColorFormat, type Color } from '@/lib/colors' +import { cn } from '@/lib/utils' +import { useColors } from '@/hooks/use-colors' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui' +import { Skeleton } from '@/registry/default/ui' export function ColorFormatSelector({ color, className, ...props -}: Omit, "color"> & { +}: Omit, 'color'> & { color: Color }) { const { format, setFormat, isLoading } = useColors() @@ -29,17 +23,21 @@ export function ColorFormatSelector({ } return ( - Format: - - {format} - + {format} - + {Object.entries(formats).map(([format, value]) => ( {format} - - {value} - + {value} ))} @@ -57,13 +53,10 @@ export function ColorFormatSelector({ ) } -export function ColorFormatSelectorSkeleton({ - className, - ...props -}: React.ComponentProps) { +export function ColorFormatSelectorSkeleton({ className, ...props }: React.ComponentProps) { return ( ) diff --git a/docs/www/components/color-palette.tsx b/docs/www/components/color-palette.tsx index 294c7f5..75c2ef5 100644 --- a/docs/www/components/color-palette.tsx +++ b/docs/www/components/color-palette.tsx @@ -1,11 +1,8 @@ -import * as React from "react" +import * as React from 'react' -import { type ColorPalette } from "@/lib/colors" -import { Color } from "@/components/color" -import { - ColorFormatSelector, - ColorFormatSelectorSkeleton, -} from "@/components/color-format-selector" +import { type ColorPalette } from '@/lib/colors' +import { Color } from '@/components/color' +import { ColorFormatSelector, ColorFormatSelectorSkeleton } from '@/components/color-format-selector' export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) { return ( @@ -26,7 +23,10 @@ export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
{colorPalette.colors.map((color) => ( - + ))}
diff --git a/docs/www/components/color.tsx b/docs/www/components/color.tsx index f4af288..4673ab8 100644 --- a/docs/www/components/color.tsx +++ b/docs/www/components/color.tsx @@ -1,13 +1,13 @@ -"use client" +'use client' -import { Check, Clipboard } from "lucide-react" -import { toast } from "sonner" +import { Check, Clipboard } from 'lucide-react' +import { toast } from 'sonner' -import { type Color } from "@/lib/colors" -import { trackEvent } from "@/lib/events" -import { useColors } from "@/hooks/use-colors" -import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard" -import { copyToClipboardWithMeta } from "@/components/copy-button" +import { type Color } from '@/lib/colors' +import { trackEvent } from '@/lib/events' +import { useColors } from '@/hooks/use-colors' +import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard' +import { copyToClipboardWithMeta } from '@/components/copy-button' export function Color({ color }: { color: Color }) { const { format } = useColors() @@ -19,14 +19,14 @@ export function Color({ color }: { color: Color }) { className="group relative flex aspect-[3/1] w-full flex-1 flex-col gap-2 text-[--text] sm:aspect-[2/3] sm:h-auto sm:w-auto [&>svg]:absolute [&>svg]:right-4 [&>svg]:top-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity" style={ { - "--bg": `hsl(${color.hsl})`, - "--text": color.foreground, + '--bg': `hsl(${color.hsl})`, + '--text': color.foreground, } as React.CSSProperties } onClick={() => { copyToClipboard(color[format]) trackEvent({ - name: "copy_color", + name: 'copy_color', properties: { color: color.id, value: color[format], @@ -36,11 +36,7 @@ export function Color({ color }: { color: Color }) { toast.success(`Copied ${color[format]} to clipboard.`) }} > - {isCopied ? ( - - ) : ( - - )} + {isCopied ? : }
diff --git a/docs/www/components/command-menu.tsx b/docs/www/components/command-menu.tsx index 311c784..355e470 100644 --- a/docs/www/components/command-menu.tsx +++ b/docs/www/components/command-menu.tsx @@ -1,20 +1,14 @@ -"use client" +'use client' -import * as React from "react" -import { useRouter } from "next/navigation" -import { type DialogProps } from "@radix-ui/react-dialog" -import { - CircleIcon, - FileIcon, - LaptopIcon, - MoonIcon, - SunIcon, -} from "@radix-ui/react-icons" -import { useTheme } from "next-themes" +import * as React from 'react' +import { useRouter } from 'next/navigation' +import { type DialogProps } from '@radix-ui/react-dialog' +import { CircleIcon, FileIcon, LaptopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons' +import { useTheme } from 'next-themes' -import { docsConfig } from "@/config/docs" -import { cn } from "@/lib/utils" -import { Button } from "@/registry/default/ui/" +import { docsConfig } from '@/config/docs' +import { cn } from '@/lib/utils' +import { Button } from '@/registry/default/ui/' import { CommandDialog, CommandEmpty, @@ -23,7 +17,7 @@ import { CommandItem, CommandList, CommandSeparator, -} from "@/registry/default/ui/" +} from '@/registry/default/ui/' export function CommandMenu({ ...props }: DialogProps) { const router = useRouter() @@ -32,7 +26,7 @@ export function CommandMenu({ ...props }: DialogProps) { React.useEffect(() => { const down = (e: KeyboardEvent) => { - if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") { + if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') { if ( (e.target instanceof HTMLElement && e.target.isContentEditable) || e.target instanceof HTMLInputElement || @@ -47,8 +41,8 @@ export function CommandMenu({ ...props }: DialogProps) { } } - document.addEventListener("keydown", down) - return () => document.removeEventListener("keydown", down) + document.addEventListener('keydown', down) + return () => document.removeEventListener('keydown', down) }, []) const runCommand = React.useCallback((command: () => unknown) => { @@ -61,7 +55,7 @@ export function CommandMenu({ ...props }: DialogProps) { - + No results found. @@ -93,7 +90,10 @@ export function CommandMenu({ ...props }: DialogProps) { ))} {docsConfig.sidebarNav.map((group) => ( - + {group.items.map((navItem) => ( - runCommand(() => setTheme("light"))}> + runCommand(() => setTheme('light'))}> Light - runCommand(() => setTheme("dark"))}> + runCommand(() => setTheme('dark'))}> Dark - runCommand(() => setTheme("system"))}> + runCommand(() => setTheme('system'))}> System diff --git a/docs/www/components/component-card.tsx b/docs/www/components/component-card.tsx index f7f8780..99faefc 100644 --- a/docs/www/components/component-card.tsx +++ b/docs/www/components/component-card.tsx @@ -1,19 +1,16 @@ -import React from "react" +import React from 'react' -import { cn } from "@/lib/utils" -import { AspectRatio } from "@/registry/default/ui/" +import { cn } from '@/lib/utils' +import { AspectRatio } from '@/registry/default/ui/' -export function ComponentCard({ - className, - ...props -}: React.HTMLAttributes) { +export function ComponentCard({ className, ...props }: React.HTMLAttributes) { return ( - +
diff --git a/docs/www/components/component-example.tsx b/docs/www/components/component-example.tsx index 97e4577..2d26313 100644 --- a/docs/www/components/component-example.tsx +++ b/docs/www/components/component-example.tsx @@ -1,20 +1,15 @@ -"use client" +'use client' -import * as React from "react" +import * as React from 'react' -import { cn } from "@/lib/utils" -import { CopyButton, CopyWithClassNames } from "@/components/copy-button" -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger, -} from "@/registry/default/ui/" +import { cn } from '@/lib/utils' +import { CopyButton, CopyWithClassNames } from '@/components/copy-button' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/default/ui/' interface ComponentExampleProps extends React.HTMLAttributes { extractClassname?: boolean extractedClassNames?: string - align?: "center" | "start" | "end" + align?: 'center' | 'start' | 'end' src?: string } @@ -23,31 +18,28 @@ export function ComponentExample({ className, extractClassname, extractedClassNames, - align = "center", + align = 'center', src: _, ...props }: ComponentExampleProps) { - const [Example, Code, ...Children] = React.Children.toArray( - children - ) as React.ReactElement[] + const [Example, Code, ...Children] = React.Children.toArray(children) as React.ReactElement[] const codeString = React.useMemo(() => { - if ( - typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined" - ) { - const [, Button] = React.Children.toArray( - Code.props.children - ) as React.ReactElement[] + if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') { + const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement[] return Button?.props?.value || Button?.props?.__rawString__ || null } }, [Code]) return (
- +
- +
{Example} diff --git a/docs/www/components/component-preview.tsx b/docs/www/components/component-preview.tsx index 10ce5ba..fb9cef6 100644 --- a/docs/www/components/component-preview.tsx +++ b/docs/www/components/component-preview.tsx @@ -94,20 +94,20 @@ export function ComponentPreview({ >
diff --git a/docs/www/components/component-source.tsx b/docs/www/components/component-source.tsx index 3115038..8a40e6c 100644 --- a/docs/www/components/component-source.tsx +++ b/docs/www/components/component-source.tsx @@ -1,23 +1,19 @@ -"use client" +'use client' -import * as React from "react" +import * as React from 'react' -import { cn } from "@/lib/utils" -import { CodeBlockWrapper } from "@/components/code-block-wrapper" +import { cn } from '@/lib/utils' +import { CodeBlockWrapper } from '@/components/code-block-wrapper' interface ComponentSourceProps extends React.HTMLAttributes { src: string } -export function ComponentSource({ - children, - className, - ...props -}: ComponentSourceProps) { +export function ComponentSource({ children, className, ...props }: ComponentSourceProps) { return ( {children} diff --git a/docs/www/components/copy-button.tsx b/docs/www/components/copy-button.tsx index 3894daa..78b22ce 100644 --- a/docs/www/components/copy-button.tsx +++ b/docs/www/components/copy-button.tsx @@ -1,24 +1,19 @@ -"use client" - -import * as React from "react" -import { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu" -import { CheckIcon, ClipboardIcon } from "lucide-react" -import { NpmCommands } from "types/unist" - -import { Event, trackEvent } from "@/lib/events" -import { cn } from "@/lib/utils" -import { Button, ButtonProps } from "@/registry/default/ui" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/registry/default/ui" +'use client' + +import * as React from 'react' +import { DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu' +import { CheckIcon, ClipboardIcon } from 'lucide-react' +import { NpmCommands } from 'types/unist' + +import { Event, trackEvent } from '@/lib/events' +import { cn } from '@/lib/utils' +import { Button, ButtonProps } from '@/registry/default/ui' +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/registry/default/ui' interface CopyButtonProps extends ButtonProps { value: string src?: string - event?: Event["name"] + event?: Event['name'] } export async function copyToClipboardWithMeta(value: string, event?: Event) { @@ -28,14 +23,7 @@ export async function copyToClipboardWithMeta(value: string, event?: Event) { } } -export function CopyButton({ - value, - className, - src, - variant = "ghost", - event, - ...props -}: CopyButtonProps) { +export function CopyButton({ value, className, src, variant = 'ghost', event, ...props }: CopyButtonProps) { const [hasCopied, setHasCopied] = React.useState(false) React.useEffect(() => { @@ -48,21 +36,18 @@ export function CopyButton({ - copyToClipboard(value)}> - Component - - copyToClipboard(classNames)}> - Classname - + copyToClipboard(value)}>Component + copyToClipboard(classNames)}>Classname ) @@ -134,11 +103,7 @@ interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps { commands: Required } -export function CopyNpmCommandButton({ - commands, - className, - ...props -}: CopyNpmCommandButtonProps) { +export function CopyNpmCommandButton({ commands, className, ...props }: CopyNpmCommandButtonProps) { const [hasCopied, setHasCopied] = React.useState(false) React.useEffect(() => { @@ -147,19 +112,16 @@ export function CopyNpmCommandButton({ }, 2000) }, [hasCopied]) - const copyCommand = React.useCallback( - (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => { - copyToClipboardWithMeta(value, { - name: "copy_npm_command", - properties: { - command: value, - pm, - }, - }) - setHasCopied(true) - }, - [] - ) + const copyCommand = React.useCallback((value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => { + copyToClipboardWithMeta(value, { + name: 'copy_npm_command', + properties: { + command: value, + pm, + }, + }) + setHasCopied(true) + }, []) return ( @@ -167,40 +129,17 @@ export function CopyNpmCommandButton({ - copyCommand(commands.__npmCommand__, "npm")} - > - npm - - copyCommand(commands.__yarnCommand__, "yarn")} - > - yarn - - copyCommand(commands.__pnpmCommand__, "pnpm")} - > - pnpm - - copyCommand(commands.__bunCommand__, "bun")} - > - bun - + copyCommand(commands.__npmCommand__, 'npm')}>npm + copyCommand(commands.__yarnCommand__, 'yarn')}>yarn + copyCommand(commands.__pnpmCommand__, 'pnpm')}>pnpm + copyCommand(commands.__bunCommand__, 'bun')}>bun ) diff --git a/docs/www/components/drawer.tsx b/docs/www/components/drawer.tsx index 9b5b074..9be5c2a 100644 --- a/docs/www/components/drawer.tsx +++ b/docs/www/components/drawer.tsx @@ -1,9 +1,9 @@ -"use client" +'use client' -import { forwardRef } from "react" -import { Drawer as DrawerPrimitive } from "vaul" +import { forwardRef } from 'react' +import { Drawer as DrawerPrimitive } from 'vaul' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const DrawerTrigger = DrawerPrimitive.Trigger @@ -15,10 +15,7 @@ const DrawerContent = forwardRef<
@@ -26,6 +23,6 @@ const DrawerContent = forwardRef< )) -DrawerContent.displayName = "DrawerContent" +DrawerContent.displayName = 'DrawerContent' export { DrawerTrigger, DrawerContent } diff --git a/docs/www/components/examples-nav.tsx b/docs/www/components/examples-nav.tsx index fc4a1a3..e8cec7c 100644 --- a/docs/www/components/examples-nav.tsx +++ b/docs/www/components/examples-nav.tsx @@ -1,56 +1,56 @@ -"use client" +'use client' -import Link from "next/link" -import { usePathname } from "next/navigation" -import { ArrowRightIcon } from "@radix-ui/react-icons" +import Link from 'next/link' +import { usePathname } from 'next/navigation' +import { ArrowRightIcon } from '@radix-ui/react-icons' -import { cn } from "@/lib/utils" -import { ScrollArea, ScrollBar } from "@/registry/default/ui/" +import { cn } from '@/lib/utils' +import { ScrollArea, ScrollBar } from '@/registry/default/ui/' const examples = [ { - name: "Mail", - href: "/examples/mail", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail", + name: 'Mail', + href: '/examples/mail', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail', }, { - name: "Dashboard", - href: "/examples/dashboard", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard", + name: 'Dashboard', + href: '/examples/dashboard', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard', }, { - name: "Cards", - href: "/examples/cards", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards", + name: 'Cards', + href: '/examples/cards', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards', }, { - name: "Tasks", - href: "/examples/tasks", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks", + name: 'Tasks', + href: '/examples/tasks', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks', }, { - name: "Playground", - href: "/examples/playground", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground", + name: 'Playground', + href: '/examples/playground', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground', }, { - name: "Forms", - href: "/examples/forms", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms", + name: 'Forms', + href: '/examples/forms', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms', }, { - name: "Music", - href: "/examples/music", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music", + name: 'Music', + href: '/examples/music', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music', }, { - name: "Authentication", - href: "/examples/authentication", - code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication", + name: 'Authentication', + href: '/examples/authentication', + code: 'https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication', }, ] -interface ExamplesNavProps extends React.HTMLAttributes { } +interface ExamplesNavProps extends React.HTMLAttributes {} export function ExamplesNav({ className, ...props }: ExamplesNavProps) { const pathname = usePathname() @@ -58,24 +58,29 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) { return (
-
+
{examples.map((example, index) => ( {example.name} ))}
- +
) diff --git a/docs/www/components/framework-docs.tsx b/docs/www/components/framework-docs.tsx index 2bebd69..01e3c5b 100644 --- a/docs/www/components/framework-docs.tsx +++ b/docs/www/components/framework-docs.tsx @@ -1,18 +1,16 @@ -"use client" +'use client' -import * as React from "react" -import { allDocs } from "contentlayer/generated" +import * as React from 'react' +import { allDocs } from 'contentlayer/generated' -import { Mdx } from "./mdx-components" +import { Mdx } from './mdx-components' interface FrameworkDocsProps extends React.HTMLAttributes { data: string } export function FrameworkDocs({ ...props }: FrameworkDocsProps) { - const frameworkDoc = allDocs.find( - (doc) => doc.slug === `/docs/installation/${props.data}` - ) + const frameworkDoc = allDocs.find((doc) => doc.slug === `/docs/installation/${props.data}`) if (!frameworkDoc) { return null diff --git a/docs/www/components/main-nav.tsx b/docs/www/components/main-nav.tsx index 45f02a3..9067ac9 100644 --- a/docs/www/components/main-nav.tsx +++ b/docs/www/components/main-nav.tsx @@ -1,34 +1,34 @@ -"use client" +'use client' -import Link from "next/link" -import { usePathname } from "next/navigation" +import Link from 'next/link' +import { usePathname } from 'next/navigation' -import { siteConfig } from "@/config/site" -import { cn } from "@/lib/utils" -import { Icons } from "@/components/icons" +import { siteConfig } from '@/config/site' +import { cn } from '@/lib/utils' +import { Icons } from '@/components/icons' export function MainNav() { const pathname = usePathname() return (
- + - - {siteConfig.name} - + {siteConfig.name}
) diff --git a/docs/www/components/mdx-components.tsx b/docs/www/components/mdx-components.tsx index 5afa84e..c098c5e 100755 --- a/docs/www/components/mdx-components.tsx +++ b/docs/www/components/mdx-components.tsx @@ -1,42 +1,28 @@ // @ts-nocheck -"use client" +'use client' -import * as React from "react" -import Image from "next/image" -import Link from "next/link" -import { useMDXComponent } from "next-contentlayer2/hooks" -import { NpmCommands } from "types/unist" +import * as React from 'react' +import Image from 'next/image' +import Link from 'next/link' +import { useMDXComponent } from 'next-contentlayer2/hooks' +import { NpmCommands } from 'types/unist' -import { Event } from "@/lib/events" -import { cn } from "@/lib/utils" -import { useConfig } from "@/hooks/use-config" -import { Callout } from "@/components/callout" -import { CodeBlockWrapper } from "@/components/code-block-wrapper" -import { ComponentExample } from "@/components/component-example" -import { ComponentPreview } from "@/components/component-preview" -import { ComponentSource } from "@/components/component-source" -import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button" -import { FrameworkDocs } from "@/components/framework-docs" -import { StyleWrapper } from "@/components/style-wrapper" -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/registry/default/ui/" -import { - Alert, - AlertDescription, - AlertTitle, -} from "@/registry/default/ui/" -import { AspectRatio } from "@/registry/default/ui/" -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger, -} from "@/registry/default/ui/" -import { Style } from "@/registry/styles" +import { Event } from '@/lib/events' +import { cn } from '@/lib/utils' +import { useConfig } from '@/hooks/use-config' +import { Callout } from '@/components/callout' +import { CodeBlockWrapper } from '@/components/code-block-wrapper' +import { ComponentExample } from '@/components/component-example' +import { ComponentPreview } from '@/components/component-preview' +import { ComponentSource } from '@/components/component-source' +import { CopyButton, CopyNpmCommandButton } from '@/components/copy-button' +import { FrameworkDocs } from '@/components/framework-docs' +import { StyleWrapper } from '@/components/style-wrapper' +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/' +import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/' +import { AspectRatio } from '@/registry/default/ui/' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/default/ui/' +import { Style } from '@/registry/styles' const components = { Accordion, @@ -48,122 +34,119 @@ const components = { AlertDescription, h1: ({ className, ...props }: React.HTMLAttributes) => (

), h2: ({ className, ...props }: React.HTMLAttributes) => (

), h3: ({ className, ...props }: React.HTMLAttributes) => (

), h4: ({ className, ...props }: React.HTMLAttributes) => (

), h5: ({ className, ...props }: React.HTMLAttributes) => (
), h6: ({ className, ...props }: React.HTMLAttributes) => (
), a: ({ className, ...props }: React.HTMLAttributes) => ( ), p: ({ className, ...props }: React.HTMLAttributes) => (

), ul: ({ className, ...props }: React.HTMLAttributes) => ( -