@gentleduck/docs 0.0.1

package/src/components/mdx/mdx-components/code/span-block.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@gentleduck/libs/cn'
+
+export function SpanBlock({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return isLineComment(children?.toString()!) ? null : (
+    <span className={cn(className)} {...props}>
+      {children}
+    </span>
+  )
+}
+function isLineComment(str: string): boolean {
+  // Matches strings starting with // followed by optional space and text
+  return /^\/\/.*$/.test(str)
+}

package/src/components/mdx/mdx-components/components-list.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { type DocsEntry, useDocsEntries } from '@duck-docs/context'
+import Link from 'next/link'
+
+export function ComponentsList({ components }: { components?: DocsEntry[] }) {
+  const docs = useDocsEntries()
+  const resolved = components ?? docs ?? []
+  const list = resolved.filter((doc) => doc.component)
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
+      {list.map((component) => (
+        <Link
+          className="font-medium text-lg underline-offset-4 hover:underline md:text-base"
+          href={component.permalink ?? component.slug}
+          key={component.title}>
+          {component.title}
+        </Link>
+      ))}
+    </div>
+  )
+}

package/src/components/mdx/mdx-components/exalidraw.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { Excalidraw } from '@excalidraw/excalidraw'
+
+export function Exalidraw() {
+  return (
+    <>
+      <div className="h-[500px] w-full">
+        <Excalidraw />
+      </div>
+    </>
+  )
+}

package/src/components/mdx/mdx-components/framework-docs.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Mdx } from '@duck-docs/components/mdx/mdx'
+import { useDocsEntries } from '@duck-docs/context'
+import type * as React from 'react'
+
+interface FrameworkDocsProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: string
+}
+
+export function FrameworkDocs({ ...props }: FrameworkDocsProps) {
+  const docs = useDocsEntries() ?? []
+  const frameworkDoc = docs.find((doc) => doc.slug === `/docs/installation/${props.data}`)
+
+  if (!frameworkDoc?.content) {
+    return null
+  }
+
+  return <Mdx code={frameworkDoc.content} />
+}

package/src/components/mdx/mdx-components/index.ts

@@ -0,0 +1,7 @@
+export * from './callout'
+export * from './code'
+export * from './components-list'
+export * from './framework-docs'
+export * from './table'
+export * from './tabs'
+export * from './typepography'

package/src/components/mdx/mdx-components/table.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@gentleduck/libs/cn'
+import type { FC } from 'react'
+
+export const Table: FC<React.HTMLAttributes<HTMLTableElement>> = ({ className, ...props }) => (
+  <div className="my-6 w-full rounded-lg border">
+    <table
+      className={cn(
+        'relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+)
+
+export const TableRow: FC<React.HTMLAttributes<HTMLTableRowElement>> = ({ className, ...props }) => (
+  <tr className={cn('m-0 border-b', className)} {...props} />
+)
+
+export const TableHeader: FC<React.HTMLAttributes<HTMLTableCellElement>> = ({ className, ...props }) => (
+  <th
+    className={cn('px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', className)}
+    {...props}
+  />
+)
+
+export const TableCell: FC<React.HTMLAttributes<HTMLTableCellElement>> = ({ className, ...props }) => (
+  <td
+    className={cn(
+      'whitespace-nowrap px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+      className,
+    )}
+    {...props}
+  />
+)

package/src/components/mdx/mdx-components/tabs.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@gentleduck/libs/cn'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+
+export function Tab({ className, ...props }: React.ComponentProps<typeof Tabs>) {
+  return <Tabs className={cn('relative mt-6 w-full', className)} {...props} />
+}
+
+export function TabList({ className, ...props }: React.ComponentProps<typeof TabsList>) {
+  return (
+    <TabsList className={cn('w-full justify-start rounded-none border-b bg-transparent p-0', className)} {...props} />
+  )
+}
+export function TabTrigger({ className, ...props }: React.ComponentProps<typeof TabsTrigger>) {
+  return (
+    <TabsTrigger
+      className={cn(
+        "cursor-pointer rounded-none border-b-[2px] border-b-transparent px-12 py-2 font-semibold [&[aria-selected='true']]:border-b-primary [&[aria-selected='true']]:shadow-none",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TabContent({ className, ...props }: React.ComponentProps<typeof TabsContent>) {
+  return (
+    <TabsContent
+      className={cn('relative [&_h3.font-heading]:font-semibold [&_h3.font-heading]:text-base', className)}
+      {...props}
+    />
+  )
+}

package/src/components/mdx/mdx-components/typepography.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@gentleduck/libs/cn'
+import Link from 'next/link'
+import type React from 'react'
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+interface AnchorProps extends React.HTMLAttributes<HTMLAnchorElement> {}
+interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export function H1({ className, ...props }: HeadingProps) {
+  return <h1 className={cn('mt-2 scroll-m-20 font-bold font-heading text-4xl', className)} {...props} />
+}
+
+export function H2({ className, ...props }: HeadingProps) {
+  return (
+    <h2
+      className={cn(
+        'mt-12 scroll-m-20 border-b pb-2 font-heading font-semibold text-2xl tracking-tight first:mt-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function H3({ className, ...props }: HeadingProps) {
+  return (
+    <h3 className={cn('mt-8 scroll-m-20 font-heading font-semibold text-xl tracking-tight', className)} {...props} />
+  )
+}
+
+export function H4({ className, ...props }: HeadingProps) {
+  return (
+    <h4 className={cn('mt-8 scroll-m-20 font-heading font-semibold text-lg tracking-tight', className)} {...props} />
+  )
+}
+
+export function H5({ className, ...props }: HeadingProps) {
+  return <h5 className={cn('mt-8 scroll-m-20 font-semibold text-lg tracking-tight', className)} {...props} />
+}
+
+export function H6({ className, ...props }: HeadingProps) {
+  return <h6 className={cn('mt-8 scroll-m-20 font-semibold text-base tracking-tight', className)} {...props} />
+}
+
+export function A({ className, ...props }: AnchorProps) {
+  return <a className={cn('font-medium underline underline-offset-4', className)} {...props} />
+}
+
+export function P({ className, ...props }: ParagraphProps) {
+  return <p className={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...props} />
+}
+
+export function LinkBlock({ className, ...props }: React.ComponentProps<typeof Link>) {
+  return <Link className={cn('font-medium underline underline-offset-4', className)} {...props} />
+}
+export function LinkedCard({ className, ...props }: React.ComponentProps<typeof Link>) {
+  return (
+    <Link
+      className={cn(
+        'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function Hr({ ...props }: React.HTMLAttributes<HTMLHRElement>) {
+  return <hr className="my-4 md:my-8" {...props} />
+}

package/src/components/mdx/mdx.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@gentleduck/registry-ui-duckui/accordion'
+import { Alert, AlertDescription, AlertTitle } from '@gentleduck/registry-ui-duckui/alert'
+import { AspectRatio } from '@gentleduck/registry-ui-duckui/aspect-ratio'
+import { Badge } from '@gentleduck/registry-ui-duckui/badge'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { Kbd } from '@gentleduck/registry-ui-duckui/kbd'
+import Image from 'next/image'
+import type * as React from 'react'
+import runtime from 'react/jsx-runtime'
+import { Callout } from './mdx-components/callout'
+import { CodeBlock, CodeBlockWrapper, ComponentPreview, ComponentSource, PreBlock } from './mdx-components/code'
+import { FigcaptionBlock } from './mdx-components/code/figcaption-block'
+import { ComponentsList } from './mdx-components/components-list'
+import { Table, TableCell, TableHeader, TableRow } from './mdx-components/table'
+import { Tab, TabContent, TabList, TabTrigger } from './mdx-components/tabs'
+import { A, H1, H2, H3, H4, H5, H6, Hr, LinkBlock, LinkedCard, P } from './mdx-components/typepography'
+
+const useMDXComponent = (code: string) => {
+  const fn = new Function(code)
+  return fn({ ...runtime }).default
+}
+
+const components = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AspectRatio,
+  a: A,
+  Badge,
+  Button,
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
+  ),
+  Callout,
+  CodeBlockWrapper,
+  ComponentPreview,
+  ComponentSource,
+  ComponentsList,
+  code: CodeBlock,
+  figcaption: FigcaptionBlock,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  hr: Hr,
+  // span: SpanBlock,
+  Image,
+  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img alt={alt} className={cn('rounded-md', className)} {...props} />
+  ),
+  Kbd: Kbd,
+  Link: LinkBlock,
+  LinkedCard,
+  li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <li className={cn('mt-2', className)} {...props} />
+  ),
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
+  ),
+  p: P,
+  pre: PreBlock,
+  Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
+    <h3 className={cn('step scroll-m-20 font-heading font-semibold text-xl tracking-tight', className)} {...props} />
+  ),
+  Steps: ({ ...props }) => (
+    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...props} />
+  ),
+  Tabs: Tab,
+  TabsContent: TabContent,
+  TabsList: TabList,
+  TabsTrigger: TabTrigger,
+  table: Table,
+  td: TableCell,
+  th: TableHeader,
+  tr: TableRow,
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className={cn('my-6 ml-6 list-disc', className)} {...props} />
+  ),
+  // FrameworkDocs,
+}
+
+interface MdxProps {
+  code: string
+}
+
+export function Mdx({ code }: MdxProps) {
+  const Component = useMDXComponent(code)
+
+  return (
+    <div className="mdx">
+      <Component components={components} />
+    </div>
+  )
+}

package/src/components/mobile-nav.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useDocsConfig } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { Drawer, DrawerContent, DrawerTrigger } from '@gentleduck/registry-ui-duckui/drawer'
+import { ScrollArea } from '@gentleduck/registry-ui-duckui/scroll-area'
+import { PanelsTopLeft } from 'lucide-react'
+import Link, { type LinkProps } from 'next/link'
+import { useRouter } from 'next/navigation'
+import * as React from 'react'
+
+export function MobileNav() {
+  const [open, setOpen] = React.useState(false)
+  const docsConfig = useDocsConfig()
+
+  return (
+    <Drawer onOpenChange={setOpen} open={open}>
+      <DrawerTrigger asChild>
+        <Button
+          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          icon={<PanelsTopLeft />}
+          size={'icon'}
+          variant="ghost"></Button>
+      </DrawerTrigger>
+      <DrawerContent className="pr-0 pb-4">
+        <ScrollArea>
+          <div className="hide-scroll my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+            <div className="flex flex-col space-y-3">
+              {docsConfig.mainNav?.map(
+                (item) =>
+                  item.href && (
+                    <MobileLink href={item.href} key={item.href} onOpenChange={setOpen}>
+                      {item.title}
+                    </MobileLink>
+                  ),
+              )}
+            </div>
+            <div className="flex flex-col space-y-2">
+              {docsConfig.sidebarNav.map((item, index) => (
+                <div className="flex flex-col space-y-3 pt-6" key={index}>
+                  <h4 className="font-medium">{item.title}</h4>
+                  {item?.items?.length &&
+                    item.items.map((item) => (
+                      <React.Fragment key={item.href}>
+                        {!item.disabled &&
+                          (item.href ? (
+                            <MobileLink className="text-muted-foreground" href={item.href} onOpenChange={setOpen}>
+                              {item.title}
+                              {item.label && (
+                                <span className="ml-2 rounded-md bg-primary px-1.5 py-0.5 text-accent text-xs leading-none no-underline group-hover:no-underline">
+                                  {item.label}
+                                </span>
+                              )}
+                            </MobileLink>
+                          ) : (
+                            item.title
+                          ))}
+                      </React.Fragment>
+                    ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </ScrollArea>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+interface MobileLinkProps extends LinkProps {
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+  className?: string
+}
+
+function MobileLink({ href, onOpenChange, className, children, ...props }: MobileLinkProps) {
+  const router = useRouter()
+  return (
+    <Link
+      className={cn(className)}
+      href={href}
+      onClick={() => {
+        router.push(href.toString())
+        onOpenChange?.(false)
+      }}
+      {...props}>
+      {children}
+    </Link>
+  )
+}

package/src/components/mode-toggle.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useSiteConfig } from '@duck-docs/context'
+import { useMetaColor } from '@duck-docs/hooks/use-meta-colors'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { MoonIcon, SunIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+
+const DEFAULT_META_THEME_COLORS = {
+  dark: '#000000',
+  light: '#ffffff',
+}
+
+export function ModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor } = useMetaColor()
+  const siteConfig = useSiteConfig()
+  const metaThemeColors = siteConfig.metaThemeColors ?? DEFAULT_META_THEME_COLORS
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+    setMetaColor(resolvedTheme === 'dark' ? metaThemeColors.light : metaThemeColors.dark)
+  }, [resolvedTheme, setTheme, setMetaColor])
+
+  return (
+    <Button
+      aria-label="toggle theme"
+      className="group/toggle"
+      icon={
+        <>
+          <SunIcon className="hidden [html.dark_&]:block" />
+          <MoonIcon className="hidden [html.light_&]:block" />
+        </>
+      }
+      onClick={toggleTheme}
+      size={'icon'}
+      variant="ghost"
+    />
+  )
+}

package/src/components/page-header.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@gentleduck/libs/cn'
+
+function PageHeader({ className, children, ...props }: React.ComponentProps<'section'>) {
+  return (
+    <section className={cn('border-grid', className)} {...props}>
+      <div className="container-wrapper">
+        <div className="container flex flex-col items-center gap-2 py-[clamp(2rem,5vw,5rem)] text-center xl:gap-4">
+          {children}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function PageHeaderHeading({ className, ...props }: React.ComponentProps<'h1'>) {
+  return (
+    <h1
+      className={cn(
+        'max-w-4xl text-balance font-semibold text-4xl text-primary uppercase leading-tighter tracking-tight lg:font-semibold lg:leading-[1.1] xl:text-5xl xl:tracking-tighter',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p className={cn('max-w-3xl text-balance text-accent-foreground/80 text-base sm:text-lg', className)} {...props} />
+  )
+}
+
+function PageActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex w-full items-center justify-center gap-2 pt-2 **:data-[slot=button]:shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }

package/src/components/providers.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { Provider as JotaiProvider } from 'jotai'
+import type { ThemeProviderProps } from 'next-themes'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import * as React from 'react'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return (
+    <JotaiProvider>
+      <NextThemesProvider {...props}>{children}</NextThemesProvider>
+    </JotaiProvider>
+  )
+}

package/src/components/themes/index.ts

@@ -0,0 +1 @@
+export * from './style-switcher'

package/src/components/themes/style-switcher.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useConfig } from '@duck-docs/hooks/use-config'
+import { type Style, styles } from '@duck-docs/lib/registry-styles'
+import { cn } from '@gentleduck/libs/cn'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@gentleduck/registry-ui-duckui/select'
+import type * as React from 'react'
+
+export function StyleSwitcher({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectTrigger>) {
+  const [config, setConfig] = useConfig()
+
+  return (
+    <Select
+      onValueChange={
+        ((value: Style['name']) =>
+          setConfig({
+            ...config,
+            style: value,
+          })) as never
+      }
+      value={config.style}>
+      <SelectTrigger className={cn('h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4', className)} {...props}>
+        <span className="text-muted-foreground">Style: </span>
+        <SelectValue placeholder="Select style" />
+      </SelectTrigger>
+      <SelectContent>
+        {styles.map((style) => (
+          <SelectItem className="text-xs" key={style.name} value={style.name}>
+            {style.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/context/context.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import type { DocsConfig, DocsContextValue, DocsEntry, DocsSiteConfig, RegistryIndex } from './context.types'
+
+const DocsContext = React.createContext<DocsContextValue | null>(null)
+
+export function DocsProvider({
+  children,
+  docs,
+  docsConfig,
+  registryIndex,
+  siteConfig,
+}: {
+  children: React.ReactNode
+  docs?: DocsEntry[]
+  docsConfig: DocsConfig
+  registryIndex?: RegistryIndex
+  siteConfig: DocsSiteConfig
+}) {
+  const value = React.useMemo(
+    () => ({
+      docs,
+      docsConfig,
+      registryIndex,
+      siteConfig,
+    }),
+    [docs, docsConfig, registryIndex, siteConfig],
+  )
+
+  return <DocsContext.Provider value={value}>{children}</DocsContext.Provider>
+}
+
+export function useDocsContext() {
+  const context = React.useContext(DocsContext)
+  if (!context) {
+    throw new Error(
+      'DocsProvider is missing. Wrap your app with <DocsProvider> from @gentleduck/docs and pass docsConfig and siteConfig.',
+    )
+  }
+  return context
+}
+
+export function useDocsConfig() {
+  const { docsConfig } = useDocsContext()
+  if (!docsConfig) {
+    throw new Error('DocsProvider is missing docsConfig. Pass docsConfig to <DocsProvider>.')
+  }
+  return docsConfig
+}
+
+export function useSiteConfig() {
+  const { siteConfig } = useDocsContext()
+  if (!siteConfig) {
+    throw new Error('DocsProvider is missing siteConfig. Pass siteConfig to <DocsProvider>.')
+  }
+  return siteConfig
+}
+
+export function useDocsEntries() {
+  return useDocsContext().docs
+}
+
+export function useRegistryIndex() {
+  return useDocsContext().registryIndex
+}

package/src/context/context.types.ts

@@ -0,0 +1,55 @@
+import type { MainNavItem, SidebarNavItem } from '@duck-docs/types/nav'
+export type DocsConfig = {
+  chartsNav?: SidebarNavItem[]
+  mainNav: MainNavItem[]
+  sidebarNav: SidebarNavItem[]
+}
+
+export type DocsSiteConfig = {
+  author?: {
+    name: string
+    url?: string
+  }
+  branding?: {
+    logoDark?: string
+    logoLight?: string
+  }
+  description?: string
+  githubRepo?: string
+  links?: {
+    email?: string
+    github?: string
+    twitter?: string
+  }
+  metaThemeColors?: {
+    dark: string
+    light: string
+  }
+  name: string
+  title?: string
+  url?: string
+}
+
+export type DocsEntry = {
+  component?: boolean
+  content?: string
+  permalink?: string
+  slug: string
+  title: string
+  toc?: TocEntry[]
+}
+
+export type TocEntry = {
+  items?: TocEntry[]
+  title: string
+  url: string
+}
+
+export type DocsContextValue = {
+  docs?: DocsEntry[]
+  docsConfig: DocsConfig
+  registryIndex?: RegistryIndex
+  siteConfig: DocsSiteConfig
+}
+
+export type RegistryIndex = Record<string, { component?: React.ComponentType } & Record<string, unknown>>

package/src/context/index.ts

@@ -0,0 +1,2 @@
+export * from './context'
+export * from './context.types'