create-vexcms 0.0.20 → 0.1.0-alpha.2

package/templates/marketing-site/src/components/admin/IconPickerField.tsx

@@ -1,134 +0,0 @@
-"use client"
-
-import { useVexField } from "@vexcms/ui"
-import { icons } from "lucide-react"
-import { useMemo } from "react"
-
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "~/components/ui/combobox"
-import { Label } from "~/components/ui/label"
-import { cn } from "~/lib/utils"
-
-type IconName = keyof typeof icons
-
-const iconNames = Object.keys(icons) as IconName[]
-
-/**
- * Custom admin field component that renders a searchable icon picker.
- * Stores the selected icon name as a string (e.g. "Zap", "Shield", "Code").
- *
- * When used inside an array field, receives a `field` prop with synthetic
- * state/handleChange. When used at the top level, uses useVexField.
- */
-export default function IconPickerField({
-  name,
-  field: syntheticField,
-}: {
-  name: string
-  fieldDef?: any
-  readOnly?: boolean
-  field?: {
-    state: { value: unknown }
-    handleChange: (value: unknown) => void
-  }
-}) {
-  // Use synthetic field from array context, or useVexField for top-level
-  const vexField = useVexField<string>({ name })
-
-  const value = syntheticField
-    ? (syntheticField.state.value as string) ?? ""
-    : vexField.value ?? ""
-
-  const setValueFn = syntheticField
-    ? (v: string) => syntheticField.handleChange(v)
-    : (v: string) => vexField.setValue(v)
-
-  const fieldDef = vexField.fieldDef
-  const readOnly = vexField.readOnly
-
-  const selectedIcon = value && value in icons ? value : null
-  const SelectedIconComponent = selectedIcon
-    ? icons[selectedIcon as IconName]
-    : null
-
-  // Sort items so the selected icon appears first
-  const sortedItems = useMemo(() => {
-    if (!selectedIcon) return iconNames
-    return [
-      selectedIcon as IconName,
-      ...iconNames.filter((n) => n !== selectedIcon),
-    ]
-  }, [selectedIcon])
-
-  return (
-    <div className="space-y-2">
-      <Label>{(fieldDef as any)?.label ?? "Icon"}</Label>
-      <div className="flex items-start gap-2">
-        {/* Icon preview square */}
-        <div
-          className={cn(
-            "flex size-9 shrink-0 items-center justify-center rounded-md border bg-background",
-            selectedIcon
-              ? "text-foreground"
-              : "text-muted-foreground/40"
-          )}
-        >
-          {SelectedIconComponent ? (
-            <SelectedIconComponent className="size-4" />
-          ) : null}
-        </div>
-
-        {/* Combobox */}
-        <div className="flex-1">
-          <Combobox
-            value={selectedIcon ?? ""}
-            onValueChange={(val) => {
-              // Toggle: clicking the already-selected icon deselects it
-              if (val === selectedIcon) {
-                setValueFn("")
-              } else {
-                setValueFn((val as string) ?? "")
-              }
-            }}
-            items={sortedItems}
-          >
-            <ComboboxInput
-              placeholder="Search icons..."
-              disabled={readOnly}
-            />
-            <ComboboxContent>
-              <ComboboxEmpty>No icons found</ComboboxEmpty>
-              <ComboboxList>
-                {(iconName) => {
-                  const Icon = icons[iconName as IconName]
-                  const isSelected = iconName === selectedIcon
-                  return (
-                    <ComboboxItem
-                      key={iconName}
-                      value={iconName}
-                      className={cn(isSelected && "bg-accent")}
-                    >
-                      <Icon className="size-4 shrink-0" />
-                      <span>{iconName}</span>
-                    </ComboboxItem>
-                  )
-                }}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </div>
-      </div>
-      {(fieldDef as any)?.admin?.description && (
-        <p className="text-muted-foreground text-xs">
-          {(fieldDef as any).admin.description}
-        </p>
-      )}
-    </div>
-  )
-}

package/templates/marketing-site/src/components/admin/ThemeImport.tsx

@@ -1,174 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { parseThemeCSS } from "~/lib/colorConvert"
-
-/**
- * CSS variable name → form field path mapping.
- * Maps CSS custom property names (from :root / .dark blocks)
- * to the field paths in the themes collection form.
- *
- * Tabs with slugs create nested paths: "light.background", "dark.background"
- * This maps the CSS var name to the camelCase field name used in themeColorFields().
- */
-const CSS_VAR_TO_FIELD: Record<string, string> = {
-  background: "background",
-  foreground: "foreground",
-  card: "card",
-  "card-foreground": "cardForeground",
-  popover: "popover",
-  "popover-foreground": "popoverForeground",
-  primary: "primary",
-  "primary-foreground": "primaryForeground",
-  secondary: "secondary",
-  "secondary-foreground": "secondaryForeground",
-  muted: "muted",
-  "muted-foreground": "mutedForeground",
-  accent: "accent",
-  "accent-foreground": "accentForeground",
-  destructive: "destructive",
-  "destructive-foreground": "destructiveForeground",
-  border: "border",
-  input: "input",
-  ring: "ring",
-  "chart-1": "chart1",
-  "chart-2": "chart2",
-  "chart-3": "chart3",
-  "chart-4": "chart4",
-  "chart-5": "chart5",
-  sidebar: "sidebar",
-  "sidebar-foreground": "sidebarForeground",
-  "sidebar-primary": "sidebarPrimary",
-  "sidebar-primary-foreground": "sidebarPrimaryForeground",
-  "sidebar-accent": "sidebarAccent",
-  "sidebar-accent-foreground": "sidebarAccentForeground",
-  "sidebar-border": "sidebarBorder",
-  "sidebar-ring": "sidebarRing",
-}
-
-interface ThemeImportProps {
-  /** Callback to set a form field value by path. e.g., setFieldValue("light.background", "#fff") */
-  onImport: (updates: Record<string, string>) => void
-}
-
-/**
- * Theme import component — paste CSS from tweakcn/shadcn to populate color fields.
- *
- * Parses :root { } and .dark { } blocks from the CSS, maps variable names to
- * form field paths, and calls onImport with all matched field updates.
- *
- * Designed to work with any CSS file — only updates fields that match known
- * CSS variable names. Unmatched variables are silently ignored.
- */
-export function ThemeImport({ onImport }: ThemeImportProps) {
-  const [css, setCss] = useState("")
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [importResult, setImportResult] = useState<string | null>(null)
-
-  const handleImport = () => {
-    if (!css.trim()) return
-
-    const parsed = parseThemeCSS({ css })
-    const updates: Record<string, string> = {}
-    let count = 0
-
-    // Map light colors to light.{fieldName} paths
-    for (const [cssVar, value] of Object.entries(parsed.light)) {
-      const fieldName = CSS_VAR_TO_FIELD[cssVar]
-      if (fieldName) {
-        updates[`light.${fieldName}`] = value
-        count++
-      }
-    }
-
-    // Map dark colors to dark.{fieldName} paths
-    for (const [cssVar, value] of Object.entries(parsed.dark)) {
-      const fieldName = CSS_VAR_TO_FIELD[cssVar]
-      if (fieldName) {
-        updates[`dark.${fieldName}`] = value
-        count++
-      }
-    }
-
-    if (count > 0) {
-      onImport(updates)
-      setImportResult(`Imported ${count} color values`)
-      setCss("")
-      setTimeout(() => setImportResult(null), 3000)
-    } else {
-      setImportResult("No matching CSS variables found")
-      setTimeout(() => setImportResult(null), 3000)
-    }
-  }
-
-  return (
-    <div className="rounded-lg border bg-card p-4 mb-6">
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center gap-2 text-sm font-medium w-full text-left"
-      >
-        <span className={`transition-transform ${isExpanded ? "rotate-90" : ""}`}>▶</span>
-        Import Theme from CSS
-      </button>
-
-      {isExpanded && (
-        <div className="mt-3 space-y-3">
-          <p className="text-xs text-muted-foreground">
-            Paste CSS from{" "}
-            <a
-              href="https://tweakcn.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline"
-            >
-              tweakcn
-            </a>
-            {" "}or{" "}
-            <a
-              href="https://ui.shadcn.com/themes"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline"
-            >
-              shadcn/ui themes
-            </a>
-            . The importer will match CSS variable names to color fields and fill them in.
-          </p>
-
-          <textarea
-            value={css}
-            onChange={(e) => setCss(e.target.value)}
-            placeholder={`:root {
-  --background: #ffffff;
-  --foreground: #0a0a0a;
-  --primary: #171717;
-  ...
-}
-
-.dark {
-  --background: #0a0a0a;
-  ...
-}`}
-            className="w-full h-40 rounded-md border bg-background px-3 py-2 text-xs font-mono resize-y"
-          />
-
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={handleImport}
-              disabled={!css.trim()}
-              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-            >
-              Import
-            </button>
-            {importResult && (
-              <span className="text-xs text-muted-foreground">{importResult}</span>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/templates/marketing-site/src/components/admin/ThemeImportField.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import { useVexFormContext } from "@vexcms/ui"
-
-import { ThemeImport } from "./ThemeImport"
-
-/**
- * Custom admin field component that renders the theme CSS import UI.
- * Uses the VexForm context to programmatically set color field values
- * when CSS is imported.
- *
- * Register on a ui() field in the themes collection:
- * ```ts
- * importTheme: ui({ admin: { components: { Field: ThemeImportField } } })
- * ```
- */
-export default function ThemeImportField() {
-  const { form } = useVexFormContext()
-
-  const handleImport = (updates: Record<string, string>) => {
-    for (const [path, value] of Object.entries(updates)) {
-      // Path is like "light.background" or "dark.foreground"
-      // Tabs expand to top-level keys, so the form field path is just the path directly
-      try {
-        form.setFieldValue(path as any, value)
-      } catch {
-        // Field might not exist in this form — silently skip
-      }
-    }
-  }
-
-  return <ThemeImport onImport={handleImport} />
-}

package/templates/marketing-site/src/db/constants/index.ts

@@ -1,52 +0,0 @@
-export * from "./auth"
-
-// Better Auth
-export const TABLE_SLUG_USERS = "user" as const
-export const TABLE_SLUG_ACCOUNTS = "account" as const
-export const TABLE_SLUG_SESSIONS = "session" as const
-export const TABLE_SLUG_VERIFICATIONS = "verification" as const
-export const TABLE_SLUG_JWKS = "jwks" as const
-
-// Media
-export const TABLE_SLUG_MEDIA = "media" as const
-
-// Site Builder
-export const TABLE_SLUG_PAGES = "pages" as const
-export const TABLE_SLUG_HEADERS = "headers" as const
-export const TABLE_SLUG_FOOTERS = "footers" as const
-export const TABLE_SLUG_THEMES = "themes" as const
-export const TABLE_SLUG_SITE_SETTINGS = "site_settings" as const
-
-export const AUTH_PROVIDERS = {
-  apple: "apple",
-  atlassian: "atlassian",
-  cognito: "cognito",
-  discord: "discord",
-  dropbox: "dropbox",
-  facebook: "facebook",
-  figma: "figma",
-  github: "github",
-  gitlab: "gitlab",
-  google: "google",
-  huggingface: "huggingface",
-  kakao: "kakao",
-  kick: "kick",
-  line: "line",
-  linear: "linear",
-  linkedin: "linkedin",
-  microsoft: "microsoft",
-  naver: "naver",
-  notion: "notion",
-  paypal: "paypal",
-  reddit: "reddit",
-  roblox: "roblox",
-  salesforce: "salesforce",
-  slack: "slack",
-  spotify: "spotify",
-  tiktok: "tiktok",
-  twitch: "twitch",
-  twitter: "twitter",
-  vk: "vk",
-  zoom: "zoom",
-} as const
-export type AuthProvider = (typeof AUTH_PROVIDERS)[keyof typeof AUTH_PROVIDERS]

package/templates/marketing-site/src/lib/colorConvert.ts

@@ -1,171 +0,0 @@
-// @ts-expect-error culori/fn lacks type declarations in v4
-import { parse, formatHex, formatHsl, converter } from "culori/fn"
-
-const toOklch = converter("oklch")
-
-/**
- * Convert a color string to the specified format.
- *
- * @param props.color - Input color in any CSS-parseable format
- * @param props.format - Target format: "hex", "hsl", or "oklch"
- * @returns Formatted color string, or the original if parsing fails
- */
-export function convertColor(props: {
-  color: string
-  format: "hex" | "hsl" | "oklch"
-}): string {
-  if (!props.color || props.color.startsWith("var(")) return props.color
-
-  const parsed = parse(props.color)
-  if (!parsed) return props.color
-
-  switch (props.format) {
-    case "hex":
-      return formatHex(parsed) ?? props.color
-    case "hsl":
-      return formatHsl(parsed) ?? props.color
-    case "oklch": {
-      const oklch = toOklch(parsed)
-      if (!oklch) return props.color
-      const l = (oklch.l ?? 0).toFixed(3)
-      const c = (oklch.c ?? 0).toFixed(3)
-      const h = (oklch.h ?? 0).toFixed(1)
-      return `oklch(${l} ${c} ${h})`
-    }
-    default:
-      return props.color
-  }
-}
-
-/**
- * Known CSS custom property names that represent colors.
- * These are the standard shadcn/Tailwind CSS variables.
- */
-const COLOR_VAR_NAMES = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "destructive-foreground",
-  "border",
-  "input",
-  "ring",
-  "chart-1",
-  "chart-2",
-  "chart-3",
-  "chart-4",
-  "chart-5",
-  "sidebar",
-  "sidebar-foreground",
-  "sidebar-primary",
-  "sidebar-primary-foreground",
-  "sidebar-accent",
-  "sidebar-accent-foreground",
-  "sidebar-border",
-  "sidebar-ring",
-]
-
-/**
- * Extract color CSS custom properties from the document's stylesheets.
- * Returns light and dark values for each known color variable.
- */
-export function getThemeColorsFromDOM(): {
-  name: string
-  lightValue: string
-  darkValue: string | null
-}[] {
-  if (typeof document === "undefined") return []
-
-  const results: { name: string; lightValue: string; darkValue: string | null }[] = []
-
-  // Get computed styles for :root (light mode)
-  const rootStyles = getComputedStyle(document.documentElement)
-
-  // Try to get dark mode values by reading stylesheets
-  const darkValues = new Map<string, string>()
-  try {
-    for (const sheet of document.styleSheets) {
-      try {
-        for (const rule of sheet.cssRules) {
-          if (rule instanceof CSSStyleRule && rule.selectorText?.includes(".dark")) {
-            for (const varName of COLOR_VAR_NAMES) {
-              const value = rule.style.getPropertyValue(`--${varName}`).trim()
-              if (value) darkValues.set(varName, value)
-            }
-          }
-        }
-      } catch {
-        // Cross-origin stylesheet — skip
-      }
-    }
-  } catch {
-    // No stylesheet access
-  }
-
-  for (const varName of COLOR_VAR_NAMES) {
-    const lightValue = rootStyles.getPropertyValue(`--${varName}`).trim()
-    if (!lightValue) continue
-
-    results.push({
-      name: varName,
-      lightValue,
-      darkValue: darkValues.get(varName) ?? null,
-    })
-  }
-
-  return results
-}
-
-/**
- * Parse CSS text containing :root and .dark variable declarations.
- * Used by the theme import feature to extract color values from pasted CSS.
- *
- * @param props.css - Raw CSS text containing :root { } and optionally .dark { }
- * @returns Parsed light and dark color maps
- */
-export function parseThemeCSS(props: { css: string }): {
-  light: Record<string, string>
-  dark: Record<string, string>
-} {
-  const light: Record<string, string> = {}
-  const dark: Record<string, string> = {}
-
-  // Match :root { ... } block
-  const rootMatch = props.css.match(/:root\s*\{([\s\S]+?)\}/)
-  if (rootMatch) {
-    const vars = rootMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
-    for (const match of vars) {
-      const name = match[1].trim()
-      const value = match[2].trim()
-      if (COLOR_VAR_NAMES.includes(name)) {
-        light[name] = value
-      }
-    }
-  }
-
-  // Match .dark { ... } block
-  const darkMatch = props.css.match(/\.dark\s*\{([\s\S]+?)\}/)
-  if (darkMatch) {
-    const vars = darkMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
-    for (const match of vars) {
-      const name = match[1].trim()
-      const value = match[2].trim()
-      if (COLOR_VAR_NAMES.includes(name)) {
-        dark[name] = value
-      }
-    }
-  }
-
-  return { light, dark }
-}

package/templates/marketing-site/src/vexcms/access.ts

@@ -1,36 +0,0 @@
-import { defineAccess } from "@vexcms/core"
-
-import { TABLE_SLUG_USERS, USER_ROLES } from "~/db/constants"
-import { footers, headers, media, pages, themes, users } from "~/vexcms/collections"
-import { siteSettings } from "~/vexcms/globals"
-
-export const access = defineAccess({
-  roles: [USER_ROLES.admin, USER_ROLES.user],
-  resources: [pages, headers, footers, themes, users, media, siteSettings],
-  userCollection: users,
-  permissions: {
-    admin: {
-      admin: true,
-      pages: true,
-      headers: true,
-      footers: true,
-      themes: true,
-      user: true,
-      media: true,
-      site_settings: true,
-    },
-    user: {
-      admin: false,
-      [TABLE_SLUG_USERS]: {
-        create: false,
-        delete: false,
-        read: ({ data: targetUser, user }) => {
-          return targetUser._id === user._id
-        },
-        update: ({ data: targetUser, user }) => {
-          return targetUser._id === user._id
-        },
-      },
-    },
-  },
-})

package/templates/marketing-site/vex.config.ts

@@ -1,32 +0,0 @@
-import { defineConfig } from "@vexcms/core"
-import { convexFileStorage } from "@vexcms/file-storage-convex"
-
-import { auth } from "~/vexcms/auth"
-import { access } from "~/vexcms/access"
-import {
-  footers,
-  headers,
-  media,
-  pages,
-  themes,
-  users,
-} from "~/vexcms/collections"
-import { siteSettings } from "~/vexcms/globals"
-
-export default defineConfig({
-  access,
-  admin: {
-    meta: {
-      titleSuffix: " | My Site",
-    },
-    user: "user",
-  },
-  auth,
-  basePath: "/admin",
-  collections: [pages, headers, footers, themes, users],
-  globals: [siteSettings],
-  media: {
-    collections: [media],
-    storageAdapter: convexFileStorage(),
-  },
-})