Refactor UI components

Author: thevuong

.idea/codefixlabs.iml

@@ -30,7 +30,7 @@ Update `package.json`
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-+   "clean": "rm -rf .next",
++   "clean": "rm -rf .next && rm -rf node_modules",
 +   "db:generate": "prisma generate",
 +   "db:push": "prisma db push",
 +   "db:studio": "prisma studio",

README.md

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "next build",
     "build-storybook": "storybook build",
-    "clean": "rm -rf .next .turbo node_modules",
+    "clean": "rm -rf .next && rm -rf .turbo && rm -rf node_modules",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",

apps/docs/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "turbo run build",
     "changeset": "changeset",
-    "clean": "turbo run clean && rm -rf .turbo node_modules",
+    "clean": "turbo run clean && rm -rf .turbo && rm -rf node_modules",
     "dev": "turbo run dev",
     "dev:packages": "turbo run dev --filter='./packages/*'",
     "force:build": "turbo run clean && turbo run build --force",

package.json

@@ -1,5 +1,11 @@
 # @codefixlabs/hooks
 
+## 0.1.34
+
+### Patch Changes
+
+- Refactor UI components
+
 ## 0.1.33
 
 ### Patch Changes

packages/hooks/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/hooks",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -24,7 +24,7 @@
   "scripts": {
     "build": "tsup",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf dist .turbo node_modules",
+    "clean": "rm -rf dist && rm -rf .turbo && rm -rf node_modules",
     "dev": "tsup --watch",
     "lint": "eslint src/"
   },

packages/hooks/package.json

@@ -1,5 +1,11 @@
 # @codefixlabs/lib
 
+## 0.1.37
+
+### Patch Changes
+
+- Refactor UI components
+
 ## 0.1.36
 
 ### Patch Changes

packages/lib/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/lib",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -24,7 +24,7 @@
   "scripts": {
     "build": "tsup",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf dist .turbo node_modules",
+    "clean": "rm -rf dist && rm -rf .turbo && rm -rf node_modules",
     "dev": "tsup --watch",
     "lint": "eslint src/"
   },

packages/lib/package.json

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.47
+
+### Patch Changes
+
+- Refactor UI components
+
 ## 0.1.46
 
 ### Patch Changes

packages/tailwindcss/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/tailwindcss",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -24,7 +24,7 @@
   "scripts": {
     "build": "tsup",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf dist .turbo node_modules",
+    "clean": "rm -rf dist && rm -rf .turbo && rm -rf node_modules",
     "dev": "tsup --watch",
     "lint": "eslint src/"
   },

packages/tailwindcss/package.json

@@ -1,5 +1,14 @@
 # @codefixlabs/ui
 
+## 0.1.91
+
+### Patch Changes
+
+- Refactor UI components
+- Updated dependencies
+  - @codefixlabs/hooks@0.1.34
+  - @codefixlabs/lib@0.1.37
+
 ## 0.1.90
 
 ### Patch Changes

packages/ui/CHANGELOG.md

@@ -1,17 +1,17 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
+        "default": "./dist/index.mjs",
+        "types": "./dist/index.d.mts"
       },
       "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "default": "./dist/index.js",
+        "types": "./dist/index.d.ts"
       }
     }
   },
@@ -24,7 +24,7 @@
   "scripts": {
     "build": "tsup",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf dist .turbo node_modules",
+    "clean": "rm -rf dist && rm -rf .turbo && rm -rf node_modules",
     "dev": "tsup --watch",
     "lint": "eslint src/"
   },

packages/ui/package.json

@@ -21,9 +21,9 @@ import {
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
+import type { ButtonVariantsProps } from '@/server/button-variants';
 import { buttonVariants } from '@/server/button-variants';
 import { cn } from '@/server/cn';
-import type { ButtonProps } from '@/react/button';
 
 /* -----------------------------------------------------------------------------
  * Classes
@@ -46,6 +46,10 @@ const alertDialogContentVariants = cva(
   },
 );
 
+type AlertDialogContentVariantsProps = VariantProps<
+  typeof alertDialogContentVariants
+>;
+
 /* -----------------------------------------------------------------------------
  * Provider: AlertDialogContext
  * -------------------------------------------------------------------------- */
@@ -78,7 +82,7 @@ export function AlertDialog({
  * -------------------------------------------------------------------------- */
 
 export interface AlertDialogContentProps
-  extends Omit<VariantProps<typeof alertDialogContentVariants>, 'scrollable'>,
+  extends Omit<AlertDialogContentVariantsProps, 'scrollable'>,
     ContentProps {
   classNames?: {
     content?: string;
@@ -127,23 +131,20 @@ AlertDialogContent.displayName = Content.displayName;
  * Component: AlertDialogAction
  * -------------------------------------------------------------------------- */
 
-export interface AlertDialogActionProps extends ActionProps {
-  variant?: ButtonProps['variant'];
-  size?: ButtonProps['size'];
-  shape?: ButtonProps['shape'];
-  block?: ButtonProps['block'];
-}
+export interface AlertDialogActionProps
+  extends ActionProps,
+    ButtonVariantsProps {}
 
 export const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof Action>,
   AlertDialogActionProps
 >(
   (
-    { className, variant = 'destructive', size, shape, block, ...props },
+    { className, variant = 'destructive', size, block, icon, ...props },
     forwardedRef,
   ) => (
     <Action
-      className={cn(buttonVariants({ variant, size, shape, block }), className)}
+      className={cn(buttonVariants({ variant, size, block, icon }), className)}
       ref={forwardedRef}
       {...props}
     />
@@ -156,23 +157,20 @@ AlertDialogAction.displayName = Action.displayName;
  * Component: AlertDialogCancel
  * -------------------------------------------------------------------------- */
 
-export interface AlertDialogCancelProps extends CancelProps {
-  variant?: ButtonProps['variant'];
-  size?: ButtonProps['size'];
-  shape?: ButtonProps['shape'];
-  block?: ButtonProps['block'];
-}
+export interface AlertDialogCancelProps
+  extends CancelProps,
+    ButtonVariantsProps {}
 
 export const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof Cancel>,
   AlertDialogCancelProps
 >(
   (
-    { className, variant = 'outline', size, shape, block, ...props },
+    { className, variant = 'outline', size, block, icon, ...props },
     forwardedRef,
   ) => (
     <Cancel
-      className={cn(buttonVariants({ variant, size, shape, block }), className)}
+      className={cn(buttonVariants({ variant, size, icon, block }), className)}
       ref={forwardedRef}
       {...props}
     />

packages/ui/src/react/alert-dialog.tsx

@@ -30,13 +30,15 @@ const alertVariants = cva(
   },
 );
 
+type AlertVariantsProps = VariantProps<typeof alertVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Alert
  * -------------------------------------------------------------------------- */
 
 export interface AlertProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {}
+    AlertVariantsProps {}
 
 export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   ({ className, variant, ...props }, forwardedRef) => (

packages/ui/src/react/alert.tsx

@@ -25,13 +25,15 @@ const badgeVariants = cva(
   },
 );
 
+type BadgeVariantsProps = VariantProps<typeof badgeVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Badge
  * -------------------------------------------------------------------------- */
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+    BadgeVariantsProps {}
 
 export function Badge({
   className,

packages/ui/src/react/badge.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Loader2Icon } from 'lucide-react';
-import type { VariantProps } from 'class-variance-authority';
+import type { ButtonVariantsProps } from '@/server/button-variants';
 import { buttonVariants } from '@/server/button-variants';
 import { cn } from '@/server/cn';
 
@@ -10,7 +10,7 @@ import { cn } from '@/server/cn';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    ButtonVariantsProps {
   endIcon?: React.ReactNode;
   startIcon?: React.ReactNode;
   loading?: boolean;
@@ -24,8 +24,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       block,
-      shape,
-      justify,
       loading,
       startIcon,
       endIcon,
@@ -40,8 +38,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           buttonVariants({
             block,
             icon: icon || !React.Children.count(children),
-            justify,
-            shape,
             size,
             variant,
           }),

packages/ui/src/react/button.tsx

@@ -106,9 +106,7 @@ export function DatePicker({
       <Trigger>
         <PopoverTrigger
           className={cn(
-            buttonVariants({
-              variant: 'outline',
-            }),
+            buttonVariants({ variant: 'outline' }),
             classNameTrigger,
           )}
           disabled={loading}
@@ -506,11 +504,7 @@ export function Calendar({
           months: 'flex flex-col gap-4 sm:flex-row',
           nav: '',
           nav_button: twMerge(
-            buttonVariants({
-              icon: true,
-              size: 'sm',
-              variant: 'outline',
-            }),
+            buttonVariants({ icon: true, size: 'sm', variant: 'outline' }),
             'absolute inset-y-0',
           ),
           nav_button_next: 'right-0',

packages/ui/src/react/calendar.tsx

@@ -153,11 +153,8 @@ export function Combobox({
       <Trigger>
         <PopoverTrigger
           className={cn(
-            buttonVariants({
-              block,
-              variant: 'outline',
-              justify: 'between',
-            }),
+            buttonVariants({ block, variant: 'outline' }),
+            'justify-between',
             classNameTrigger,
           )}
           disabled={disabled}

packages/ui/src/react/combobox.tsx

@@ -35,13 +35,15 @@ const commandVariants = cva(
   },
 );
 
+type CommandVariantsProps = VariantProps<typeof commandVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Command
  * -------------------------------------------------------------------------- */
 
 export interface CommandProps
   extends React.ComponentPropsWithoutRef<typeof Root>,
-    VariantProps<typeof commandVariants> {}
+    CommandVariantsProps {}
 
 export const Command = React.forwardRef<
   React.ElementRef<typeof Root>,