Mark Henderson
57c283796f
- Deleted monolithic design-scaffolds.tsx (1154 lines, 72KB)
- New folder: components/design-scaffolds/
- types.ts — ThemeColor interface + all theme palettes
- web-app.tsx — SaaS app: Dashboard / Users / Settings with AppShell
- marketing.tsx — Landing page: hero, features, pricing, CTA
- admin.tsx — NEW unique admin: System health (servers/CPU/mem/errors),
Moderation (user table + audit log + ban/impersonate),
Config (API keys, feature flags, webhooks)
- mobile.tsx — Phone frame previews: NativeWind / Gluestack
- email.tsx — React Email welcome template preview
- docs.tsx — Nextra + shadcn docs previews
- index.ts — SCAFFOLD_REGISTRY + THEME_REGISTRY (only import needed)
- Adding a new surface = create one file + add 2 lines to index.ts
Made-with: Cursor
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
/**
|
|
* Design Scaffolds — modular UI previews for each design surface.
|
|
*
|
|
* Adding a new surface:
|
|
* 1. Create components/design-scaffolds/<surface>.tsx
|
|
* 2. Export your scaffold component(s) from it
|
|
* 3. Add the surface ID to SCAFFOLD_REGISTRY and THEME_REGISTRY below
|
|
* 4. Add it to ALL_SURFACES in the design page
|
|
*/
|
|
|
|
export type { ThemeColor } from "./types";
|
|
export {
|
|
SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
|
|
DAISY_THEMES, HEROUI_MARKETING_THEMES,
|
|
} from "./types";
|
|
|
|
import { WebAppShadcn, WebAppMantine, WebAppHeroUI, WebAppTremor } from "./web-app";
|
|
import { MarketingDaisy, MarketingHeroUI, MarketingAceternity, MarketingTailwind } from "./marketing";
|
|
import { AdminMantine, AdminShadcn, AdminTremor } from "./admin";
|
|
import { MobileNativewind, MobileGluestack } from "./mobile";
|
|
import { EmailReactEmail } from "./email";
|
|
import { DocsNextra, DocsShadcnCustom } from "./docs";
|
|
|
|
import type { ThemeColor } from "./types";
|
|
import {
|
|
SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
|
|
DAISY_THEMES, HEROUI_MARKETING_THEMES,
|
|
} from "./types";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SCAFFOLD_REGISTRY — surface → library → preview component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const SCAFFOLD_REGISTRY: Record<string, Record<string, React.ComponentType<{ themeColor?: ThemeColor }>>> = {
|
|
"web-app": {
|
|
shadcn: WebAppShadcn,
|
|
mantine: WebAppMantine,
|
|
"hero-ui": WebAppHeroUI,
|
|
tremor: WebAppTremor,
|
|
},
|
|
"marketing": {
|
|
"daisy-ui": MarketingDaisy,
|
|
"hero-ui": MarketingHeroUI,
|
|
aceternity: MarketingAceternity,
|
|
"tailwind-only": MarketingTailwind,
|
|
},
|
|
"admin": {
|
|
mantine: AdminMantine,
|
|
shadcn: AdminShadcn,
|
|
tremor: AdminTremor,
|
|
},
|
|
"mobile": {
|
|
nativewind: MobileNativewind,
|
|
gluestack: MobileGluestack,
|
|
},
|
|
"email": {
|
|
"react-email": EmailReactEmail,
|
|
},
|
|
"docs": {
|
|
nextra: DocsNextra,
|
|
shadcn: DocsShadcnCustom,
|
|
},
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// THEME_REGISTRY — surface → library → available color themes
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const THEME_REGISTRY: Record<string, Record<string, ThemeColor[]>> = {
|
|
"web-app": {
|
|
shadcn: SHADCN_THEMES,
|
|
mantine: MANTINE_THEMES,
|
|
"hero-ui": HEROUI_THEMES,
|
|
tremor: TREMOR_THEMES,
|
|
},
|
|
"marketing": {
|
|
"daisy-ui": DAISY_THEMES,
|
|
"hero-ui": HEROUI_MARKETING_THEMES,
|
|
},
|
|
"admin": {
|
|
mantine: MANTINE_THEMES,
|
|
shadcn: SHADCN_THEMES,
|
|
tremor: TREMOR_THEMES,
|
|
},
|
|
};
|