templates: fix issue with shadcn utilities alias across website templ…

…ate and localization example (payloadcms#10507) Fixes the utilities alias used by shadcn to a specific file renamed to `ui.ts` from `cn.ts` since there may be other utilities installed by shadcn depending on the components the user installs. Co-Authored-By: Q.Tran <[email protected]>
akhrarovsaid · Jan 10, 2025 · d20dc58 · d20dc58
1 parent fd96a9a
commit d20dc58
Show file tree

Hide file tree

Showing 72 changed files with 102 additions and 84 deletions.
diff --git a/examples/localization/components.json b/examples/localization/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/utilities"
+    "utils": "@/utilities/ui"
   }
 }
diff --git a/examples/localization/src/app/(frontend)/[locale]/layout.tsx b/examples/localization/src/app/(frontend)/[locale]/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import React from 'react'

diff --git a/examples/localization/src/blocks/Banner/Component.tsx b/examples/localization/src/blocks/Banner/Component.tsx
@@ -1,6 +1,6 @@
 import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/examples/localization/src/blocks/Content/Component.tsx b/examples/localization/src/blocks/Content/Component.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/examples/localization/src/blocks/MediaBlock/Component.tsx b/examples/localization/src/blocks/MediaBlock/Component.tsx
@@ -1,6 +1,6 @@
 import type { StaticImageData } from 'next/image'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/examples/localization/src/blocks/RenderBlocks.tsx b/examples/localization/src/blocks/RenderBlocks.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React, { Fragment } from 'react'
 
 import type { Page } from '@/payload-types'

diff --git a/examples/localization/src/components/AdminBar/index.tsx b/examples/localization/src/components/AdminBar/index.tsx
@@ -2,7 +2,7 @@
 
 import type { PayloadAdminBarProps } from 'payload-admin-bar'
 
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { useSelectedLayoutSegments } from 'next/navigation'
 import { PayloadAdminBar } from 'payload-admin-bar'
 import React, { useState } from 'react'

diff --git a/examples/localization/src/components/Card/index.tsx b/examples/localization/src/components/Card/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import useClickableCard from '@/utilities/useClickableCard'
 import Link from 'next/link'
 import React, { Fragment } from 'react'

diff --git a/examples/localization/src/components/CollectionArchive/index.tsx b/examples/localization/src/components/CollectionArchive/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 
 import type { Post } from '@/payload-types'

diff --git a/examples/localization/src/components/Link/index.tsx b/examples/localization/src/components/Link/index.tsx
@@ -1,5 +1,5 @@
 import { Button, type ButtonProps } from '@/components/ui/button'
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { Link as i18nLink } from '@/i18n/routing'
 import React from 'react'
 

diff --git a/examples/localization/src/components/Media/ImageMedia/index.tsx b/examples/localization/src/components/Media/ImageMedia/index.tsx
@@ -2,7 +2,7 @@
 
 import type { StaticImageData } from 'next/image'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import NextImage from 'next/image'
 import React from 'react'
 

diff --git a/examples/localization/src/components/Media/VideoMedia/index.tsx b/examples/localization/src/components/Media/VideoMedia/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'

diff --git a/examples/localization/src/components/Pagination/index.tsx b/examples/localization/src/components/Pagination/index.tsx
@@ -8,7 +8,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination'
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 

diff --git a/examples/localization/src/components/RichText/index.tsx b/examples/localization/src/components/RichText/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 
 import { serializeLexical } from './serialize'

diff --git a/examples/localization/src/components/ui/button.tsx b/examples/localization/src/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { Slot } from '@radix-ui/react-slot'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

diff --git a/examples/localization/src/components/ui/card.tsx b/examples/localization/src/components/ui/card.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Card: React.FC<

diff --git a/examples/localization/src/components/ui/checkbox.tsx b/examples/localization/src/components/ui/checkbox.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'

diff --git a/examples/localization/src/components/ui/input.tsx b/examples/localization/src/components/ui/input.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Input: React.FC<

diff --git a/examples/localization/src/components/ui/label.tsx b/examples/localization/src/components/ui/label.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

diff --git a/examples/localization/src/components/ui/pagination.tsx b/examples/localization/src/components/ui/pagination.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
 

diff --git a/examples/localization/src/components/ui/select.tsx b/examples/localization/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'

diff --git a/examples/localization/src/components/ui/textarea.tsx b/examples/localization/src/components/ui/textarea.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Textarea: React.FC<

diff --git a/examples/localization/src/utilities/cn.ts b/examples/localization/src/utilities/cn.ts
diff --git a/examples/localization/src/utilities/ui.ts b/examples/localization/src/utilities/ui.ts
@@ -0,0 +1,12 @@
+/**
+ * Utility functions for UI components automatically added by ShadCN and used in a few of our frontend components and blocks.
+ *
+ * Other functions may be exported from here in the future or by installing other shadcn components.
+ */
+
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/templates/website/components.json b/templates/website/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/utilities"
+    "utils": "@/utilities/ui"
   }
 }
diff --git a/templates/website/src/app/(frontend)/layout.tsx b/templates/website/src/app/(frontend)/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import React from 'react'

diff --git a/templates/website/src/blocks/Banner/Component.tsx b/templates/website/src/blocks/Banner/Component.tsx
@@ -1,6 +1,6 @@
 import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/templates/website/src/blocks/Content/Component.tsx b/templates/website/src/blocks/Content/Component.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/templates/website/src/blocks/MediaBlock/Component.tsx b/templates/website/src/blocks/MediaBlock/Component.tsx
@@ -1,6 +1,6 @@
 import type { StaticImageData } from 'next/image'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/templates/website/src/blocks/RenderBlocks.tsx b/templates/website/src/blocks/RenderBlocks.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React, { Fragment } from 'react'
 
 import type { Page } from '@/payload-types'

diff --git a/templates/website/src/components/AdminBar/index.tsx b/templates/website/src/components/AdminBar/index.tsx
@@ -2,7 +2,7 @@
 
 import type { PayloadAdminBarProps } from 'payload-admin-bar'
 
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { useSelectedLayoutSegments } from 'next/navigation'
 import { PayloadAdminBar } from 'payload-admin-bar'
 import React, { useState } from 'react'

diff --git a/templates/website/src/components/Card/index.tsx b/templates/website/src/components/Card/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import useClickableCard from '@/utilities/useClickableCard'
 import Link from 'next/link'
 import React, { Fragment } from 'react'

diff --git a/templates/website/src/components/CollectionArchive/index.tsx b/templates/website/src/components/CollectionArchive/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 
 import type { Post } from '@/payload-types'

diff --git a/templates/website/src/components/Link/index.tsx b/templates/website/src/components/Link/index.tsx
@@ -1,5 +1,5 @@
 import { Button, type ButtonProps } from '@/components/ui/button'
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import Link from 'next/link'
 import React from 'react'
 

diff --git a/templates/website/src/components/Media/ImageMedia/index.tsx b/templates/website/src/components/Media/ImageMedia/index.tsx
@@ -2,7 +2,7 @@
 
 import type { StaticImageData } from 'next/image'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import NextImage from 'next/image'
 import React from 'react'
 

diff --git a/templates/website/src/components/Media/VideoMedia/index.tsx b/templates/website/src/components/Media/VideoMedia/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'

diff --git a/templates/website/src/components/Pagination/index.tsx b/templates/website/src/components/Pagination/index.tsx
@@ -8,7 +8,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination'
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 

diff --git a/templates/website/src/components/RichText/index.tsx b/templates/website/src/components/RichText/index.tsx
@@ -20,7 +20,7 @@ import type {
 } from '@/payload-types'
 import { BannerBlock } from '@/blocks/Banner/Component'
 import { CallToActionBlock } from '@/blocks/CallToAction/Component'
-import { cn } from '@/utilities/cn'
+import { cn } from '@/utilities/ui'
 
 type NodeTypes =
   | DefaultNodeTypes

diff --git a/templates/website/src/components/ui/button.tsx b/templates/website/src/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { Slot } from '@radix-ui/react-slot'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

diff --git a/templates/website/src/components/ui/card.tsx b/templates/website/src/components/ui/card.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Card: React.FC<

diff --git a/templates/website/src/components/ui/checkbox.tsx b/templates/website/src/components/ui/checkbox.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'

diff --git a/templates/website/src/components/ui/input.tsx b/templates/website/src/components/ui/input.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Input: React.FC<

diff --git a/templates/website/src/components/ui/label.tsx b/templates/website/src/components/ui/label.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

diff --git a/templates/website/src/components/ui/pagination.tsx b/templates/website/src/components/ui/pagination.tsx
@@ -1,7 +1,7 @@
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
 

diff --git a/templates/website/src/components/ui/select.tsx b/templates/website/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'

diff --git a/templates/website/src/components/ui/textarea.tsx b/templates/website/src/components/ui/textarea.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
 const Textarea: React.FC<

diff --git a/templates/website/src/utilities/cn.ts b/templates/website/src/utilities/cn.ts
diff --git a/templates/website/src/utilities/ui.ts b/templates/website/src/utilities/ui.ts
@@ -0,0 +1,12 @@
+/**
+ * Utility functions for UI components automatically added by ShadCN and used in a few of our frontend components and blocks.
+ *
+ * Other functions may be exported from here in the future or by installing other shadcn components.
+ */
+
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/templates/with-vercel-website/components.json b/templates/with-vercel-website/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/utilities"
+    "utils": "@/utilities/ui"
   }
 }
diff --git a/templates/with-vercel-website/src/app/(frontend)/layout.tsx b/templates/with-vercel-website/src/app/(frontend)/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import React from 'react'

diff --git a/templates/with-vercel-website/src/blocks/Banner/Component.tsx b/templates/with-vercel-website/src/blocks/Banner/Component.tsx
@@ -1,6 +1,6 @@
 import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
 
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
 

diff --git a/templates/with-vercel-website/src/blocks/Content/Component.tsx b/templates/with-vercel-website/src/blocks/Content/Component.tsx
@@ -1,4 +1,4 @@
-import { cn } from 'src/utilities/cn'
+import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'