mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-16 04:11:34 +00:00
Compare commits
45 Commits
shadcn@2.6
...
shadcn@2.9
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4e04567b07 | ||
|
|
6f63b04d28 | ||
|
|
e38228b574 | ||
|
|
8807103586 | ||
|
|
3424ab709e | ||
|
|
4a86a55cac | ||
|
|
2926574d0e | ||
|
|
20e913d8e1 | ||
|
|
3433aaffaa | ||
|
|
d9cdc3f7ae | ||
|
|
e75e7b3866 | ||
|
|
ed5237c231 | ||
|
|
f85ca066dc | ||
|
|
54e66d4450 | ||
|
|
6c341c16ae | ||
|
|
06d03d64f4 | ||
|
|
6407a3b330 | ||
|
|
96b15f6090 | ||
|
|
2fe9cf6d26 | ||
|
|
728cb4cfa5 | ||
|
|
db93787712 | ||
|
|
1cdd6c1645 | ||
|
|
4983c6e1f4 | ||
|
|
7443edcfb0 | ||
|
|
9d9a33be52 | ||
|
|
d544a7f7a5 | ||
|
|
48fe0d709f | ||
|
|
ed244ea0b5 | ||
|
|
b8fede1742 | ||
|
|
84d6c83bad | ||
|
|
5b8ee41511 | ||
|
|
7c3d34cdc9 | ||
|
|
56c4c83511 | ||
|
|
2821cb0e39 | ||
|
|
3c87402de2 | ||
|
|
20a88e1f15 | ||
|
|
cb19ab8464 | ||
|
|
cf1851ca09 | ||
|
|
c86c27a2ff | ||
|
|
8847126c65 | ||
|
|
65350857a4 | ||
|
|
40c7473c7e | ||
|
|
4698ee960f | ||
|
|
2ae0e5a07b | ||
|
|
431af4f7ff |
9
.claude/settings.local.json
Normal file
9
.claude/settings.local.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(npm test:*)",
|
||||||
|
"Bash(npm run typecheck:*)"
|
||||||
|
],
|
||||||
|
"deny": []
|
||||||
|
}
|
||||||
|
}
|
||||||
20
.github/workflows/issue-stale.yml
vendored
20
.github/workflows/issue-stale.yml
vendored
@@ -18,15 +18,15 @@ jobs:
|
|||||||
repo-token: ${{ secrets.STALE_TOKEN }}
|
repo-token: ${{ secrets.STALE_TOKEN }}
|
||||||
ascending: true
|
ascending: true
|
||||||
days-before-issue-close: 7
|
days-before-issue-close: 7
|
||||||
days-before-issue-stale: 365 # ~2 years
|
days-before-issue-stale: 365
|
||||||
days-before-pr-stale: -1
|
days-before-pr-stale: -1
|
||||||
days-before-pr-close: -1
|
days-before-pr-close: -1
|
||||||
remove-issue-stale-when-updated: true
|
remove-issue-stale-when-updated: true
|
||||||
stale-issue-label: "stale?"
|
stale-issue-label: "stale?"
|
||||||
exempt-issue-labels: "roadmap,next,bug"
|
exempt-issue-labels: "roadmap,next"
|
||||||
stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you."
|
stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
|
||||||
close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!"
|
close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
|
||||||
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
operations-per-run: 300
|
||||||
- uses: actions/stale@v9
|
- uses: actions/stale@v9
|
||||||
id: pr-state
|
id: pr-state
|
||||||
name: "Mark stale PRs, close stale PRs"
|
name: "Mark stale PRs, close stale PRs"
|
||||||
@@ -36,10 +36,10 @@ jobs:
|
|||||||
days-before-issue-close: -1
|
days-before-issue-close: -1
|
||||||
days-before-issue-stale: -1
|
days-before-issue-stale: -1
|
||||||
days-before-pr-close: 7
|
days-before-pr-close: 7
|
||||||
days-before-pr-stale: 365 # PRs with no activity in over 90 days will be marked as stale
|
days-before-pr-stale: 365
|
||||||
remove-pr-stale-when-updated: true
|
remove-pr-stale-when-updated: true
|
||||||
exempt-pr-labels: "roadmap,nex,awaiting-approval,work-in-progress"
|
exempt-pr-labels: "roadmap,next,bug"
|
||||||
stale-pr-label: "stale?"
|
stale-pr-label: "stale?"
|
||||||
stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you."
|
stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
|
||||||
close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding!"
|
close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
|
||||||
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
operations-per-run: 300
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ To run the CLI locally, you can follow the workflow:
|
|||||||
1. Start by running the registry (main site) to make sure the components are up to date:
|
1. Start by running the registry (main site) to make sure the components are up to date:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm www:dev
|
pnpm v4:dev
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Run the development script for the CLI:
|
2. Run the development script for the CLI:
|
||||||
|
|||||||
2
apps/v4/.env.example
Normal file
2
apps/v4/.env.example
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
NEXT_PUBLIC_V0_URL=https://v0.dev
|
||||||
|
NEXT_PUBLIC_APP_URL=http://localhost:4000
|
||||||
1
apps/v4/.gitignore
vendored
1
apps/v4/.gitignore
vendored
@@ -32,6 +32,7 @@ yarn-error.log*
|
|||||||
|
|
||||||
# env files (can opt-in for committing if needed)
|
# env files (can opt-in for committing if needed)
|
||||||
.env*
|
.env*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import { findNeighbour } from "fumadocs-core/server"
|
|||||||
|
|
||||||
import { source } from "@/lib/source"
|
import { source } from "@/lib/source"
|
||||||
import { absoluteUrl } from "@/lib/utils"
|
import { absoluteUrl } from "@/lib/utils"
|
||||||
|
import { DocsCopyPage } from "@/components/docs-copy-page"
|
||||||
import { DocsTableOfContents } from "@/components/docs-toc"
|
import { DocsTableOfContents } from "@/components/docs-toc"
|
||||||
import { OpenInV0Cta } from "@/components/open-in-v0-cta"
|
import { OpenInV0Cta } from "@/components/open-in-v0-cta"
|
||||||
import { Badge } from "@/registry/new-york-v4/ui/badge"
|
import { Badge } from "@/registry/new-york-v4/ui/badge"
|
||||||
@@ -102,12 +103,17 @@ export default async function Page(props: {
|
|||||||
<h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
|
<h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
|
||||||
{doc.title}
|
{doc.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center gap-2 pt-1.5">
|
<div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
|
||||||
|
<DocsCopyPage
|
||||||
|
// @ts-expect-error - revisit fumadocs types.
|
||||||
|
page={doc.content}
|
||||||
|
url={absoluteUrl(page.url)}
|
||||||
|
/>
|
||||||
{neighbours.previous && (
|
{neighbours.previous && (
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="extend-touch-target size-8 shadow-none md:size-7"
|
className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
|
||||||
asChild
|
asChild
|
||||||
>
|
>
|
||||||
<Link href={neighbours.previous.url}>
|
<Link href={neighbours.previous.url}>
|
||||||
@@ -160,7 +166,7 @@ export default async function Page(props: {
|
|||||||
<MDX components={mdxComponents} />
|
<MDX components={mdxComponents} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-auto flex h-16 w-full max-w-2xl items-center gap-2 px-4 md:px-0">
|
<div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
|
||||||
{neighbours.previous && (
|
{neighbours.previous && (
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
|
|||||||
29
apps/v4/app/(app)/llm/[[...slug]]/route.ts
Normal file
29
apps/v4/app/(app)/llm/[[...slug]]/route.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { notFound } from "next/navigation"
|
||||||
|
import { NextResponse, type NextRequest } from "next/server"
|
||||||
|
|
||||||
|
import { source } from "@/lib/source"
|
||||||
|
|
||||||
|
export const revalidate = false
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
_req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ slug: string[] }> }
|
||||||
|
) {
|
||||||
|
const slug = (await params).slug
|
||||||
|
const page = source.getPage(slug)
|
||||||
|
|
||||||
|
if (!page) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
// @ts-expect-error - revisit fumadocs types.
|
||||||
|
return new NextResponse(page.data.content, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "text/markdown; charset=utf-8",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateStaticParams() {
|
||||||
|
return source.generateParams()
|
||||||
|
}
|
||||||
@@ -15,7 +15,7 @@ export function Callout({
|
|||||||
return (
|
return (
|
||||||
<Alert
|
<Alert
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-4",
|
"bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-1",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export function CodeCollapsibleWrapper({
|
|||||||
<Collapsible
|
<Collapsible
|
||||||
open={isOpened}
|
open={isOpened}
|
||||||
onOpenChange={setIsOpened}
|
onOpenChange={setIsOpened}
|
||||||
className={cn("group/collapsible relative md:-mx-4", className)}
|
className={cn("group/collapsible relative md:-mx-1", className)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
|
|||||||
@@ -36,11 +36,13 @@ export function CommandMenu({
|
|||||||
tree,
|
tree,
|
||||||
colors,
|
colors,
|
||||||
blocks,
|
blocks,
|
||||||
|
navItems,
|
||||||
...props
|
...props
|
||||||
}: DialogProps & {
|
}: DialogProps & {
|
||||||
tree: typeof source.pageTree
|
tree: typeof source.pageTree
|
||||||
colors: ColorPalette[]
|
colors: ColorPalette[]
|
||||||
blocks?: { name: string; description: string; categories: string[] }[]
|
blocks?: { name: string; description: string; categories: string[] }[]
|
||||||
|
navItems?: { href: string; label: string }[]
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
@@ -162,12 +164,45 @@ export function CommandMenu({
|
|||||||
<DialogTitle>Search documentation...</DialogTitle>
|
<DialogTitle>Search documentation...</DialogTitle>
|
||||||
<DialogDescription>Search for a command to run...</DialogDescription>
|
<DialogDescription>Search for a command to run...</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<Command className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border">
|
<Command
|
||||||
|
className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border"
|
||||||
|
filter={(value, search, keywords) => {
|
||||||
|
const extendValue = value + " " + (keywords?.join(" ") || "")
|
||||||
|
if (extendValue.toLowerCase().includes(search.toLowerCase())) {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
<CommandInput placeholder="Search documentation..." />
|
<CommandInput placeholder="Search documentation..." />
|
||||||
<CommandList className="no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5">
|
<CommandList className="no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5">
|
||||||
<CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
|
<CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
|
||||||
No results found.
|
No results found.
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
|
{navItems && navItems.length > 0 && (
|
||||||
|
<CommandGroup
|
||||||
|
heading="Pages"
|
||||||
|
className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
|
||||||
|
>
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<CommandMenuItem
|
||||||
|
key={item.href}
|
||||||
|
value={`Navigation ${item.label}`}
|
||||||
|
keywords={["nav", "navigation", item.label.toLowerCase()]}
|
||||||
|
onHighlight={() => {
|
||||||
|
setSelectedType("page")
|
||||||
|
setCopyPayload("")
|
||||||
|
}}
|
||||||
|
onSelect={() => {
|
||||||
|
runCommand(() => router.push(item.href))
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconArrowRight />
|
||||||
|
{item.label}
|
||||||
|
</CommandMenuItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
)}
|
||||||
{tree.children.map((group) => (
|
{tree.children.map((group) => (
|
||||||
<CommandGroup
|
<CommandGroup
|
||||||
key={group.$id}
|
key={group.$id}
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ export function ComponentPreviewTabs({
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
<div
|
<div
|
||||||
data-tab={tab}
|
data-tab={tab}
|
||||||
className="data-[tab=code]:border-code relative rounded-lg border md:-mx-4"
|
className="data-[tab=code]:border-code relative rounded-lg border md:-mx-1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
data-slot="preview"
|
data-slot="preview"
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export function ComponentPreview({
|
|||||||
|
|
||||||
if (type === "block") {
|
if (type === "block") {
|
||||||
return (
|
return (
|
||||||
<div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-4">
|
<div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-1">
|
||||||
<Image
|
<Image
|
||||||
src={`/r/styles/new-york-v4/${name}-light.png`}
|
src={`/r/styles/new-york-v4/${name}-light.png`}
|
||||||
alt={name}
|
alt={name}
|
||||||
|
|||||||
@@ -1,33 +1,156 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { IconCheck, IconCopy } from "@tabler/icons-react"
|
import { IconCheck, IconChevronDown, IconCopy } from "@tabler/icons-react"
|
||||||
|
|
||||||
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
|
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
|
||||||
import { Button } from "@/registry/new-york-v4/ui/button"
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
||||||
import {
|
import {
|
||||||
Tooltip,
|
DropdownMenu,
|
||||||
TooltipContent,
|
DropdownMenuContent,
|
||||||
TooltipTrigger,
|
DropdownMenuItem,
|
||||||
} from "@/registry/new-york-v4/ui/tooltip"
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/new-york-v4/ui/dropdown-menu"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverAnchor,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/new-york-v4/ui/popover"
|
||||||
|
import { Separator } from "@/registry/new-york-v4/ui/separator"
|
||||||
|
|
||||||
export function DocsCopyPage({ page }: { page: string }) {
|
function getPromptUrl(baseURL: string, url: string) {
|
||||||
|
return `${baseURL}?q=${encodeURIComponent(
|
||||||
|
`I’m looking at this shadcn/ui documentation: ${url}.
|
||||||
|
Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.
|
||||||
|
`
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuItems = {
|
||||||
|
markdown: (url: string) => (
|
||||||
|
<a href={`${url}.mdx`} target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg strokeLinejoin="round" viewBox="0 0 22 16">
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
View as Markdown
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
v0: (url: string) => (
|
||||||
|
<a
|
||||||
|
href={getPromptUrl("https://v0.dev", url)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 147 70"
|
||||||
|
className="size-4.5 -translate-x-px"
|
||||||
|
>
|
||||||
|
<path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
|
||||||
|
</svg>
|
||||||
|
Open in v0
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
chatgpt: (url: string) => (
|
||||||
|
<a
|
||||||
|
href={getPromptUrl("https://chatgpt.com", url)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Open in ChatGPT
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
claude: (url: string) => (
|
||||||
|
<a
|
||||||
|
href={getPromptUrl("https://claude.ai/new", url)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Open in Claude
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DocsCopyPage({ page, url }: { page: string; url: string }) {
|
||||||
const { copyToClipboard, isCopied } = useCopyToClipboard()
|
const { copyToClipboard, isCopied } = useCopyToClipboard()
|
||||||
|
|
||||||
|
const trigger = (
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
className="peer -ml-0.5 size-8 shadow-none md:size-7 md:text-[0.8rem]"
|
||||||
|
>
|
||||||
|
<IconChevronDown className="rotate-180 sm:rotate-0" />
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip>
|
<Popover>
|
||||||
<TooltipTrigger asChild>
|
<div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
|
||||||
|
<PopoverAnchor />
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-8 pl-1.5 md:h-7 [&>svg]:size-3.5"
|
className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
|
||||||
onClick={() => copyToClipboard(page)}
|
onClick={() => copyToClipboard(page)}
|
||||||
>
|
>
|
||||||
{isCopied ? <IconCheck /> : <IconCopy />} Copy Page
|
{isCopied ? <IconCheck /> : <IconCopy />}
|
||||||
|
Copy Page
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
<DropdownMenu>
|
||||||
<TooltipContent>
|
<DropdownMenuTrigger asChild className="hidden sm:flex">
|
||||||
<p>Copy as Markdown</p>
|
{trigger}
|
||||||
</TooltipContent>
|
</DropdownMenuTrigger>
|
||||||
</Tooltip>
|
<DropdownMenuContent align="end" className="shadow-none">
|
||||||
|
{Object.entries(menuItems).map(([key, value]) => (
|
||||||
|
<DropdownMenuItem key={key} asChild>
|
||||||
|
{value(url)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Separator
|
||||||
|
orientation="vertical"
|
||||||
|
className="!bg-foreground/10 absolute top-0 right-8 z-0 !h-8 peer-focus-visible:opacity-0 sm:right-7 sm:!h-7"
|
||||||
|
/>
|
||||||
|
<PopoverTrigger asChild className="flex sm:hidden">
|
||||||
|
{trigger}
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-sm backdrop-blur-sm"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
|
{Object.entries(menuItems).map(([key, value]) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="lg"
|
||||||
|
asChild
|
||||||
|
key={key}
|
||||||
|
className="*:[svg]:text-muted-foreground w-full justify-start text-base font-normal"
|
||||||
|
>
|
||||||
|
{value(url)}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</PopoverContent>
|
||||||
|
</div>
|
||||||
|
</Popover>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
|
|||||||
Deploy your shadcn/ui app on Vercel
|
Deploy your shadcn/ui app on Vercel
|
||||||
</div>
|
</div>
|
||||||
<div className="text-muted-foreground">
|
<div className="text-muted-foreground">
|
||||||
Trusted by OpenAI, Sonos, Chick-fil-A, and more.
|
Trusted by OpenAI, Sonos, Adobe, and more.
|
||||||
</div>
|
</div>
|
||||||
<div className="text-muted-foreground">
|
<div className="text-muted-foreground">
|
||||||
Vercel provides tools and infrastructure to deploy apps and features at
|
Vercel provides tools and infrastructure to deploy apps and features at
|
||||||
|
|||||||
@@ -2,10 +2,10 @@ import { siteConfig } from "@/lib/config"
|
|||||||
|
|
||||||
export function SiteFooter() {
|
export function SiteFooter() {
|
||||||
return (
|
return (
|
||||||
<footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent dark:bg-transparent">
|
<footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent">
|
||||||
<div className="container-wrapper px-4 xl:px-6">
|
<div className="container-wrapper px-4 xl:px-6">
|
||||||
<div className="flex h-(--footer-height) items-center justify-between">
|
<div className="flex h-(--footer-height) items-center justify-between">
|
||||||
<div className="text-muted-foreground w-full text-center text-xs leading-loose sm:text-sm">
|
<div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">
|
||||||
Built by{" "}
|
Built by{" "}
|
||||||
<a
|
<a
|
||||||
href={siteConfig.links.twitter}
|
href={siteConfig.links.twitter}
|
||||||
|
|||||||
@@ -41,7 +41,11 @@ export function SiteHeader() {
|
|||||||
<MainNav items={siteConfig.navItems} className="hidden lg:flex" />
|
<MainNav items={siteConfig.navItems} className="hidden lg:flex" />
|
||||||
<div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
|
<div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
|
||||||
<div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
|
<div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
|
||||||
<CommandMenu tree={pageTree} colors={colors} />
|
<CommandMenu
|
||||||
|
tree={pageTree}
|
||||||
|
colors={colors}
|
||||||
|
navItems={siteConfig.navItems}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Separator
|
<Separator
|
||||||
orientation="vertical"
|
orientation="vertical"
|
||||||
|
|||||||
@@ -4,6 +4,33 @@ description: Latest updates and announcements.
|
|||||||
toc: false
|
toc: false
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## July 2025 - Universal Registry Items
|
||||||
|
|
||||||
|
We've added support for universal registry items. This allows you to create registry items that can be distributed to any project i.e. no framework, no components.json, no tailwind, no react required.
|
||||||
|
|
||||||
|
This new registry item type unlocks a lot of new workflows. You can now distribute code, config, rules, docs, anything to any code project.
|
||||||
|
|
||||||
|
See the [docs](/docs/registry/examples) for more details and examples.
|
||||||
|
|
||||||
|
## July 2025 - Local File Support
|
||||||
|
|
||||||
|
The shadcn CLI now supports local files. Initialize projects and add components, themes, hooks, utils and more from local JSON files.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Initialize a project from a local file
|
||||||
|
npx shadcn init ./template.json
|
||||||
|
|
||||||
|
# Add a component from a local file
|
||||||
|
npx shadcn add ./block.json
|
||||||
|
```
|
||||||
|
|
||||||
|
This feature enables powerful new workflows:
|
||||||
|
|
||||||
|
- **Zero setup** - No remote registries required
|
||||||
|
- **Faster development** - Test registry items locally before publishing
|
||||||
|
- **Enhanced workflow for agents and MCP** - Generate and run registry items locally
|
||||||
|
- **Private components** - Keep proprietary components local and private.
|
||||||
|
|
||||||
## June 2025 - `radix-ui`
|
## June 2025 - `radix-ui`
|
||||||
|
|
||||||
We've added a new command to migrate to the new `radix-ui` package. This command will replace all `@radix-ui/react-*` imports with `radix-ui`.
|
We've added a new command to migrate to the new `radix-ui` package. This command will replace all `@radix-ui/react-*` imports with `radix-ui`.
|
||||||
|
|||||||
@@ -21,15 +21,14 @@ Usage: shadcn init [options] [components...]
|
|||||||
initialize your project and install dependencies
|
initialize your project and install dependencies
|
||||||
|
|
||||||
Arguments:
|
Arguments:
|
||||||
components the components to add or a url to the component.
|
components name, url or local path to component
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
-t, --template <template> the template to use. (next, next-monorepo)
|
-t, --template <template> the template to use. (next, next-monorepo)
|
||||||
-b, --base-color <base-color> the base color to use. (neutral, gray, zinc, stone, slate)
|
-b, --base-color <base-color> the base color to use. (neutral, gray, zinc, stone, slate)
|
||||||
-y, --yes skip confirmation prompt. (default: true)
|
-y, --yes skip confirmation prompt. (default: true)
|
||||||
-f, --force force overwrite of existing configuration. (default: false)
|
-f, --force force overwrite of existing configuration. (default: false)
|
||||||
-c, --cwd <cwd> the working directory. defaults to the current directory. (default:
|
-c, --cwd <cwd> the working directory. defaults to the current directory.
|
||||||
"/Users/shadcn/Code/shadcn/ui/packages/shadcn")
|
|
||||||
-s, --silent mute output. (default: false)
|
-s, --silent mute output. (default: false)
|
||||||
--src-dir use the src directory when creating a new project. (default: false)
|
--src-dir use the src directory when creating a new project. (default: false)
|
||||||
--no-src-dir do not use the src directory when creating a new project.
|
--no-src-dir do not use the src directory when creating a new project.
|
||||||
@@ -54,12 +53,12 @@ Usage: shadcn add [options] [components...]
|
|||||||
add a component to your project
|
add a component to your project
|
||||||
|
|
||||||
Arguments:
|
Arguments:
|
||||||
components the components to add or a url to the component.
|
components name, url or local path to component
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
-y, --yes skip confirmation prompt. (default: false)
|
-y, --yes skip confirmation prompt. (default: false)
|
||||||
-o, --overwrite overwrite existing files. (default: false)
|
-o, --overwrite overwrite existing files. (default: false)
|
||||||
-c, --cwd <cwd> the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
|
-c, --cwd <cwd> the working directory. defaults to the current directory.
|
||||||
-a, --all add all available components (default: false)
|
-a, --all add all available components (default: false)
|
||||||
-p, --path <path> the path to add the component to.
|
-p, --path <path> the path to add the component to.
|
||||||
-s, --silent mute output. (default: false)
|
-s, --silent mute output. (default: false)
|
||||||
@@ -92,8 +91,7 @@ Arguments:
|
|||||||
|
|
||||||
Options:
|
Options:
|
||||||
-o, --output <path> destination directory for json files (default: "./public/r")
|
-o, --output <path> destination directory for json files (default: "./public/r")
|
||||||
-c, --cwd <cwd> the working directory. defaults to the current directory. (default:
|
-c, --cwd <cwd> the working directory. defaults to the current directory.
|
||||||
"/Users/shadcn/Code/shadcn/ui/packages/shadcn")
|
|
||||||
-h, --help display help for command
|
-h, --help display help for command
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -15,3 +15,4 @@ description: Every component recreated in Figma. With customizable props, typogr
|
|||||||
## Free
|
## Free
|
||||||
|
|
||||||
- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
|
- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
|
||||||
|
- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ npx shadcn@latest add calendar
|
|||||||
<Step>Install the following dependencies:</Step>
|
<Step>Install the following dependencies:</Step>
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install react-day-picker@8.10.1 date-fns
|
npm install react-day-picker date-fns
|
||||||
```
|
```
|
||||||
|
|
||||||
<Step>Add the `Button` component to your project.</Step>
|
<Step>Add the `Button` component to your project.</Step>
|
||||||
|
|||||||
@@ -4,9 +4,15 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
|
|||||||
component: true
|
component: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<Callout>
|
||||||
|
|
||||||
|
**Note:** We're working on upgrading to Recharts v3. In the meantime, if you'd like to start testing v3, see the code in the comment [here](https://github.com/shadcn-ui/ui/issues/7669#issuecomment-2998299159). We'll have an official release soon.
|
||||||
|
|
||||||
|
</Callout>
|
||||||
|
|
||||||
<ComponentPreview
|
<ComponentPreview
|
||||||
name="chart-bar-interactive"
|
name="chart-bar-interactive"
|
||||||
className="theme-blue -mt-4 [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
|
className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
|
||||||
hideCode
|
hideCode
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@@ -328,6 +328,20 @@ Add custom theme variables to the `theme` object.
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Add custom plugins
|
||||||
|
|
||||||
|
```json title="example-plugin.json" showLineNumbers
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||||
|
"name": "custom-plugin",
|
||||||
|
"type": "registry:component",
|
||||||
|
"css": {
|
||||||
|
"@plugin @tailwindcss/typography": {},
|
||||||
|
"@plugin foo": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Add custom animations
|
## Add custom animations
|
||||||
|
|
||||||
Note: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.
|
Note: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.
|
||||||
@@ -354,3 +368,70 @@ Note: you need to define both `@keyframes` in css and `theme` in cssVars to use
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Universal Items
|
||||||
|
|
||||||
|
As of `2.9.0`, you can create universal items that can be installed without framework detection or components.json.
|
||||||
|
|
||||||
|
To make an item universal i.e framework agnostic, all the files in the item must have an explicit target.
|
||||||
|
|
||||||
|
Here's an example of a registry item that installs custom Cursor rules for _python_:
|
||||||
|
|
||||||
|
```json title=".cursor/rules/custom-python.mdc" showLineNumbers {9}
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||||
|
"name": "python-rules",
|
||||||
|
"type": "registry:item",
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": "/path/to/your/registry/default/custom-python.mdc",
|
||||||
|
"type": "registry:file",
|
||||||
|
"target": "~/.cursor/rules/custom-python.mdc",
|
||||||
|
"content": "..."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Here's another example for installation custom ESLint config:
|
||||||
|
|
||||||
|
```json title=".eslintrc.json" showLineNumbers {9}
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||||
|
"name": "my-eslint-config",
|
||||||
|
"type": "registry:item",
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": "/path/to/your/registry/default/custom-eslint.json",
|
||||||
|
"type": "registry:file",
|
||||||
|
"target": "~/.eslintrc.json",
|
||||||
|
"content": "..."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also have a universal item that installs multiple files:
|
||||||
|
|
||||||
|
```json title="my-custom-starter-template.json" showLineNumbers {9}
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||||
|
"name": "my-custom-start-template",
|
||||||
|
"type": "registry:item",
|
||||||
|
dependencies: ["better-auth"]
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": "/path/to/file-01.json",
|
||||||
|
"type": "registry:file",
|
||||||
|
"target": "~/file-01.json",
|
||||||
|
"content": "..."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/path/to/file-02.vue",
|
||||||
|
"type": "registry:file",
|
||||||
|
"target": "~/pages/file-02.vue",
|
||||||
|
"content": "..."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,15 +1,14 @@
|
|||||||
---
|
---
|
||||||
title: Registry
|
title: Registry
|
||||||
description: Run your own component registry.
|
description: Run your own code registry.
|
||||||
---
|
---
|
||||||
|
|
||||||
<Callout>
|
You can use the `shadcn` CLI to run your own code registry. Running your own registry allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.
|
||||||
**Note:** This feature is currently experimental. Help us improve it by
|
|
||||||
testing it out and sending feedback. If you have any questions, please [reach
|
|
||||||
out to us](https://github.com/shadcn-ui/ui/discussions).
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
You can use the `shadcn` CLI to run your own component registry. Running your own registry allows you to distribute your custom components, hooks, pages, and other files to any React project.
|
<Callout>
|
||||||
|
**Note:** The registry works with any project type and any framework, and is
|
||||||
|
not limited to React.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
<figure className="flex flex-col gap-4">
|
<figure className="flex flex-col gap-4">
|
||||||
<Image
|
<Image
|
||||||
@@ -27,12 +26,10 @@ You can use the `shadcn` CLI to run your own component registry. Running your ow
|
|||||||
className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
|
className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
|
||||||
/>
|
/>
|
||||||
<figcaption className="text-center text-sm text-gray-500">
|
<figcaption className="text-center text-sm text-gray-500">
|
||||||
Distribute code to any React project.
|
A distribution system for code
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
Registry items are automatically compatible with the `shadcn` CLI and `Open in v0`.
|
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
|
You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
|
||||||
|
|||||||
@@ -107,6 +107,7 @@ The following types are supported:
|
|||||||
| `registry:file` | Use for miscellaneous files. |
|
| `registry:file` | Use for miscellaneous files. |
|
||||||
| `registry:style` | Use for registry styles. eg. `new-york` |
|
| `registry:style` | Use for registry styles. eg. `new-york` |
|
||||||
| `registry:theme` | Use for themes. |
|
| `registry:theme` | Use for themes. |
|
||||||
|
| `registry:item` | Use for universal registry items. |
|
||||||
|
|
||||||
### author
|
### author
|
||||||
|
|
||||||
@@ -260,11 +261,13 @@ Use to define CSS variables for your registry item.
|
|||||||
|
|
||||||
### css
|
### css
|
||||||
|
|
||||||
Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, etc.
|
Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, `@plugin`, etc.
|
||||||
|
|
||||||
```json title="registry-item.json" showLineNumbers
|
```json title="registry-item.json" showLineNumbers
|
||||||
{
|
{
|
||||||
"css": {
|
"css": {
|
||||||
|
"@plugin @tailwindcss/typography": {},
|
||||||
|
"@plugin foo": {},
|
||||||
"@layer base": {
|
"@layer base": {
|
||||||
"body": {
|
"body": {
|
||||||
"font-size": "var(--text-base)",
|
"font-size": "var(--text-base)",
|
||||||
|
|||||||
@@ -70,6 +70,14 @@ const nextConfig = {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
rewrites() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: "/docs/:path*.mdx",
|
||||||
|
destination: "/llm/:path*",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const withMDX = createMDX({})
|
const withMDX = createMDX({})
|
||||||
|
|||||||
@@ -86,7 +86,7 @@
|
|||||||
"recharts": "2.15.1",
|
"recharts": "2.15.1",
|
||||||
"rehype-pretty-code": "^0.14.1",
|
"rehype-pretty-code": "^0.14.1",
|
||||||
"rimraf": "^6.0.1",
|
"rimraf": "^6.0.1",
|
||||||
"shadcn": "2.6.2",
|
"shadcn": "2.9.3",
|
||||||
"shiki": "^1.10.1",
|
"shiki": "^1.10.1",
|
||||||
"sonner": "^2.0.0",
|
"sonner": "^2.0.0",
|
||||||
"tailwind-merge": "^3.0.1",
|
"tailwind-merge": "^3.0.1",
|
||||||
|
|||||||
@@ -180,7 +180,7 @@
|
|||||||
"name": "chart",
|
"name": "chart",
|
||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
|||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"author": "shadcn (https://ui.shadcn.com)",
|
"author": "shadcn (https://ui.shadcn.com)",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"path": "registry/new-york-v4/blocks/calendar-24.tsx",
|
"path": "registry/new-york-v4/blocks/calendar-24.tsx",
|
||||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n const [open, setOpen] = React.useState(false)\n const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n return (\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"date\" className=\"px-1\">\n Date\n </Label>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n id=\"date\"\n className=\"w-32 justify-between font-normal\"\n >\n {date ? date.toLocaleDateString() : \"Select date\"}\n <ChevronDownIcon />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={date}\n captionLayout=\"dropdown\"\n onSelect={(date) => {\n setDate(date)\n setOpen(false)\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"time\" className=\"px-1\">\n Time\n </Label>\n <Input\n type=\"time\"\n id=\"time\"\n step=\"1\"\n defaultValue=\"10:30:00\"\n className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n />\n </div>\n </div>\n )\n}\n",
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n const [open, setOpen] = React.useState(false)\n const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n return (\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"date-picker\" className=\"px-1\">\n Date\n </Label>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n id=\"date-picker\"\n className=\"w-32 justify-between font-normal\"\n >\n {date ? date.toLocaleDateString() : \"Select date\"}\n <ChevronDownIcon />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={date}\n captionLayout=\"dropdown\"\n onSelect={(date) => {\n setDate(date)\n setOpen(false)\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"time-picker\" className=\"px-1\">\n Time\n </Label>\n <Input\n type=\"time\"\n id=\"time-picker\"\n step=\"1\"\n defaultValue=\"10:30:00\"\n className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n />\n </div>\n </div>\n )\n}\n",
|
||||||
"type": "registry:component"
|
"type": "registry:component"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@
|
|||||||
"name": "chart",
|
"name": "chart",
|
||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
|||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"author": "shadcn (https://ui.shadcn.com)",
|
"author": "shadcn (https://ui.shadcn.com)",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -17,7 +17,8 @@
|
|||||||
"registry:theme",
|
"registry:theme",
|
||||||
"registry:page",
|
"registry:page",
|
||||||
"registry:file",
|
"registry:file",
|
||||||
"registry:style"
|
"registry:style",
|
||||||
|
"registry:item"
|
||||||
],
|
],
|
||||||
"description": "The type of the item. This is used to determine the type and target path of the item when resolved for a project."
|
"description": "The type of the item. This is used to determine the type and target path of the item when resolved for a project."
|
||||||
},
|
},
|
||||||
@@ -79,7 +80,8 @@
|
|||||||
"registry:theme",
|
"registry:theme",
|
||||||
"registry:page",
|
"registry:page",
|
||||||
"registry:file",
|
"registry:file",
|
||||||
"registry:style"
|
"registry:style",
|
||||||
|
"registry:item"
|
||||||
],
|
],
|
||||||
"description": "The type of the file. This is used to determine the type of the file when resolved for a project."
|
"description": "The type of the file. This is used to determine the type of the file when resolved for a project."
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -169,7 +169,7 @@
|
|||||||
"name": "chart",
|
"name": "chart",
|
||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -20,14 +20,14 @@ export default function Calendar24() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex gap-4">
|
<div className="flex gap-4">
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<Label htmlFor="date" className="px-1">
|
<Label htmlFor="date-picker" className="px-1">
|
||||||
Date
|
Date
|
||||||
</Label>
|
</Label>
|
||||||
<Popover open={open} onOpenChange={setOpen}>
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
id="date"
|
id="date-picker"
|
||||||
className="w-32 justify-between font-normal"
|
className="w-32 justify-between font-normal"
|
||||||
>
|
>
|
||||||
{date ? date.toLocaleDateString() : "Select date"}
|
{date ? date.toLocaleDateString() : "Select date"}
|
||||||
@@ -48,12 +48,12 @@ export default function Calendar24() {
|
|||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<Label htmlFor="time" className="px-1">
|
<Label htmlFor="time-picker" className="px-1">
|
||||||
Time
|
Time
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<Input
|
||||||
type="time"
|
type="time"
|
||||||
id="time"
|
id="time-picker"
|
||||||
step="1"
|
step="1"
|
||||||
defaultValue="10:30:00"
|
defaultValue="10:30:00"
|
||||||
className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
|
className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
|
||||||
|
|||||||
@@ -73,7 +73,10 @@ function Calendar({
|
|||||||
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||||
defaultClassNames.dropdown_root
|
defaultClassNames.dropdown_root
|
||||||
),
|
),
|
||||||
dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
|
dropdown: cn(
|
||||||
|
"absolute bg-popover inset-0 opacity-0",
|
||||||
|
defaultClassNames.dropdown
|
||||||
|
),
|
||||||
caption_label: cn(
|
caption_label: cn(
|
||||||
"select-none font-medium",
|
"select-none font-medium",
|
||||||
captionLayout === "label"
|
captionLayout === "label"
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ export const ui: Registry["items"] = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
registryDependencies: ["card"],
|
registryDependencies: ["card"],
|
||||||
dependencies: ["recharts", "lucide-react"],
|
dependencies: ["recharts@2.15.4", "lucide-react"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "checkbox",
|
name: "checkbox",
|
||||||
|
|||||||
@@ -248,7 +248,7 @@
|
|||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
outline: none;
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
@apply md:-mx-4;
|
@apply md:-mx-1;
|
||||||
|
|
||||||
&:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
|
&:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
|
||||||
top: calc(var(--spacing) * 1.5) !important;
|
top: calc(var(--spacing) * 1.5) !important;
|
||||||
|
|||||||
6
apps/www/README.md
Normal file
6
apps/www/README.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# ui.shadcn.com
|
||||||
|
|
||||||
|
> [!WARNING]
|
||||||
|
> The site at ui.shadcn.com now points to `apps/v4`. All changes should be made in the `apps/v4` directory.
|
||||||
|
|
||||||
|
Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
|
||||||
@@ -39,7 +39,7 @@ npx shadcn@latest add calendar
|
|||||||
<Step>Install the following dependencies:</Step>
|
<Step>Install the following dependencies:</Step>
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install react-day-picker@8.10.1 date-fns
|
npm install react-day-picker date-fns
|
||||||
```
|
```
|
||||||
|
|
||||||
<Step>Add the `Button` component to your project.</Step>
|
<Step>Add the `Button` component to your project.</Step>
|
||||||
|
|||||||
@@ -10,3 +10,4 @@ description: Every component recreated in Figma. With customizable props, typogr
|
|||||||
## Free
|
## Free
|
||||||
|
|
||||||
- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
|
- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
|
||||||
|
- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed
|
||||||
|
|||||||
@@ -88,7 +88,7 @@
|
|||||||
"react-resizable-panels": "^2.0.22",
|
"react-resizable-panels": "^2.0.22",
|
||||||
"react-wrap-balancer": "^0.4.1",
|
"react-wrap-balancer": "^0.4.1",
|
||||||
"recharts": "2.12.7",
|
"recharts": "2.12.7",
|
||||||
"shadcn": "2.6.2",
|
"shadcn": "2.9.3",
|
||||||
"sharp": "^0.32.6",
|
"sharp": "^0.32.6",
|
||||||
"sonner": "^1.2.3",
|
"sonner": "^1.2.3",
|
||||||
"swr": "2.2.6-beta.3",
|
"swr": "2.2.6-beta.3",
|
||||||
|
|||||||
@@ -180,7 +180,7 @@
|
|||||||
"name": "chart",
|
"name": "chart",
|
||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
|||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"author": "shadcn (https://ui.shadcn.com)",
|
"author": "shadcn (https://ui.shadcn.com)",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"path": "registry/new-york-v4/blocks/calendar-24.tsx",
|
"path": "registry/new-york-v4/blocks/calendar-24.tsx",
|
||||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n const [open, setOpen] = React.useState(false)\n const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n return (\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"date\" className=\"px-1\">\n Date\n </Label>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n id=\"date\"\n className=\"w-32 justify-between font-normal\"\n >\n {date ? date.toLocaleDateString() : \"Select date\"}\n <ChevronDownIcon />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={date}\n captionLayout=\"dropdown\"\n onSelect={(date) => {\n setDate(date)\n setOpen(false)\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"time\" className=\"px-1\">\n Time\n </Label>\n <Input\n type=\"time\"\n id=\"time\"\n step=\"1\"\n defaultValue=\"10:30:00\"\n className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n />\n </div>\n </div>\n )\n}\n",
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n const [open, setOpen] = React.useState(false)\n const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n return (\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"date-picker\" className=\"px-1\">\n Date\n </Label>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n id=\"date-picker\"\n className=\"w-32 justify-between font-normal\"\n >\n {date ? date.toLocaleDateString() : \"Select date\"}\n <ChevronDownIcon />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={date}\n captionLayout=\"dropdown\"\n onSelect={(date) => {\n setDate(date)\n setOpen(false)\n }}\n />\n </PopoverContent>\n </Popover>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"time-picker\" className=\"px-1\">\n Time\n </Label>\n <Input\n type=\"time\"\n id=\"time-picker\"\n step=\"1\"\n defaultValue=\"10:30:00\"\n className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n />\n </div>\n </div>\n )\n}\n",
|
||||||
"type": "registry:component"
|
"type": "registry:component"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@
|
|||||||
"name": "chart",
|
"name": "chart",
|
||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
|||||||
"type": "registry:ui",
|
"type": "registry:ui",
|
||||||
"author": "shadcn (https://ui.shadcn.com)",
|
"author": "shadcn (https://ui.shadcn.com)",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"recharts",
|
"recharts@2.15.4",
|
||||||
"lucide-react"
|
"lucide-react"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -79,7 +79,7 @@
|
|||||||
{
|
{
|
||||||
"name": "calendar",
|
"name": "calendar",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"react-day-picker@8.10.1",
|
"react-day-picker",
|
||||||
"date-fns"
|
"date-fns"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "calendar",
|
"name": "calendar",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"react-day-picker@8.10.1",
|
"react-day-picker",
|
||||||
"date-fns"
|
"date-fns"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "calendar",
|
"name": "calendar",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"react-day-picker@8.10.1",
|
"react-day-picker",
|
||||||
"date-fns"
|
"date-fns"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
|||||||
@@ -73,7 +73,10 @@ function Calendar({
|
|||||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||||
defaultClassNames.dropdown_root
|
defaultClassNames.dropdown_root
|
||||||
),
|
),
|
||||||
dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
|
dropdown: cn(
|
||||||
|
"bg-popover absolute inset-0 opacity-0",
|
||||||
|
defaultClassNames.dropdown
|
||||||
|
),
|
||||||
caption_label: cn(
|
caption_label: cn(
|
||||||
"select-none font-medium",
|
"select-none font-medium",
|
||||||
captionLayout === "label"
|
captionLayout === "label"
|
||||||
|
|||||||
@@ -73,7 +73,10 @@ function Calendar({
|
|||||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||||
defaultClassNames.dropdown_root
|
defaultClassNames.dropdown_root
|
||||||
),
|
),
|
||||||
dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
|
dropdown: cn(
|
||||||
|
"bg-popover absolute inset-0 opacity-0",
|
||||||
|
defaultClassNames.dropdown
|
||||||
|
),
|
||||||
caption_label: cn(
|
caption_label: cn(
|
||||||
"select-none font-medium",
|
"select-none font-medium",
|
||||||
captionLayout === "label"
|
captionLayout === "label"
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ export const ui: Registry["items"] = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
registryDependencies: ["card"],
|
registryDependencies: ["card"],
|
||||||
dependencies: ["recharts", "lucide-react"],
|
dependencies: ["recharts@2.15.4", "lucide-react"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "checkbox",
|
name: "checkbox",
|
||||||
|
|||||||
@@ -1,5 +1,69 @@
|
|||||||
# @shadcn/ui
|
# @shadcn/ui
|
||||||
|
|
||||||
|
## 2.9.3
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7837](https://github.com/shadcn-ui/ui/pull/7837) [`20e913d8e1df1acddc7bd4b8328088a25869ba7c`](https://github.com/shadcn-ui/ui/commit/20e913d8e1df1acddc7bd4b8328088a25869ba7c) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of themes
|
||||||
|
|
||||||
|
## 2.9.2
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7833](https://github.com/shadcn-ui/ui/pull/7833) [`d9cdc3f7ae69e571de7dc116effc381ad76685c3`](https://github.com/shadcn-ui/ui/commit/d9cdc3f7ae69e571de7dc116effc381ad76685c3) Thanks [@shadcn](https://github.com/shadcn)! - Revert "fix: handling of shouldOverwriteCssVars"
|
||||||
|
|
||||||
|
## 2.9.1
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7829](https://github.com/shadcn-ui/ui/pull/7829) [`ed5237c231f3b70107131bd7ba517e73b8c9014d`](https://github.com/shadcn-ui/ui/commit/ed5237c231f3b70107131bd7ba517e73b8c9014d) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of shouldOverwriteCssVars
|
||||||
|
|
||||||
|
## 2.9.0
|
||||||
|
|
||||||
|
### Minor Changes
|
||||||
|
|
||||||
|
- [#7782](https://github.com/shadcn-ui/ui/pull/7782) [`06d03d64f437b543bf5fa07ccbc559f285538ffd`](https://github.com/shadcn-ui/ui/commit/06d03d64f437b543bf5fa07ccbc559f285538ffd) Thanks [@shadcn](https://github.com/shadcn)! - add universal registry items support
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7795](https://github.com/shadcn-ui/ui/pull/7795) [`6c341c16aeaf5ade177a4a1ba4fb9afcd33d5fee`](https://github.com/shadcn-ui/ui/commit/6c341c16aeaf5ade177a4a1ba4fb9afcd33d5fee) Thanks [@shadcn](https://github.com/shadcn)! - fix safe target handling
|
||||||
|
|
||||||
|
- [#7757](https://github.com/shadcn-ui/ui/pull/7757) [`db93787712fe51346bf87dbae8b4cf4e38ed8c27`](https://github.com/shadcn-ui/ui/commit/db93787712fe51346bf87dbae8b4cf4e38ed8c27) Thanks [@shadcn](https://github.com/shadcn)! - implement registry path validation
|
||||||
|
|
||||||
|
## 2.8.0
|
||||||
|
|
||||||
|
### Minor Changes
|
||||||
|
|
||||||
|
- [#7720](https://github.com/shadcn-ui/ui/pull/7720) [`d544a7f7a519cd5b171d9ee7cb2fd1a226659ece`](https://github.com/shadcn-ui/ui/commit/d544a7f7a519cd5b171d9ee7cb2fd1a226659ece) Thanks [@shadcn](https://github.com/shadcn)! - refactor registry dependencies resolution
|
||||||
|
|
||||||
|
- [#7717](https://github.com/shadcn-ui/ui/pull/7717) [`48fe0d709fd2b244314f95f56e7afb38b117ed8a`](https://github.com/shadcn-ui/ui/commit/48fe0d709fd2b244314f95f56e7afb38b117ed8a) Thanks [@shadcn](https://github.com/shadcn)! - add support for local registry item
|
||||||
|
|
||||||
|
- [#6330](https://github.com/shadcn-ui/ui/pull/6330) [`ed244ea0b5abf7db50ac5fcf26e2993133fe94f7`](https://github.com/shadcn-ui/ui/commit/ed244ea0b5abf7db50ac5fcf26e2993133fe94f7) Thanks [@KitsuneDev](https://github.com/KitsuneDev)! - add support for vinxi based framework
|
||||||
|
|
||||||
|
## 2.7.0
|
||||||
|
|
||||||
|
### Minor Changes
|
||||||
|
|
||||||
|
- [#7540](https://github.com/shadcn-ui/ui/pull/7540) [`cb19ab84646fc017c15fadc81fc47b695560a04c`](https://github.com/shadcn-ui/ui/commit/cb19ab84646fc017c15fadc81fc47b695560a04c) Thanks [@mrzachnugent](https://github.com/mrzachnugent)! - add support for expo
|
||||||
|
|
||||||
|
- [#7640](https://github.com/shadcn-ui/ui/pull/7640) [`7c3d34cdc91681815f8897709917ec9fbcd69245`](https://github.com/shadcn-ui/ui/commit/7c3d34cdc91681815f8897709917ec9fbcd69245) Thanks [@shadcn](https://github.com/shadcn)! - add support for @plugin in css
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7609](https://github.com/shadcn-ui/ui/pull/7609) [`5b8ee41511fb5ff468d9218f97b8545e145d773c`](https://github.com/shadcn-ui/ui/commit/5b8ee41511fb5ff468d9218f97b8545e145d773c) Thanks [@xabierlameiro](https://github.com/xabierlameiro)! - fix typo in function name unnsetSpreadElements
|
||||||
|
|
||||||
|
## 2.6.4
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7601](https://github.com/shadcn-ui/ui/pull/7601) [`c86c27a2ffb8d186770afa42bfb62ab46e3db975`](https://github.com/shadcn-ui/ui/commit/c86c27a2ffb8d186770afa42bfb62ab46e3db975) Thanks [@schiller-manuel](https://github.com/schiller-manuel)! - fix tanstack start detection
|
||||||
|
|
||||||
|
## 2.6.3
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#7594](https://github.com/shadcn-ui/ui/pull/7594) [`431af4f7ff294af032c0687b8b655ed6db2e690f`](https://github.com/shadcn-ui/ui/commit/431af4f7ff294af032c0687b8b655ed6db2e690f) Thanks [@shadcn](https://github.com/shadcn)! - fix: semicolon in code style
|
||||||
|
|
||||||
## 2.6.2
|
## 2.6.2
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "shadcn",
|
"name": "shadcn",
|
||||||
"version": "2.6.2",
|
"version": "2.9.3",
|
||||||
"description": "Add components to your apps.",
|
"description": "Add components to your apps.",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
|
|||||||
@@ -1,12 +1,18 @@
|
|||||||
|
import fs from "fs"
|
||||||
import path from "path"
|
import path from "path"
|
||||||
import { runInit } from "@/src/commands/init"
|
import { runInit } from "@/src/commands/init"
|
||||||
import { preFlightAdd } from "@/src/preflights/preflight-add"
|
import { preFlightAdd } from "@/src/preflights/preflight-add"
|
||||||
import { getRegistryIndex, getRegistryItem, isUrl } from "@/src/registry/api"
|
import { getRegistryIndex, getRegistryItem } from "@/src/registry/api"
|
||||||
import { registryItemTypeSchema } from "@/src/registry/schema"
|
import { registryItemTypeSchema } from "@/src/registry/schema"
|
||||||
|
import {
|
||||||
|
isLocalFile,
|
||||||
|
isUniversalRegistryItem,
|
||||||
|
isUrl,
|
||||||
|
} from "@/src/registry/utils"
|
||||||
import { addComponents } from "@/src/utils/add-components"
|
import { addComponents } from "@/src/utils/add-components"
|
||||||
import { createProject } from "@/src/utils/create-project"
|
import { createProject } from "@/src/utils/create-project"
|
||||||
import * as ERRORS from "@/src/utils/errors"
|
import * as ERRORS from "@/src/utils/errors"
|
||||||
import { getConfig } from "@/src/utils/get-config"
|
import { createConfig, getConfig } from "@/src/utils/get-config"
|
||||||
import { getProjectInfo } from "@/src/utils/get-project-info"
|
import { getProjectInfo } from "@/src/utils/get-project-info"
|
||||||
import { handleError } from "@/src/utils/handle-error"
|
import { handleError } from "@/src/utils/handle-error"
|
||||||
import { highlighter } from "@/src/utils/highlighter"
|
import { highlighter } from "@/src/utils/highlighter"
|
||||||
@@ -46,10 +52,7 @@ export const addOptionsSchema = z.object({
|
|||||||
export const add = new Command()
|
export const add = new Command()
|
||||||
.name("add")
|
.name("add")
|
||||||
.description("add a component to your project")
|
.description("add a component to your project")
|
||||||
.argument(
|
.argument("[components...]", "names, url or local path to component")
|
||||||
"[components...]",
|
|
||||||
"the components to add or a url to the component."
|
|
||||||
)
|
|
||||||
.option("-y, --yes", "skip confirmation prompt.", false)
|
.option("-y, --yes", "skip confirmation prompt.", false)
|
||||||
.option("-o, --overwrite", "overwrite existing files.", false)
|
.option("-o, --overwrite", "overwrite existing files.", false)
|
||||||
.option(
|
.option(
|
||||||
@@ -80,10 +83,14 @@ export const add = new Command()
|
|||||||
})
|
})
|
||||||
|
|
||||||
let itemType: z.infer<typeof registryItemTypeSchema> | undefined
|
let itemType: z.infer<typeof registryItemTypeSchema> | undefined
|
||||||
|
let registryItem: any = null
|
||||||
|
|
||||||
if (components.length > 0 && isUrl(components[0])) {
|
if (
|
||||||
const item = await getRegistryItem(components[0], "")
|
components.length > 0 &&
|
||||||
itemType = item?.type
|
(isUrl(components[0]) || isLocalFile(components[0]))
|
||||||
|
) {
|
||||||
|
registryItem = await getRegistryItem(components[0], "")
|
||||||
|
itemType = registryItem?.type
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@@ -129,6 +136,22 @@ export const add = new Command()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isUniversalRegistryItem(registryItem)) {
|
||||||
|
// Universal items only cares about the cwd.
|
||||||
|
if (!fs.existsSync(options.cwd)) {
|
||||||
|
throw new Error(`Directory ${options.cwd} does not exist`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const minimalConfig = createConfig({
|
||||||
|
resolvedPaths: {
|
||||||
|
cwd: options.cwd,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
await addComponents(options.components, minimalConfig, options)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
let { errors, config } = await preFlightAdd(options)
|
let { errors, config } = await preFlightAdd(options)
|
||||||
|
|
||||||
// No components.json file. Prompt the user to run init.
|
// No components.json file. Prompt the user to run init.
|
||||||
|
|||||||
@@ -6,8 +6,8 @@ import {
|
|||||||
getRegistryBaseColors,
|
getRegistryBaseColors,
|
||||||
getRegistryItem,
|
getRegistryItem,
|
||||||
getRegistryStyles,
|
getRegistryStyles,
|
||||||
isUrl,
|
|
||||||
} from "@/src/registry/api"
|
} from "@/src/registry/api"
|
||||||
|
import { isLocalFile, isUrl } from "@/src/registry/utils"
|
||||||
import { addComponents } from "@/src/utils/add-components"
|
import { addComponents } from "@/src/utils/add-components"
|
||||||
import { TEMPLATES, createProject } from "@/src/utils/create-project"
|
import { TEMPLATES, createProject } from "@/src/utils/create-project"
|
||||||
import * as ERRORS from "@/src/utils/errors"
|
import * as ERRORS from "@/src/utils/errors"
|
||||||
@@ -82,10 +82,7 @@ export const initOptionsSchema = z.object({
|
|||||||
export const init = new Command()
|
export const init = new Command()
|
||||||
.name("init")
|
.name("init")
|
||||||
.description("initialize your project and install dependencies")
|
.description("initialize your project and install dependencies")
|
||||||
.argument(
|
.argument("[components...]", "names, url or local path to component")
|
||||||
"[components...]",
|
|
||||||
"the components to add or a url to the component."
|
|
||||||
)
|
|
||||||
.option(
|
.option(
|
||||||
"-t, --template <template>",
|
"-t, --template <template>",
|
||||||
"the template to use. (next, next-monorepo)"
|
"the template to use. (next, next-monorepo)"
|
||||||
@@ -128,7 +125,10 @@ export const init = new Command()
|
|||||||
// We need to check if we're initializing with a new style.
|
// We need to check if we're initializing with a new style.
|
||||||
// We fetch the payload of the first item.
|
// We fetch the payload of the first item.
|
||||||
// This is okay since the request is cached and deduped.
|
// This is okay since the request is cached and deduped.
|
||||||
if (components.length > 0 && isUrl(components[0])) {
|
if (
|
||||||
|
components.length > 0 &&
|
||||||
|
(isUrl(components[0]) || isLocalFile(components[0]))
|
||||||
|
) {
|
||||||
const item = await getRegistryItem(components[0], "")
|
const item = await getRegistryItem(components[0], "")
|
||||||
|
|
||||||
// Skip base color if style.
|
// Skip base color if style.
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ import * as SelectPrimitive from "@radix-ui/react-select"
|
|||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui";
|
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
@@ -109,7 +109,7 @@ export const DialogRoot = Root
|
|||||||
export const DialogTrigger = Trigger
|
export const DialogTrigger = Trigger
|
||||||
export const SelectContent = Content`
|
export const SelectContent = Content`
|
||||||
|
|
||||||
const expected = `import { Root, Trigger, Content } from "radix-ui";
|
const expected = `import { Root, Trigger, Content } from "radix-ui"
|
||||||
|
|
||||||
export const DialogRoot = Root
|
export const DialogRoot = Root
|
||||||
export const DialogTrigger = Trigger
|
export const DialogTrigger = Trigger
|
||||||
@@ -131,7 +131,7 @@ import { useState } from "react"
|
|||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectRoot`
|
export const Select = SelectRoot`
|
||||||
|
|
||||||
const expected = `import { Dialog as DialogPrimitive, Root as SelectRoot } from "radix-ui";
|
const expected = `import { Dialog as DialogPrimitive, Root as SelectRoot } from "radix-ui"
|
||||||
|
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
|
|
||||||
@@ -184,7 +184,7 @@ export const Dialog = DialogPrimitive.Root`
|
|||||||
|
|
||||||
const expected = `"use client"
|
const expected = `"use client"
|
||||||
|
|
||||||
import { Dialog as DialogPrimitive } from "radix-ui";
|
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root`
|
export const Dialog = DialogPrimitive.Root`
|
||||||
@@ -206,7 +206,7 @@ export const Dialog = DialogPrimitive.Root`
|
|||||||
|
|
||||||
const expected = `"use client"
|
const expected = `"use client"
|
||||||
|
|
||||||
import { DropdownMenu as DropdownMenuPrimitive, Dialog as DialogPrimitive } from "radix-ui";
|
import { DropdownMenu as DropdownMenuPrimitive, Dialog as DialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
|
|
||||||
@@ -228,7 +228,7 @@ import * as SelectPrimitive from '@radix-ui/react-select'
|
|||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui';
|
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui'
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
@@ -248,7 +248,7 @@ import * as SelectPrimitive from "@radix-ui/react-select"
|
|||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui';
|
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui'
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
@@ -270,7 +270,7 @@ export type MyDialogProps = ComponentProps
|
|||||||
export type MySelectProps = SelectProps
|
export type MySelectProps = SelectProps
|
||||||
export const Dialog = DialogPrimitive.Root`
|
export const Dialog = DialogPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { type ComponentProps, type SelectProps, Root, Dialog as DialogPrimitive } from "radix-ui";
|
const expected = `import { type ComponentProps, type SelectProps, Root, Dialog as DialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export type MyDialogProps = ComponentProps
|
export type MyDialogProps = ComponentProps
|
||||||
export type MySelectProps = SelectProps
|
export type MySelectProps = SelectProps
|
||||||
@@ -291,7 +291,7 @@ import { Root, Trigger } from "@radix-ui/react-dialog"
|
|||||||
export type Props = DialogProps
|
export type Props = DialogProps
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
|
|
||||||
const expected = `import { type DialogProps, Root, Trigger } from "radix-ui";
|
const expected = `import { type DialogProps, Root, Trigger } from "radix-ui"
|
||||||
|
|
||||||
export type Props = DialogProps
|
export type Props = DialogProps
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
@@ -308,7 +308,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|||||||
export type Props = DialogTypes.ComponentProps
|
export type Props = DialogTypes.ComponentProps
|
||||||
export const Dialog = DialogPrimitive.Root`
|
export const Dialog = DialogPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { type Dialog as DialogTypes, Dialog as DialogPrimitive } from "radix-ui";
|
const expected = `import { type Dialog as DialogTypes, Dialog as DialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export type Props = DialogTypes.ComponentProps
|
export type Props = DialogTypes.ComponentProps
|
||||||
export const Dialog = DialogPrimitive.Root`
|
export const Dialog = DialogPrimitive.Root`
|
||||||
@@ -327,7 +327,7 @@ export const Dialog = DialogPrimitive.Root
|
|||||||
export const ChevronDown = ChevronDownIcon`
|
export const ChevronDown = ChevronDownIcon`
|
||||||
|
|
||||||
const expected = `import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons"
|
const expected = `import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons"
|
||||||
import { Dialog as DialogPrimitive, Root } from "radix-ui";
|
import { Dialog as DialogPrimitive, Root } from "radix-ui"
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const ChevronDown = ChevronDownIcon`
|
export const ChevronDown = ChevronDownIcon`
|
||||||
@@ -349,7 +349,7 @@ export type MyIconProps = IconProps
|
|||||||
export type MyDialogProps = ComponentProps`
|
export type MyDialogProps = ComponentProps`
|
||||||
|
|
||||||
const expected = `import type { IconProps } from "@radix-ui/react-icons/dist/types"
|
const expected = `import type { IconProps } from "@radix-ui/react-icons/dist/types"
|
||||||
import { type ComponentProps, Root } from "radix-ui";
|
import { type ComponentProps, Root } from "radix-ui"
|
||||||
|
|
||||||
export type MyIconProps = IconProps
|
export type MyIconProps = IconProps
|
||||||
export type MyDialogProps = ComponentProps`
|
export type MyDialogProps = ComponentProps`
|
||||||
@@ -373,7 +373,7 @@ export type Props = IconProps`
|
|||||||
const expected = `import * as Icons from "@radix-ui/react-icons"
|
const expected = `import * as Icons from "@radix-ui/react-icons"
|
||||||
import { ChevronDownIcon } from "@radix-ui/react-icons"
|
import { ChevronDownIcon } from "@radix-ui/react-icons"
|
||||||
import type { IconProps } from "@radix-ui/react-icons/dist/types"
|
import type { IconProps } from "@radix-ui/react-icons/dist/types"
|
||||||
import { Dialog as DialogPrimitive, Root } from "radix-ui";
|
import { Dialog as DialogPrimitive, Root } from "radix-ui"
|
||||||
|
|
||||||
export const Dialog = DialogPrimitive.Root
|
export const Dialog = DialogPrimitive.Root
|
||||||
export const Icon = ChevronDownIcon
|
export const Icon = ChevronDownIcon
|
||||||
@@ -401,7 +401,7 @@ import {
|
|||||||
export const DialogRoot = Root
|
export const DialogRoot = Root
|
||||||
export const SelectValue = Value`
|
export const SelectValue = Value`
|
||||||
|
|
||||||
const expected = `import { Root, Trigger, Content, Value, Item } from "radix-ui";
|
const expected = `import { Root, Trigger, Content, Value, Item } from "radix-ui"
|
||||||
|
|
||||||
export const DialogRoot = Root
|
export const DialogRoot = Root
|
||||||
export const SelectValue = Value`
|
export const SelectValue = Value`
|
||||||
@@ -425,7 +425,7 @@ import * as SelectPrimitive from "@radix-ui/react-select"
|
|||||||
export const Dialog = DialogRoot
|
export const Dialog = DialogRoot
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
const expected = `import { Root as DialogRoot, Trigger, Content, Select as SelectPrimitive } from "radix-ui";
|
const expected = `import { Root as DialogRoot, Trigger, Content, Select as SelectPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export const Dialog = DialogRoot
|
export const Dialog = DialogRoot
|
||||||
export const Select = SelectPrimitive.Root`
|
export const Select = SelectPrimitive.Root`
|
||||||
@@ -450,7 +450,7 @@ import {
|
|||||||
|
|
||||||
export type Props = DialogProps`
|
export type Props = DialogProps`
|
||||||
|
|
||||||
const expected = `import { type ComponentProps, type DialogProps, type SelectProps, Root } from "radix-ui";
|
const expected = `import { type ComponentProps, type DialogProps, type SelectProps, Root } from "radix-ui"
|
||||||
|
|
||||||
export type Props = DialogProps`
|
export type Props = DialogProps`
|
||||||
|
|
||||||
@@ -472,7 +472,7 @@ export type Props = DialogProps`
|
|||||||
|
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
|
|
||||||
const expected = `import { Root, Trigger, Content } from "radix-ui";
|
const expected = `import { Root, Trigger, Content } from "radix-ui"
|
||||||
|
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
|
|
||||||
@@ -490,7 +490,7 @@ export const DialogRoot = Root`
|
|||||||
|
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
|
|
||||||
const expected = `import { Root, Trigger, Content } from "radix-ui";
|
const expected = `import { Root, Trigger, Content } from "radix-ui"
|
||||||
|
|
||||||
export const DialogRoot = Root`
|
export const DialogRoot = Root`
|
||||||
|
|
||||||
@@ -532,7 +532,7 @@ export const Accordion = AccordionPrimitive.Root
|
|||||||
export const AlertDialog = AlertDialogPrimitive.Root
|
export const AlertDialog = AlertDialogPrimitive.Root
|
||||||
export const Button = Slot`
|
export const Button = Slot`
|
||||||
|
|
||||||
const expected = `import { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, AspectRatio as AspectRatioPrimitive, Avatar as AvatarPrimitive, Slot as SlotPrimitive, Checkbox as CheckboxPrimitive, Collapsible as CollapsiblePrimitive, ContextMenu as ContextMenuPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, HoverCard as HoverCardPrimitive, Label as LabelPrimitive, Menubar as MenubarPrimitive, NavigationMenu as NavigationMenuPrimitive, Popover as PopoverPrimitive, Progress as ProgressPrimitive, RadioGroup as RadioGroupPrimitive, ScrollArea as ScrollAreaPrimitive, Select as SelectPrimitive, Separator as SeparatorPrimitive, Slider as SliderPrimitive, Switch as SwitchPrimitive, Tabs as TabsPrimitive, Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive } from "radix-ui";
|
const expected = `import { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, AspectRatio as AspectRatioPrimitive, Avatar as AvatarPrimitive, Slot as SlotPrimitive, Checkbox as CheckboxPrimitive, Collapsible as CollapsiblePrimitive, ContextMenu as ContextMenuPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, HoverCard as HoverCardPrimitive, Label as LabelPrimitive, Menubar as MenubarPrimitive, NavigationMenu as NavigationMenuPrimitive, Popover as PopoverPrimitive, Progress as ProgressPrimitive, RadioGroup as RadioGroupPrimitive, ScrollArea as ScrollAreaPrimitive, Select as SelectPrimitive, Separator as SeparatorPrimitive, Slider as SliderPrimitive, Switch as SwitchPrimitive, Tabs as TabsPrimitive, Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export const Accordion = AccordionPrimitive.Root
|
export const Accordion = AccordionPrimitive.Root
|
||||||
export const AlertDialog = AlertDialogPrimitive.Root
|
export const AlertDialog = AlertDialogPrimitive.Root
|
||||||
@@ -578,7 +578,7 @@ import { cn } from "@/lib/utils"
|
|||||||
export const Sheet = SheetPrimitive.Root
|
export const Sheet = SheetPrimitive.Root
|
||||||
export const SheetTrigger = SheetPrimitive.Trigger`
|
export const SheetTrigger = SheetPrimitive.Trigger`
|
||||||
|
|
||||||
const expected = `import { Dialog as SheetPrimitive } from "radix-ui";
|
const expected = `import { Dialog as SheetPrimitive } from "radix-ui"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
export const Sheet = SheetPrimitive.Root
|
export const Sheet = SheetPrimitive.Root
|
||||||
@@ -597,7 +597,7 @@ import { Slot } from "@radix-ui/react-slot"
|
|||||||
export const FormLabel = LabelPrimitive.Root
|
export const FormLabel = LabelPrimitive.Root
|
||||||
export const FormControl = Slot`
|
export const FormControl = Slot`
|
||||||
|
|
||||||
const expected = `import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
|
||||||
|
|
||||||
export const FormLabel = LabelPrimitive.Root
|
export const FormLabel = LabelPrimitive.Root
|
||||||
export const FormControl = SlotPrimitive.Slot`
|
export const FormControl = SlotPrimitive.Slot`
|
||||||
@@ -664,7 +664,7 @@ export const FormControl = SlotPrimitive.Slot`
|
|||||||
expect(result.replacedPackages.sort()).toEqual(allPackages.sort())
|
expect(result.replacedPackages.sort()).toEqual(allPackages.sort())
|
||||||
|
|
||||||
// Should be a single unified import from radix-ui
|
// Should be a single unified import from radix-ui
|
||||||
expect(result.content).toContain('from "radix-ui";')
|
expect(result.content).toContain('from "radix-ui"')
|
||||||
expect(result.content.startsWith("import {")).toBe(true)
|
expect(result.content.startsWith("import {")).toBe(true)
|
||||||
expect(result.content).toContain("Slot as SlotPrimitive") // Slot should be aliased as SlotPrimitive
|
expect(result.content).toContain("Slot as SlotPrimitive") // Slot should be aliased as SlotPrimitive
|
||||||
expect(result.content).toContain("Accordion as AccordionPrimitive") // Namespace should be aliased
|
expect(result.content).toContain("Accordion as AccordionPrimitive") // Namespace should be aliased
|
||||||
@@ -685,7 +685,7 @@ const Button = ({ asChild, children }) => {
|
|||||||
return <Comp>{children}</Comp>
|
return <Comp>{children}</Comp>
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Slot as SlotPrimitive } from "radix-ui"
|
||||||
|
|
||||||
const Button = ({ asChild, children }) => {
|
const Button = ({ asChild, children }) => {
|
||||||
const Comp = asChild ? SlotPrimitive.Slot : "button"
|
const Comp = asChild ? SlotPrimitive.Slot : "button"
|
||||||
@@ -708,7 +708,7 @@ const Button = ({ asChild }) => {
|
|||||||
return null
|
return null
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Slot as SlotPrimitive } from "radix-ui"
|
||||||
|
|
||||||
const Button = ({ asChild }) => {
|
const Button = ({ asChild }) => {
|
||||||
const Comp1 = asChild ? SlotPrimitive.Slot : "button"
|
const Comp1 = asChild ? SlotPrimitive.Slot : "button"
|
||||||
@@ -731,7 +731,7 @@ const Button = ({ asChild }) => {
|
|||||||
return null
|
return null
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotComponent } from "radix-ui";
|
const expected = `import { Slot as SlotComponent } from "radix-ui"
|
||||||
|
|
||||||
const Button = ({ asChild }) => {
|
const Button = ({ asChild }) => {
|
||||||
const Comp = asChild ? Slot : "button"
|
const Comp = asChild ? Slot : "button"
|
||||||
@@ -754,7 +754,7 @@ const Button = ({ asChild }) => {
|
|||||||
return <Slot />
|
return <Slot />
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Slot as SlotPrimitive } from "radix-ui"
|
||||||
|
|
||||||
const Button = ({ asChild }) => {
|
const Button = ({ asChild }) => {
|
||||||
const SlotName = "Slot"
|
const SlotName = "Slot"
|
||||||
@@ -781,7 +781,7 @@ const Button = ({ asChild, ...props }: ButtonProps) => {
|
|||||||
return <Comp {...props} />
|
return <Comp {...props} />
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Slot as SlotPrimitive } from "radix-ui"
|
||||||
import React from "react"
|
import React from "react"
|
||||||
|
|
||||||
type ButtonProps = React.ComponentProps<typeof SlotPrimitive.Slot> & {
|
type ButtonProps = React.ComponentProps<typeof SlotPrimitive.Slot> & {
|
||||||
@@ -811,7 +811,7 @@ const Button = ({ asChild, ...props }: ButtonProps) => {
|
|||||||
return <Comp {...props} />
|
return <Comp {...props} />
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const expected = `import { Slot as SlotPrimitive } from "radix-ui";
|
const expected = `import { Slot as SlotPrimitive } from "radix-ui"
|
||||||
import { ComponentProps } from "react"
|
import { ComponentProps } from "react"
|
||||||
|
|
||||||
type ButtonProps = ComponentProps<typeof SlotPrimitive.Slot> & {
|
type ButtonProps = ComponentProps<typeof SlotPrimitive.Slot> & {
|
||||||
@@ -827,6 +827,46 @@ const Button = ({ asChild, ...props }: ButtonProps) => {
|
|||||||
expect(result.content.trim()).toBe(expected.trim())
|
expect(result.content.trim()).toBe(expected.trim())
|
||||||
expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
|
expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it("should not add double semicolons when import already ends with semicolon", async () => {
|
||||||
|
const input = `import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||||
|
|
||||||
|
export const Dialog = DialogPrimitive.Root
|
||||||
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
|
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
export const Dialog = DialogPrimitive.Root
|
||||||
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
|
const result = await migrateRadixFile(input)
|
||||||
|
expect(result.content.trim()).toBe(expected.trim())
|
||||||
|
expect(result.replacedPackages).toEqual([
|
||||||
|
"@radix-ui/react-dialog",
|
||||||
|
"@radix-ui/react-select",
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should not add semicolon when original imports don't have semicolons", async () => {
|
||||||
|
const input = `import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
|
||||||
|
export const Dialog = DialogPrimitive.Root
|
||||||
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
|
const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
export const Dialog = DialogPrimitive.Root
|
||||||
|
export const Select = SelectPrimitive.Root`
|
||||||
|
|
||||||
|
const result = await migrateRadixFile(input)
|
||||||
|
expect(result.content.trim()).toBe(expected.trim())
|
||||||
|
expect(result.replacedPackages).toEqual([
|
||||||
|
"@radix-ui/react-dialog",
|
||||||
|
"@radix-ui/react-select",
|
||||||
|
])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe("migrateRadix - package.json updates", () => {
|
describe("migrateRadix - package.json updates", () => {
|
||||||
|
|||||||
@@ -215,13 +215,15 @@ export async function migrateRadixFile(
|
|||||||
content: string
|
content: string
|
||||||
): Promise<{ content: string; replacedPackages: string[] }> {
|
): Promise<{ content: string; replacedPackages: string[] }> {
|
||||||
// Enhanced regex to handle type-only imports, but exclude react-icons
|
// Enhanced regex to handle type-only imports, but exclude react-icons
|
||||||
|
// Also capture optional semicolon at the end
|
||||||
const radixImportPattern =
|
const radixImportPattern =
|
||||||
/import\s+(?:(type)\s+)?(?:\*\s+as\s+(\w+)|{([^}]+)})\s+from\s+(["'])@radix-ui\/react-([^"']+)\4/g
|
/import\s+(?:(type)\s+)?(?:\*\s+as\s+(\w+)|{([^}]+)})\s+from\s+(["'])@radix-ui\/react-([^"']+)\4(;?)/g
|
||||||
|
|
||||||
const imports: Array<{ name: string; alias?: string; isType?: boolean }> = []
|
const imports: Array<{ name: string; alias?: string; isType?: boolean }> = []
|
||||||
const linesToRemove: string[] = []
|
const linesToRemove: string[] = []
|
||||||
const replacedPackages: string[] = []
|
const replacedPackages: string[] = []
|
||||||
let quoteStyle = '"' // Default to double quotes
|
let quoteStyle = '"' // Default to double quotes
|
||||||
|
let hasSemicolon = false // Track if any import had a semicolon
|
||||||
|
|
||||||
let result = content
|
let result = content
|
||||||
let match
|
let match
|
||||||
@@ -235,6 +237,7 @@ export async function migrateRadixFile(
|
|||||||
namedImports,
|
namedImports,
|
||||||
quote,
|
quote,
|
||||||
packageName,
|
packageName,
|
||||||
|
semicolon,
|
||||||
] = match
|
] = match
|
||||||
|
|
||||||
// Skip react-icons package and any sub-paths (like react-icons/dist/types)
|
// Skip react-icons package and any sub-paths (like react-icons/dist/types)
|
||||||
@@ -244,9 +247,10 @@ export async function migrateRadixFile(
|
|||||||
|
|
||||||
linesToRemove.push(fullMatch)
|
linesToRemove.push(fullMatch)
|
||||||
|
|
||||||
// Use the quote style from the first import
|
// Use the quote style and semicolon style from the first import
|
||||||
if (linesToRemove.length === 1) {
|
if (linesToRemove.length === 1) {
|
||||||
quoteStyle = quote
|
quoteStyle = quote
|
||||||
|
hasSemicolon = semicolon === ";"
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track which package we're replacing
|
// Track which package we're replacing
|
||||||
@@ -301,7 +305,9 @@ export async function migrateRadixFile(
|
|||||||
})
|
})
|
||||||
.join(", ")
|
.join(", ")
|
||||||
|
|
||||||
const unifiedImport = `import { ${importList} } from ${quoteStyle}radix-ui${quoteStyle};`
|
const unifiedImport = `import { ${importList} } from ${quoteStyle}radix-ui${quoteStyle}${
|
||||||
|
hasSemicolon ? ";" : ""
|
||||||
|
}`
|
||||||
|
|
||||||
// Replace first import with unified import, remove the rest
|
// Replace first import with unified import, remove the rest
|
||||||
result = linesToRemove.reduce((acc, line, index) => {
|
result = linesToRemove.reduce((acc, line, index) => {
|
||||||
|
|||||||
@@ -1,12 +1,54 @@
|
|||||||
|
import { promises as fs } from "fs"
|
||||||
|
import { tmpdir } from "os"
|
||||||
|
import path from "path"
|
||||||
import { HttpResponse, http } from "msw"
|
import { HttpResponse, http } from "msw"
|
||||||
import { setupServer } from "msw/node"
|
import { setupServer } from "msw/node"
|
||||||
import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest"
|
import {
|
||||||
|
afterAll,
|
||||||
|
afterEach,
|
||||||
|
beforeAll,
|
||||||
|
describe,
|
||||||
|
expect,
|
||||||
|
it,
|
||||||
|
vi,
|
||||||
|
} from "vitest"
|
||||||
|
|
||||||
import { clearRegistryCache, fetchRegistry } from "./api"
|
import {
|
||||||
|
clearRegistryCache,
|
||||||
|
fetchRegistry,
|
||||||
|
getRegistryItem,
|
||||||
|
registryResolveItemsTree,
|
||||||
|
} from "./api"
|
||||||
|
|
||||||
|
// Mock the handleError function to prevent process.exit in tests
|
||||||
|
vi.mock("@/src/utils/handle-error", () => ({
|
||||||
|
handleError: vi.fn(),
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Mock the logger to prevent console output in tests
|
||||||
|
vi.mock("@/src/utils/logger", () => ({
|
||||||
|
logger: {
|
||||||
|
error: vi.fn(),
|
||||||
|
break: vi.fn(),
|
||||||
|
log: vi.fn(),
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
const REGISTRY_URL = "https://ui.shadcn.com/r"
|
const REGISTRY_URL = "https://ui.shadcn.com/r"
|
||||||
|
|
||||||
const server = setupServer(
|
const server = setupServer(
|
||||||
|
http.get(`${REGISTRY_URL}/index.json`, () => {
|
||||||
|
return HttpResponse.json([
|
||||||
|
{
|
||||||
|
name: "button",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "card",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
])
|
||||||
|
}),
|
||||||
http.get(`${REGISTRY_URL}/styles/new-york/button.json`, () => {
|
http.get(`${REGISTRY_URL}/styles/new-york/button.json`, () => {
|
||||||
return HttpResponse.json({
|
return HttpResponse.json({
|
||||||
name: "button",
|
name: "button",
|
||||||
@@ -112,3 +154,277 @@ describe("fetchRegistry", () => {
|
|||||||
expect(result[1]).toMatchObject({ name: "card" })
|
expect(result[1]).toMatchObject({ name: "card" })
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe("getRegistryItem with local files", () => {
|
||||||
|
it("should read and parse a valid local JSON file", async () => {
|
||||||
|
// Create a temporary file
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "test-component.json")
|
||||||
|
|
||||||
|
const componentData = {
|
||||||
|
name: "test-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
dependencies: ["@radix-ui/react-dialog"],
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/test-component.tsx",
|
||||||
|
content: "// test component content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getRegistryItem(tempFile, "unused-style")
|
||||||
|
|
||||||
|
expect(result).toMatchObject({
|
||||||
|
name: "test-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
dependencies: ["@radix-ui/react-dialog"],
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/test-component.tsx",
|
||||||
|
content: "// test component content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should handle relative paths", async () => {
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "relative-component.json")
|
||||||
|
|
||||||
|
const componentData = {
|
||||||
|
name: "relative-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(componentData))
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Change to temp directory to test relative path
|
||||||
|
const originalCwd = process.cwd()
|
||||||
|
process.chdir(tempDir)
|
||||||
|
|
||||||
|
const result = await getRegistryItem(
|
||||||
|
"./relative-component.json",
|
||||||
|
"unused-style"
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(result).toMatchObject({
|
||||||
|
name: "relative-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
})
|
||||||
|
|
||||||
|
process.chdir(originalCwd)
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should handle tilde (~) home directory paths", async () => {
|
||||||
|
const os = await import("os")
|
||||||
|
const homeDir = os.homedir()
|
||||||
|
const tempFile = path.join(homeDir, "shadcn-test-tilde.json")
|
||||||
|
|
||||||
|
const componentData = {
|
||||||
|
name: "tilde-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(componentData))
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Test with tilde path
|
||||||
|
const tildeePath = "~/shadcn-test-tilde.json"
|
||||||
|
const result = await getRegistryItem(tildeePath, "unused-style")
|
||||||
|
|
||||||
|
expect(result).toMatchObject({
|
||||||
|
name: "tilde-component",
|
||||||
|
type: "registry:ui",
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return null for non-existent files", async () => {
|
||||||
|
const result = await getRegistryItem(
|
||||||
|
"/non/existent/file.json",
|
||||||
|
"unused-style"
|
||||||
|
)
|
||||||
|
expect(result).toBe(null)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return null for invalid JSON", async () => {
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "invalid.json")
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, "{ invalid json }")
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getRegistryItem(tempFile, "unused-style")
|
||||||
|
expect(result).toBe(null)
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return null for JSON that doesn't match registry schema", async () => {
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "invalid-schema.json")
|
||||||
|
|
||||||
|
const invalidData = {
|
||||||
|
notAValidRegistryItem: true,
|
||||||
|
missing: "required fields",
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(invalidData))
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getRegistryItem(tempFile, "unused-style")
|
||||||
|
expect(result).toBe(null)
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should still handle URLs and component names", async () => {
|
||||||
|
// Test that existing functionality still works
|
||||||
|
const result = await getRegistryItem("button", "new-york")
|
||||||
|
expect(result).toMatchObject({
|
||||||
|
name: "button",
|
||||||
|
type: "registry:ui",
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should handle local files with URL dependencies", async () => {
|
||||||
|
// Mock a URL endpoint for dependency
|
||||||
|
const dependencyUrl = "https://example.com/dependency.json"
|
||||||
|
server.use(
|
||||||
|
http.get(dependencyUrl, () => {
|
||||||
|
return HttpResponse.json({
|
||||||
|
name: "url-dependency",
|
||||||
|
type: "registry:ui",
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/url-dependency.tsx",
|
||||||
|
content: "// url dependency content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "component-with-url-deps.json")
|
||||||
|
|
||||||
|
const componentData = {
|
||||||
|
name: "component-with-url-deps",
|
||||||
|
type: "registry:ui",
|
||||||
|
registryDependencies: [dependencyUrl, "button"], // Mix of URL and registry name
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/component-with-url-deps.tsx",
|
||||||
|
content: "// component with url deps content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getRegistryItem(tempFile, "unused-style")
|
||||||
|
|
||||||
|
expect(result).toMatchObject({
|
||||||
|
name: "component-with-url-deps",
|
||||||
|
type: "registry:ui",
|
||||||
|
registryDependencies: [dependencyUrl, "button"],
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe("registryResolveItemsTree with URL dependencies", () => {
|
||||||
|
it("should resolve URL dependencies from local files", async () => {
|
||||||
|
// Mock a URL endpoint for dependency
|
||||||
|
const dependencyUrl = "https://example.com/dependency.json"
|
||||||
|
server.use(
|
||||||
|
http.get(dependencyUrl, () => {
|
||||||
|
return HttpResponse.json({
|
||||||
|
name: "url-dependency",
|
||||||
|
type: "registry:ui",
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/url-dependency.tsx",
|
||||||
|
content: "// url dependency content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
|
||||||
|
const tempFile = path.join(tempDir, "component-with-url-deps.json")
|
||||||
|
|
||||||
|
const componentData = {
|
||||||
|
name: "component-with-url-deps",
|
||||||
|
type: "registry:ui",
|
||||||
|
registryDependencies: [dependencyUrl], // URL dependency
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "ui/component-with-url-deps.tsx",
|
||||||
|
content: "// component with url deps content",
|
||||||
|
type: "registry:ui",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
|
||||||
|
|
||||||
|
try {
|
||||||
|
const mockConfig = {
|
||||||
|
style: "new-york",
|
||||||
|
tailwind: { baseColor: "neutral", cssVariables: true },
|
||||||
|
resolvedPaths: { cwd: process.cwd() },
|
||||||
|
} as any
|
||||||
|
|
||||||
|
const result = await registryResolveItemsTree([tempFile], mockConfig)
|
||||||
|
|
||||||
|
expect(result).toBeDefined()
|
||||||
|
expect(result?.files).toBeDefined()
|
||||||
|
// Should contain files from both the main component and its URL dependency
|
||||||
|
const filePaths = result?.files?.map((f: any) => f.path) ?? []
|
||||||
|
expect(filePaths).toContain("ui/component-with-url-deps.tsx")
|
||||||
|
expect(filePaths).toContain("ui/url-dependency.tsx")
|
||||||
|
} finally {
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(tempFile)
|
||||||
|
await fs.rmdir(tempDir)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
|
import { promises as fs } from "fs"
|
||||||
|
import { homedir } from "os"
|
||||||
import path from "path"
|
import path from "path"
|
||||||
|
import { isLocalFile } from "@/src/registry/utils"
|
||||||
import { Config, getTargetStyleFromConfig } from "@/src/utils/get-config"
|
import { Config, getTargetStyleFromConfig } from "@/src/utils/get-config"
|
||||||
import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
|
import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
|
||||||
import { handleError } from "@/src/utils/handle-error"
|
import { handleError } from "@/src/utils/handle-error"
|
||||||
@@ -85,6 +88,12 @@ export async function getRegistryIcons() {
|
|||||||
|
|
||||||
export async function getRegistryItem(name: string, style: string) {
|
export async function getRegistryItem(name: string, style: string) {
|
||||||
try {
|
try {
|
||||||
|
// Handle local file paths
|
||||||
|
if (isLocalFile(name)) {
|
||||||
|
return await getLocalRegistryItem(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle URLs and component names
|
||||||
const [result] = await fetchRegistry([
|
const [result] = await fetchRegistry([
|
||||||
isUrl(name) ? name : `styles/${style}/${name}.json`,
|
isUrl(name) ? name : `styles/${style}/${name}.json`,
|
||||||
])
|
])
|
||||||
@@ -97,6 +106,26 @@ export async function getRegistryItem(name: string, style: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function getLocalRegistryItem(filePath: string) {
|
||||||
|
try {
|
||||||
|
// Handle tilde expansion for home directory
|
||||||
|
let expandedPath = filePath
|
||||||
|
if (filePath.startsWith("~/")) {
|
||||||
|
expandedPath = path.join(homedir(), filePath.slice(2))
|
||||||
|
}
|
||||||
|
|
||||||
|
const resolvedPath = path.resolve(expandedPath)
|
||||||
|
const content = await fs.readFile(resolvedPath, "utf8")
|
||||||
|
const parsed = JSON.parse(content)
|
||||||
|
|
||||||
|
return registryItemSchema.parse(parsed)
|
||||||
|
} catch (error) {
|
||||||
|
logger.error(`Failed to read local registry file: ${filePath}`)
|
||||||
|
handleError(error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export async function getRegistryBaseColors() {
|
export async function getRegistryBaseColors() {
|
||||||
return BASE_COLORS
|
return BASE_COLORS
|
||||||
}
|
}
|
||||||
@@ -263,26 +292,144 @@ export function clearRegistryCache() {
|
|||||||
registryCache.clear()
|
registryCache.clear()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function resolveDependenciesRecursively(
|
||||||
|
dependencies: string[],
|
||||||
|
config?: Config,
|
||||||
|
visited: Set<string> = new Set()
|
||||||
|
): Promise<{
|
||||||
|
items: z.infer<typeof registryItemSchema>[]
|
||||||
|
registryNames: string[]
|
||||||
|
}> {
|
||||||
|
const items: z.infer<typeof registryItemSchema>[] = []
|
||||||
|
const registryNames: string[] = []
|
||||||
|
|
||||||
|
for (const dep of dependencies) {
|
||||||
|
// Avoid infinite recursion.
|
||||||
|
if (visited.has(dep)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
visited.add(dep)
|
||||||
|
|
||||||
|
if (isUrl(dep) || isLocalFile(dep)) {
|
||||||
|
const item = await getRegistryItem(dep, "")
|
||||||
|
if (item) {
|
||||||
|
items.push(item)
|
||||||
|
if (item.registryDependencies) {
|
||||||
|
const nested = await resolveDependenciesRecursively(
|
||||||
|
item.registryDependencies,
|
||||||
|
config,
|
||||||
|
visited
|
||||||
|
)
|
||||||
|
items.push(...nested.items)
|
||||||
|
registryNames.push(...nested.registryNames)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Registry name - add it to the list
|
||||||
|
registryNames.push(dep)
|
||||||
|
|
||||||
|
// If we have config, we can also fetch the item to get its dependencies
|
||||||
|
if (config) {
|
||||||
|
const style = config.resolvedPaths?.cwd
|
||||||
|
? await getTargetStyleFromConfig(
|
||||||
|
config.resolvedPaths.cwd,
|
||||||
|
config.style
|
||||||
|
)
|
||||||
|
: config.style
|
||||||
|
|
||||||
|
try {
|
||||||
|
const item = await getRegistryItem(dep, style)
|
||||||
|
if (item && item.registryDependencies) {
|
||||||
|
const nested = await resolveDependenciesRecursively(
|
||||||
|
item.registryDependencies,
|
||||||
|
config,
|
||||||
|
visited
|
||||||
|
)
|
||||||
|
items.push(...nested.items)
|
||||||
|
registryNames.push(...nested.registryNames)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// If we can't fetch the registry item, that's okay - we'll still include the name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { items, registryNames }
|
||||||
|
}
|
||||||
|
|
||||||
export async function registryResolveItemsTree(
|
export async function registryResolveItemsTree(
|
||||||
names: z.infer<typeof registryItemSchema>["name"][],
|
names: z.infer<typeof registryItemSchema>["name"][],
|
||||||
config: Config
|
config: Config
|
||||||
) {
|
) {
|
||||||
try {
|
try {
|
||||||
const index = await getRegistryIndex()
|
// Separate local files, URLs, and registry names.
|
||||||
if (!index) {
|
const localFiles = names.filter((name) => isLocalFile(name))
|
||||||
return null
|
const urls = names.filter((name) => isUrl(name))
|
||||||
|
const registryNames = names.filter(
|
||||||
|
(name) => !isLocalFile(name) && !isUrl(name)
|
||||||
|
)
|
||||||
|
|
||||||
|
const payload: z.infer<typeof registryItemSchema>[] = []
|
||||||
|
|
||||||
|
// Handle local files and URLs directly, collecting their dependencies.
|
||||||
|
const allDependencies: string[] = []
|
||||||
|
|
||||||
|
for (const localFile of localFiles) {
|
||||||
|
const item = await getRegistryItem(localFile, "")
|
||||||
|
if (item) {
|
||||||
|
payload.push(item)
|
||||||
|
if (item.registryDependencies) {
|
||||||
|
allDependencies.push(...item.registryDependencies)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// If we're resolving the index, we want it to go first.
|
for (const url of urls) {
|
||||||
if (names.includes("index")) {
|
const item = await getRegistryItem(url, "")
|
||||||
names.unshift("index")
|
if (item) {
|
||||||
|
payload.push(item)
|
||||||
|
if (item.registryDependencies) {
|
||||||
|
allDependencies.push(...item.registryDependencies)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let registryItems = await resolveRegistryItems(names, config)
|
// Recursively resolve all dependencies.
|
||||||
let result = await fetchRegistry(registryItems)
|
const { items: dependencyItems, registryNames: dependencyRegistryNames } =
|
||||||
const payload = z.array(registryItemSchema).parse(result)
|
await resolveDependenciesRecursively(allDependencies, config)
|
||||||
|
|
||||||
if (!payload) {
|
payload.push(...dependencyItems)
|
||||||
|
|
||||||
|
// Handle registry names using existing resolveRegistryItems logic.
|
||||||
|
const allRegistryNames = [...registryNames, ...dependencyRegistryNames]
|
||||||
|
if (allRegistryNames.length > 0) {
|
||||||
|
const index = await getRegistryIndex()
|
||||||
|
if (!index) {
|
||||||
|
// If we only have local files or URLs, that's fine.
|
||||||
|
if (payload.length === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Remove duplicates.
|
||||||
|
const uniqueRegistryNames = Array.from(new Set(allRegistryNames))
|
||||||
|
|
||||||
|
// If we're resolving the index, we want it to go first.
|
||||||
|
if (uniqueRegistryNames.includes("index")) {
|
||||||
|
uniqueRegistryNames.unshift("index")
|
||||||
|
}
|
||||||
|
|
||||||
|
let registryItems = await resolveRegistryItems(
|
||||||
|
uniqueRegistryNames,
|
||||||
|
config
|
||||||
|
)
|
||||||
|
let result = await fetchRegistry(registryItems)
|
||||||
|
const registryPayload = z.array(registryItemSchema).parse(result)
|
||||||
|
payload.push(...registryPayload)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!payload.length) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -290,7 +437,7 @@ export async function registryResolveItemsTree(
|
|||||||
// the theme item if a base color is provided.
|
// the theme item if a base color is provided.
|
||||||
// We do this for index only.
|
// We do this for index only.
|
||||||
// Other components will ship with their theme tokens.
|
// Other components will ship with their theme tokens.
|
||||||
if (names.includes("index")) {
|
if (allRegistryNames.includes("index")) {
|
||||||
if (config.tailwind.baseColor) {
|
if (config.tailwind.baseColor) {
|
||||||
const theme = await registryGetTheme(config.tailwind.baseColor, config)
|
const theme = await registryGetTheme(config.tailwind.baseColor, config)
|
||||||
if (theme) {
|
if (theme) {
|
||||||
@@ -352,44 +499,17 @@ async function resolveRegistryDependencies(
|
|||||||
url: string,
|
url: string,
|
||||||
config: Config
|
config: Config
|
||||||
): Promise<string[]> {
|
): Promise<string[]> {
|
||||||
const visited = new Set<string>()
|
const { registryNames } = await resolveDependenciesRecursively([url], config)
|
||||||
const payload: string[] = []
|
|
||||||
|
|
||||||
const style = config.resolvedPaths?.cwd
|
const style = config.resolvedPaths?.cwd
|
||||||
? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style)
|
? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style)
|
||||||
: config.style
|
: config.style
|
||||||
|
|
||||||
async function resolveDependencies(itemUrl: string) {
|
const urls = registryNames.map((name) =>
|
||||||
const url = getRegistryUrl(
|
getRegistryUrl(isUrl(name) ? name : `styles/${style}/${name}.json`)
|
||||||
isUrl(itemUrl) ? itemUrl : `styles/${style}/${itemUrl}.json`
|
)
|
||||||
)
|
|
||||||
|
|
||||||
if (visited.has(url)) {
|
return Array.from(new Set(urls))
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
visited.add(url)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [result] = await fetchRegistry([url])
|
|
||||||
const item = registryItemSchema.parse(result)
|
|
||||||
payload.push(url)
|
|
||||||
|
|
||||||
if (item.registryDependencies) {
|
|
||||||
for (const dependency of item.registryDependencies) {
|
|
||||||
await resolveDependencies(dependency)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(
|
|
||||||
`Error fetching or parsing registry item at ${itemUrl}:`,
|
|
||||||
error
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await resolveDependencies(url)
|
|
||||||
return Array.from(new Set(payload))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function registryGetTheme(name: string, config: Config) {
|
export async function registryGetTheme(name: string, config: Config) {
|
||||||
@@ -495,7 +615,13 @@ export function isUrl(path: string) {
|
|||||||
// TODO: We're double-fetching here. Use a cache.
|
// TODO: We're double-fetching here. Use a cache.
|
||||||
export async function resolveRegistryItems(names: string[], config: Config) {
|
export async function resolveRegistryItems(names: string[], config: Config) {
|
||||||
let registryDependencies: string[] = []
|
let registryDependencies: string[] = []
|
||||||
for (const name of names) {
|
|
||||||
|
// Filter out local files and URLs - these should be handled directly by getRegistryItem
|
||||||
|
const registryNames = names.filter(
|
||||||
|
(name) => !isLocalFile(name) && !isUrl(name)
|
||||||
|
)
|
||||||
|
|
||||||
|
for (const name of registryNames) {
|
||||||
const itemRegistryDependencies = await resolveRegistryDependencies(
|
const itemRegistryDependencies = await resolveRegistryDependencies(
|
||||||
name,
|
name,
|
||||||
config
|
config
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ export const registryItemTypeSchema = z.enum([
|
|||||||
"registry:file",
|
"registry:file",
|
||||||
"registry:theme",
|
"registry:theme",
|
||||||
"registry:style",
|
"registry:style",
|
||||||
|
"registry:item",
|
||||||
|
|
||||||
// Internal use only
|
// Internal use only
|
||||||
"registry:example",
|
"registry:example",
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
import { describe, expect, it } from "vitest"
|
import { describe, expect, it } from "vitest"
|
||||||
|
|
||||||
import { getDependencyFromModuleSpecifier } from "./utils"
|
import {
|
||||||
|
getDependencyFromModuleSpecifier,
|
||||||
|
isLocalFile,
|
||||||
|
isUniversalRegistryItem,
|
||||||
|
isUrl,
|
||||||
|
} from "./utils"
|
||||||
|
|
||||||
describe("getDependencyFromModuleSpecifier", () => {
|
describe("getDependencyFromModuleSpecifier", () => {
|
||||||
it("should return the first part of a non-scoped package with path", () => {
|
it("should return the first part of a non-scoped package with path", () => {
|
||||||
@@ -74,3 +79,263 @@ describe("getDependencyFromModuleSpecifier", () => {
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe("isUrl", () => {
|
||||||
|
it("should return true for valid URLs", () => {
|
||||||
|
expect(isUrl("https://example.com")).toBe(true)
|
||||||
|
expect(isUrl("http://example.com")).toBe(true)
|
||||||
|
expect(isUrl("https://example.com/path")).toBe(true)
|
||||||
|
expect(isUrl("https://subdomain.example.com")).toBe(true)
|
||||||
|
expect(isUrl("https://ui.shadcn.com/r/styles/new-york/button.json")).toBe(
|
||||||
|
true
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false for non-URLs", () => {
|
||||||
|
expect(isUrl("./local-file.json")).toBe(false)
|
||||||
|
expect(isUrl("../relative/path.json")).toBe(false)
|
||||||
|
expect(isUrl("/absolute/path.json")).toBe(false)
|
||||||
|
expect(isUrl("component-name")).toBe(false)
|
||||||
|
expect(isUrl("")).toBe(false)
|
||||||
|
expect(isUrl("just-text")).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe("isLocalFile", () => {
|
||||||
|
it("should return true for local JSON files", () => {
|
||||||
|
expect(isLocalFile("./component.json")).toBe(true)
|
||||||
|
expect(isLocalFile("../shared/button.json")).toBe(true)
|
||||||
|
expect(isLocalFile("/absolute/path/card.json")).toBe(true)
|
||||||
|
expect(isLocalFile("local-component.json")).toBe(true)
|
||||||
|
expect(isLocalFile("nested/directory/dialog.json")).toBe(true)
|
||||||
|
expect(isLocalFile("~/Desktop/component.json")).toBe(true)
|
||||||
|
expect(isLocalFile("~/Documents/shared/button.json")).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false for URLs ending with .json", () => {
|
||||||
|
expect(isLocalFile("https://example.com/component.json")).toBe(false)
|
||||||
|
expect(isLocalFile("http://registry.com/button.json")).toBe(false)
|
||||||
|
expect(
|
||||||
|
isLocalFile("https://ui.shadcn.com/r/styles/new-york/button.json")
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false for non-JSON files", () => {
|
||||||
|
expect(isLocalFile("./component.tsx")).toBe(false)
|
||||||
|
expect(isLocalFile("../shared/button.ts")).toBe(false)
|
||||||
|
expect(isLocalFile("/absolute/path/card.js")).toBe(false)
|
||||||
|
expect(isLocalFile("local-component.css")).toBe(false)
|
||||||
|
expect(isLocalFile("component-name")).toBe(false)
|
||||||
|
expect(isLocalFile("")).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false for directory paths", () => {
|
||||||
|
expect(isLocalFile("./components/")).toBe(false)
|
||||||
|
expect(isLocalFile("../shared")).toBe(false)
|
||||||
|
expect(isLocalFile("/absolute/path")).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe("isUniversalRegistryItem", () => {
|
||||||
|
it("should return true when all files have targets with registry:file type", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "file1.ts",
|
||||||
|
target: "src/file1.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "file2.ts",
|
||||||
|
target: "src/utils/file2.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return true for any registry item type if all files are registry:file with targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
type: "registry:ui" as const,
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "cursor-rules.txt",
|
||||||
|
target: "~/.cursor/rules/react.txt",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when some files lack targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "file1.ts",
|
||||||
|
target: "src/file1.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
{ path: "file2.ts", target: "", type: "registry:file" as const },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files have non-registry:file type", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "file1.ts",
|
||||||
|
target: "src/file1.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "file2.ts",
|
||||||
|
target: "src/lib/file2.ts",
|
||||||
|
type: "registry:lib" as const, // Not registry:file
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when no files have targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{ path: "file1.ts", target: "", type: "registry:file" as const },
|
||||||
|
{ path: "file2.ts", target: "", type: "registry:file" as const },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files array is empty", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files is undefined", () => {
|
||||||
|
const registryItem = {}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when registryItem is null", () => {
|
||||||
|
expect(isUniversalRegistryItem(null)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when registryItem is undefined", () => {
|
||||||
|
expect(isUniversalRegistryItem(undefined)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when target is null", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "file1.ts",
|
||||||
|
target: null as any,
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when target is undefined", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "file1.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
target: undefined as any,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files have registry:component type even with targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "component.tsx",
|
||||||
|
target: "components/ui/component.tsx",
|
||||||
|
type: "registry:component" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files have registry:hook type even with targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "use-hook.ts",
|
||||||
|
target: "hooks/use-hook.ts",
|
||||||
|
type: "registry:hook" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files have registry:lib type even with targets", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "utils.ts",
|
||||||
|
target: "lib/utils.ts",
|
||||||
|
type: "registry:lib" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return true when all targets are non-empty strings for registry:file", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{ path: "file1.ts", target: " ", type: "registry:file" as const }, // whitespace is truthy
|
||||||
|
{ path: "file2.ts", target: "0", type: "registry:file" as const }, // "0" is truthy
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should handle real-world example with path traversal attempts for registry:file", () => {
|
||||||
|
const registryItem = {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "malicious.ts",
|
||||||
|
target: "../../../etc/passwd",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "normal.ts",
|
||||||
|
target: "src/normal.ts",
|
||||||
|
type: "registry:file" as const,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
// The function should still return true - path validation is handled elsewhere
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it("should return false when files have non-registry:file type in a UI registry item", () => {
|
||||||
|
const registryItem = {
|
||||||
|
type: "registry:ui" as const,
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
path: "button.tsx",
|
||||||
|
target: "src/components/ui/button.tsx",
|
||||||
|
type: "registry:ui" as const, // Not registry:file
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
expect(isUniversalRegistryItem(registryItem)).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|||||||
@@ -242,3 +242,38 @@ function determineFileType(
|
|||||||
|
|
||||||
return "registry:component"
|
return "registry:component"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Additional utility functions for local file support
|
||||||
|
export function isUrl(path: string) {
|
||||||
|
try {
|
||||||
|
new URL(path)
|
||||||
|
return true
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isLocalFile(path: string) {
|
||||||
|
return path.endsWith(".json") && !isUrl(path)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a registry item is universal (framework-agnostic).
|
||||||
|
* A universal registry item must have all files with:
|
||||||
|
* 1. Explicit targets
|
||||||
|
* 2. Type "registry:file"
|
||||||
|
* It can be installed without framework detection or components.json.
|
||||||
|
*/
|
||||||
|
export function isUniversalRegistryItem(
|
||||||
|
registryItem:
|
||||||
|
| Pick<z.infer<typeof registryItemSchema>, "files">
|
||||||
|
| null
|
||||||
|
| undefined
|
||||||
|
): boolean {
|
||||||
|
return (
|
||||||
|
!!registryItem?.files?.length &&
|
||||||
|
registryItem.files.every(
|
||||||
|
(file) => !!file.target && file.type === "registry:file"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,12 +1,16 @@
|
|||||||
import path from "path"
|
import path from "path"
|
||||||
import {
|
import {
|
||||||
fetchRegistry,
|
fetchRegistry,
|
||||||
|
getRegistryItem,
|
||||||
getRegistryParentMap,
|
getRegistryParentMap,
|
||||||
getRegistryTypeAliasMap,
|
getRegistryTypeAliasMap,
|
||||||
registryResolveItemsTree,
|
registryResolveItemsTree,
|
||||||
resolveRegistryItems,
|
resolveRegistryItems,
|
||||||
} from "@/src/registry/api"
|
} from "@/src/registry/api"
|
||||||
import { registryItemSchema } from "@/src/registry/schema"
|
import {
|
||||||
|
registryItemFileSchema,
|
||||||
|
registryItemSchema,
|
||||||
|
} from "@/src/registry/schema"
|
||||||
import {
|
import {
|
||||||
configSchema,
|
configSchema,
|
||||||
findCommonRoot,
|
findCommonRoot,
|
||||||
@@ -17,6 +21,7 @@ import {
|
|||||||
} from "@/src/utils/get-config"
|
} from "@/src/utils/get-config"
|
||||||
import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
|
import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
|
||||||
import { handleError } from "@/src/utils/handle-error"
|
import { handleError } from "@/src/utils/handle-error"
|
||||||
|
import { isSafeTarget } from "@/src/utils/is-safe-target"
|
||||||
import { logger } from "@/src/utils/logger"
|
import { logger } from "@/src/utils/logger"
|
||||||
import { spinner } from "@/src/utils/spinner"
|
import { spinner } from "@/src/utils/spinner"
|
||||||
import { updateCss } from "@/src/utils/updaters/update-css"
|
import { updateCss } from "@/src/utils/updaters/update-css"
|
||||||
@@ -79,6 +84,14 @@ async function addProjectComponents(
|
|||||||
registrySpinner?.fail()
|
registrySpinner?.fail()
|
||||||
return handleError(new Error("Failed to fetch components from registry."))
|
return handleError(new Error("Failed to fetch components from registry."))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
validateFilesTarget(tree.files ?? [], config.resolvedPaths.cwd)
|
||||||
|
} catch (error) {
|
||||||
|
registrySpinner?.fail()
|
||||||
|
return handleError(error)
|
||||||
|
}
|
||||||
|
|
||||||
registrySpinner?.succeed()
|
registrySpinner?.succeed()
|
||||||
|
|
||||||
const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
|
const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
|
||||||
@@ -147,6 +160,13 @@ async function addWorkspaceComponents(
|
|||||||
const filesUpdated: string[] = []
|
const filesUpdated: string[] = []
|
||||||
const filesSkipped: string[] = []
|
const filesSkipped: string[] = []
|
||||||
|
|
||||||
|
const files = payload.flatMap((item) => item.files ?? [])
|
||||||
|
try {
|
||||||
|
validateFilesTarget(files, config.resolvedPaths.cwd)
|
||||||
|
} catch (error) {
|
||||||
|
return handleError(error)
|
||||||
|
}
|
||||||
|
|
||||||
const rootSpinner = spinner(`Installing components.`)?.start()
|
const rootSpinner = spinner(`Installing components.`)?.start()
|
||||||
|
|
||||||
for (const component of payload) {
|
for (const component of payload) {
|
||||||
@@ -308,8 +328,9 @@ async function shouldOverwriteCssVars(
|
|||||||
components: z.infer<typeof registryItemSchema>["name"][],
|
components: z.infer<typeof registryItemSchema>["name"][],
|
||||||
config: z.infer<typeof configSchema>
|
config: z.infer<typeof configSchema>
|
||||||
) {
|
) {
|
||||||
let registryItems = await resolveRegistryItems(components, config)
|
let result = await Promise.all(
|
||||||
let result = await fetchRegistry(registryItems)
|
components.map((component) => getRegistryItem(component, config.style))
|
||||||
|
)
|
||||||
const payload = z.array(registryItemSchema).parse(result)
|
const payload = z.array(registryItemSchema).parse(result)
|
||||||
|
|
||||||
return payload.some(
|
return payload.some(
|
||||||
@@ -317,3 +338,20 @@ async function shouldOverwriteCssVars(
|
|||||||
component.type === "registry:theme" || component.type === "registry:style"
|
component.type === "registry:theme" || component.type === "registry:style"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function validateFilesTarget(
|
||||||
|
files: z.infer<typeof registryItemFileSchema>[],
|
||||||
|
cwd: string
|
||||||
|
) {
|
||||||
|
for (const file of files) {
|
||||||
|
if (!file?.target) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isSafeTarget(file.target, cwd)) {
|
||||||
|
throw new Error(
|
||||||
|
`We found an unsafe file path "${file.target} in the registry item. Installation aborted.`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -72,6 +72,14 @@ export const FRAMEWORKS = {
|
|||||||
tailwind: "https://tailwindcss.com/docs/guides/gatsby",
|
tailwind: "https://tailwindcss.com/docs/guides/gatsby",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
expo: {
|
||||||
|
name: "expo",
|
||||||
|
label: "Expo",
|
||||||
|
links: {
|
||||||
|
installation: "https://ui.shadcn.com/docs/installation/expo",
|
||||||
|
tailwind: "https://www.nativewind.dev/docs/getting-started/installation",
|
||||||
|
},
|
||||||
|
},
|
||||||
manual: {
|
manual: {
|
||||||
name: "manual",
|
name: "manual",
|
||||||
label: "Manual",
|
label: "Manual",
|
||||||
|
|||||||
@@ -225,3 +225,64 @@ export async function getTargetStyleFromConfig(cwd: string, fallback: string) {
|
|||||||
const projectInfo = await getProjectInfo(cwd)
|
const projectInfo = await getProjectInfo(cwd)
|
||||||
return projectInfo?.tailwindVersion === "v4" ? "new-york-v4" : fallback
|
return projectInfo?.tailwindVersion === "v4" ? "new-york-v4" : fallback
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type DeepPartial<T> = {
|
||||||
|
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a config object with sensible defaults.
|
||||||
|
* Useful for universal registry items that bypass framework detection.
|
||||||
|
*
|
||||||
|
* @param partial - Partial config values to override defaults
|
||||||
|
* @returns A complete Config object
|
||||||
|
*/
|
||||||
|
export function createConfig(partial?: DeepPartial<Config>): Config {
|
||||||
|
const defaultConfig: Config = {
|
||||||
|
resolvedPaths: {
|
||||||
|
cwd: process.cwd(),
|
||||||
|
tailwindConfig: "",
|
||||||
|
tailwindCss: "",
|
||||||
|
utils: "",
|
||||||
|
components: "",
|
||||||
|
ui: "",
|
||||||
|
lib: "",
|
||||||
|
hooks: "",
|
||||||
|
},
|
||||||
|
style: "",
|
||||||
|
tailwind: {
|
||||||
|
config: "",
|
||||||
|
css: "",
|
||||||
|
baseColor: "",
|
||||||
|
cssVariables: false,
|
||||||
|
},
|
||||||
|
rsc: false,
|
||||||
|
tsx: true,
|
||||||
|
aliases: {
|
||||||
|
components: "",
|
||||||
|
utils: "",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Deep merge the partial config with defaults
|
||||||
|
if (partial) {
|
||||||
|
return {
|
||||||
|
...defaultConfig,
|
||||||
|
...partial,
|
||||||
|
resolvedPaths: {
|
||||||
|
...defaultConfig.resolvedPaths,
|
||||||
|
...(partial.resolvedPaths || {}),
|
||||||
|
},
|
||||||
|
tailwind: {
|
||||||
|
...defaultConfig.tailwind,
|
||||||
|
...(partial.tailwind || {}),
|
||||||
|
},
|
||||||
|
aliases: {
|
||||||
|
...defaultConfig.aliases,
|
||||||
|
...(partial.aliases || {}),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultConfig
|
||||||
|
}
|
||||||
|
|||||||
@@ -121,11 +121,10 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
|
|||||||
|
|
||||||
// TanStack Start.
|
// TanStack Start.
|
||||||
if (
|
if (
|
||||||
configFiles.find((file) => file.startsWith("app.config."))?.length &&
|
|
||||||
[
|
[
|
||||||
...Object.keys(packageJson?.dependencies ?? {}),
|
...Object.keys(packageJson?.dependencies ?? {}),
|
||||||
...Object.keys(packageJson?.devDependencies ?? {}),
|
...Object.keys(packageJson?.devDependencies ?? {}),
|
||||||
].find((dep) => dep.startsWith("@tanstack/start"))
|
].find((dep) => dep.startsWith("@tanstack/react-start"))
|
||||||
) {
|
) {
|
||||||
type.framework = FRAMEWORKS["tanstack-start"]
|
type.framework = FRAMEWORKS["tanstack-start"]
|
||||||
return type
|
return type
|
||||||
@@ -147,6 +146,26 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
|
|||||||
return type
|
return type
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Vinxi-based (such as @tanstack/start and @solidjs/solid-start)
|
||||||
|
// They are vite-based, and the same configurations used for Vite should work flawlessly
|
||||||
|
const appConfig = configFiles.find((file) => file.startsWith("app.config"))
|
||||||
|
if (appConfig?.length) {
|
||||||
|
const appConfigContents = await fs.readFile(
|
||||||
|
path.resolve(cwd, appConfig),
|
||||||
|
"utf8"
|
||||||
|
)
|
||||||
|
if (appConfigContents.includes("defineConfig")) {
|
||||||
|
type.framework = FRAMEWORKS["vite"]
|
||||||
|
return type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expo.
|
||||||
|
if (packageJson?.dependencies?.expo) {
|
||||||
|
type.framework = FRAMEWORKS["expo"]
|
||||||
|
return type
|
||||||
|
}
|
||||||
|
|
||||||
return type
|
return type
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
156
packages/shadcn/src/utils/is-safe-target.test.ts
Normal file
156
packages/shadcn/src/utils/is-safe-target.test.ts
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
import { describe, expect, test } from "vitest"
|
||||||
|
|
||||||
|
import { isSafeTarget } from "./is-safe-target"
|
||||||
|
|
||||||
|
describe("isSafeTarget", () => {
|
||||||
|
const cwd = "/foo/bar"
|
||||||
|
|
||||||
|
describe("should reject path traversal attempts", () => {
|
||||||
|
test.each([
|
||||||
|
{
|
||||||
|
description: "basic path traversal with ../",
|
||||||
|
target: "../../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "nested path traversal",
|
||||||
|
target: "ui/../../../etc/hosts",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "path traversal with ~/../",
|
||||||
|
target: "~/../../../.ssh/authorized_keys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "absolute paths outside project",
|
||||||
|
target: "/etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "paths that resolve outside project root",
|
||||||
|
target: "foo/bar/../../../../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "URL-encoded path traversal",
|
||||||
|
target: "%2e%2e%2f%2e%2e%2fetc%2fpasswd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "double URL-encoded sequences",
|
||||||
|
target: "%252e%252e%252fetc%252fpasswd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "mixed encoded/plain traversal",
|
||||||
|
target: "..%2f..%2fetc%2fpasswd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "null byte injection",
|
||||||
|
target: "valid/path\0../../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "Windows-style path traversal",
|
||||||
|
target: "..\\..\\Windows\\System32\\config",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "Windows absolute paths",
|
||||||
|
target: "C:\\Windows\\System32\\drivers\\etc\\hosts",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "mixed separator traversal",
|
||||||
|
target: "foo\\..\\../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "current directory reference attacks",
|
||||||
|
target: "foo/./././../../../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "control characters in paths",
|
||||||
|
target: "foo/\x01\x02/../../etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "Unicode normalization attacks",
|
||||||
|
target: "foo/../\u2025/etc/passwd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description:
|
||||||
|
"path traversal with square brackets outside [...] pattern",
|
||||||
|
target: "foo/[bar]/../../etc/passwd",
|
||||||
|
},
|
||||||
|
])("$description", ({ target }) => {
|
||||||
|
expect(isSafeTarget(target, cwd)).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe("should accept safe paths", () => {
|
||||||
|
test.each([
|
||||||
|
{
|
||||||
|
description: "simple relative path",
|
||||||
|
target: "ui/button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "nested relative path",
|
||||||
|
target: "components/ui/button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "home directory expansion",
|
||||||
|
target: "~/foo.json",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "nested home directory path",
|
||||||
|
target: "~/components/button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "dot in filename",
|
||||||
|
target: "components/.env.local",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "path with spaces",
|
||||||
|
target: "my components/button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "path with special characters",
|
||||||
|
target: "components/@ui/button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "framework routing with square brackets",
|
||||||
|
target: "pages/[id].tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "catch-all routes with [...param]",
|
||||||
|
target: "server/api/auth/[...].ts",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "optional catch-all routes",
|
||||||
|
target: "pages/[[...slug]].tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "dollar sign routes",
|
||||||
|
target: "routes/$userId.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: "complex routing patterns",
|
||||||
|
target: "app/[locale]/[...segments]/page.tsx",
|
||||||
|
},
|
||||||
|
])("$description", ({ target }) => {
|
||||||
|
expect(isSafeTarget(target, cwd)).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe("edge cases", () => {
|
||||||
|
test("should handle empty string", () => {
|
||||||
|
expect(isSafeTarget("", cwd)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle single dot", () => {
|
||||||
|
expect(isSafeTarget(".", cwd)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should reject malformed URL encoding", () => {
|
||||||
|
expect(isSafeTarget("%zz%ff%2e%2e%2f", cwd)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle paths at project root", () => {
|
||||||
|
expect(isSafeTarget("/foo/bar/test.txt", cwd)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should reject paths just outside project root", () => {
|
||||||
|
expect(isSafeTarget("/foo/test.txt", cwd)).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
98
packages/shadcn/src/utils/is-safe-target.ts
Normal file
98
packages/shadcn/src/utils/is-safe-target.ts
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
import path from "path"
|
||||||
|
|
||||||
|
export function isSafeTarget(targetPath: string, cwd: string): boolean {
|
||||||
|
// Check for null bytes which can be used to bypass validations.
|
||||||
|
if (targetPath.includes("\0")) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Decode URL-encoded sequences to catch encoded traversal attempts.
|
||||||
|
let decodedPath: string
|
||||||
|
try {
|
||||||
|
// Decode multiple times to catch double-encoded sequences.
|
||||||
|
decodedPath = targetPath
|
||||||
|
let prevPath = ""
|
||||||
|
while (decodedPath !== prevPath && decodedPath.includes("%")) {
|
||||||
|
prevPath = decodedPath
|
||||||
|
decodedPath = decodeURIComponent(decodedPath)
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// If decoding fails, treat as unsafe.
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Normalize both paths to handle different path separators.
|
||||||
|
// Convert Windows backslashes to forward slashes for consistent handling.
|
||||||
|
const normalizedTarget = path.normalize(decodedPath.replace(/\\/g, "/"))
|
||||||
|
const normalizedRoot = path.normalize(cwd)
|
||||||
|
|
||||||
|
// Check for explicit path traversal sequences in both encoded and decoded forms.
|
||||||
|
// Allow [...] pattern which is common in framework routing (e.g., [...slug])
|
||||||
|
const hasPathTraversal = (path: string) => {
|
||||||
|
// Remove [...] patterns before checking for ..
|
||||||
|
const withoutBrackets = path.replace(/\[\.\.\..*?\]/g, "")
|
||||||
|
return withoutBrackets.includes("..")
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
hasPathTraversal(normalizedTarget) ||
|
||||||
|
hasPathTraversal(decodedPath) ||
|
||||||
|
hasPathTraversal(targetPath)
|
||||||
|
) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for current directory references that might be used in traversal.
|
||||||
|
// First, remove [...] patterns to avoid false positives
|
||||||
|
const cleanPath = (path: string) => path.replace(/\[\.\.\..*?\]/g, "")
|
||||||
|
const cleanTarget = cleanPath(targetPath)
|
||||||
|
const cleanDecoded = cleanPath(decodedPath)
|
||||||
|
|
||||||
|
const suspiciousPatterns = [
|
||||||
|
/\.\.[\/\\]/, // ../ or ..\
|
||||||
|
/[\/\\]\.\./, // /.. or \..
|
||||||
|
/\.\./, // .. anywhere
|
||||||
|
/\.\.%/, // URL encoded traversal
|
||||||
|
/\x00/, // null byte
|
||||||
|
/[\x01-\x1f]/, // control characters
|
||||||
|
]
|
||||||
|
|
||||||
|
if (
|
||||||
|
suspiciousPatterns.some(
|
||||||
|
(pattern) => pattern.test(cleanTarget) || pattern.test(cleanDecoded)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Allow ~/ at the start (home directory expansion within project) but reject ~/../ patterns.
|
||||||
|
if (
|
||||||
|
(targetPath.includes("~") || decodedPath.includes("~")) &&
|
||||||
|
(targetPath.includes("../") || decodedPath.includes("../"))
|
||||||
|
) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for Windows drive letters (even on non-Windows systems for safety).
|
||||||
|
const driveLetterRegex = /^[a-zA-Z]:[\/\\]/
|
||||||
|
if (driveLetterRegex.test(decodedPath)) {
|
||||||
|
// On Windows, check if it starts with the project root.
|
||||||
|
if (process.platform === "win32") {
|
||||||
|
return decodedPath.toLowerCase().startsWith(cwd.toLowerCase())
|
||||||
|
}
|
||||||
|
// On non-Windows systems, reject all Windows absolute paths.
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's an absolute path, ensure it's within the project root.
|
||||||
|
if (path.isAbsolute(normalizedTarget)) {
|
||||||
|
return normalizedTarget.startsWith(normalizedRoot + path.sep)
|
||||||
|
}
|
||||||
|
|
||||||
|
// For relative paths, resolve and check if within project bounds.
|
||||||
|
const resolvedPath = path.resolve(normalizedRoot, normalizedTarget)
|
||||||
|
return (
|
||||||
|
resolvedPath.startsWith(normalizedRoot + path.sep) ||
|
||||||
|
resolvedPath === normalizedRoot
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -79,8 +79,70 @@ function updateCssPlugin(css: z.infer<typeof registryItemCssSchema>) {
|
|||||||
|
|
||||||
const [, name, params] = atRuleMatch
|
const [, name, params] = atRuleMatch
|
||||||
|
|
||||||
|
// Special handling for plugins - place them after imports
|
||||||
|
if (name === "plugin") {
|
||||||
|
// Find existing plugin with same params
|
||||||
|
const existingPlugin = root.nodes?.find(
|
||||||
|
(node): node is AtRule =>
|
||||||
|
node.type === "atrule" &&
|
||||||
|
node.name === "plugin" &&
|
||||||
|
node.params === params
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!existingPlugin) {
|
||||||
|
const pluginRule = postcss.atRule({
|
||||||
|
name: "plugin",
|
||||||
|
params,
|
||||||
|
raws: { semicolon: true, before: "\n" },
|
||||||
|
})
|
||||||
|
|
||||||
|
// Find the last import or plugin node to insert after
|
||||||
|
const importNodes = root.nodes?.filter(
|
||||||
|
(node): node is AtRule =>
|
||||||
|
node.type === "atrule" && node.name === "import"
|
||||||
|
)
|
||||||
|
|
||||||
|
const pluginNodes = root.nodes?.filter(
|
||||||
|
(node): node is AtRule =>
|
||||||
|
node.type === "atrule" && node.name === "plugin"
|
||||||
|
)
|
||||||
|
|
||||||
|
if (pluginNodes && pluginNodes.length > 0) {
|
||||||
|
// Insert after the last existing plugin
|
||||||
|
const lastPlugin = pluginNodes[pluginNodes.length - 1]
|
||||||
|
root.insertAfter(lastPlugin, pluginRule)
|
||||||
|
} else if (importNodes && importNodes.length > 0) {
|
||||||
|
// Insert after the last import if no plugins exist
|
||||||
|
const lastImport = importNodes[importNodes.length - 1]
|
||||||
|
root.insertAfter(lastImport, pluginRule)
|
||||||
|
// Add a break comment before the first plugin to create spacing
|
||||||
|
root.insertBefore(
|
||||||
|
pluginRule,
|
||||||
|
postcss.comment({ text: "---break---" })
|
||||||
|
)
|
||||||
|
// Add a break comment after the plugin for spacing from other content
|
||||||
|
root.insertAfter(
|
||||||
|
pluginRule,
|
||||||
|
postcss.comment({ text: "---break---" })
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// If no imports or plugins, insert at the beginning
|
||||||
|
root.prepend(pluginRule)
|
||||||
|
// Add a break comment before the first plugin for spacing
|
||||||
|
root.insertBefore(
|
||||||
|
pluginRule,
|
||||||
|
postcss.comment({ text: "---break---" })
|
||||||
|
)
|
||||||
|
// Add a break comment after the plugin for spacing from other content
|
||||||
|
root.insertAfter(
|
||||||
|
pluginRule,
|
||||||
|
postcss.comment({ text: "---break---" })
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
// Special handling for keyframes - place them under @theme inline
|
// Special handling for keyframes - place them under @theme inline
|
||||||
if (name === "keyframes") {
|
else if (name === "keyframes") {
|
||||||
let themeInline = root.nodes?.find(
|
let themeInline = root.nodes?.find(
|
||||||
(node): node is AtRule =>
|
(node): node is AtRule =>
|
||||||
node.type === "atrule" &&
|
node.type === "atrule" &&
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export async function updateDependencies(
|
|||||||
const dependenciesSpinner = spinner(`Installing dependencies.`, {
|
const dependenciesSpinner = spinner(`Installing dependencies.`, {
|
||||||
silent: options.silent,
|
silent: options.silent,
|
||||||
})?.start()
|
})?.start()
|
||||||
const packageManager = await getPackageManager(config.resolvedPaths.cwd)
|
const packageManager = await getUpdateDependenciesPackageManager(config)
|
||||||
|
|
||||||
// Offer to use --force or --legacy-peer-deps if using React 19 with npm.
|
// Offer to use --force or --legacy-peer-deps if using React 19 with npm.
|
||||||
let flag = ""
|
let flag = ""
|
||||||
@@ -62,38 +62,13 @@ export async function updateDependencies(
|
|||||||
|
|
||||||
dependenciesSpinner?.start()
|
dependenciesSpinner?.start()
|
||||||
|
|
||||||
if (dependencies?.length) {
|
await installWithPackageManager(
|
||||||
await execa(
|
packageManager,
|
||||||
packageManager,
|
dependencies,
|
||||||
[
|
devDependencies,
|
||||||
packageManager === "npm" ? "install" : "add",
|
config.resolvedPaths.cwd,
|
||||||
...(packageManager === "npm" && flag ? [`--${flag}`] : []),
|
flag
|
||||||
...(packageManager === "deno"
|
)
|
||||||
? dependencies.map((dep) => `npm:${dep}`)
|
|
||||||
: dependencies),
|
|
||||||
],
|
|
||||||
{
|
|
||||||
cwd: config.resolvedPaths.cwd,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (devDependencies?.length) {
|
|
||||||
await execa(
|
|
||||||
packageManager,
|
|
||||||
[
|
|
||||||
packageManager === "npm" ? "install" : "add",
|
|
||||||
...(packageManager === "npm" && flag ? [`--${flag}`] : []),
|
|
||||||
"-D",
|
|
||||||
...(packageManager === "deno"
|
|
||||||
? devDependencies.map((dep) => `npm:${dep}`)
|
|
||||||
: devDependencies),
|
|
||||||
],
|
|
||||||
{
|
|
||||||
cwd: config.resolvedPaths.cwd,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
dependenciesSpinner?.succeed()
|
dependenciesSpinner?.succeed()
|
||||||
}
|
}
|
||||||
@@ -113,3 +88,107 @@ function shouldPromptForNpmFlag(config: Config) {
|
|||||||
|
|
||||||
return hasReact19 && hasReactDayPicker8
|
return hasReact19 && hasReactDayPicker8
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function getUpdateDependenciesPackageManager(config: Config) {
|
||||||
|
const expoVersion = getPackageInfo(config.resolvedPaths.cwd, false)
|
||||||
|
?.dependencies?.expo
|
||||||
|
|
||||||
|
if (expoVersion) {
|
||||||
|
// Ensures package versions match the React Native version.
|
||||||
|
// https://docs.expo.dev/more/expo-cli/#install
|
||||||
|
return "expo"
|
||||||
|
}
|
||||||
|
|
||||||
|
return getPackageManager(config.resolvedPaths.cwd)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function installWithPackageManager(
|
||||||
|
packageManager: Awaited<
|
||||||
|
ReturnType<typeof getUpdateDependenciesPackageManager>
|
||||||
|
>,
|
||||||
|
dependencies: string[],
|
||||||
|
devDependencies: string[],
|
||||||
|
cwd: string,
|
||||||
|
flag?: string
|
||||||
|
) {
|
||||||
|
if (packageManager === "npm") {
|
||||||
|
return installWithNpm(dependencies, devDependencies, cwd, flag)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (packageManager === "deno") {
|
||||||
|
return installWithDeno(dependencies, devDependencies, cwd)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (packageManager === "expo") {
|
||||||
|
return installWithExpo(dependencies, devDependencies, cwd)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dependencies?.length) {
|
||||||
|
await execa(packageManager, ["add", ...dependencies], {
|
||||||
|
cwd,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devDependencies?.length) {
|
||||||
|
await execa(packageManager, ["add", "-D", ...devDependencies], { cwd })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function installWithNpm(
|
||||||
|
dependencies: string[],
|
||||||
|
devDependencies: string[],
|
||||||
|
cwd: string,
|
||||||
|
flag?: string
|
||||||
|
) {
|
||||||
|
if (dependencies.length) {
|
||||||
|
await execa(
|
||||||
|
"npm",
|
||||||
|
["install", ...(flag ? [`--${flag}`] : []), ...dependencies],
|
||||||
|
{ cwd }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devDependencies.length) {
|
||||||
|
await execa(
|
||||||
|
"npm",
|
||||||
|
["install", ...(flag ? [`--${flag}`] : []), "-D", ...devDependencies],
|
||||||
|
{ cwd }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function installWithDeno(
|
||||||
|
dependencies: string[],
|
||||||
|
devDependencies: string[],
|
||||||
|
cwd: string
|
||||||
|
) {
|
||||||
|
if (dependencies?.length) {
|
||||||
|
await execa("deno", ["add", ...dependencies.map((dep) => `npm:${dep}`)], {
|
||||||
|
cwd,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devDependencies?.length) {
|
||||||
|
await execa(
|
||||||
|
"deno",
|
||||||
|
["add", "-D", ...devDependencies.map((dep) => `npm:${dep}`)],
|
||||||
|
{ cwd }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function installWithExpo(
|
||||||
|
dependencies: string[],
|
||||||
|
devDependencies: string[],
|
||||||
|
cwd: string
|
||||||
|
) {
|
||||||
|
if (dependencies.length) {
|
||||||
|
await execa("npx", ["expo", "install", ...dependencies], { cwd })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devDependencies.length) {
|
||||||
|
await execa("npx", ["expo", "install", "-- -D", ...devDependencies], {
|
||||||
|
cwd,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -51,7 +51,9 @@ export async function updateFiles(
|
|||||||
|
|
||||||
const [projectInfo, baseColor] = await Promise.all([
|
const [projectInfo, baseColor] = await Promise.all([
|
||||||
getProjectInfo(config.resolvedPaths.cwd),
|
getProjectInfo(config.resolvedPaths.cwd),
|
||||||
getRegistryBaseColor(config.tailwind.baseColor),
|
config.tailwind.baseColor
|
||||||
|
? getRegistryBaseColor(config.tailwind.baseColor)
|
||||||
|
: Promise.resolve(undefined),
|
||||||
])
|
])
|
||||||
|
|
||||||
let filesCreated: string[] = []
|
let filesCreated: string[] = []
|
||||||
|
|||||||
@@ -379,7 +379,7 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
|
|||||||
initializer &&
|
initializer &&
|
||||||
initializer.isKind(SyntaxKind.ArrayLiteralExpression)
|
initializer.isKind(SyntaxKind.ArrayLiteralExpression)
|
||||||
) {
|
) {
|
||||||
unnsetSpreadElements(
|
unsetSpreadElements(
|
||||||
initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
|
initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -387,7 +387,7 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
|
export function unsetSpreadElements(arr: ArrayLiteralExpression) {
|
||||||
const elements = arr.getElements()
|
const elements = arr.getElements()
|
||||||
for (let j = 0; j < elements.length; j++) {
|
for (let j = 0; j < elements.length; j++) {
|
||||||
const element = elements[j]
|
const element = elements[j]
|
||||||
@@ -398,7 +398,7 @@ export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
|
|||||||
)
|
)
|
||||||
} else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
|
} else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
|
||||||
// Recursive check on nested arrays
|
// Recursive check on nested arrays
|
||||||
unnsetSpreadElements(
|
unsetSpreadElements(
|
||||||
element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
|
element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
|
||||||
)
|
)
|
||||||
} else if (element.isKind(SyntaxKind.StringLiteral)) {
|
} else if (element.isKind(SyntaxKind.StringLiteral)) {
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
import path from "path"
|
import path from "path"
|
||||||
import { expect, test } from "vitest"
|
import { describe, expect, test } from "vitest"
|
||||||
|
|
||||||
import { getConfig, getRawConfig } from "../../src/utils/get-config"
|
import {
|
||||||
|
createConfig,
|
||||||
|
getConfig,
|
||||||
|
getRawConfig,
|
||||||
|
} from "../../src/utils/get-config"
|
||||||
|
|
||||||
test("get raw config", async () => {
|
test("get raw config", async () => {
|
||||||
expect(
|
expect(
|
||||||
@@ -183,3 +187,129 @@ test("get config", async () => {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe("createConfig", () => {
|
||||||
|
test("creates default config when called without arguments", () => {
|
||||||
|
const config = createConfig()
|
||||||
|
|
||||||
|
expect(config).toMatchObject({
|
||||||
|
resolvedPaths: {
|
||||||
|
cwd: expect.any(String),
|
||||||
|
tailwindConfig: "",
|
||||||
|
tailwindCss: "",
|
||||||
|
utils: "",
|
||||||
|
components: "",
|
||||||
|
ui: "",
|
||||||
|
lib: "",
|
||||||
|
hooks: "",
|
||||||
|
},
|
||||||
|
style: "",
|
||||||
|
tailwind: {
|
||||||
|
config: "",
|
||||||
|
css: "",
|
||||||
|
baseColor: "",
|
||||||
|
cssVariables: false,
|
||||||
|
},
|
||||||
|
rsc: false,
|
||||||
|
tsx: true,
|
||||||
|
aliases: {
|
||||||
|
components: "",
|
||||||
|
utils: "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test("overrides cwd in resolvedPaths", () => {
|
||||||
|
const customCwd = "/custom/path"
|
||||||
|
const config = createConfig({
|
||||||
|
resolvedPaths: {
|
||||||
|
cwd: customCwd,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.resolvedPaths.cwd).toBe(customCwd)
|
||||||
|
expect(config.resolvedPaths.components).toBe("")
|
||||||
|
expect(config.resolvedPaths.utils).toBe("")
|
||||||
|
})
|
||||||
|
|
||||||
|
test("overrides style", () => {
|
||||||
|
const config = createConfig({
|
||||||
|
style: "new-york",
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.style).toBe("new-york")
|
||||||
|
})
|
||||||
|
|
||||||
|
test("overrides tailwind settings", () => {
|
||||||
|
const config = createConfig({
|
||||||
|
tailwind: {
|
||||||
|
baseColor: "slate",
|
||||||
|
cssVariables: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.tailwind.baseColor).toBe("slate")
|
||||||
|
expect(config.tailwind.cssVariables).toBe(true)
|
||||||
|
expect(config.tailwind.config).toBe("")
|
||||||
|
expect(config.tailwind.css).toBe("")
|
||||||
|
})
|
||||||
|
|
||||||
|
test("overrides boolean flags", () => {
|
||||||
|
const config = createConfig({
|
||||||
|
rsc: true,
|
||||||
|
tsx: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.rsc).toBe(true)
|
||||||
|
expect(config.tsx).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("overrides aliases", () => {
|
||||||
|
const config = createConfig({
|
||||||
|
aliases: {
|
||||||
|
components: "@/components",
|
||||||
|
utils: "@/lib/utils",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.aliases.components).toBe("@/components")
|
||||||
|
expect(config.aliases.utils).toBe("@/lib/utils")
|
||||||
|
})
|
||||||
|
|
||||||
|
test("handles complex partial overrides", () => {
|
||||||
|
const config = createConfig({
|
||||||
|
style: "default",
|
||||||
|
resolvedPaths: {
|
||||||
|
cwd: "/my/project",
|
||||||
|
components: "/my/project/src/components",
|
||||||
|
},
|
||||||
|
tailwind: {
|
||||||
|
baseColor: "zinc",
|
||||||
|
prefix: "tw-",
|
||||||
|
},
|
||||||
|
aliases: {
|
||||||
|
ui: "@/components/ui",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(config.style).toBe("default")
|
||||||
|
expect(config.resolvedPaths.cwd).toBe("/my/project")
|
||||||
|
expect(config.resolvedPaths.components).toBe("/my/project/src/components")
|
||||||
|
expect(config.resolvedPaths.utils).toBe("")
|
||||||
|
expect(config.tailwind.baseColor).toBe("zinc")
|
||||||
|
expect(config.tailwind.prefix).toBe("tw-")
|
||||||
|
expect(config.tailwind.css).toBe("")
|
||||||
|
expect(config.aliases.ui).toBe("@/components/ui")
|
||||||
|
expect(config.aliases.components).toBe("")
|
||||||
|
})
|
||||||
|
|
||||||
|
test("returns new object instances", () => {
|
||||||
|
const config1 = createConfig()
|
||||||
|
const config2 = createConfig()
|
||||||
|
|
||||||
|
expect(config1).not.toBe(config2)
|
||||||
|
expect(config1.resolvedPaths).not.toBe(config2.resolvedPaths)
|
||||||
|
expect(config1.tailwind).not.toBe(config2.tailwind)
|
||||||
|
expect(config1.aliases).not.toBe(config2.aliases)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|||||||
@@ -328,4 +328,290 @@ describe("transformCss", () => {
|
|||||||
}"
|
}"
|
||||||
`)
|
`)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test("should add plugin directive", async () => {
|
||||||
|
const input = `@import "tailwindcss";`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin foo;"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should group plugins together after imports", async () => {
|
||||||
|
const input = `@import "tailwindcss";
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility content-auto {
|
||||||
|
content-visibility: auto;
|
||||||
|
}`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
"@plugin bar": {},
|
||||||
|
"@layer components": {
|
||||||
|
".card": {
|
||||||
|
padding: "1rem",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin foo;
|
||||||
|
@plugin bar;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility content-auto {
|
||||||
|
content-visibility: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should not add duplicate plugins", async () => {
|
||||||
|
const input = `@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin foo;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
"@plugin bar": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin foo;
|
||||||
|
|
||||||
|
@plugin bar;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should add plugin when no imports exist", async () => {
|
||||||
|
const input = `@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"
|
||||||
|
@plugin foo;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle plugins with quoted parameters", async () => {
|
||||||
|
const input = `@import "tailwindcss";`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin @tailwindcss/typography": {},
|
||||||
|
"@plugin ./custom-plugin.js": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin @tailwindcss/typography;
|
||||||
|
@plugin ./custom-plugin.js;"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle plugins with complex parameters", async () => {
|
||||||
|
const input = `@import "tailwindcss";`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin tailwindcss/plugin": {},
|
||||||
|
"@plugin @headlessui/tailwindcss": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin tailwindcss/plugin;
|
||||||
|
@plugin @headlessui/tailwindcss;"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle multiple imports with plugins", async () => {
|
||||||
|
const input = `@import "tailwindcss";
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
"@plugin bar": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
|
||||||
|
|
||||||
|
@plugin foo;
|
||||||
|
@plugin bar;"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should add plugins to empty file", async () => {
|
||||||
|
const input = ``
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin foo": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"
|
||||||
|
@plugin foo"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should maintain plugin order with existing plugins", async () => {
|
||||||
|
const input = `@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin existing-plugin;
|
||||||
|
@plugin another-existing;`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin new-plugin": {},
|
||||||
|
"@plugin final-plugin": {},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin existing-plugin;
|
||||||
|
@plugin another-existing;
|
||||||
|
@plugin new-plugin;
|
||||||
|
@plugin final-plugin;"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should handle comprehensive CSS with plugins", async () => {
|
||||||
|
const input = `@import "tailwindcss";
|
||||||
|
@import url("fonts.css");
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility content-auto {
|
||||||
|
content-visibility: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}`
|
||||||
|
|
||||||
|
const result = await transformCss(input, {
|
||||||
|
"@plugin @tailwindcss/typography": {},
|
||||||
|
"@plugin ./custom": {},
|
||||||
|
"@layer components": {
|
||||||
|
".btn": {
|
||||||
|
padding: "0.5rem 1rem",
|
||||||
|
"&:hover": {
|
||||||
|
"background-color": "blue",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"@utility animate-fast": {
|
||||||
|
"animation-duration": "0.1s",
|
||||||
|
},
|
||||||
|
"@keyframes spin-fast": {
|
||||||
|
"0%": { transform: "rotate(0deg)" },
|
||||||
|
"100%": { transform: "rotate(360deg)" },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result).toMatchInlineSnapshot(`
|
||||||
|
"@import "tailwindcss";
|
||||||
|
@import url("fonts.css");
|
||||||
|
|
||||||
|
@plugin @tailwindcss/typography;
|
||||||
|
@plugin ./custom;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility content-auto {
|
||||||
|
content-visibility: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animate-fast {
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
@keyframes spin-fast {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import {
|
|||||||
buildTailwindThemeColorsFromCssVars, nestSpreadElements,
|
buildTailwindThemeColorsFromCssVars, nestSpreadElements,
|
||||||
nestSpreadProperties,
|
nestSpreadProperties,
|
||||||
transformTailwindConfig,
|
transformTailwindConfig,
|
||||||
unnestSpreadProperties, unnsetSpreadElements,
|
unnestSpreadProperties, unsetSpreadElements,
|
||||||
} from "../../../src/utils/updaters/update-tailwind-config"
|
} from "../../../src/utils/updaters/update-tailwind-config"
|
||||||
|
|
||||||
const SHARED_CONFIG = {
|
const SHARED_CONFIG = {
|
||||||
@@ -1186,7 +1186,7 @@ describe("unnestSpreadElements", () => {
|
|||||||
)
|
)
|
||||||
if (!configObject) throw new Error("Config object not found")
|
if (!configObject) throw new Error("Config object not found")
|
||||||
|
|
||||||
unnsetSpreadElements(configObject)
|
unsetSpreadElements(configObject)
|
||||||
|
|
||||||
const result = configObject.getText()
|
const result = configObject.getText()
|
||||||
expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
|
expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
|
||||||
|
|||||||
70
pnpm-lock.yaml
generated
70
pnpm-lock.yaml
generated
@@ -322,7 +322,7 @@ importers:
|
|||||||
specifier: ^6.0.1
|
specifier: ^6.0.1
|
||||||
version: 6.0.1
|
version: 6.0.1
|
||||||
shadcn:
|
shadcn:
|
||||||
specifier: 2.6.2
|
specifier: 2.9.3
|
||||||
version: link:../../packages/shadcn
|
version: link:../../packages/shadcn
|
||||||
shiki:
|
shiki:
|
||||||
specifier: ^1.10.1
|
specifier: ^1.10.1
|
||||||
@@ -602,7 +602,7 @@ importers:
|
|||||||
specifier: 2.12.7
|
specifier: 2.12.7
|
||||||
version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
shadcn:
|
shadcn:
|
||||||
specifier: 2.6.2
|
specifier: 2.9.3
|
||||||
version: link:../../packages/shadcn
|
version: link:../../packages/shadcn
|
||||||
sharp:
|
sharp:
|
||||||
specifier: ^0.32.6
|
specifier: ^0.32.6
|
||||||
@@ -696,16 +696,6 @@ importers:
|
|||||||
specifier: ^4.1.2
|
specifier: ^4.1.2
|
||||||
version: 4.1.2
|
version: 4.1.2
|
||||||
|
|
||||||
packages/cli:
|
|
||||||
dependencies:
|
|
||||||
chalk:
|
|
||||||
specifier: ^5.4.1
|
|
||||||
version: 5.4.1
|
|
||||||
devDependencies:
|
|
||||||
tsup:
|
|
||||||
specifier: ^6.6.3
|
|
||||||
version: 6.7.0(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.0)(typescript@5.7.3))(typescript@5.7.3)
|
|
||||||
|
|
||||||
packages/shadcn:
|
packages/shadcn:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@antfu/ni':
|
'@antfu/ni':
|
||||||
@@ -4779,10 +4769,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
|
resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
|
||||||
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
||||||
|
|
||||||
chalk@5.4.1:
|
|
||||||
resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
|
|
||||||
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
|
||||||
|
|
||||||
change-case@5.4.4:
|
change-case@5.4.4:
|
||||||
resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
|
resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
|
||||||
|
|
||||||
@@ -14349,8 +14335,6 @@ snapshots:
|
|||||||
|
|
||||||
chalk@5.2.0: {}
|
chalk@5.2.0: {}
|
||||||
|
|
||||||
chalk@5.4.1: {}
|
|
||||||
|
|
||||||
change-case@5.4.4: {}
|
change-case@5.4.4: {}
|
||||||
|
|
||||||
character-entities-html4@2.1.0: {}
|
character-entities-html4@2.1.0: {}
|
||||||
@@ -18447,14 +18431,6 @@ snapshots:
|
|||||||
postcss: 8.5.1
|
postcss: 8.5.1
|
||||||
ts-node: 10.9.2(@types/node@22.13.0)(typescript@4.9.5)
|
ts-node: 10.9.2(@types/node@22.13.0)(typescript@4.9.5)
|
||||||
|
|
||||||
postcss-load-config@3.1.4(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.0)(typescript@5.7.3)):
|
|
||||||
dependencies:
|
|
||||||
lilconfig: 2.1.0
|
|
||||||
yaml: 1.10.2
|
|
||||||
optionalDependencies:
|
|
||||||
postcss: 8.5.1
|
|
||||||
ts-node: 10.9.2(@types/node@22.13.0)(typescript@5.7.3)
|
|
||||||
|
|
||||||
postcss-load-config@4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.7.3)):
|
postcss-load-config@4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.7.3)):
|
||||||
dependencies:
|
dependencies:
|
||||||
lilconfig: 3.1.3
|
lilconfig: 3.1.3
|
||||||
@@ -20100,25 +20076,6 @@ snapshots:
|
|||||||
yn: 3.1.1
|
yn: 3.1.1
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
ts-node@10.9.2(@types/node@22.13.0)(typescript@5.7.3):
|
|
||||||
dependencies:
|
|
||||||
'@cspotcode/source-map-support': 0.8.1
|
|
||||||
'@tsconfig/node10': 1.0.11
|
|
||||||
'@tsconfig/node12': 1.0.11
|
|
||||||
'@tsconfig/node14': 1.0.3
|
|
||||||
'@tsconfig/node16': 1.0.4
|
|
||||||
'@types/node': 22.13.0
|
|
||||||
acorn: 8.14.0
|
|
||||||
acorn-walk: 8.3.4
|
|
||||||
arg: 4.1.3
|
|
||||||
create-require: 1.1.1
|
|
||||||
diff: 4.0.2
|
|
||||||
make-error: 1.3.6
|
|
||||||
typescript: 5.7.3
|
|
||||||
v8-compile-cache-lib: 3.0.1
|
|
||||||
yn: 3.1.1
|
|
||||||
optional: true
|
|
||||||
|
|
||||||
ts-pattern@5.6.2: {}
|
ts-pattern@5.6.2: {}
|
||||||
|
|
||||||
tsconfck@3.1.4(typescript@5.7.3):
|
tsconfck@3.1.4(typescript@5.7.3):
|
||||||
@@ -20167,29 +20124,6 @@ snapshots:
|
|||||||
- supports-color
|
- supports-color
|
||||||
- ts-node
|
- ts-node
|
||||||
|
|
||||||
tsup@6.7.0(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.0)(typescript@5.7.3))(typescript@5.7.3):
|
|
||||||
dependencies:
|
|
||||||
bundle-require: 4.2.1(esbuild@0.17.19)
|
|
||||||
cac: 6.7.14
|
|
||||||
chokidar: 3.6.0
|
|
||||||
debug: 4.4.0
|
|
||||||
esbuild: 0.17.19
|
|
||||||
execa: 5.1.1
|
|
||||||
globby: 11.1.0
|
|
||||||
joycon: 3.1.1
|
|
||||||
postcss-load-config: 3.1.4(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.0)(typescript@5.7.3))
|
|
||||||
resolve-from: 5.0.0
|
|
||||||
rollup: 3.29.5
|
|
||||||
source-map: 0.8.0-beta.0
|
|
||||||
sucrase: 3.35.0
|
|
||||||
tree-kill: 1.2.2
|
|
||||||
optionalDependencies:
|
|
||||||
postcss: 8.5.1
|
|
||||||
typescript: 5.7.3
|
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
- ts-node
|
|
||||||
|
|
||||||
tsutils@3.21.0(typescript@5.7.3):
|
tsutils@3.21.0(typescript@5.7.3):
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: 1.14.1
|
tslib: 1.14.1
|
||||||
|
|||||||
3
templates/monorepo-next/.vscode/settings.json
vendored
Normal file
3
templates/monorepo-next/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user