refactor: import the exact function to use

Author: thevuong

packages/eslint-config-codefixlabs/react.js

@@ -22,7 +22,6 @@ module.exports = {
     'import/no-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { includeTypes: true }],
     'newline-before-return': 'error',
-    'no-undef': 'off',
     'sort-keys': ['error', 'asc', { natural: true }],
   },
   settings: {

packages/hooks/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig((options: Options) => ({
   entry: ['src/**/*.ts'],
   external: ['react'],
   format: ['esm', 'cjs'],
-  minify: true,
+  minify: !options.watch,
   sourcemap: true,
   splitting: true,
   ...options,

packages/lib/src/validation.ts

@@ -11,5 +11,9 @@ export function isValidPhoneNumber({
     `${phoneCode}${phoneNumber}`,
   );
 
-  return Boolean(parsedPhoneNumber?.isValid());
+  if (!parsedPhoneNumber) {
+    return false;
+  }
+
+  return parsedPhoneNumber.isValid();
 }

packages/lib/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig((options: Options) => ({
   entry: ['src/**/*.ts'],
   external: ['react'],
   format: ['esm', 'cjs'],
-  minify: true,
+  minify: !options.watch,
   sourcemap: true,
   splitting: true,
   ...options,

packages/tailwindcss/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig((options: Options) => ({
   entry: ['src/**/*.ts'],
   external: ['react'],
   format: ['esm', 'cjs'],
-  minify: true,
+  minify: !options.watch,
   sourcemap: true,
   splitting: true,
   ...options,

packages/ui/src/cva/button.ts

@@ -176,18 +176,3 @@ export const buttonVariants = cva(
     },
   },
 );
-
-export const innerButtonVariants = cva(
-  'h-4 w-4 shrink-0 text-base text-opacity-100',
-  {
-    defaultVariants: {
-      loading: false,
-    },
-    variants: {
-      loading: {
-        false: undefined,
-        true: 'animate-spin',
-      },
-    },
-  },
-);

packages/ui/src/react/accordion.tsx

@@ -8,6 +8,7 @@ import {
   Trigger,
 } from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

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

@@ -13,9 +13,11 @@ import {
 } from '@radix-ui/react-alert-dialog';
 import type { VariantProps } from 'class-variance-authority';
 import { cx } from 'class-variance-authority';
+import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { alertDialogContentVariants, buttonVariants } from '@/cva';
+import { alertDialogContentVariants } from '@/cva/alert-dialog';
+import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
  * Provider: AlertDialogContext

packages/ui/src/react/alert.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { alertVariants } from '@/cva';
+import { alertVariants } from '@/cva/alert';
 
 /* -----------------------------------------------------------------------------
  * Component: Alert

packages/ui/src/react/avatar.tsx

@@ -2,6 +2,7 @@
 
 import { getFirstInitials } from '@codefixlabs/lib';
 import { Fallback, Image, Root } from '@radix-ui/react-avatar';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/badge.tsx

@@ -2,7 +2,8 @@
 
 import type { VariantProps } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
-import { badgeVariants } from '@/cva';
+import * as React from 'react';
+import { badgeVariants } from '@/cva/badge';
 
 /* -----------------------------------------------------------------------------
  * Component: Badge

packages/ui/src/react/button.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { Children, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { Loader2Icon } from 'lucide-react';
-import type { innerButtonVariants } from '@/cva';
-import { buttonVariants } from '@/cva';
+import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
  * Component: Button
@@ -14,10 +13,10 @@ import { buttonVariants } from '@/cva';
 export const Button = forwardRef<
   React.ElementRef<'button'>,
   VariantProps<typeof buttonVariants> &
-    VariantProps<typeof innerButtonVariants> &
     React.ComponentPropsWithoutRef<'button'> & {
       endIcon?: React.ReactNode;
       startIcon?: React.ReactNode;
+      loading?: boolean;
     }
 >(
   (
@@ -58,17 +57,9 @@ export const Button = forwardRef<
       >
         {startIcon}
 
-        {children ? (
-          <span className={loading ? 'opacity-0' : undefined}>{children}</span>
-        ) : null}
+        {children}
 
         {endIcon}
-
-        {loading ? (
-          <span className="absolute inset-0 flex items-center justify-center">
-            <Loader2Icon className="h-4 w-4 animate-spin" />
-          </span>
-        ) : null}
       </button>
     );
   },

packages/ui/src/react/calendar.tsx

@@ -8,6 +8,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from 'lucide-react';
+import * as React from 'react';
 import {
   useCallback,
   useEffect,
@@ -51,8 +52,8 @@ import {
   isValidTime,
   matcherToArray,
   timeRegex,
-} from '@/lib';
-import { buttonVariants } from '@/cva';
+} from '@/lib/calendar';
+import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
  * Component: DatePicker

packages/ui/src/react/card.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/checkbox.tsx

@@ -2,6 +2,7 @@
 
 import { Indicator, Root } from '@radix-ui/react-checkbox';
 import { CheckIcon, MinusIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/collapsible.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Content, Root, Trigger } from '@radix-ui/react-collapsible';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/combobox.tsx

@@ -3,6 +3,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'class-variance-authority';
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import * as React from 'react';
 import { Fragment, useMemo, useState } from 'react';
 import { Button } from '@/react/button';
 import {

packages/ui/src/react/command.tsx

@@ -12,10 +12,11 @@ import {
   CommandSeparator as Separator,
 } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogContent } from '@/react/dialog';
-import { commandVariants } from '@/cva';
+import { commandVariants } from '@/cva/command';
 
 /* -----------------------------------------------------------------------------
  * Component: Command

packages/ui/src/react/context-menu.tsx

@@ -20,6 +20,7 @@ import {
 } from '@radix-ui/react-context-menu';
 import type { VariantProps } from 'class-variance-authority';
 import { CheckIcon, ChevronRightIcon, DotIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import {
@@ -28,7 +29,7 @@ import {
   contextMenuLabelVariants,
   contextMenuRadioItemVariants,
   contextMenuSubTriggerVariants,
-} from '@/cva';
+} from '@/cva/context-menu';
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuItemIndicator

packages/ui/src/react/data-table.tsx

@@ -31,6 +31,7 @@ import {
   SlidersHorizontalIcon,
 } from 'lucide-react';
 import pluralize from 'pluralize';
+import * as React from 'react';
 import { useId, useMemo, useTransition } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Badge } from '@/react/badge';

packages/ui/src/react/dialog.tsx

@@ -13,9 +13,11 @@ import {
 import type { VariantProps } from 'class-variance-authority';
 import { cx } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
+import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { buttonVariants, dialogContentVariants } from '@/cva';
+import { buttonVariants } from '@/cva/button';
+import { dialogContentVariants } from '@/cva/dialog-content';
 
 /* -----------------------------------------------------------------------------
  * Provider: DialogContext

packages/ui/src/react/drawer.tsx

@@ -13,10 +13,11 @@ import {
 import type { VariantProps } from 'class-variance-authority';
 import { cx } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
+import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { drawerContentVariants } from '@/cva/drawer-content';
-import { buttonVariants } from '@/cva';
+import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
  * Provider: DrawerContext

packages/ui/src/react/dropdown-menu.tsx

@@ -20,6 +20,7 @@ import {
 } from '@radix-ui/react-dropdown-menu';
 import type { VariantProps } from 'class-variance-authority';
 import { CheckIcon, ChevronRightIcon, DotIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import {

packages/ui/src/react/form.tsx

@@ -2,6 +2,7 @@
 
 import { Slot } from '@radix-ui/react-slot';
 import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { createContext, forwardRef, useContext, useId } from 'react';
 import type {
   ControllerProps,
@@ -12,7 +13,7 @@ import type {
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { Label } from '@/react/label';
-import { getErrorMessage } from '@/lib';
+import { getErrorMessage } from '@/lib/form';
 import { formItemVariants } from '@/cva/form';
 
 interface FormFieldContextValue<

packages/ui/src/react/hover-card.tsx

@@ -7,6 +7,7 @@ import {
   Root,
   Trigger,
 } from '@radix-ui/react-hover-card';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/input-phone-number.tsx

@@ -2,6 +2,7 @@
 
 import { useCountries } from '@codefixlabs/hooks';
 import { cx } from 'class-variance-authority';
+import * as React from 'react';
 import { forwardRef, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Popover, PopoverContent, PopoverTrigger } from '@/react/popover';
@@ -14,7 +15,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/react/command';
-import { buttonVariants } from '@/cva';
+import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
  * Component: InputPhoneNumber

packages/ui/src/react/input.tsx

@@ -3,6 +3,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import { cx } from 'class-variance-authority';
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type { IconType } from '@/react/icons';

packages/ui/src/react/label.tsx

@@ -3,6 +3,7 @@
 import { Root } from '@radix-ui/react-label';
 import type { VariantProps } from 'class-variance-authority';
 import { InfoIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/react/tooltip';

packages/ui/src/react/menubar.tsx

@@ -21,6 +21,7 @@ import {
 } from '@radix-ui/react-menubar';
 import type { VariantProps } from 'class-variance-authority';
 import { CheckIcon, ChevronRightIcon, DotIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import {

packages/ui/src/react/navigation-menu.tsx

@@ -12,6 +12,7 @@ import {
   Viewport,
 } from '@radix-ui/react-navigation-menu';
 import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { navigationMenuTriggerVariants } from '@/cva/navigation-menu';

packages/ui/src/react/popover.tsx

@@ -10,6 +10,7 @@ import {
   Trigger,
 } from '@radix-ui/react-popover';
 import { XIcon } from 'lucide-react';
+import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Button } from '@/react/button';

packages/ui/src/react/progress.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Indicator, Root } from '@radix-ui/react-progress';
+import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 

packages/ui/src/react/radio-group.tsx

@@ -2,6 +2,7 @@
 
 import { Indicator, Item, Root } from '@radix-ui/react-radio-group';
 import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { radioGroupItemVariants, radioGroupVariants } from '@/cva/radio-group';

packages/ui/src/react/scroll-area.tsx

@@ -7,10 +7,9 @@ import {
   Thumb,
   Viewport,
 } from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 import { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge'; /* -----------------------------------------------------------------------------
- * Component: ScrollAreaViewport
- * -------------------------------------------------------------------------- */
+import { twMerge } from 'tailwind-merge';
 
 /* -----------------------------------------------------------------------------
  * Component: ScrollAreaViewport