@gentleduck/docs 0.0.1

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './use-colors'
+export * from './use-config'
+export * from './use-lift-mode'
+export * from './use-meta-colors'
+export * from './use-mounted'
+export * from './use-themes-config'

package/src/hooks/use-colors.ts

@@ -0,0 +1,27 @@
+import type { ColorFormat } from '@duck-docs/lib/colors'
+import * as jotai from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { useMounted } from './use-mounted'
+
+type Config = {
+  format: ColorFormat
+  lastCopied: string
+}
+
+const colorsAtom = atomWithStorage<Config>('colors', {
+  format: 'hsl',
+  lastCopied: '',
+})
+
+export function useColors() {
+  const [colors, setColors] = jotai.useAtom(colorsAtom)
+  const mounted = useMounted()
+
+  return {
+    format: colors.format,
+    isLoading: !mounted,
+    lastCopied: colors.lastCopied,
+    setFormat: (format: ColorFormat) => setColors({ ...colors, format }),
+    setLastCopied: (lastCopied: string) => setColors({ ...colors, lastCopied }),
+  }
+}

package/src/hooks/use-config.ts

@@ -0,0 +1,19 @@
+import type { Style } from '@duck-docs/lib/registry-styles'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+type Config = {
+  style: Style['name']
+  theme: string
+  radius: number
+}
+
+const configAtom = atomWithStorage<Config>('config', {
+  radius: 0.5,
+  style: 'default',
+  theme: 'zinc',
+})
+
+export function useConfig() {
+  return useAtom(configAtom)
+}

package/src/hooks/use-lift-mode.ts

@@ -0,0 +1,19 @@
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+const configAtom = atomWithStorage<string[]>('lift-mode', [])
+
+export function useLiftMode(name: string) {
+  const [chunks, setChunks] = useAtom(configAtom)
+
+  function toggleLiftMode(name: string) {
+    setChunks((prev) => {
+      return prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
+    })
+  }
+
+  return {
+    isLiftMode: chunks.includes(name),
+    toggleLiftMode,
+  }
+}

package/src/hooks/use-meta-colors.ts

@@ -0,0 +1,27 @@
+import { useSiteConfig } from '@duck-docs/context'
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+
+const DEFAULT_META_THEME_COLORS = {
+  dark: '#000000',
+  light: '#ffffff',
+}
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme()
+  const siteConfig = useSiteConfig()
+  const metaThemeColors = siteConfig.metaThemeColors ?? DEFAULT_META_THEME_COLORS
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== 'dark' ? metaThemeColors.light : metaThemeColors.dark
+  }, [metaThemeColors.dark, metaThemeColors.light, resolvedTheme])
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', color)
+  }, [])
+
+  return {
+    metaColor,
+    setMetaColor,
+  }
+}

package/src/hooks/use-mounted.ts

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted
+}

package/src/hooks/use-themes-config.ts

@@ -0,0 +1,17 @@
+import { THEMES, type Theme } from '@duck-docs/lib/themes'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+type ThemesConfig = {
+  activeTheme: Theme
+}
+
+const configAtom = atomWithStorage<ThemesConfig>('themes:config', {
+  activeTheme: THEMES[0] as Theme,
+})
+
+export function useThemesConfig() {
+  const [themesConfig, setThemesConfig] = useAtom(configAtom)
+
+  return { setThemesConfig, themesConfig }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export type {
+  DocsConfig,
+  DocsContextValue,
+  DocsEntry,
+  DocsSiteConfig,
+  RegistryIndex,
+  TocEntry,
+} from './context/context.types'
+export * from './lib'
+export * from './types'

package/src/lib/charts.ts

@@ -0,0 +1,23 @@
+export function themeColorsToCssVariables(colors: Record<string, string>): Record<string, string> {
+  const cssVars = colors
+    ? Object.fromEntries(
+        Object.entries(colors).map(([name, value]) => {
+          if (value === undefined) return []
+          const cssName = themeColorNameToCssVariable(name)
+          return [cssName, value]
+        }),
+      )
+    : {}
+
+  // for (const key of Array.from({ length: 5 }, (_, index) => index)) {
+  //   cssVars[`--chart-${key + 1}`] =
+  //     cssVars[`--chart-${key + 1}`] ||
+  //     `${cssVars["--primary"]} / ${100 - key * 20}%`
+  // }
+
+  return cssVars
+}
+
+export function themeColorNameToCssVariable(name: string) {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`
+}

package/src/lib/colors.ts

@@ -0,0 +1,86 @@
+import { z } from 'zod'
+import { registry_colors } from './registry-colors-data'
+
+const colorSchema = z.object({
+  className: z.string(),
+  foreground: z.string(),
+  hex: z.string(),
+  hsl: z.string(),
+  id: z.string(),
+  name: z.string(),
+  oklch: z.string(),
+  rgb: z.string(),
+  scale: z.number(),
+  var: z.string(),
+})
+
+const colorPaletteSchema = z.object({
+  colors: z.array(colorSchema),
+  name: z.string(),
+})
+
+export type ColorPalette = z.infer<typeof colorPaletteSchema>
+
+export function getColorFormat(color: Color) {
+  return {
+    className: `bg-${color.name}-100`,
+    hex: color.hex,
+    hsl: color.hsl,
+    oklch: color.oklch,
+    rgb: color.rgb,
+    var: `--color-${color.name}-${color.scale}`,
+  }
+}
+
+export type ColorFormat = keyof ReturnType<typeof getColorFormat>
+
+export function getColors() {
+  const tailwindColors = colorPaletteSchema.array().parse(
+    Object.entries(registry_colors)
+      .map(([name, color]) => {
+        if (!Array.isArray(color)) {
+          return null
+        }
+
+        return {
+          colors: color.map((color) => {
+            const rgb = color.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3')
+
+            return {
+              ...color,
+              className: `${name}-${color.scale}`,
+              foreground: getForegroundFromBackground(rgb),
+              hsl: color.hsl.replace(/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, '$1 $2 $3'),
+              id: `${name}-${color.scale}`,
+              name,
+              oklch: `oklch(${color.oklch.replace(/^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/, '$1 $2 $3')})`,
+              rgb,
+              var: `--color-${name}-${color.scale}`,
+            }
+          }),
+          name,
+        }
+      })
+      .filter(Boolean),
+  )
+
+  return tailwindColors
+}
+
+export type Color = ReturnType<typeof getColors>[number]['colors'][number]
+
+function getForegroundFromBackground(rgb: string) {
+  const [r, g, b] = rgb.split(' ').map(Number)
+
+  function toLinear(number: number): number {
+    const base = number / 255
+    return base <= 0.04045 ? base / 12.92 : Math.pow((base + 0.055) / 1.055, 2.4)
+  }
+
+  if (!r || !g || !b) {
+    throw new Error(`Invalid RGB value: ${rgb}`)
+  }
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+
+  return luminance > 0.179 ? '#000' : '#fff'
+}

package/src/lib/events.ts

@@ -0,0 +1,30 @@
+// import va from '@vercel/analytics'
+import { z } from 'zod'
+
+const eventSchema = z.object({
+  name: z.enum([
+    'copy_npm_command',
+    'copy_usage_import_code',
+    'copy_usage_code',
+    'copy_primitive_code',
+    'copy_theme_code',
+    'copy_block_code',
+    'copy_chunk_code',
+    'enable_lift_mode',
+    'copy_chart_code',
+    'copy_chart_theme',
+    'copy_chart_data',
+    'copy_color',
+  ]),
+  // declare type AllowedPropertyValues = string | number | boolean | null
+  properties: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), z.null()])).optional(),
+})
+
+export type Event = z.infer<typeof eventSchema>
+
+export function trackEvent(input: Event): void {
+  const event = eventSchema.parse(input)
+  if (event) {
+    // va.track(event.name, event.properties)
+  }
+}

package/src/lib/index.ts

@@ -0,0 +1,5 @@
+export * from './charts'
+export * from './colors'
+export * from './events'
+export * from './themes'
+export * from './utils'