From be22e756623f1e5a16ed661c48ceda4a31b04a55 Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Sat, 14 Dec 2024 08:09:22 +0700 Subject: [PATCH] fix: merge two button components into one (#60) --- src/components/button.tsx | 99 ------------------- src/components/layout/top-nav.tsx | 4 +- src/components/password-input.tsx | 2 +- src/components/profile-dropdown.tsx | 4 +- src/components/theme-switch.tsx | 4 +- src/features/apps/index.tsx | 2 +- .../components/forgot-password-form.tsx | 4 +- src/features/auth/otp/components/otp-form.tsx | 4 +- .../sign-in/components/user-auth-form.tsx | 14 ++- .../auth/sign-up/components/sign-up-form.tsx | 14 ++- src/features/chats/index.tsx | 9 +- src/features/dashboard/index.tsx | 2 +- src/features/errors/forbidden.tsx | 2 +- src/features/errors/general-error.tsx | 2 +- src/features/errors/maintenance-error.tsx | 2 +- src/features/errors/not-found-error.tsx | 2 +- src/features/errors/unauthorized-error.tsx | 2 +- .../settings/account/account-form.tsx | 2 +- .../settings/appearance/appearance-form.tsx | 2 +- .../settings/components/sidebar-nav.tsx | 2 +- .../settings/display/display-form.tsx | 2 +- .../notifications/notifications-form.tsx | 2 +- .../settings/profile/profile-form.tsx | 2 +- .../components/data-table-column-header.tsx | 2 +- .../components/data-table-faceted-filter.tsx | 2 +- .../components/data-table-pagination.tsx | 2 +- .../components/data-table-row-actions.tsx | 2 +- .../tasks/components/data-table-toolbar.tsx | 2 +- .../components/data-table-view-options.tsx | 2 +- src/features/users/index.tsx | 2 +- 30 files changed, 46 insertions(+), 152 deletions(-) delete mode 100644 src/components/button.tsx diff --git a/src/components/button.tsx b/src/components/button.tsx deleted file mode 100644 index 44b73eae..00000000 --- a/src/components/button.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react' -import { Slot } from '@radix-ui/react-slot' -import { IconLoader2 } from '@tabler/icons-react' -import { cva, type VariantProps } from 'class-variance-authority' -import { cn } from '@/lib/utils' - -const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', - { - variants: { - variant: { - default: - 'bg-primary text-primary-foreground shadow hover:bg-primary/90', - destructive: - 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', - outline: - 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', - secondary: - 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', - }, - size: { - default: 'h-9 px-4 py-2', - sm: 'h-8 rounded-md px-3 text-xs', - lg: 'h-10 rounded-md px-8', - icon: 'h-9 w-9', - }, - }, - defaultVariants: { - variant: 'default', - size: 'default', - }, - } -) - -interface ButtonPropsBase - extends React.ButtonHTMLAttributes, - VariantProps {} - -type ButtonProps = ButtonPropsBase & - ( - | { asChild: true } - | { - asChild?: false - loading?: boolean - leftSection?: React.JSX.Element - rightSection?: React.JSX.Element - } - ) - -const Button = React.forwardRef( - ({ className, variant, size, children, ...props }, ref) => { - const { asChild, ...rest } = props - if (asChild) { - return ( - - {children} - - ) - } - - const { - loading = false, - leftSection, - rightSection, - disabled, - ...otherProps - } = props - - return ( - - ) - } -) -Button.displayName = 'Button' - -// eslint-disable-next-line react-refresh/only-export-components -export { Button, buttonVariants } diff --git a/src/components/layout/top-nav.tsx b/src/components/layout/top-nav.tsx index 2c86c792..29d73162 100644 --- a/src/components/layout/top-nav.tsx +++ b/src/components/layout/top-nav.tsx @@ -1,13 +1,13 @@ import { Link } from '@tanstack/react-router' import { IconMenu } from '@tabler/icons-react' import { cn } from '@/lib/utils' +import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' -import { Button } from '@/components/button' interface TopNavProps extends React.HTMLAttributes { links: { @@ -22,7 +22,7 @@ export function TopNav({ className, links, ...props }: TopNavProps) { return ( <>
- +
diff --git a/src/features/auth/otp/components/otp-form.tsx b/src/features/auth/otp/components/otp-form.tsx index 2231d3a0..11aa1b51 100644 --- a/src/features/auth/otp/components/otp-form.tsx +++ b/src/features/auth/otp/components/otp-form.tsx @@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod' import { useNavigate } from '@tanstack/react-router' import { cn } from '@/lib/utils' import { toast } from '@/hooks/use-toast' +import { Button } from '@/components/ui/button' import { Form, FormControl, @@ -14,7 +15,6 @@ import { } from '@/components/ui/form' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' -import { Button } from '@/components/button' import { PinInput, PinInputField } from '@/components/pin-input' type OtpFormProps = HTMLAttributes @@ -84,7 +84,7 @@ export function OtpForm({ className, ...props }: OtpFormProps) { )} /> - diff --git a/src/features/auth/sign-in/components/user-auth-form.tsx b/src/features/auth/sign-in/components/user-auth-form.tsx index 37df5bc0..ae7139ae 100644 --- a/src/features/auth/sign-in/components/user-auth-form.tsx +++ b/src/features/auth/sign-in/components/user-auth-form.tsx @@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod' import { Link } from '@tanstack/react-router' import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react' import { cn } from '@/lib/utils' +import { Button } from '@/components/ui/button' import { Form, FormControl, @@ -14,7 +15,6 @@ import { FormMessage, } from '@/components/ui/form' import { Input } from '@/components/ui/input' -import { Button } from '@/components/button' import { PasswordInput } from '@/components/password-input' type UserAuthFormProps = HTMLAttributes @@ -94,7 +94,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) { )} /> - @@ -114,19 +114,17 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) { variant='outline' className='w-full' type='button' - loading={isLoading} - leftSection={} + disabled={isLoading} > - GitHub + GitHub diff --git a/src/features/auth/sign-up/components/sign-up-form.tsx b/src/features/auth/sign-up/components/sign-up-form.tsx index 9a17e2a0..26387fe5 100644 --- a/src/features/auth/sign-up/components/sign-up-form.tsx +++ b/src/features/auth/sign-up/components/sign-up-form.tsx @@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react' import { cn } from '@/lib/utils' +import { Button } from '@/components/ui/button' import { Form, FormControl, @@ -13,7 +14,6 @@ import { FormMessage, } from '@/components/ui/form' import { Input } from '@/components/ui/input' -import { Button } from '@/components/button' import { PasswordInput } from '@/components/password-input' type SignUpFormProps = HTMLAttributes @@ -105,7 +105,7 @@ export function SignUpForm({ className, ...props }: SignUpFormProps) { )} /> - @@ -125,19 +125,17 @@ export function SignUpForm({ className, ...props }: SignUpFormProps) { variant='outline' className='w-full' type='button' - loading={isLoading} - leftSection={} + disabled={isLoading} > - GitHub + GitHub diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx index 2dd3aaa2..e34c4ba3 100644 --- a/src/features/chats/index.tsx +++ b/src/features/chats/index.tsx @@ -16,9 +16,9 @@ import { } from '@tabler/icons-react' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Button } from '@/components/ui/button' import { ScrollArea } from '@/components/ui/scroll-area' import { Separator } from '@/components/ui/separator' -import { Button } from '@/components/button' import { Header } from '@/components/layout/header' import { Main } from '@/components/layout/main' import { ProfileDropdown } from '@/components/profile-dropdown' @@ -291,11 +291,8 @@ export default function Chats() { - diff --git a/src/features/dashboard/index.tsx b/src/features/dashboard/index.tsx index c5b65bdc..5c98c327 100644 --- a/src/features/dashboard/index.tsx +++ b/src/features/dashboard/index.tsx @@ -1,3 +1,4 @@ +import { Button } from '@/components/ui/button' import { Card, CardContent, @@ -6,7 +7,6 @@ import { CardTitle, } from '@/components/ui/card' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Button } from '@/components/button' import { Header } from '@/components/layout/header' import { Main } from '@/components/layout/main' import { TopNav } from '@/components/layout/top-nav' diff --git a/src/features/errors/forbidden.tsx b/src/features/errors/forbidden.tsx index eb8f9dee..5a2c4a65 100644 --- a/src/features/errors/forbidden.tsx +++ b/src/features/errors/forbidden.tsx @@ -1,5 +1,5 @@ import { useNavigate, useRouter } from '@tanstack/react-router' -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' export default function ForbiddenError() { const navigate = useNavigate() diff --git a/src/features/errors/general-error.tsx b/src/features/errors/general-error.tsx index aa656e52..aadbb658 100644 --- a/src/features/errors/general-error.tsx +++ b/src/features/errors/general-error.tsx @@ -1,6 +1,6 @@ import { useNavigate, useRouter } from '@tanstack/react-router' import { cn } from '@/lib/utils' -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' interface GeneralErrorProps extends React.HTMLAttributes { minimal?: boolean diff --git a/src/features/errors/maintenance-error.tsx b/src/features/errors/maintenance-error.tsx index 07208b5c..9c1dbe1e 100644 --- a/src/features/errors/maintenance-error.tsx +++ b/src/features/errors/maintenance-error.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' export default function MaintenanceError() { return ( diff --git a/src/features/errors/not-found-error.tsx b/src/features/errors/not-found-error.tsx index d6a32aac..dc55a5df 100644 --- a/src/features/errors/not-found-error.tsx +++ b/src/features/errors/not-found-error.tsx @@ -1,5 +1,5 @@ import { useNavigate, useRouter } from '@tanstack/react-router' -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' export default function NotFoundError() { const navigate = useNavigate() diff --git a/src/features/errors/unauthorized-error.tsx b/src/features/errors/unauthorized-error.tsx index ea9592aa..c4fb6f1f 100644 --- a/src/features/errors/unauthorized-error.tsx +++ b/src/features/errors/unauthorized-error.tsx @@ -1,5 +1,5 @@ import { useNavigate, useRouter } from '@tanstack/react-router' -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' export default function UnauthorisedError() { const navigate = useNavigate() diff --git a/src/features/settings/account/account-form.tsx b/src/features/settings/account/account-form.tsx index 1b0f4aa1..29e63419 100644 --- a/src/features/settings/account/account-form.tsx +++ b/src/features/settings/account/account-form.tsx @@ -5,6 +5,7 @@ import { CalendarIcon, CaretSortIcon, CheckIcon } from '@radix-ui/react-icons' import { zodResolver } from '@hookform/resolvers/zod' import { cn } from '@/lib/utils' import { toast } from '@/hooks/use-toast' +import { Button } from '@/components/ui/button' import { Calendar } from '@/components/ui/calendar' import { Command, @@ -29,7 +30,6 @@ import { PopoverContent, PopoverTrigger, } from '@/components/ui/popover' -import { Button } from '@/components/button' const languages = [ { label: 'English', value: 'en' }, diff --git a/src/features/settings/appearance/appearance-form.tsx b/src/features/settings/appearance/appearance-form.tsx index 8de582de..fd170f66 100644 --- a/src/features/settings/appearance/appearance-form.tsx +++ b/src/features/settings/appearance/appearance-form.tsx @@ -4,6 +4,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons' import { zodResolver } from '@hookform/resolvers/zod' import { cn } from '@/lib/utils' import { toast } from '@/hooks/use-toast' +import { Button, buttonVariants } from '@/components/ui/button' import { Form, FormControl, @@ -14,7 +15,6 @@ import { FormMessage, } from '@/components/ui/form' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' -import { Button, buttonVariants } from '@/components/button' const appearanceFormSchema = z.object({ theme: z.enum(['light', 'dark'], { diff --git a/src/features/settings/components/sidebar-nav.tsx b/src/features/settings/components/sidebar-nav.tsx index 76d3f8c8..cf724b27 100644 --- a/src/features/settings/components/sidebar-nav.tsx +++ b/src/features/settings/components/sidebar-nav.tsx @@ -2,6 +2,7 @@ import { useState, type JSX } from 'react' import { useLocation, useNavigate } from '@tanstack/react-router' import { Link } from '@tanstack/react-router' import { cn } from '@/lib/utils' +import { buttonVariants } from '@/components/ui/button' import { ScrollArea } from '@/components/ui/scroll-area' import { Select, @@ -10,7 +11,6 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' -import { buttonVariants } from '@/components/button' interface SidebarNavProps extends React.HTMLAttributes { items: { diff --git a/src/features/settings/display/display-form.tsx b/src/features/settings/display/display-form.tsx index 3c61e0ce..bc509b69 100644 --- a/src/features/settings/display/display-form.tsx +++ b/src/features/settings/display/display-form.tsx @@ -2,6 +2,7 @@ import { z } from 'zod' import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { toast } from '@/hooks/use-toast' +import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Form, @@ -12,7 +13,6 @@ import { FormLabel, FormMessage, } from '@/components/ui/form' -import { Button } from '@/components/button' const items = [ { diff --git a/src/features/settings/notifications/notifications-form.tsx b/src/features/settings/notifications/notifications-form.tsx index f342acd2..010cdbb6 100644 --- a/src/features/settings/notifications/notifications-form.tsx +++ b/src/features/settings/notifications/notifications-form.tsx @@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { Link } from '@tanstack/react-router' import { toast } from '@/hooks/use-toast' +import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Form, @@ -15,7 +16,6 @@ import { } from '@/components/ui/form' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { Switch } from '@/components/ui/switch' -import { Button } from '@/components/button' const notificationsFormSchema = z.object({ type: z.enum(['all', 'mentions', 'none'], { diff --git a/src/features/settings/profile/profile-form.tsx b/src/features/settings/profile/profile-form.tsx index f53331ec..1a97e283 100644 --- a/src/features/settings/profile/profile-form.tsx +++ b/src/features/settings/profile/profile-form.tsx @@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod' import { Link } from '@tanstack/react-router' import { cn } from '@/lib/utils' import { toast } from '@/hooks/use-toast' +import { Button } from '@/components/ui/button' import { Form, FormControl, @@ -22,7 +23,6 @@ import { SelectValue, } from '@/components/ui/select' import { Textarea } from '@/components/ui/textarea' -import { Button } from '@/components/button' const profileFormSchema = z.object({ username: z diff --git a/src/features/tasks/components/data-table-column-header.tsx b/src/features/tasks/components/data-table-column-header.tsx index 81535aa6..141e9560 100644 --- a/src/features/tasks/components/data-table-column-header.tsx +++ b/src/features/tasks/components/data-table-column-header.tsx @@ -6,6 +6,7 @@ import { } from '@radix-ui/react-icons' import { Column } from '@tanstack/react-table' import { cn } from '@/lib/utils' +import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, @@ -13,7 +14,6 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' -import { Button } from '@/components/button' interface DataTableColumnHeaderProps extends React.HTMLAttributes { diff --git a/src/features/tasks/components/data-table-faceted-filter.tsx b/src/features/tasks/components/data-table-faceted-filter.tsx index 49ec820a..17fa915d 100644 --- a/src/features/tasks/components/data-table-faceted-filter.tsx +++ b/src/features/tasks/components/data-table-faceted-filter.tsx @@ -3,6 +3,7 @@ import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons' import { Column } from '@tanstack/react-table' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' +import { Button } from '@/components/ui/button' import { Command, CommandEmpty, @@ -18,7 +19,6 @@ import { PopoverTrigger, } from '@/components/ui/popover' import { Separator } from '@/components/ui/separator' -import { Button } from '@/components/button' interface DataTableFacetedFilterProps { column?: Column diff --git a/src/features/tasks/components/data-table-pagination.tsx b/src/features/tasks/components/data-table-pagination.tsx index 3e68aca7..32dd8be6 100644 --- a/src/features/tasks/components/data-table-pagination.tsx +++ b/src/features/tasks/components/data-table-pagination.tsx @@ -5,6 +5,7 @@ import { DoubleArrowRightIcon, } from '@radix-ui/react-icons' import { Table } from '@tanstack/react-table' +import { Button } from '@/components/ui/button' import { Select, SelectContent, @@ -12,7 +13,6 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' -import { Button } from '@/components/button' interface DataTablePaginationProps { table: Table diff --git a/src/features/tasks/components/data-table-row-actions.tsx b/src/features/tasks/components/data-table-row-actions.tsx index 84be6feb..d0287d8b 100644 --- a/src/features/tasks/components/data-table-row-actions.tsx +++ b/src/features/tasks/components/data-table-row-actions.tsx @@ -1,6 +1,7 @@ import { DotsHorizontalIcon } from '@radix-ui/react-icons' import { Row } from '@tanstack/react-table' import { IconTrash } from '@tabler/icons-react' +import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, @@ -14,7 +15,6 @@ import { DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' -import { Button } from '@/components/button' import { useTasksContext } from '../context/tasks-context' import { labels } from '../data/data' import { taskSchema } from '../data/schema' diff --git a/src/features/tasks/components/data-table-toolbar.tsx b/src/features/tasks/components/data-table-toolbar.tsx index 5a5915c9..0920fa45 100644 --- a/src/features/tasks/components/data-table-toolbar.tsx +++ b/src/features/tasks/components/data-table-toolbar.tsx @@ -1,7 +1,7 @@ import { Cross2Icon } from '@radix-ui/react-icons' import { Table } from '@tanstack/react-table' +import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' -import { Button } from '@/components/button' import { DataTableViewOptions } from '../components/data-table-view-options' import { priorities, statuses } from '../data/data' import { DataTableFacetedFilter } from './data-table-faceted-filter' diff --git a/src/features/tasks/components/data-table-view-options.tsx b/src/features/tasks/components/data-table-view-options.tsx index 79f0e8b5..330f945f 100644 --- a/src/features/tasks/components/data-table-view-options.tsx +++ b/src/features/tasks/components/data-table-view-options.tsx @@ -1,6 +1,7 @@ import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu' import { MixerHorizontalIcon } from '@radix-ui/react-icons' import { Table } from '@tanstack/react-table' +import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuCheckboxItem, @@ -8,7 +9,6 @@ import { DropdownMenuLabel, DropdownMenuSeparator, } from '@/components/ui/dropdown-menu' -import { Button } from '@/components/button' interface DataTableViewOptionsProps { table: Table diff --git a/src/features/users/index.tsx b/src/features/users/index.tsx index a0cc4477..9059ebe1 100644 --- a/src/features/users/index.tsx +++ b/src/features/users/index.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' import { IconMailPlus, IconUserPlus } from '@tabler/icons-react' import useDialogState from '@/hooks/use-dialog-state' -import { Button } from '@/components/button' +import { Button } from '@/components/ui/button' import { Header } from '@/components/layout/header' import { Main } from '@/components/layout/main' import { ProfileDropdown } from '@/components/profile-dropdown'