Update button imports to use button-variants

Author: thevuong

package.json

@@ -7,7 +7,6 @@
   ],
   "scripts": {
     "build": "turbo run build",
-    "build:packages": "turbo run build --force --filter='./packages/*'",
     "changeset": "changeset",
     "clean": "turbo run clean && rm -rf .turbo node_modules",
     "dev": "turbo run dev",
@@ -21,7 +20,7 @@
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
     "release": "turbo run build --filter=docs^... && changeset publish",
-    "start": "turbo run start",
+    "start": "turbo run start --force",
     "storybook": "turbo run storybook",
     "version-packages": "changeset version"
   },

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.90
+
+### Patch Changes
+
+- Update button imports to use button-variants
+
 ## 0.1.89
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/src/index.tsx

@@ -2,7 +2,7 @@
 import '@/styles.css';
 
 // Both Server and Client
-export * from '@/server/button';
+export * from '@/server/button-variants';
 export * from '@/server/cn';
 export * from '@/server/toast';
 

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

@@ -21,7 +21,7 @@ import {
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
-import { buttonVariants } from '@/server/button';
+import { buttonVariants } from '@/server/button-variants';
 import { cn } from '@/server/cn';
 import type { ButtonProps } from '@/react/button';
 

packages/ui/src/react/button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Loader2Icon } from 'lucide-react';
 import type { VariantProps } from 'class-variance-authority';
-import { buttonVariants } from '@/server/button';
+import { buttonVariants } from '@/server/button-variants';
 import { cn } from '@/server/cn';
 
 /* -----------------------------------------------------------------------------

packages/ui/src/react/calendar.tsx

@@ -28,7 +28,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/react/popover';
 import { Label } from '@/react/label';
 import { Input } from '@/react/input';
 import type { FormControl } from '@/react/form';
-import { buttonVariants } from '@/server/button';
+import { buttonVariants } from '@/server/button-variants';
 import {
   createDate,
   dateRegex,

packages/ui/src/react/combobox.tsx

@@ -1,7 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
 import * as React from 'react';
-import { Button } from '@/react/button';
 import type { CommandItemProps, CommandProps } from '@/react/command';
 import {
   Command,
@@ -15,6 +14,7 @@ import {
 import type { FormControl } from '@/react/form';
 import { Popover, PopoverContent, PopoverTrigger } from '@/react/popover';
 import { cn } from '@/server/cn';
+import { buttonVariants } from '@/server/button-variants';
 
 /* -----------------------------------------------------------------------------
  * Utils
@@ -151,20 +151,20 @@ export function Combobox({
   return (
     <Popover onOpenChange={setOpen} open={open} variant="simple">
       <Trigger>
-        <PopoverTrigger asChild>
-          <Button
-            block={block}
-            className={classNameTrigger}
-            disabled={disabled}
-            endIcon={<ChevronsUpDownIcon size={14} />}
-            justify="between"
-            startIcon={icon}
-            variant="outline"
-          >
-            {selected?.value
-              ? selected.label
-              : placeholder ?? 'Select an option'}
-          </Button>
+        <PopoverTrigger
+          className={cn(
+            buttonVariants({
+              block,
+              variant: 'outline',
+              justify: 'between',
+            }),
+            classNameTrigger,
+          )}
+          disabled={disabled}
+        >
+          {icon}
+          {selected?.value ? selected.label : placeholder ?? 'Select an option'}
+          <ChevronsUpDownIcon size={14} />
         </PopoverTrigger>
       </Trigger>
       <PopoverContent align="start">

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

@@ -2,6 +2,7 @@ import type {
   Column,
   ColumnDef,
   RowData,
+  SortDirection,
   Table as TableType,
   TableOptions,
 } from '@tanstack/react-table';
@@ -72,6 +73,7 @@ import {
   TableRow,
 } from '@/react/table';
 import { cn } from '@/server/cn';
+import { buttonVariants } from '@/server/button-variants';
 
 /* -----------------------------------------------------------------------------
  * Declarations
@@ -92,6 +94,20 @@ declare module '@tanstack/table-core' {
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
+function Icon({
+  isSorted,
+}: {
+  isSorted: false | SortDirection;
+}): React.JSX.Element {
+  if (isSorted === 'desc') {
+    return <ArrowDownIcon size={16} />;
+  } else if (isSorted === 'asc') {
+    return <ArrowUpIcon size={16} />;
+  }
+
+  return <ChevronsUpDownIcon size={16} />;
+}
+
 export interface DataTableColumnHeaderProps<TData, TValue> {
   column: Column<TData, TValue>;
   title: string;
@@ -101,29 +117,19 @@ export function DataTableColumnHeader<TData, TValue>({
   column,
   title,
 }: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
-  const endIcon = (): React.JSX.Element => {
-    const isSorted = column.getIsSorted();
-
-    if (isSorted === 'desc') {
-      return <ArrowDownIcon size={16} />;
-    } else if (isSorted === 'asc') {
-      return <ArrowUpIcon size={16} />;
-    }
-
-    return <ChevronsUpDownIcon size={16} />;
-  };
-
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          className="data-state-open:bg-accent -ml-3.5 px-3.5"
-          endIcon={endIcon()}
-          size="sm"
-          variant="ghost"
-        >
-          {title}
-        </Button>
+      <DropdownMenuTrigger
+        className={cn(
+          buttonVariants({
+            size: 'sm',
+            variant: 'ghost',
+          }),
+          'data-state-open:bg-accent -ml-3.5 px-3.5',
+        )}
+      >
+        {title}
+        <Icon isSorted={column.getIsSorted()} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="start">

packages/ui/src/react/dialog.tsx

@@ -20,7 +20,7 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import * as React from 'react';
-import { buttonVariants } from '@/server/button';
+import { buttonVariants } from '@/server/button-variants';
 import { cn } from '@/server/cn';
 import type { ButtonProps } from '@/react/button';