mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
spike: agnostic ui + non-nextjs test app
This commit is contained in:
Charis Lam committed
1 parent
4bb53ef792
commit
1954b9d625
20 files changed
+926
-312
No files matched your search
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>UI Base — Vite Validation</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "ui-vite-test",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.436.0",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:",
|
||||
"sonner": "^1.5.0",
|
||||
"ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "catalog:",
|
||||
"vite": "catalog:"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/* Layout styles for the ui-vite-test demo page shell.
|
||||
Component styles come from ui/base.css — this file only covers
|
||||
the page wrapper and section spacing used in App.tsx. */
|
||||
|
||||
.demo-page {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 3.5rem;
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-page h1 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-subtitle {
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.demo-section-title {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-badges {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-skeletons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.demo-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.demo-alert {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.demo-accordion {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.demo-separator {
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import './App.css'
|
||||
import { Terminal } from 'lucide-react'
|
||||
import {
|
||||
Alert_Shadcn_,
|
||||
AlertDescription_Shadcn_,
|
||||
AlertTitle_Shadcn_,
|
||||
Accordion_Shadcn_,
|
||||
AccordionContent_Shadcn_,
|
||||
AccordionItem_Shadcn_,
|
||||
AccordionTrigger_Shadcn_,
|
||||
Badge,
|
||||
Button,
|
||||
Button_Shadcn_,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Checkbox_Shadcn_,
|
||||
Input_Shadcn_,
|
||||
Label_Shadcn_,
|
||||
Select_Shadcn_,
|
||||
SelectContent_Shadcn_,
|
||||
SelectItem_Shadcn_,
|
||||
SelectTrigger_Shadcn_,
|
||||
SelectValue_Shadcn_,
|
||||
Separator,
|
||||
Skeleton,
|
||||
Switch,
|
||||
Tabs_Shadcn_,
|
||||
TabsContent_Shadcn_,
|
||||
TabsList_Shadcn_,
|
||||
TabsTrigger_Shadcn_,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
SonnerToaster,
|
||||
} from 'ui/base'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
// Proof: none of these imports touch next/image, next/link, or next/navigation.
|
||||
// If any Next.js module were reachable from ui/base, this file would fail to
|
||||
// compile in a non-Next.js environment.
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<section className="demo-section">
|
||||
<h2 className="demo-section-title text-lg font-semibold text-foreground border-b border-border-muted">
|
||||
{title}
|
||||
</h2>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="demo-page bg-background text-foreground">
|
||||
<h1 className="text-3xl font-bold">UI Base — Vite Validation</h1>
|
||||
<p className="demo-subtitle text-foreground-light text-sm">
|
||||
All components imported from{' '}
|
||||
<code className="font-mono text-xs bg-surface-200 px-1 py-0.5 rounded">ui/base</code>{' '}
|
||||
(pre-built, no Next.js).
|
||||
</p>
|
||||
|
||||
<Section title="Buttons">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button type="primary" onClick={() => toast('Primary button clicked')}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button type="default">Default</Button>
|
||||
<Button type="outline">Outline</Button>
|
||||
<Button type="danger">Danger</Button>
|
||||
<Button type="text">Text</Button>
|
||||
<Button_Shadcn_ variant="outline">Shadcn Button</Button_Shadcn_>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Badges & Skeleton">
|
||||
<div className="demo-badges flex flex-wrap items-center gap-3">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
</div>
|
||||
<div className="demo-skeletons">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Form Inputs">
|
||||
<div className="demo-form">
|
||||
<div className="demo-form-field">
|
||||
<Label_Shadcn_ htmlFor="email">Email</Label_Shadcn_>
|
||||
<Input_Shadcn_ id="email" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
<div className="demo-form-row">
|
||||
<Checkbox_Shadcn_ id="terms" />
|
||||
<Label_Shadcn_ htmlFor="terms">Accept terms</Label_Shadcn_>
|
||||
</div>
|
||||
<div className="demo-form-row">
|
||||
<Switch id="notifications" />
|
||||
<Label_Shadcn_ htmlFor="notifications">Enable notifications</Label_Shadcn_>
|
||||
</div>
|
||||
<Select_Shadcn_>
|
||||
<SelectTrigger_Shadcn_>
|
||||
<SelectValue_Shadcn_ placeholder="Select a region" />
|
||||
</SelectTrigger_Shadcn_>
|
||||
<SelectContent_Shadcn_>
|
||||
<SelectItem_Shadcn_ value="us-east-1">US East (N. Virginia)</SelectItem_Shadcn_>
|
||||
<SelectItem_Shadcn_ value="eu-west-1">EU West (Ireland)</SelectItem_Shadcn_>
|
||||
<SelectItem_Shadcn_ value="ap-southeast-1">AP Southeast (Singapore)</SelectItem_Shadcn_>
|
||||
</SelectContent_Shadcn_>
|
||||
</Select_Shadcn_>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Card + Tabs">
|
||||
<Card className="demo-card">
|
||||
<CardHeader>
|
||||
<CardTitle>Project settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs_Shadcn_ defaultValue="general">
|
||||
<TabsList_Shadcn_>
|
||||
<TabsTrigger_Shadcn_ value="general">General</TabsTrigger_Shadcn_>
|
||||
<TabsTrigger_Shadcn_ value="billing">Billing</TabsTrigger_Shadcn_>
|
||||
<TabsTrigger_Shadcn_ value="team">Team</TabsTrigger_Shadcn_>
|
||||
</TabsList_Shadcn_>
|
||||
<TabsContent_Shadcn_ value="general" className="pt-3">
|
||||
General settings content.
|
||||
</TabsContent_Shadcn_>
|
||||
<TabsContent_Shadcn_ value="billing" className="pt-3">
|
||||
Billing settings content.
|
||||
</TabsContent_Shadcn_>
|
||||
<TabsContent_Shadcn_ value="team" className="pt-3">
|
||||
Team settings content.
|
||||
</TabsContent_Shadcn_>
|
||||
</Tabs_Shadcn_>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<Section title="Alert">
|
||||
<Alert_Shadcn_ className="demo-alert">
|
||||
<Terminal size={16} />
|
||||
<AlertTitle_Shadcn_>Build successful</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
All base components render correctly without Next.js.
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
</Section>
|
||||
|
||||
<Section title="Accordion">
|
||||
<Accordion_Shadcn_ type="single" collapsible className="demo-accordion">
|
||||
<AccordionItem_Shadcn_ value="q1">
|
||||
<AccordionTrigger_Shadcn_>What is Supabase?</AccordionTrigger_Shadcn_>
|
||||
<AccordionContent_Shadcn_>
|
||||
An open source Firebase alternative built on top of Postgres.
|
||||
</AccordionContent_Shadcn_>
|
||||
</AccordionItem_Shadcn_>
|
||||
<AccordionItem_Shadcn_ value="q2">
|
||||
<AccordionTrigger_Shadcn_>Is it free?</AccordionTrigger_Shadcn_>
|
||||
<AccordionContent_Shadcn_>
|
||||
Yes — generous free tier with no credit card required.
|
||||
</AccordionContent_Shadcn_>
|
||||
</AccordionItem_Shadcn_>
|
||||
</Accordion_Shadcn_>
|
||||
</Section>
|
||||
|
||||
<Separator className="demo-separator" />
|
||||
|
||||
<Section title="Tooltip">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button_Shadcn_ variant="outline">Hover for tooltip</Button_Shadcn_>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Rendered via Radix UI — no Next.js required.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
<SonnerToaster />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
// Ambient declarations needed when TypeScript follows source files from packages/ui.
|
||||
|
||||
declare module '*.css' {
|
||||
const styles: Record<string, string>
|
||||
export default styles
|
||||
}
|
||||
|
||||
declare module 'highlightjs-curl' {
|
||||
const languageFunc: unknown
|
||||
export = languageFunc
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
// Pre-built CSS: design tokens + Tailwind utilities + component CSS modules.
|
||||
// No Tailwind config needed in this app.
|
||||
import 'ui/base.css'
|
||||
import App from './App'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider attribute="data-theme" defaultTheme="dark">
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</StrictMode>
|
||||
)
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
"target": "ES2021",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// No Tailwind or PostCSS needed — all CSS comes pre-built from ui/base.css.
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@@ -1 +1,2 @@
|
||||
.vercel
|
||||
dist/
|
||||
@@ -0,0 +1,304 @@
|
||||
// Next.js-agnostic entry point for packages/ui.
|
||||
// This is the source of truth for the base bundle.
|
||||
//
|
||||
// The following components are intentionally excluded because they import from next/*:
|
||||
// - src/lib/Markdown (imports next/image)
|
||||
// - src/components/Image (imports next/image)
|
||||
// - src/components/TextLink (imports next/link)
|
||||
// - src/layout/banners (imports next/navigation)
|
||||
//
|
||||
// New exports should be added here by default.
|
||||
// Only add to index.tsx if the component requires Next.js APIs.
|
||||
|
||||
// GENERAL
|
||||
|
||||
export * from './src/components/Button'
|
||||
export * from './src/components/Icon/IconBackground'
|
||||
|
||||
// DISPLAYS
|
||||
|
||||
export { Card as Card_legacy_ } from './src/components/Card'
|
||||
export * from './src/components/Tabs'
|
||||
export * from './src/components/Alert'
|
||||
export * from './src/components/Accordion'
|
||||
export * from './src/components/Collapsible'
|
||||
export * from './src/components/CodeBlock'
|
||||
export * from './src/components/SimpleCodeBlock'
|
||||
export * from './src/components/Mermaid'
|
||||
|
||||
// NAV
|
||||
|
||||
export * from './src/components/Menu'
|
||||
export * from './src/components/NavMenu'
|
||||
|
||||
// OVERLAYS
|
||||
|
||||
export * from './src/components/Modal'
|
||||
export * from './src/components/SidePanel'
|
||||
export * from './src/components/Popover'
|
||||
|
||||
// HTML
|
||||
|
||||
export { Heading } from './src/components/CustomHTMLElements'
|
||||
|
||||
// UTILITIES
|
||||
|
||||
export * from './src/components/Space'
|
||||
export * from './src/components/Loading'
|
||||
export * from './src/components/LogoLoader'
|
||||
export * from './src/components/AnimatedCounter'
|
||||
export * from './src/lib/utils'
|
||||
|
||||
// DATA ENTRY
|
||||
|
||||
export * from './src/components/Select'
|
||||
export * from './src/components/Listbox'
|
||||
export * from './src/components/Checkbox'
|
||||
export * from './src/components/Input'
|
||||
export * from './src/components/InputNumber'
|
||||
export * from './src/components/Radio'
|
||||
export * from './src/components/Toggle'
|
||||
export * from './src/components/Form'
|
||||
export * from './src/components/ExpandingTextArea'
|
||||
|
||||
export * from './src/components/PrePostTab'
|
||||
|
||||
// layout
|
||||
export * from './src/components/LoadingLine'
|
||||
|
||||
// ai icon
|
||||
export * from './src/layout/ai-icon-animation'
|
||||
|
||||
// theme switcher
|
||||
export * from './src/components/ThemeProvider/themes'
|
||||
export * from './src/components/ThemeProvider/singleThemes'
|
||||
|
||||
// shadcn
|
||||
export * from './src/components/shadcn/ui/dropdown-menu'
|
||||
export * from './src/components/shadcn/ui/sonner'
|
||||
export * from './src/components/shadcn/ui/sonner-progress'
|
||||
export * from './src/components/shadcn/ui/separator'
|
||||
export * from './src/components/shadcn/ui/sheet'
|
||||
export * from './src/components/shadcn/ui/badge'
|
||||
export * from './src/components/shadcn/ui/input-otp'
|
||||
export * from './src/components/shadcn/ui/alert-dialog'
|
||||
export * from './src/components/shadcn/ui/avatar'
|
||||
export * from './src/components/shadcn/ui/drawer'
|
||||
export * from './src/components/shadcn/ui/menubar'
|
||||
export * from './src/components/shadcn/ui/navigation-menu'
|
||||
export * from './src/components/shadcn/ui/progress'
|
||||
export * from './src/components/shadcn/ui/skeleton'
|
||||
export * from './src/components/shadcn/ui/slider'
|
||||
export * from './src/components/shadcn/ui/textarea'
|
||||
export * from './src/components/shadcn/ui/toggle-group'
|
||||
|
||||
export { Toggle as Toggle_Shadcn_ } from './src/components/shadcn/ui/toggle'
|
||||
|
||||
export * from './src/components/shadcn/ui/card'
|
||||
|
||||
export {
|
||||
Command as Command_Shadcn_,
|
||||
CommandDialog as CommandDialog,
|
||||
CommandInput as CommandInput_Shadcn_,
|
||||
CommandList as CommandList_Shadcn_,
|
||||
CommandEmpty as CommandEmpty_Shadcn_,
|
||||
CommandGroup as CommandGroup_Shadcn_,
|
||||
CommandItem as CommandItem_Shadcn_,
|
||||
CommandShortcut as CommandShortcut_Shadcn_,
|
||||
CommandSeparator as CommandSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/command'
|
||||
|
||||
export {
|
||||
ContextMenu as ContextMenu_Shadcn_,
|
||||
ContextMenuTrigger as ContextMenuTrigger_Shadcn_,
|
||||
ContextMenuContent as ContextMenuContent_Shadcn_,
|
||||
ContextMenuItem as ContextMenuItem_Shadcn_,
|
||||
ContextMenuSeparator as ContextMenuSeparator_Shadcn_,
|
||||
ContextMenuLabel as ContextMenuLabel_Shadcn_,
|
||||
ContextMenuRadioGroup as ContextMenuRadioGroup_Shadcn_,
|
||||
ContextMenuRadioItem as ContextMenuRadioItem_Shadcn_,
|
||||
ContextMenuShortcut as ContextMenuShortcut_Shadcn_,
|
||||
ContextMenuSub as ContextMenuSub_Shadcn_,
|
||||
ContextMenuSubContent as ContextMenuSubContent_Shadcn_,
|
||||
ContextMenuSubTrigger as ContextMenuSubTrigger_Shadcn_,
|
||||
ContextMenuCheckboxItem as ContextMenuCheckboxItem_Shadcn_,
|
||||
ContextMenuGroup as ContextMenuGroup_Shadcn_,
|
||||
ContextMenuPortal as ContextMenuPortal_Shadcn_,
|
||||
} from './src/components/shadcn/ui/context-menu'
|
||||
|
||||
export * from './src/components/shadcn/ui/dialog'
|
||||
|
||||
export {
|
||||
Alert as Alert_Shadcn_,
|
||||
AlertTitle as AlertTitle_Shadcn_,
|
||||
AlertDescription as AlertDescription_Shadcn_,
|
||||
} from './src/components/shadcn/ui/alert'
|
||||
|
||||
export * from './src/components/AlertCollapsible'
|
||||
|
||||
export {
|
||||
Field as Field_Shadcn_,
|
||||
FieldContent as FieldContent_Shadcn_,
|
||||
FieldDescription as FieldDescription_Shadcn_,
|
||||
FieldError as FieldError_Shadcn_,
|
||||
FieldGroup as FieldGroup_Shadcn_,
|
||||
FieldLabel as FieldLabel_Shadcn_,
|
||||
FieldLegend as FieldLegend_Shadcn_,
|
||||
FieldSeparator as FieldSeparator_Shadcn_,
|
||||
FieldSet as FieldSet_Shadcn_,
|
||||
FieldTitle as FieldTitle_Shadcn_,
|
||||
} from './src/components/shadcn/ui/field'
|
||||
|
||||
export {
|
||||
useFormField as useFormField_Shadcn_,
|
||||
Form as Form_Shadcn_,
|
||||
FormItem as FormItem_Shadcn_,
|
||||
FormLabel as FormLabel_Shadcn_,
|
||||
FormControl as FormControl_Shadcn_,
|
||||
FormDescription as FormDescription_Shadcn_,
|
||||
FormMessage as FormMessage_Shadcn_,
|
||||
FormField as FormField_Shadcn_,
|
||||
useWatch as useWatch_Shadcn_,
|
||||
} from './src/components/shadcn/ui/form'
|
||||
|
||||
export {
|
||||
Popover as Popover_Shadcn_,
|
||||
PopoverTrigger as PopoverTrigger_Shadcn_,
|
||||
PopoverContent as PopoverContent_Shadcn_,
|
||||
PopoverAnchor as PopoverAnchor_Shadcn_,
|
||||
PopoverSeparator as PopoverSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/popover'
|
||||
|
||||
export {
|
||||
Accordion as Accordion_Shadcn_,
|
||||
AccordionItem as AccordionItem_Shadcn_,
|
||||
AccordionTrigger as AccordionTrigger_Shadcn_,
|
||||
AccordionContent as AccordionContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/accordion'
|
||||
|
||||
export {
|
||||
Select as Select_Shadcn_,
|
||||
SelectContent as SelectContent_Shadcn_,
|
||||
SelectGroup as SelectGroup_Shadcn_,
|
||||
SelectItem as SelectItem_Shadcn_,
|
||||
SelectLabel as SelectLabel_Shadcn_,
|
||||
SelectSeparator as SelectSeparator_Shadcn_,
|
||||
SelectTrigger as SelectTrigger_Shadcn_,
|
||||
SelectValue as SelectValue_Shadcn_,
|
||||
SelectScrollUpButton as SelectScrollUpButton_Shadcn_,
|
||||
SelectScrollDownButton as SelectScrollDownButton_Shadcn_,
|
||||
} from './src/components/shadcn/ui/select'
|
||||
|
||||
export {
|
||||
RadioGroup as RadioGroup_Shadcn_,
|
||||
RadioGroupItem as RadioGroupItem_Shadcn_,
|
||||
RadioGroupLargeItem as RadioGroupLargeItem_Shadcn_,
|
||||
} from './src/components/shadcn/ui/radio-group'
|
||||
|
||||
export { Slider as Slider_Shadcn_ } from './src/components/shadcn/ui/slider'
|
||||
|
||||
export { Input as Input_Shadcn_ } from './src/components/shadcn/ui/input'
|
||||
|
||||
export { Button as Button_Shadcn_ } from './src/components/shadcn/ui/button'
|
||||
|
||||
export { ButtonGroup, ButtonGroupItem } from './src/components/shadcn/ui/button-group'
|
||||
|
||||
export {
|
||||
Breadcrumb as Breadcrumb_Shadcn_,
|
||||
BreadcrumbItem as BreadcrumbItem_Shadcn_,
|
||||
BreadcrumbLink as BreadcrumbLink_Shadcn_,
|
||||
BreadcrumbList as BreadcrumbList_Shadcn_,
|
||||
BreadcrumbEllipsis as BreadcrumbEllipsis_Shadcn_,
|
||||
BreadcrumbPage as BreadcrumbPage_Shadcn_,
|
||||
BreadcrumbSeparator as BreadcrumbSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/breadcrumb'
|
||||
|
||||
export { TextArea as TextArea_Shadcn_ } from './src/components/shadcn/ui/text-area'
|
||||
|
||||
export { Label as Label_Shadcn_ } from './src/components/shadcn/ui/label'
|
||||
|
||||
export * from './src/components/shadcn/ui/switch'
|
||||
|
||||
export { Checkbox as Checkbox_Shadcn_ } from './src/components/shadcn/ui/checkbox'
|
||||
|
||||
export * from './src/components/shadcn/ui/scroll-area'
|
||||
|
||||
export * from './src/components/shadcn/ui/hover-card'
|
||||
|
||||
export * from './src/components/shadcn/ui/aspect-ratio'
|
||||
|
||||
export * from './src/components/shadcn/ui/table'
|
||||
export * from './src/components/ShadowScrollArea'
|
||||
|
||||
export {
|
||||
Collapsible as Collapsible_Shadcn_,
|
||||
CollapsibleTrigger as CollapsibleTrigger_Shadcn_,
|
||||
CollapsibleContent as CollapsibleContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/collapsible'
|
||||
|
||||
export {
|
||||
Tabs as Tabs_Shadcn_,
|
||||
TabsContent as TabsContent_Shadcn_,
|
||||
TabsList as TabsList_Shadcn_,
|
||||
TabsTrigger as TabsTrigger_Shadcn_,
|
||||
} from './src/components/shadcn/ui/tabs'
|
||||
|
||||
export {
|
||||
TooltipProvider,
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
TooltipPortal,
|
||||
} from './src/components/shadcn/ui/tooltip'
|
||||
|
||||
export {
|
||||
HoverCard as HoverCard_Shadcn_,
|
||||
HoverCardTrigger as HoverCardTrigger_Shadcn_,
|
||||
HoverCardContent as HoverCardContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/hover-card'
|
||||
|
||||
export * from './src/components/shadcn/ui/calendar'
|
||||
|
||||
export { Toggle as Toggle_Shadcn } from './src/components/shadcn/ui/toggle'
|
||||
|
||||
export { ScrollArea, ScrollBar, ScrollViewport } from './src/components/shadcn/ui/scroll-area'
|
||||
|
||||
export { Separator } from './src/components/shadcn/ui/separator'
|
||||
|
||||
export * from './src/components/shadcn/ui/resizable'
|
||||
|
||||
export * from './src/components/radio-group-stacked'
|
||||
export * from './src/components/radio-group-card'
|
||||
|
||||
export * from './src/components/TreeView'
|
||||
|
||||
export * from './src/components/shadcn/ui/chart'
|
||||
export * from './src/components/shadcn/ui/sidebar'
|
||||
|
||||
export * from './src/components/StatusIcon'
|
||||
|
||||
// ICONS
|
||||
export * from './src/components/Icon/icons/IconBriefcase2'
|
||||
export * from './src/components/Icon/icons/IconBroadcast'
|
||||
export * from './src/components/Icon/icons/IconChangelog'
|
||||
export * from './src/components/Icon/icons/IconDatabaseChanges'
|
||||
export * from './src/components/Icon/icons/IconDiscord'
|
||||
export * from './src/components/Icon/icons/IconDiscussions'
|
||||
export * from './src/components/Icon/icons/IconDocumentation'
|
||||
export * from './src/components/Icon/icons/IconGitHubSolid'
|
||||
export * from './src/components/Icon/icons/IconIntegrations'
|
||||
export * from './src/components/Icon/icons/IconLifeBuoy2'
|
||||
export * from './src/components/Icon/icons/IconLinkedinSolid'
|
||||
export * from './src/components/Icon/icons/IconMicSolid'
|
||||
export * from './src/components/Icon/icons/IconPartners'
|
||||
export * from './src/components/Icon/icons/IconPresence'
|
||||
export * from './src/components/Icon/icons/IconProductHunt'
|
||||
export * from './src/components/Icon/icons/IconTwitterX'
|
||||
export * from './src/components/Icon/icons/IconYCombinator'
|
||||
export * from './src/components/Icon/icons/IconYoutubeSolid'
|
||||
|
||||
// Hooks
|
||||
export * from './src/lib/Hooks'
|
||||
export * from './src/components/hooks/use-mobile'
|
||||
|
||||
export * from './src/components/KeyboardShortcut/KeyboardShortcut'
|
||||
+9
-300
@@ -1,305 +1,14 @@
|
||||
// Markdown components
|
||||
// Full export: everything in base plus Next.js-specific components.
|
||||
// Existing apps import from this entry (unchanged behaviour).
|
||||
//
|
||||
// To add a new export:
|
||||
// - If it does NOT import from next/*, add it to base.tsx
|
||||
// - If it DOES import from next/*, add it here only
|
||||
|
||||
export * from './base'
|
||||
|
||||
// Next.js-specific components
|
||||
export * from './src/lib/Markdown'
|
||||
|
||||
// GENERAL
|
||||
|
||||
export * from './src/components/Button'
|
||||
export * from './src/components/Icon/IconBackground'
|
||||
export * from './src/components/Image'
|
||||
|
||||
// DISPLAYS
|
||||
|
||||
export { Card as Card_legacy_ } from './src/components/Card'
|
||||
export * from './src/components/Tabs'
|
||||
export * from './src/components/Alert'
|
||||
export * from './src/components/Accordion'
|
||||
export * from './src/components/Collapsible'
|
||||
export * from './src/components/CodeBlock'
|
||||
export * from './src/components/SimpleCodeBlock'
|
||||
export * from './src/components/Mermaid'
|
||||
|
||||
// NAV
|
||||
|
||||
export * from './src/components/Menu'
|
||||
export * from './src/components/NavMenu'
|
||||
|
||||
// OVERLAYS
|
||||
|
||||
export * from './src/components/Modal'
|
||||
export * from './src/components/SidePanel'
|
||||
export * from './src/components/Popover'
|
||||
|
||||
// HTML
|
||||
|
||||
export { Heading } from './src/components/CustomHTMLElements'
|
||||
|
||||
// UTILITIES
|
||||
|
||||
export * from './src/components/Space'
|
||||
export * from './src/components/Loading'
|
||||
export * from './src/components/LogoLoader'
|
||||
export * from './src/components/AnimatedCounter'
|
||||
export * from './src/lib/utils'
|
||||
|
||||
// DATA ENTRY
|
||||
|
||||
export * from './src/components/Select'
|
||||
export * from './src/components/Listbox'
|
||||
export * from './src/components/Checkbox'
|
||||
export * from './src/components/Input'
|
||||
export * from './src/components/InputNumber'
|
||||
export * from './src/components/Radio'
|
||||
export * from './src/components/Toggle'
|
||||
export * from './src/components/Form'
|
||||
export * from './src/components/ExpandingTextArea'
|
||||
|
||||
export * from './src/components/PrePostTab'
|
||||
|
||||
// layout
|
||||
export * from './src/components/LoadingLine'
|
||||
|
||||
// ai icon
|
||||
export * from './src/layout/ai-icon-animation'
|
||||
|
||||
// theme switcher
|
||||
export * from './src/components/ThemeProvider/themes'
|
||||
export * from './src/components/ThemeProvider/singleThemes'
|
||||
|
||||
// shadcn
|
||||
export * from './src/components/shadcn/ui/dropdown-menu'
|
||||
export * from './src/components/shadcn/ui/sonner'
|
||||
export * from './src/components/shadcn/ui/sonner-progress'
|
||||
export * from './src/components/shadcn/ui/separator'
|
||||
export * from './src/components/shadcn/ui/sheet'
|
||||
export * from './src/components/shadcn/ui/badge'
|
||||
export * from './src/components/shadcn/ui/input-otp'
|
||||
export * from './src/components/shadcn/ui/alert-dialog'
|
||||
export * from './src/components/shadcn/ui/avatar'
|
||||
export * from './src/components/shadcn/ui/drawer'
|
||||
export * from './src/components/shadcn/ui/menubar'
|
||||
export * from './src/components/shadcn/ui/navigation-menu'
|
||||
export * from './src/components/shadcn/ui/progress'
|
||||
export * from './src/components/shadcn/ui/skeleton'
|
||||
export * from './src/components/shadcn/ui/slider'
|
||||
export * from './src/components/shadcn/ui/textarea'
|
||||
export * from './src/components/shadcn/ui/toggle-group'
|
||||
|
||||
export { Toggle as Toggle_Shadcn_ } from './src/components/shadcn/ui/toggle'
|
||||
|
||||
export * from './src/components/shadcn/ui/card'
|
||||
|
||||
export {
|
||||
Command as Command_Shadcn_,
|
||||
CommandDialog as CommandDialog,
|
||||
CommandInput as CommandInput_Shadcn_,
|
||||
CommandList as CommandList_Shadcn_,
|
||||
CommandEmpty as CommandEmpty_Shadcn_,
|
||||
CommandGroup as CommandGroup_Shadcn_,
|
||||
CommandItem as CommandItem_Shadcn_,
|
||||
CommandShortcut as CommandShortcut_Shadcn_,
|
||||
CommandSeparator as CommandSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/command'
|
||||
|
||||
export {
|
||||
ContextMenu as ContextMenu_Shadcn_,
|
||||
ContextMenuTrigger as ContextMenuTrigger_Shadcn_,
|
||||
ContextMenuContent as ContextMenuContent_Shadcn_,
|
||||
ContextMenuItem as ContextMenuItem_Shadcn_,
|
||||
ContextMenuSeparator as ContextMenuSeparator_Shadcn_,
|
||||
ContextMenuLabel as ContextMenuLabel_Shadcn_,
|
||||
ContextMenuRadioGroup as ContextMenuRadioGroup_Shadcn_,
|
||||
ContextMenuRadioItem as ContextMenuRadioItem_Shadcn_,
|
||||
ContextMenuShortcut as ContextMenuShortcut_Shadcn_,
|
||||
ContextMenuSub as ContextMenuSub_Shadcn_,
|
||||
ContextMenuSubContent as ContextMenuSubContent_Shadcn_,
|
||||
ContextMenuSubTrigger as ContextMenuSubTrigger_Shadcn_,
|
||||
ContextMenuCheckboxItem as ContextMenuCheckboxItem_Shadcn_,
|
||||
ContextMenuGroup as ContextMenuGroup_Shadcn_,
|
||||
ContextMenuPortal as ContextMenuPortal_Shadcn_,
|
||||
} from './src/components/shadcn/ui/context-menu'
|
||||
|
||||
export * from './src/components/shadcn/ui/dialog'
|
||||
|
||||
export {
|
||||
Alert as Alert_Shadcn_,
|
||||
AlertTitle as AlertTitle_Shadcn_,
|
||||
AlertDescription as AlertDescription_Shadcn_,
|
||||
} from './src/components/shadcn/ui/alert'
|
||||
|
||||
export * from './src/components/AlertCollapsible'
|
||||
|
||||
export {
|
||||
Field as Field_Shadcn_,
|
||||
FieldContent as FieldContent_Shadcn_,
|
||||
FieldDescription as FieldDescription_Shadcn_,
|
||||
FieldError as FieldError_Shadcn_,
|
||||
FieldGroup as FieldGroup_Shadcn_,
|
||||
FieldLabel as FieldLabel_Shadcn_,
|
||||
FieldLegend as FieldLegend_Shadcn_,
|
||||
FieldSeparator as FieldSeparator_Shadcn_,
|
||||
FieldSet as FieldSet_Shadcn_,
|
||||
FieldTitle as FieldTitle_Shadcn_,
|
||||
} from './src/components/shadcn/ui/field'
|
||||
|
||||
export {
|
||||
useFormField as useFormField_Shadcn_,
|
||||
Form as Form_Shadcn_,
|
||||
FormItem as FormItem_Shadcn_,
|
||||
FormLabel as FormLabel_Shadcn_,
|
||||
FormControl as FormControl_Shadcn_,
|
||||
FormDescription as FormDescription_Shadcn_,
|
||||
FormMessage as FormMessage_Shadcn_,
|
||||
FormField as FormField_Shadcn_,
|
||||
useWatch as useWatch_Shadcn_,
|
||||
} from './src/components/shadcn/ui/form'
|
||||
|
||||
export {
|
||||
Popover as Popover_Shadcn_,
|
||||
PopoverTrigger as PopoverTrigger_Shadcn_,
|
||||
PopoverContent as PopoverContent_Shadcn_,
|
||||
PopoverAnchor as PopoverAnchor_Shadcn_,
|
||||
PopoverSeparator as PopoverSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/popover'
|
||||
|
||||
export {
|
||||
Accordion as Accordion_Shadcn_,
|
||||
AccordionItem as AccordionItem_Shadcn_,
|
||||
AccordionTrigger as AccordionTrigger_Shadcn_,
|
||||
AccordionContent as AccordionContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/accordion'
|
||||
|
||||
export {
|
||||
Select as Select_Shadcn_,
|
||||
SelectContent as SelectContent_Shadcn_,
|
||||
SelectGroup as SelectGroup_Shadcn_,
|
||||
SelectItem as SelectItem_Shadcn_,
|
||||
SelectLabel as SelectLabel_Shadcn_,
|
||||
SelectSeparator as SelectSeparator_Shadcn_,
|
||||
SelectTrigger as SelectTrigger_Shadcn_,
|
||||
SelectValue as SelectValue_Shadcn_,
|
||||
SelectScrollUpButton as SelectScrollUpButton_Shadcn_,
|
||||
SelectScrollDownButton as SelectScrollDownButton_Shadcn_,
|
||||
} from './src/components/shadcn/ui/select'
|
||||
|
||||
export {
|
||||
RadioGroup as RadioGroup_Shadcn_,
|
||||
RadioGroupItem as RadioGroupItem_Shadcn_,
|
||||
RadioGroupLargeItem as RadioGroupLargeItem_Shadcn_,
|
||||
} from './src/components/shadcn/ui/radio-group'
|
||||
|
||||
export { Slider as Slider_Shadcn_ } from './src/components/shadcn/ui/slider'
|
||||
|
||||
export { Input as Input_Shadcn_ } from './src/components/shadcn/ui/input'
|
||||
|
||||
export { Button as Button_Shadcn_ } from './src/components/shadcn/ui/button'
|
||||
|
||||
export { ButtonGroup, ButtonGroupItem } from './src/components/shadcn/ui/button-group'
|
||||
|
||||
export {
|
||||
Breadcrumb as Breadcrumb_Shadcn_,
|
||||
BreadcrumbItem as BreadcrumbItem_Shadcn_,
|
||||
BreadcrumbLink as BreadcrumbLink_Shadcn_,
|
||||
BreadcrumbList as BreadcrumbList_Shadcn_,
|
||||
BreadcrumbEllipsis as BreadcrumbEllipsis_Shadcn_,
|
||||
BreadcrumbPage as BreadcrumbPage_Shadcn_,
|
||||
BreadcrumbSeparator as BreadcrumbSeparator_Shadcn_,
|
||||
} from './src/components/shadcn/ui/breadcrumb'
|
||||
|
||||
export { TextArea as TextArea_Shadcn_ } from './src/components/shadcn/ui/text-area'
|
||||
|
||||
export { Label as Label_Shadcn_ } from './src/components/shadcn/ui/label'
|
||||
|
||||
export * from './src/components/shadcn/ui/switch'
|
||||
|
||||
export { Checkbox as Checkbox_Shadcn_ } from './src/components/shadcn/ui/checkbox'
|
||||
|
||||
export * from './src/components/shadcn/ui/scroll-area'
|
||||
|
||||
export * from './src/components/shadcn/ui/hover-card'
|
||||
|
||||
export * from './src/components/shadcn/ui/aspect-ratio'
|
||||
|
||||
export * from './src/components/shadcn/ui/table'
|
||||
export * from './src/components/ShadowScrollArea'
|
||||
|
||||
export {
|
||||
Collapsible as Collapsible_Shadcn_,
|
||||
CollapsibleTrigger as CollapsibleTrigger_Shadcn_,
|
||||
CollapsibleContent as CollapsibleContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/collapsible'
|
||||
|
||||
export {
|
||||
Tabs as Tabs_Shadcn_,
|
||||
TabsContent as TabsContent_Shadcn_,
|
||||
TabsList as TabsList_Shadcn_,
|
||||
TabsTrigger as TabsTrigger_Shadcn_,
|
||||
} from './src/components/shadcn/ui/tabs'
|
||||
|
||||
export {
|
||||
TooltipProvider,
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
TooltipPortal,
|
||||
} from './src/components/shadcn/ui/tooltip'
|
||||
|
||||
export {
|
||||
HoverCard as HoverCard_Shadcn_,
|
||||
HoverCardTrigger as HoverCardTrigger_Shadcn_,
|
||||
HoverCardContent as HoverCardContent_Shadcn_,
|
||||
} from './src/components/shadcn/ui/hover-card'
|
||||
|
||||
export * from './src/components/shadcn/ui/calendar'
|
||||
|
||||
export { Toggle as Toggle_Shadcn } from './src/components/shadcn/ui/toggle'
|
||||
|
||||
export { ScrollArea, ScrollBar, ScrollViewport } from './src/components/shadcn/ui/scroll-area'
|
||||
|
||||
export { Separator } from './src/components/shadcn/ui/separator'
|
||||
|
||||
export * from './src/components/shadcn/ui/resizable'
|
||||
|
||||
export * from './src/components/radio-group-stacked'
|
||||
export * from './src/components/radio-group-card'
|
||||
|
||||
export * from './src/components/TreeView'
|
||||
|
||||
export * from './src/components/shadcn/ui/chart'
|
||||
export * from './src/components/shadcn/ui/sidebar'
|
||||
|
||||
// links
|
||||
|
||||
export * from './src/components/TextLink'
|
||||
|
||||
// used for LW
|
||||
export * from './src/layout/banners'
|
||||
|
||||
export * from './src/components/StatusIcon'
|
||||
|
||||
// ICONS
|
||||
// export icons
|
||||
export * from './src/components/Icon/icons/IconBriefcase2'
|
||||
export * from './src/components/Icon/icons/IconBroadcast'
|
||||
export * from './src/components/Icon/icons/IconChangelog'
|
||||
export * from './src/components/Icon/icons/IconDatabaseChanges'
|
||||
export * from './src/components/Icon/icons/IconDiscord'
|
||||
export * from './src/components/Icon/icons/IconDiscussions'
|
||||
export * from './src/components/Icon/icons/IconDocumentation'
|
||||
export * from './src/components/Icon/icons/IconGitHubSolid'
|
||||
export * from './src/components/Icon/icons/IconIntegrations'
|
||||
export * from './src/components/Icon/icons/IconLifeBuoy2'
|
||||
export * from './src/components/Icon/icons/IconLinkedinSolid'
|
||||
export * from './src/components/Icon/icons/IconMicSolid'
|
||||
export * from './src/components/Icon/icons/IconPartners'
|
||||
export * from './src/components/Icon/icons/IconPresence'
|
||||
export * from './src/components/Icon/icons/IconProductHunt'
|
||||
export * from './src/components/Icon/icons/IconTwitterX'
|
||||
export * from './src/components/Icon/icons/IconYCombinator'
|
||||
export * from './src/components/Icon/icons/IconYoutubeSolid'
|
||||
|
||||
// Export hooks
|
||||
export * from './src/lib/Hooks'
|
||||
export * from './src/components/hooks/use-mobile'
|
||||
|
||||
export * from './src/components/KeyboardShortcut/KeyboardShortcut'
|
||||
@@ -3,10 +3,23 @@
|
||||
"version": "0.0.0",
|
||||
"main": "./index.tsx",
|
||||
"types": "./index.tsx",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./index.tsx",
|
||||
"default": "./index.tsx"
|
||||
},
|
||||
"./base": {
|
||||
"types": "./base.tsx",
|
||||
"import": "./dist/base.js"
|
||||
},
|
||||
"./base.css": "./dist/base.css",
|
||||
"./src/*": "./src/*"
|
||||
},
|
||||
"license": "MIT",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"build": "vite build --config vite.lib.config.ts && tailwindcss -c tailwind.lib.config.js -i src/base-styles.css -o dist/base-tw.css && node scripts/build-merge-css.js",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"generate-demo-tailwind-classes": "node internals/tokens/generate-demo-tailwind-classes.js",
|
||||
"cleanse-css-for-tailwind": "node internals/tokens/cleanse-css-for-tailwind.js",
|
||||
@@ -80,7 +93,13 @@
|
||||
"tailwindcss": "catalog:",
|
||||
"vaul": "^0.9.9"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"next": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.0",
|
||||
"@testing-library/react": "^16.0.0",
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
// PostCSS config for packages/ui.
|
||||
// Used by both:
|
||||
// - `pnpm build` (vite.lib.config.ts): expands @apply in CSS modules for the
|
||||
// pre-built base bundle, and generates Tailwind utilities for base-styles.css
|
||||
// - `pnpm test` (vitest): expands @apply so CSS modules compile correctly in jsdom
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: { config: './tailwind.lib.config.js' },
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// PostCSS config used exclusively by vite.lib.config.ts during the library build.
|
||||
// Tailwind processes @apply directives in CSS modules using the lib content paths.
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: { config: './tailwind.lib.config.js' },
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// Merges the two intermediate CSS files produced during the library build into
|
||||
// the final dist/base.css that consumers import.
|
||||
//
|
||||
// Build pipeline:
|
||||
// 1. vite build → dist/base-components.css (CSS modules, @apply expanded)
|
||||
// 2. tailwindcss → dist/base-tw.css (Tailwind utilities + design tokens)
|
||||
// 3. this script → dist/base.css (font-face + combined, intermediates deleted)
|
||||
//
|
||||
// Order: font-face first, then utilities, then component-specific rules.
|
||||
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const dist = path.resolve(__dirname, '../dist')
|
||||
const srcFonts = path.resolve(__dirname, '../src/fonts')
|
||||
const distFonts = path.join(dist, 'fonts')
|
||||
|
||||
// Copy font files to dist/fonts/ so the @font-face urls resolve correctly.
|
||||
if (!fs.existsSync(distFonts)) fs.mkdirSync(distFonts, { recursive: true })
|
||||
for (const file of fs.readdirSync(srcFonts)) {
|
||||
fs.copyFileSync(path.join(srcFonts, file), path.join(distFonts, file))
|
||||
}
|
||||
|
||||
// @font-face declarations — URLs are relative to dist/base.css.
|
||||
const fontFaceCss = `@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-Book.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-BookItalic.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-Medium.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-Bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-BoldItalic.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-Black.woff2') format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'custom-font';
|
||||
src: url('./fonts/CustomFont-BlackItalic.woff2') format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
/* Activate fonts via CSS variables, matching the design-system app's next/font setup. */
|
||||
:root {
|
||||
--font-custom: 'custom-font', Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-source-code-pro: 'Source Code Pro', 'Office Code Pro', Menlo, monospace;
|
||||
}
|
||||
`
|
||||
|
||||
const twPath = path.join(dist, 'base-tw.css')
|
||||
const componentsPath = path.join(dist, 'base-components.css')
|
||||
const outputPath = path.join(dist, 'base.css')
|
||||
|
||||
const tw = fs.existsSync(twPath) ? fs.readFileSync(twPath, 'utf8') : ''
|
||||
const components = fs.existsSync(componentsPath) ? fs.readFileSync(componentsPath, 'utf8') : ''
|
||||
|
||||
fs.writeFileSync(outputPath, fontFaceCss + '\n' + tw + (components ? '\n' + components : ''))
|
||||
|
||||
if (fs.existsSync(twPath)) fs.rmSync(twPath)
|
||||
if (fs.existsSync(componentsPath)) fs.rmSync(componentsPath)
|
||||
|
||||
console.log('dist/base.css written (%d bytes)', fs.statSync(outputPath).size)
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Design tokens — CSS custom properties for the Supabase design system */
|
||||
@import '../build/css/source/global.css';
|
||||
@import '../build/css/themes/dark.css';
|
||||
@import '../build/css/themes/light.css';
|
||||
|
||||
/* Tailwind layers — utilities are generated by scanning src/** during build */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
font-synthesis-weight: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// Tailwind config for the pre-built base bundle.
|
||||
// Scans all base component source files so every utility class used in JSX
|
||||
// or via @apply in CSS modules is included in dist/base.css.
|
||||
const config = require('config/tailwind.config')
|
||||
|
||||
module.exports = config({
|
||||
content: ['./src/**/*.{tsx,ts,js}', './base.tsx'],
|
||||
})
|
||||
@@ -0,0 +1,38 @@
|
||||
import { resolve } from 'path'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// Types are served from the source base.tsx file directly (via exports["./base"].types).
|
||||
// No separate .d.ts generation is needed.
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
|
||||
css: {
|
||||
// Point Vite at the package directory so it finds postcss.config.js here.
|
||||
// This ensures @apply directives in CSS modules are expanded by Tailwind
|
||||
// during the lib build.
|
||||
postcss: resolve(__dirname, '.'),
|
||||
},
|
||||
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'base.tsx'),
|
||||
formats: ['es'],
|
||||
fileName: () => 'base.js',
|
||||
},
|
||||
rollupOptions: {
|
||||
// Externalize every package-level import so the bundle only contains
|
||||
// the UI component code itself. All runtime deps are provided by the
|
||||
// consuming app (resolved via pnpm workspace hoisting).
|
||||
external: (id) =>
|
||||
!id.startsWith('.') && !id.startsWith('/') && !id.startsWith('\0'),
|
||||
output: {
|
||||
// Name the extracted CSS distinctly so the merge script can find it.
|
||||
assetFileNames: 'base-components[extname]',
|
||||
},
|
||||
},
|
||||
// All CSS (CSS modules + any imported CSS) lands in a single file.
|
||||
cssCodeSplit: false,
|
||||
},
|
||||
})
|
||||
Generated
+52
-12
@@ -833,7 +833,7 @@ importers:
|
||||
version: 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@sentry/nextjs':
|
||||
specifier: 'catalog:'
|
||||
version: 10.27.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
|
||||
version: 10.27.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
|
||||
'@std/path':
|
||||
specifier: npm:@jsr/std__path@^1.0.8
|
||||
version: '@jsr/std__path@1.0.8'
|
||||
@@ -983,13 +983,13 @@ importers:
|
||||
version: 0.52.2
|
||||
next:
|
||||
specifier: ~16.1.7
|
||||
version: 16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
version: 16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
next-themes:
|
||||
specifier: ^0.3.0
|
||||
version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
nuqs:
|
||||
specifier: 2.7.1
|
||||
version: 2.7.1(@tanstack/react-router@1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
||||
version: 2.7.1(@tanstack/react-router@1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
||||
openai:
|
||||
specifier: ^4.75.1
|
||||
version: 4.104.0(encoding@0.1.13)(ws@8.18.3)(zod@3.25.76)
|
||||
@@ -1254,7 +1254,7 @@ importers:
|
||||
version: 2.11.3(@types/node@22.13.14)(typescript@5.9.2)
|
||||
next-router-mock:
|
||||
specifier: ^0.9.13
|
||||
version: 0.9.13(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
|
||||
version: 0.9.13(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
|
||||
node-mocks-http:
|
||||
specifier: ^1.17.2
|
||||
version: 1.17.2(@types/node@22.13.14)
|
||||
@@ -1587,6 +1587,43 @@ importers:
|
||||
specifier: 'catalog:'
|
||||
version: 7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
|
||||
|
||||
apps/ui-vite-test:
|
||||
dependencies:
|
||||
lucide-react:
|
||||
specifier: ^0.436.0
|
||||
version: 0.436.0(react@18.3.1)
|
||||
next-themes:
|
||||
specifier: ^0.3.0
|
||||
version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react:
|
||||
specifier: 'catalog:'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: 'catalog:'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
sonner:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
ui:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/ui
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: 'catalog:'
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: 'catalog:'
|
||||
version: 18.3.0
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^4.3.4
|
||||
version: 4.3.4(supports-color@8.1.1)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.2
|
||||
vite:
|
||||
specifier: 'catalog:'
|
||||
version: 7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
|
||||
|
||||
apps/www:
|
||||
dependencies:
|
||||
'@bsmnt/scrollytelling':
|
||||
@@ -2201,7 +2238,7 @@ importers:
|
||||
version: 18.3.0
|
||||
next-router-mock:
|
||||
specifier: ^0.9.13
|
||||
version: 0.9.13(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
|
||||
version: 0.9.13(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
|
||||
tsconfig:
|
||||
specifier: workspace:*
|
||||
version: link:../tsconfig
|
||||
@@ -2569,6 +2606,9 @@ importers:
|
||||
'@types/react-syntax-highlighter':
|
||||
specifier: ^15.5.13
|
||||
version: 15.5.13
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^4.3.4
|
||||
version: 4.3.4(supports-color@8.1.1)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))
|
||||
'@vitest/coverage-v8':
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.4(supports-color@8.1.1)(vitest@3.2.4)
|
||||
@@ -25208,7 +25248,7 @@ snapshots:
|
||||
- supports-color
|
||||
- webpack
|
||||
|
||||
'@sentry/nextjs@10.27.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)':
|
||||
'@sentry/nextjs@10.27.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)':
|
||||
dependencies:
|
||||
'@opentelemetry/api': 1.9.0
|
||||
'@opentelemetry/semantic-conventions': 1.38.0
|
||||
@@ -25221,7 +25261,7 @@ snapshots:
|
||||
'@sentry/react': 10.27.0(react@18.3.1)
|
||||
'@sentry/vercel-edge': 10.27.0
|
||||
'@sentry/webpack-plugin': 4.6.1(encoding@0.1.13)(supports-color@8.1.1)(webpack@5.94.0)
|
||||
next: 16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
next: 16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
resolve: 1.22.8
|
||||
rollup: 4.59.0
|
||||
stacktrace-parser: 0.1.10
|
||||
@@ -33431,9 +33471,9 @@ snapshots:
|
||||
next: 15.5.13(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
react: 18.3.1
|
||||
|
||||
next-router-mock@0.9.13(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1):
|
||||
next-router-mock@0.9.13(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1):
|
||||
dependencies:
|
||||
next: 16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
next: 16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
react: 18.3.1
|
||||
|
||||
next-seo@6.5.0(next@15.5.13(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
@@ -33475,7 +33515,7 @@ snapshots:
|
||||
- '@babel/core'
|
||||
- babel-plugin-macros
|
||||
|
||||
next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4):
|
||||
next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4):
|
||||
dependencies:
|
||||
'@next/env': 16.1.7
|
||||
'@swc/helpers': 0.5.15
|
||||
@@ -33818,13 +33858,13 @@ snapshots:
|
||||
mitt: 3.0.1
|
||||
next: 15.5.13(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
|
||||
nuqs@2.7.1(@tanstack/react-router@1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
|
||||
nuqs@2.7.1(@tanstack/react-router@1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@standard-schema/spec': 1.0.0
|
||||
react: 18.3.1
|
||||
optionalDependencies:
|
||||
'@tanstack/react-router': 1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
next: 16.1.7(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
next: 16.1.7(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
|
||||
react-router: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
||||
nuqs@2.8.1(@tanstack/react-router@1.158.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@15.5.13(@babel/core@7.29.0(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react-router@7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
|
||||
|
||||
+11
@@ -6,6 +6,17 @@
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": ["dist/**", ".next/**", "!.next/cache/**/*", "!.next/dev/**/*"]
|
||||
},
|
||||
"ui#build": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": ["dist/**"]
|
||||
},
|
||||
"ui-vite-test#dev": {
|
||||
"dependsOn": ["ui#build"],
|
||||
"cache": false
|
||||
},
|
||||
"ui-vite-test#build": {
|
||||
"dependsOn": ["ui#build"]
|
||||
},
|
||||
"design-system#build": {
|
||||
"dependsOn": ["^build"],
|
||||
"env": [
|
||||
|
||||
Reference in new issue
Block a user