@sntlr/registry-shell 1.0.0

package/src/next-app/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/next-app/lib/branding.ts

@@ -0,0 +1,52 @@
+/**
+ * Client-safe branding. Populated by the CLI via NEXT_PUBLIC_SHELL_* env vars
+ * that Next.js inlines at build time. Values fall back to sensible defaults
+ * when no config is wired, so client code never crashes.
+ */
+import type { BrandingConfig, GithubConfig } from "@shell/lib/registry-adapter"
+
+const DEFAULT_BRANDING = {
+  siteName: "UI Registry",
+  shortName: "UI",
+  siteUrl: "",
+  description: "",
+  ogImage: "",
+  twitterHandle: "",
+  logoAlt: "UI",
+  faviconDark: "/favicon_dark.svg",
+  faviconLight: "/favicon_light.svg",
+  faviconIco: "/favicon.ico",
+} as const
+
+function pick(key: string, fallback: string): string {
+  const value = process.env[`NEXT_PUBLIC_SHELL_${key}`]
+  return value && value.length > 0 ? value : fallback
+}
+
+const githubOwner = pick("GITHUB_OWNER", "")
+const githubRepo = pick("GITHUB_REPO", "")
+const github: GithubConfig | undefined =
+  githubOwner && githubRepo
+    ? {
+        owner: githubOwner,
+        repo: githubRepo,
+        label: pick("GITHUB_LABEL", "Github"),
+        showStars: process.env.NEXT_PUBLIC_SHELL_GITHUB_SHOW_STARS !== "false",
+      }
+    : undefined
+
+export const branding: Required<Omit<BrandingConfig, "github">> & {
+  github: GithubConfig | undefined
+} = {
+  siteName: pick("SITE_NAME", DEFAULT_BRANDING.siteName),
+  shortName: pick("SHORT_NAME", DEFAULT_BRANDING.shortName),
+  siteUrl: pick("SITE_URL", DEFAULT_BRANDING.siteUrl),
+  description: pick("DESCRIPTION", DEFAULT_BRANDING.description),
+  ogImage: pick("OG_IMAGE", DEFAULT_BRANDING.ogImage),
+  twitterHandle: pick("TWITTER_HANDLE", DEFAULT_BRANDING.twitterHandle),
+  github,
+  logoAlt: pick("LOGO_ALT", DEFAULT_BRANDING.logoAlt),
+  faviconDark: pick("FAVICON_DARK", DEFAULT_BRANDING.faviconDark),
+  faviconLight: pick("FAVICON_LIGHT", DEFAULT_BRANDING.faviconLight),
+  faviconIco: pick("FAVICON_ICO", DEFAULT_BRANDING.faviconIco),
+}

package/src/next-app/lib/components-nav.ts

@@ -0,0 +1,8 @@
+import { registry } from "@shell/registry.config"
+import type { ComponentMeta } from "./registry-adapter"
+
+export type { ComponentMeta }
+
+export function getAllComponents(): ComponentMeta[] {
+  return registry?.getAllComponents() ?? []
+}

package/src/next-app/lib/docs.ts

@@ -0,0 +1,16 @@
+import { registry } from "@shell/registry.config"
+import type { DocMeta } from "./registry-adapter"
+
+export type { DocMeta }
+
+export function getAllDocs(): DocMeta[] {
+  return registry?.getAllDocs() ?? []
+}
+
+export function getDocBySlug(slug: string, locale?: string) {
+  return registry?.getDocBySlug(slug, locale) ?? null
+}
+
+export function getDocAllLocales(slug: string): Record<string, string> {
+  return registry?.getDocAllLocales(slug) ?? {}
+}

package/src/next-app/lib/github.ts

@@ -0,0 +1,38 @@
+import { branding } from "@shell/lib/branding"
+
+export const GITHUB_URL = branding.github
+  ? `https://github.com/${branding.github.owner}/${branding.github.repo}`
+  : ""
+
+interface RepoResponse {
+  stargazers_count?: number
+}
+
+/**
+ * Server-side fetch of the repository star count with a 1-hour Next.js
+ * revalidation window. Returns `null` when no GitHub config is set, when
+ * the registry opted out of stars, or on any API failure so callers can
+ * render the bare icon without throwing.
+ */
+export async function getGithubStars(): Promise<number | null> {
+  const gh = branding.github
+  if (!gh || gh.showStars === false) return null
+  try {
+    const res = await fetch(`https://api.github.com/repos/${gh.owner}/${gh.repo}`, {
+      next: { revalidate: 3600 },
+      headers: { Accept: "application/vnd.github+json" },
+    })
+    if (!res.ok) return null
+    const data = (await res.json()) as RepoResponse
+    return typeof data.stargazers_count === "number" ? data.stargazers_count : null
+  } catch {
+    return null
+  }
+}
+
+/** Compact star count: 1234 → "1.2k", 12345 → "12k", anything < 1000 stays as-is. */
+export function formatStarCount(count: number): string {
+  if (count < 1000) return String(count)
+  if (count < 10000) return `${(count / 1000).toFixed(1).replace(/\.0$/, "")}k`
+  return `${Math.round(count / 1000)}k`
+}