diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts index a3e4680c..d9391a77 100644 --- a/apps/docs/next-env.d.ts +++ b/apps/docs/next-env.d.ts @@ -1,6 +1,7 @@ /// /// -import './.next/dev/types/routes.d.ts' +import './.next/types/routes.d.ts' +import './.next/types/root-params.d.ts' // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/docs/src/app/globals.css b/apps/docs/src/app/globals.css index 427a2fb7..6fbd4ffb 100644 --- a/apps/docs/src/app/globals.css +++ b/apps/docs/src/app/globals.css @@ -4,8 +4,12 @@ @custom-variant dark (&:is(.dark *)); +@theme inline { + --font-mono: var(--font-source-code), ui-monospace, monospace; +} + @theme { - --font-mono: 'Source Code Pro', 'sans-serif'; + --color-brand: hsl(var(--brand)); --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); @@ -89,7 +93,7 @@ ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentColor); + border-color: var(--color-border, currentColor); } } @@ -97,46 +101,50 @@ body { font-family: var(--font-inter); font-size: 15px; + font-feature-settings: 'cv11', 'ss01'; + text-rendering: optimizeLegibility; } } @layer base { :root { --background: 0 0% 100%; - --foreground: 0 0% 3.9%; + --foreground: 240 10% 3.9%; --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; + --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - --primary: 0 0% 9%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; + --brand: 183 100% 38%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-background: 0 0% 100%; + --sidebar-foreground: 240 3.8% 46.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; + --sidebar-border: 240 5.9% 90%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { + --brand: 183 100% 40%; --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; @@ -179,6 +187,9 @@ body { @apply bg-background text-foreground; } + ::selection { + background-color: hsl(var(--brand) / 0.2); + } hr { @apply my-5; } diff --git a/apps/docs/src/app/installation/page.tsx b/apps/docs/src/app/installation/page.tsx index 95aae46d..5e249e53 100644 --- a/apps/docs/src/app/installation/page.tsx +++ b/apps/docs/src/app/installation/page.tsx @@ -18,10 +18,14 @@ export default function Page() { Setting up @lglab/react-qr-code is quick and easy. Install it using your favourite package manager: - - - - + ) } diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx index 32c9698f..a3a836b9 100644 --- a/apps/docs/src/app/layout.tsx +++ b/apps/docs/src/app/layout.tsx @@ -14,7 +14,7 @@ const inter = Inter({ }) const mono = Source_Code_Pro({ - variable: '--font-mono', + variable: '--font-source-code', subsets: ['latin'], }) diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx index 3009d589..608b4836 100644 --- a/apps/docs/src/app/page.tsx +++ b/apps/docs/src/app/page.tsx @@ -1,15 +1,8 @@ -import { Code, Layers, Sparkles, Zap } from 'lucide-react' +import { ArrowRight, Bot, Code, Layers, Sparkles, Zap } from 'lucide-react' import type { Metadata } from 'next' import Link from 'next/link' import { Hero } from '@/components/hero' -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from '@/components/ui/card' import { TypographyBold } from '@/components/ui/typography' export const metadata: Metadata = { @@ -20,77 +13,78 @@ export const metadata: Metadata = { 'React QR Code is a highly customizable and lightweight QR code generator for React applications. Easily style QR codes with unique finder patterns, rounded corners, and customizable colors.', } -export default function Page() { - const features = [ - { - title: 'Highly Customizable', - description: - 'Style finder patterns, modules, and colors exactly how you want with advanced configuration.', - icon: , - }, - { - title: 'Performance Optimized', - description: - 'Generates QR codes efficiently without sacrificing quality or bundle size.', - icon: , - }, - { - title: 'SVG-Based Rendering', - description: 'Crisp and scalable output for web and print, powered by SVG.', - icon: , - }, - { - title: 'Developer-Friendly', - description: - 'Built with TypeScript, easy to use, and focused on a great developer experience.', - icon: , - }, - ] +const features = [ + { + title: 'Highly Customizable', + description: + 'Style finder patterns, modules, and colors exactly how you want with advanced configuration.', + icon: Sparkles, + }, + { + title: 'Performance Optimized', + description: + 'Generates QR codes efficiently without sacrificing quality or bundle size.', + icon: Zap, + }, + { + title: 'SVG-Based Rendering', + description: 'Crisp and scalable output for web and print, powered by SVG.', + icon: Layers, + }, + { + title: 'Developer-Friendly', + description: + 'Built with TypeScript, easy to use, and focused on a great developer experience.', + icon: Code, + }, +] + +const FeatureIcon = ({ icon: Icon }: { icon: typeof Sparkles }) => ( +
+ +
+) +export default function Page() { return ( <> -
- {features.map((feature) => ( - - -
- {feature.icon} -
-
- {feature.title} - +
+
+ {features.map((feature) => ( +
+ +
+

{feature.title}

+

{feature.description} - +

- - - ))} -
+
+ ))} +
- - -
- + + +
+

Optimized for AI

+

+ We provide{' '} + llms.txt and{' '} + llms-full.txt{' '} + files to help tools like Cursor and Windsurf understand the library + documentation instantly. +

-
- Optimized for AI - - We provide llms.txt and{' '} - llms-full.txt files to help tools like - Cursor and Windsurf understand the library documentation instantly. - -
- - - - Learn how to use with AI tools → - - - + + Learn more + + + +
) } diff --git a/apps/docs/src/components/api-table.tsx b/apps/docs/src/components/api-table.tsx index 9d732f47..5c721e25 100644 --- a/apps/docs/src/components/api-table.tsx +++ b/apps/docs/src/components/api-table.tsx @@ -21,7 +21,7 @@ export const APITable = ({ props }: { props: Prop[] }) => ( {props.map((prop) => ( - {prop.name} + {prop.name} diff --git a/apps/docs/src/components/code-block.tsx b/apps/docs/src/components/code-block.tsx index c7b936bb..b4162327 100644 --- a/apps/docs/src/components/code-block.tsx +++ b/apps/docs/src/components/code-block.tsx @@ -1,46 +1,47 @@ 'use client' -import { Check, Copy } from 'lucide-react' import { useState } from 'react' -import { Button } from '@/components/ui/button' -import { Card, CardContent } from '@/components/ui/card' +import { cn } from '@/lib/utils' + +import { CopyButton } from './copy-button' interface CodeBlockProps { - code: string - title?: string + commands: { title: string; code: string }[] } -export const CodeBlock = ({ code, title = '' }: CodeBlockProps) => { - const [isCopied, setIsCopied] = useState(false) - - const copyToClipboard = async () => { - await navigator.clipboard.writeText(code) - setIsCopied(true) - setTimeout(() => setIsCopied(false), 2000) - } +export const CodeBlock = ({ commands }: CodeBlockProps) => { + const [active, setActive] = useState(0) + const { code } = commands[active] return ( - - -
- {title} - +
+
+
+ {commands.map(({ title }, i) => ( + + ))}
- 
-          {code}
-
- - + +
+ 
+        
+          $ 
+          {code}
+        
+
+
) } diff --git a/apps/docs/src/components/code-editor.tsx b/apps/docs/src/components/code-editor.tsx index d2d43c1f..ab92efab 100644 --- a/apps/docs/src/components/code-editor.tsx +++ b/apps/docs/src/components/code-editor.tsx @@ -1,12 +1,8 @@ 'use client' -import { Check, Copy } from 'lucide-react' -import { Highlight, type Language } from 'prism-react-renderer' -import { useState } from 'react' +import { Highlight, type Language, themes } from 'prism-react-renderer' -import { Card } from '@/components/ui/card' - -import { Button } from './ui/button' +import { CopyButton } from './copy-button' interface CodeEditorProps { code: string @@ -14,42 +10,29 @@ interface CodeEditorProps { } export const CodeEditor = ({ code, language = 'tsx' }: CodeEditorProps) => { - const [isCopied, setIsCopied] = useState(false) - const copyToClipboard = async () => { - await navigator.clipboard.writeText(code) - setIsCopied(true) - setTimeout(() => setIsCopied(false), 2000) - } + const trimmed = code.trim() return ( - -
- {language} - +
+
+ {language} +
- + {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
+          
             {tokens.map((line, i) => (
-              

-                
+              

+                
                   {i + 1}
                 
-                
+                
                   {line.map((token, key) => (
-                    
+                    
                   ))}
                 
               

@@ -57,6 +40,6 @@ export const CodeEditor = ({ code, language = 'tsx' }: CodeEditorProps) => {
           

         )}
       
-    
+
) } diff --git a/apps/docs/src/components/copy-button.tsx b/apps/docs/src/components/copy-button.tsx new file mode 100644 index 00000000..0c9ace99 --- /dev/null +++ b/apps/docs/src/components/copy-button.tsx @@ -0,0 +1,36 @@ +'use client' + +import { Check, Copy } from 'lucide-react' +import { useState } from 'react' + +import { cn } from '@/lib/utils' + +interface CopyButtonProps { + value: string + className?: string +} + +export const CopyButton = ({ value, className }: CopyButtonProps) => { + const [isCopied, setIsCopied] = useState(false) + + const copyToClipboard = async () => { + await navigator.clipboard.writeText(value) + setIsCopied(true) + setTimeout(() => setIsCopied(false), 2000) + } + + return ( + + ) +} diff --git a/apps/docs/src/components/hero-showcase.tsx b/apps/docs/src/components/hero-showcase.tsx new file mode 100644 index 00000000..976ef31e --- /dev/null +++ b/apps/docs/src/components/hero-showcase.tsx @@ -0,0 +1,54 @@ +'use client' + +import { ReactQRCode, type ReactQRCodeProps } from '@lglab/react-qr-code' + +const examples: Omit[] = [ + { + dataModulesSettings: { style: 'rounded', color: '#18181b' }, + finderPatternOuterSettings: { style: 'rounded-lg', color: '#18181b' }, + finderPatternInnerSettings: { style: 'rounded', color: '#00a3ab' }, + }, + { + dataModulesSettings: { style: 'circle', color: '#4f46e5' }, + finderPatternOuterSettings: { style: 'circle', color: '#4f46e5' }, + finderPatternInnerSettings: { style: 'circle', color: '#4f46e5' }, + }, + { + gradient: { + type: 'linear', + rotation: 45, + stops: [ + { offset: '0%', color: '#00c2cb' }, + { offset: '100%', color: '#2563eb' }, + ], + }, + dataModulesSettings: { style: 'leaf' }, + finderPatternOuterSettings: { style: 'leaf-lg' }, + finderPatternInnerSettings: { style: 'leaf' }, + }, + { + dataModulesSettings: { style: 'diamond', color: '#18181b' }, + finderPatternOuterSettings: { style: 'inpoint', color: '#18181b' }, + finderPatternInnerSettings: { style: 'star', color: '#e11d48' }, + }, +] + +export const HeroShowcase = () => { + return ( +
+ {examples.map((props, i) => ( +
+ +
+ ))} +
+ ) +} diff --git a/apps/docs/src/components/hero.tsx b/apps/docs/src/components/hero.tsx index 43154f35..5eed3a46 100644 --- a/apps/docs/src/components/hero.tsx +++ b/apps/docs/src/components/hero.tsx @@ -3,32 +3,54 @@ import Link from 'next/link' import { Button } from '@/components/ui/button' +import { CopyButton } from './copy-button' +import { HeroShowcase } from './hero-showcase' import { TypographyLead } from './ui/typography' +const INSTALL_COMMAND = 'npm i @lglab/react-qr-code' + export const Hero = () => { return ( -
-
-
-

- The ultimate customizable QR code generator for React -

- - Create high-performance, stylized QR codes with a library designed for the - modern web. - -
-
- -
+
+ $ + {INSTALL_COMMAND} + +
+
+
+
) diff --git a/apps/docs/src/components/logo.tsx b/apps/docs/src/components/logo.tsx index 1a5867e9..3f3c396b 100644 --- a/apps/docs/src/components/logo.tsx +++ b/apps/docs/src/components/logo.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' export const LogoSVG = () => ( ( ) export const Logo = () => ( - + - React QR Code + React QR Code ) diff --git a/apps/docs/src/components/page-header.tsx b/apps/docs/src/components/page-header.tsx index 03c7cf22..1d8ac74e 100644 --- a/apps/docs/src/components/page-header.tsx +++ b/apps/docs/src/components/page-header.tsx @@ -1,6 +1,7 @@ import Link from 'next/link' import { FaGithub } from 'react-icons/fa6' +import { Button } from '@/components/ui/button' import { Separator } from '@/components/ui/separator' import { SidebarTrigger } from '@/components/ui/sidebar' @@ -8,16 +9,27 @@ import { Logo } from './logo' export const Header = () => { return ( -
+
- +
-
- - - +
+
) diff --git a/apps/docs/src/components/page-heading.tsx b/apps/docs/src/components/page-heading.tsx index f82ebba6..ddf91ae1 100644 --- a/apps/docs/src/components/page-heading.tsx +++ b/apps/docs/src/components/page-heading.tsx @@ -14,10 +14,10 @@ export const PageHeading = ({ callToAction: CallToAction, }: PageHeaderProps) => { return ( -
-
+
+
{heading} - {subheading &&

{subheading}

} + {subheading &&

{subheading}

}
{CallToAction && CallToAction}
diff --git a/apps/docs/src/components/page-sidebar-button.tsx b/apps/docs/src/components/page-sidebar-button.tsx index 12564056..c250928e 100644 --- a/apps/docs/src/components/page-sidebar-button.tsx +++ b/apps/docs/src/components/page-sidebar-button.tsx @@ -1,31 +1,35 @@ 'use client' -import { SquareArrowOutUpRight } from 'lucide-react' +import { ArrowUpRight } from 'lucide-react' import Link from 'next/link' import { usePathname } from 'next/navigation' import type { MenuItemProps } from '@/types/navigation' -import { SidebarMenuSubButton } from './ui/sidebar' +import { SidebarMenuButton, useSidebar } from './ui/sidebar' export const PageSidebarButton = ({ title, url, external }: MenuItemProps) => { const pathname = usePathname() + const { isMobile, setOpenMobile } = useSidebar() const isActive = pathname === url return ( - isMobile && setOpenMobile(false)} data-umami-event={ external ? `sidebar-click-${title.toLowerCase().replace(' ', '-')}` : null } > - {title} {external && } + {title} + {external && } - + ) } diff --git a/apps/docs/src/components/page-sidebar.tsx b/apps/docs/src/components/page-sidebar.tsx index 7ffdc318..b7016492 100644 --- a/apps/docs/src/components/page-sidebar.tsx +++ b/apps/docs/src/components/page-sidebar.tsx @@ -1,16 +1,13 @@ -import Link from 'next/link' import { type ComponentProps } from 'react' import { Sidebar, SidebarContent, SidebarGroup, - SidebarHeader, + SidebarGroupContent, + SidebarGroupLabel, SidebarMenu, - SidebarMenuButton, SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubItem, SidebarRail, } from '@/components/ui/sidebar' import { mainNav } from '@/config/navigation' @@ -20,30 +17,23 @@ import { PageSidebarButton } from './page-sidebar-button' export const AppSidebar = async ({ ...props }: ComponentProps) => { return ( - - - - - {mainNav.map((item) => ( - - - - {item.title} - - - {item.items?.length ? ( - - {item.items.map((item) => ( - - - - ))} - - ) : null} - - ))} - - + + {mainNav.map((section) => ( + + + {section.title} + + + + {section.items?.map((item) => ( + + + + ))} + + + + ))} diff --git a/apps/docs/src/components/page-skeleton.tsx b/apps/docs/src/components/page-skeleton.tsx index f64c7884..99e06885 100644 --- a/apps/docs/src/components/page-skeleton.tsx +++ b/apps/docs/src/components/page-skeleton.tsx @@ -6,7 +6,11 @@ import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar' export const PageSkeleton = async ({ children }: PropsWithChildren) => { const Content = () => { - return
{children}
+ return ( +
+ {children} +
+ ) } return ( diff --git a/apps/docs/src/components/props-table.tsx b/apps/docs/src/components/props-table.tsx index e01645ab..13fd314c 100644 --- a/apps/docs/src/components/props-table.tsx +++ b/apps/docs/src/components/props-table.tsx @@ -25,7 +25,7 @@ export const PropsTable = ({ props }: { props: Prop[] }) => ( {props.map((prop) => ( - {prop.name} + {prop.name} diff --git a/apps/docs/src/components/ui/example-tabs.tsx b/apps/docs/src/components/ui/example-tabs.tsx index 1baa3a40..7d5aa566 100644 --- a/apps/docs/src/components/ui/example-tabs.tsx +++ b/apps/docs/src/components/ui/example-tabs.tsx @@ -18,7 +18,7 @@ const ExampleTabsTrigger = ({ return ( {children} @@ -28,7 +28,7 @@ const ExampleTabsTrigger = ({ export const ExampleTabs = ({ codeBlock, preview }: ExampleTabsProps) => { return ( -
+
Preview Code @@ -36,7 +36,9 @@ export const ExampleTabs = ({ codeBlock, preview }: ExampleTabsProps) => {
-
{preview}
+
+ {preview} +
diff --git a/apps/docs/src/components/ui/table.tsx b/apps/docs/src/components/ui/table.tsx index 3ad4e0d6..ec07d5a5 100644 --- a/apps/docs/src/components/ui/table.tsx +++ b/apps/docs/src/components/ui/table.tsx @@ -4,7 +4,7 @@ import { cn } from '@/lib/utils' const Table = React.forwardRef>( ({ className, ...props }, ref) => ( -
+
>(({ className, ...props }, ref) => ( - + )) TableHeader.displayName = 'TableHeader' @@ -65,7 +69,7 @@ const TableHead = React.forwardRef<
[role=checkbox]]:translate-y-[2px]', + 'h-10 px-4 text-left align-middle whitespace-nowrap text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className, )} {...props} @@ -80,7 +84,7 @@ const TableCell = React.forwardRef< [role=checkbox]]:translate-y-[2px]', + 'px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className, )} {...props} diff --git a/apps/docs/src/components/ui/typography.tsx b/apps/docs/src/components/ui/typography.tsx index d766f4f2..25b336c0 100644 --- a/apps/docs/src/components/ui/typography.tsx +++ b/apps/docs/src/components/ui/typography.tsx @@ -17,7 +17,12 @@ interface TypographyListProps extends TypographyProps { export function TypographyH1({ children, className }: TypographyProps) { return ( -

+

{children}

) @@ -27,7 +32,7 @@ export function TypographyH2({ children, className }: TypographyProps) { return (

@@ -57,7 +62,7 @@ export function TypographyH4({ children, className }: TypographyProps) { } export function TypographyP({ children, className }: TypographyProps) { - return

{children}

+ return

{children}

} export function TypographyBlockquote({ children, className }: TypographyProps) { @@ -82,7 +87,7 @@ export function TypographyInlineCode({ children, className }: TypographyProps) { return ( @@ -92,7 +97,11 @@ export function TypographyInlineCode({ children, className }: TypographyProps) { } export function TypographyLead({ children, className }: TypographyProps) { - return

{children}

+ return ( +

+ {children} +

+ ) } export function TypographyLarge({ children, className }: TypographyProps) {