refactor: button component

.vscode/settings.json

@@ -4,5 +4,12 @@
     "source.organizeImports.biome": "explicit",
     "quickfix.biome": "explicit"
   },
-  "editor.defaultFormatter": "biomejs.biome"
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

package.json

@@ -103,6 +103,7 @@
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.10.0",
     "axios": "1.7.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "electron-updater": "6.2.1",
@@ -113,6 +114,7 @@
     "react-dom": "18.3.1",
     "react-final-form": "6.5.9",
     "react-router-dom": "6.24.1",
+    "tailwind-merge": "^2.3.0",
     "ts-loader": "9.5.1",
     "typescript": "5.5.3"
   },

src/components/buttons/Button.test.tsx

@@ -1,34 +1,40 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { shell } from 'electron';
-import { type Link, Size } from '../../types';
+import type { Link } from '../../types';
 import { Button, type IButton } from './Button';
 
 describe('components/buttons/Button.tsx', () => {
   const openExternalMock = jest.spyOn(shell, 'openExternal');
 
   const props: IButton = {
-    name: 'Button',
     label: 'button',
-    size: Size.MEDIUM,
   };
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('should render without icon', () => {
-    const tree = render(<Button {...props} />);
+    const tree = render(<Button {...props}>Button</Button>);
     expect(tree).toMatchSnapshot();
   });
 
   it('should render with icon', () => {
-    const tree = render(<Button {...props} icon={MarkGithubIcon} />);
+    const tree = render(
+      <Button {...props} icon={{ icon: MarkGithubIcon }}>
+        Button
+      </Button>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('should render with url', () => {
-    render(<Button {...props} url={'https://github.com' as Link} />);
+    render(
+      <Button {...props} url={'https://github.com' as Link} variant="link">
+        Button
+      </Button>,
+    );
 
     const buttonElement = screen.getByLabelText('button');