refactor: button icons

Author: thevuong

apps/docs/src/app/page.tsx

@@ -1,3 +1,30 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Switch,
+} from '@codefixlabs/ui/react';
+import { BellIcon, CheckIcon } from 'lucide-react';
+
+const notifications = [
+  {
+    description: '1 hour ago',
+    title: 'Your call has been confirmed.',
+  },
+  {
+    description: '1 hour ago',
+    title: 'You have a new message!',
+  },
+  {
+    description: '2 hours ago',
+    title: 'Your subscription is expiring soon!',
+  },
+];
+
 export default function Home(): React.JSX.Element {
   return (
     <main className="flex h-full flex-col items-center justify-center">
@@ -6,6 +33,53 @@ export default function Home(): React.JSX.Element {
         <pre className="select-all rounded-lg border px-3 py-2">
           bun storybook
         </pre>
+
+        <Card className="w-screen max-w-md">
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>You have 3 unread messages.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4">
+            <div className="flex items-center space-x-4 rounded-md border p-4">
+              <BellIcon className="h-4 w-4 shrink-0" />
+              <div className="flex-1 space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  Push Notifications
+                </p>
+                <p className="text-muted-foreground text-sm">
+                  Send notifications to device.
+                </p>
+              </div>
+              <Switch />
+            </div>
+            <div>
+              {notifications.map((notification) => (
+                <div
+                  className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+                  key={notification.title}
+                >
+                  <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium leading-none">
+                      {notification.title}
+                    </p>
+                    <p className="text-muted-foreground text-sm">
+                      {notification.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              className="w-full"
+              startIcon={<CheckIcon className="h-4 w-4" />}
+            >
+              Mark all as read
+            </Button>
+          </CardFooter>
+        </Card>
       </div>
     </main>
   );

apps/docs/src/components/ui/button/button.stories.tsx

@@ -1,17 +1,17 @@
 import { Button } from '@codefixlabs/ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import {
-  ActivitySquare,
-  ArrowUpRightSquare,
-  GanttChartSquare,
-  GitFork,
+  ActivitySquareIcon,
+  ArrowUpRightSquareIcon,
+  GanttChartSquareIcon,
+  GitForkIcon,
 } from 'lucide-react';
 
 const icons = {
-  ActivitySquare,
-  ArrowUpRightSquare,
-  GanttChartSquare,
-  GitFork,
+  ActivitySquareIcon: <ActivitySquareIcon className="h-4 w-4" />,
+  ArrowUpRightSquareIcon: <ArrowUpRightSquareIcon className="h-4 w-4" />,
+  GanttChartSquareIcon: <GanttChartSquareIcon className="h-4 w-4" />,
+  GitForkIcon: <GitForkIcon className="h-4 w-4" />,
 };
 
 const meta: Meta<typeof Button> = {
@@ -89,7 +89,7 @@ export const Basic: Story = {
 
 export const Icon: Story = {
   args: {
-    startIcon: GitFork,
+    startIcon: <GitForkIcon className="h-4 w-4" />,
   },
 };
 
@@ -166,13 +166,13 @@ export const Disabled: Story = {
 export const IconLeft: Story = {
   args: {
     ...Basic.args,
-    startIcon: GitFork,
+    startIcon: <GitForkIcon className="h-4 w-4" />,
   },
 };
 
 export const IconRight: Story = {
   args: {
     ...Basic.args,
-    endIcon: GanttChartSquare,
+    endIcon: <GanttChartSquareIcon className="h-4 w-4" />,
   },
 };

apps/docs/src/components/ui/card/card.stories.tsx

@@ -49,16 +49,15 @@ const notifications = [
 
 export const Basic: Story = {
   args: {
-    className: 'w-md',
+    className: 'max-w-md',
   },
   render: (args) => (
     <Card {...args}>
-      {}
       <CardHeader>
         <CardTitle>Notifications</CardTitle>
         <CardDescription>You have 3 unread messages.</CardDescription>
       </CardHeader>
-      <CardContent className="grid gap-4">
+      <CardContent className="grid gap-6">
         <div className="flex items-center space-x-4 rounded-md border p-4">
           <BellIcon className="h-4 w-4" />
           <div className="flex-1 space-y-1">
@@ -74,7 +73,7 @@ export const Basic: Story = {
         <div>
           {notifications.map((notification) => (
             <div
-              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+              className="mb-2 grid grid-cols-[25px_1fr] items-start pb-2 last:mb-0 last:pb-0"
               key={notification.title}
             >
               <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
@@ -91,7 +90,7 @@ export const Basic: Story = {
         </div>
       </CardContent>
       <CardFooter>
-        <Button className="w-full" startIcon={CheckIcon}>
+        <Button className="w-full" startIcon={<CheckIcon />}>
           Mark all as read
         </Button>
       </CardFooter>
@@ -105,7 +104,7 @@ export const Basic: Story = {
 
 export const WithForm: Story = {
   args: {
-    className: 'w-md',
+    className: 'max-w-md',
   },
   render: (args) => (
     <Card {...args}>

apps/docs/src/components/ui/collapsible/collapsible.stories.tsx

@@ -33,7 +33,7 @@ function CollapsibleWithHooks(): React.JSX.Element {
         <CollapsibleTrigger asChild>
           <Button
             aria-label="Toggle"
-            startIcon={ChevronsUpDownIcon}
+            startIcon={<ChevronsUpDownIcon className="h-4 w-4" />}
             variant="ghost"
           />
         </CollapsibleTrigger>

apps/docs/src/components/ui/combobox/combobox.stories.tsx

@@ -228,7 +228,11 @@ function ComboboxAssignMemberWithCustomTrigger(): React.JSX.Element {
   return (
     <Popover onOpenChange={setOpen} open={open} variant="simple">
       <PopoverTrigger asChild className="data-state-open:bg-accent">
-        <Button size="sm" startIcon={UserPlus2Icon} variant="ghost">
+        <Button
+          size="sm"
+          startIcon={<UserPlus2Icon className="h-4 w-4" />}
+          variant="ghost"
+        >
           Allocate task
         </Button>
       </PopoverTrigger>

apps/docs/src/components/ui/data-table/data-table.stories.tsx

@@ -109,7 +109,7 @@ const columns: ColumnDef<Payment>[] = [
             <Button
               aria-label="Open menu"
               className="data-state-open:bg-accent"
-              startIcon={MoreHorizontalIcon}
+              startIcon={<MoreHorizontalIcon className="h-4 w-4" />}
               variant="ghost"
             />
           </DropdownMenuTrigger>

apps/docs/src/components/ui/dropdown-menu/dropdown-menu.stories.tsx

@@ -44,7 +44,7 @@ function DropdownMenuWithHooks(
         <Button
           aria-label="Customise options"
           shape="pill"
-          startIcon={MenuIcon}
+          startIcon={<MenuIcon className="h-4 w-4" />}
           variant="outline"
         />
       </DropdownMenuTrigger>

apps/docs/src/components/ui/popover/popover.stories.tsx

@@ -29,7 +29,7 @@ export const Basic: Story = {
         <Button
           aria-label="Update dimensions"
           shape="pill"
-          startIcon={SlidersHorizontalIcon}
+          startIcon={<SlidersHorizontalIcon className="h-4 w-4" />}
           variant="outline"
         />
       </PopoverTrigger>

apps/docs/src/components/ui/tooltip/tooltip.stories.tsx

@@ -30,7 +30,7 @@ export const Basic: Story = {
         <Button
           aria-label="Customise options"
           shape="pill"
-          startIcon={PlusIcon}
+          startIcon={<PlusIcon className="h-4 w-4" />}
           variant="outline"
         />
       </TooltipTrigger>

packages/eslint-config-codefixlabs/react.js

@@ -22,6 +22,7 @@ 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

@@ -9,6 +9,6 @@ export default defineConfig((options: Options) => ({
   format: ['esm', 'cjs'],
   minify: true,
   sourcemap: true,
-  splitting: false,
+  splitting: true,
   ...options,
 }));

packages/lib/tsup.config.ts

@@ -9,6 +9,6 @@ export default defineConfig((options: Options) => ({
   format: ['esm', 'cjs'],
   minify: true,
   sourcemap: true,
-  splitting: false,
+  splitting: true,
   ...options,
 }));

packages/tailwindcss/tsup.config.ts

@@ -9,6 +9,6 @@ export default defineConfig((options: Options) => ({
   format: ['esm', 'cjs'],
   minify: true,
   sourcemap: true,
-  splitting: false,
+  splitting: true,
   ...options,
 }));

packages/ui/src/cva/button.ts

@@ -10,7 +10,7 @@ type ButtonVariant =
   | 'primary'
   | 'secondary';
 
-const sizes: {
+const btnSizes: {
   icon: boolean;
   sizes: {
     className: ClassValue;
@@ -21,6 +21,7 @@ const sizes: {
   {
     icon: true,
     sizes: [
+      // --- sm
       {
         className: 'px-2 h-8',
         size: 'sm',
@@ -31,7 +32,7 @@ const sizes: {
         size: 'sm',
         variant: ['outline'],
       },
-      // ---
+      // --- md
       {
         className: 'px-3 h-10',
         size: 'md',
@@ -42,7 +43,7 @@ const sizes: {
         size: 'md',
         variant: ['outline'],
       },
-      // ---
+      // --- lg
       {
         className: 'px-4 h-12',
         size: 'lg',
@@ -58,6 +59,7 @@ const sizes: {
   {
     icon: false,
     sizes: [
+      // --- sm
       {
         className: 'px-4 h-8',
         size: 'sm',
@@ -68,7 +70,7 @@ const sizes: {
         size: 'sm',
         variant: ['outline'],
       },
-      // ---
+      // --- md
       {
         className: 'px-5 h-10',
         size: 'md',
@@ -79,7 +81,7 @@ const sizes: {
         size: 'md',
         variant: ['outline'],
       },
-      // ---
+      // --- lg
       {
         className: 'px-6 h-12',
         size: 'lg',
@@ -95,13 +97,13 @@ const sizes: {
 ];
 
 // Flatten the array and group variants if the size is the same
-const compoundSizes = sizes.flatMap<{
+const compoundSizes = btnSizes.flatMap<{
   className: ClassValue;
   icon: boolean;
   size: ButtonSize;
   variant: ButtonVariant[];
-}>(({ icon, sizes: _sizes }) =>
-  _sizes.map(({ variant, size, className }) => ({
+}>(({ icon, sizes }) =>
+  sizes.map(({ variant, size, className }) => ({
     className,
     icon,
     size,
@@ -114,6 +116,7 @@ export const buttonVariants = cva(
     'relative select-none items-center gap-2 whitespace-nowrap text-sm font-medium transition-colors',
     'focus:ring-ring/40 focus:outline-none focus:ring-2',
     'data-disabled:cursor-not-allowed',
+    'data-disabled:ring-0',
   ],
   {
     compoundVariants: [

packages/ui/src/mail/forgot-password-template.tsx

@@ -10,7 +10,6 @@ import {
   Tailwind,
   Text,
 } from '@react-email/components';
-import * as React from 'react';
 
 export function ForgotPasswordTemplate({
   resetPasswordLink,

packages/ui/src/mail/magic-link-template.tsx

@@ -10,7 +10,6 @@ import {
   Tailwind,
   Text,
 } from '@react-email/components';
-import * as React from 'react';
 
 export function MagicLinkTemplate({
   magicLink,

packages/ui/src/mail/verify-email-template.tsx

@@ -10,7 +10,6 @@ import {
   Tailwind,
   Text,
 } from '@react-email/components';
-import * as React from 'react';
 
 export function VerifyEmailTemplate({
   verifyEmailLink,

packages/ui/src/react/accordion.tsx

@@ -8,7 +8,6 @@ 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,7 +13,6 @@ 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';