Update UI components (#227)

* Update UI components

* Remove unused components

* Update hooks path

packages/js/services/use-display-feedback.ts

@@ -1,5 +1,8 @@
 import { __ } from '@wpsocio/i18n';
-import { type Toast, useToast } from '@wpsocio/ui-components/ui/use-toast.js';
+import {
+	type Toast,
+	useToast,
+} from '@wpsocio/ui-components/ui/hooks/use-toast.js';
 import { FORM_ERROR } from '@wpsocio/utilities/constants.js';
 import { getErrorStrings } from '@wpsocio/utilities/misc.js';
 import type { AnyObject } from '@wpsocio/utilities/types.js';

packages/js/ui-components/components.json

@@ -10,6 +10,8 @@
 	},
 	"aliases": {
 		"components": "@",
-		"utils": "@/lib/utils.js"
+		"utils": "@/lib/utils.js",
+		"lib": "@/lib",
+		"hooks": "@/ui/hooks"
 	}
 }

packages/js/ui-components/tools/tailwind.config.js

@@ -11,7 +11,7 @@ export default {
 	],
 	theme: {
 		container: {
-			center: true,
+			center: 'true',
 			padding: '2rem',
 			screens: {
 				'2xl': '1400px',
@@ -60,12 +60,20 @@ export default {
 			},
 			keyframes: {
 				'accordion-down': {
-					from: { height: 0 },
-					to: { height: 'var(--radix-accordion-content-height)' },
+					from: {
+						height: '0',
+					},
+					to: {
+						height: 'var(--radix-accordion-content-height)',
+					},
 				},
 				'accordion-up': {
-					from: { height: 'var(--radix-accordion-content-height)' },
-					to: { height: 0 },
+					from: {
+						height: 'var(--radix-accordion-content-height)',
+					},
+					to: {
+						height: '0',
+					},
 				},
 			},
 			animation: {

packages/js/ui-components/ui/accordion.tsx

@@ -4,11 +4,6 @@ import { ChevronDown } from "lucide-react"
 
 import { cn } from "../lib/utils.js"
 
-export type AccordionHeaderProps = {
-  beforeTrigger?: React.ReactNode
-  afterTrigger?: React.ReactNode
-}
-
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
@@ -25,10 +20,9 @@ AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & AccordionHeaderProps
->(({ className, children, beforeTrigger, afterTrigger, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex items-center gap-1">
-    {beforeTrigger}
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -40,7 +34,6 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
-    {afterTrigger}
   </AccordionPrimitive.Header>
 ))
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
@@ -51,12 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={cn(
-      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-      {
-        'data-[state=closed]:h-0 data-[state=closed]:invisible': props.forceMount,
-      }
-    )}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>

packages/js/ui-components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils.js"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

packages/js/ui-components/ui/card.tsx

@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}

packages/js/ui-components/ui/dialog.tsx

@@ -1,6 +1,6 @@
+import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-import * as React from "react"
 
 import { cn } from "../lib/utils.js"
 

packages/js/ui-components/ui/use-toast.ts → packages/js/ui-components/ui/hooks/use-toast.ts

@@ -4,7 +4,13 @@ import * as React from "react"
 import type {
   ToastActionElement,
   ToastProps,
-} from "./toast.js"
+} from "../toast.js"
+
+/**
+ * Customizations:
+ * - TOAST_LIMIT = 5
+ * - status?: prop
+ */
 
 const TOAST_LIMIT = 5
 const TOAST_REMOVE_DELAY = 1000000

packages/js/ui-components/ui/input.tsx

@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "../lib/utils.js"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}