Create the button component with tailwindcss

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react'
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
+import '../src/tailwind.css'
 import theme from '../src/theme'
 
 const preview: Preview = {

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "react-select": "^5.8.0",
     "styled-system": "^5.1.5"
   },
@@ -46,6 +48,7 @@
     "@types/react-dom": "^18.2.19",
     "@types/styled-system": "^5.1.22",
     "@types/styled-system__css": "^5.0.21",
+    "autoprefixer": "^10.4.17",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
@@ -68,6 +71,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^7.6.17",
     "styled-components": "^6.1.8",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

src/components/ButtonTW.tsx

@@ -0,0 +1,86 @@
+import { VariantProps, cva } from 'class-variance-authority';
+import React from 'react';
+
+const buttonStyles = cva(
+	'flex items-center justify-center rounded-full font-medium border-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-white focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				primary: 'border-blue-600 hover:bg-blue-800 hover:border-blue-800',
+        dark: 'border-black hover:bg-gray-600 hover:border-gray-600',
+        white: '',
+				danger: 'bg-red-500 text-white focus:ring-red-500',
+			},
+      hollow: {
+        true: 'bg-transparent'
+      },
+      transparent: {
+        true: 'bg-transparent border-0'
+      },
+      size: {
+        s: "px-4 py-1 text-sm",
+        m: 'px-6 py-2 text-base',
+        l: 'px-8 py-2 text-2xl',
+        xl: 'px-16 py-3.5 text-2xl'
+      }
+		},
+		defaultVariants: {
+			variant: 'primary',
+      size: 'm',
+      hollow: false
+		},
+    compoundVariants: [
+      {
+        variant: 'primary',
+        hollow: true,
+        class: 'text-blue-600 hover:text-blue-600 hover:text-white hover:bg-blue-100 hover:border-blue-600'
+      },
+      {
+        variant: 'primary',
+        hollow: false,
+        class: 'bg-blue-600 text-white'
+      },
+      {
+        variant: 'dark',
+        hollow: true,
+        class: 'bg-transparent text-black hover:text-black hover:text-white hover:bg-gray-100 hover:border-black'
+      },
+      {
+        variant: 'dark',
+        hollow: false,
+        class: 'bg-black text-white'
+      }
+    ],
+
+	},
+);
+
+export interface Props
+	extends VariantProps<typeof buttonStyles>, React.HTMLAttributes<HTMLButtonElement> {
+    type?: 'button' | 'submit'
+    loading?: boolean
+    disabled?: boolean
+    startIcon?: React.ReactNode
+    endIcon?: React.ReactNode
+    children: React.ReactNode
+  }
+
+const Button = ({ variant, hollow, disabled = false, size, type = "button", loading = false, startIcon, endIcon, children, ...props }: Props) => {
+	return (
+		<button className={buttonStyles({ variant, size, hollow })} {...props} disabled={disabled} type={type}>
+      {startIcon && (
+        <span className="mr-2">
+          {startIcon}
+        </span>
+      )}
+      {children}
+      {endIcon && (
+        <span className="ml-2">
+          {endIcon}
+        </span>
+      )}
+    </button>
+	);
+}
+
+export default Button

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

stories/ButtonTW.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { BsTwitter } from 'react-icons/bs'
+import Box from '../src/components/Box'
+import ButtonTW from '../src/components/ButtonTW'
+
+const meta = {
+  title: 'Components/ButtonTW',
+  component: ButtonTW,
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: { action: 'clicked' },
+    hollow: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ButtonTW>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    children: 'Button',
+  },
+}
+
+export const DisabledButton: Story = {
+  args: {
+    children: 'Disabled Button',
+    disabled: true,
+  },
+}
+
+export const Dark: Story = {
+  args: {
+    variant: 'dark',
+    children: 'Button',
+    size: 's',
+  },
+}
+
+export const DarkHollow: Story = {
+  args: {
+    variant: 'dark',
+    hollow: true,
+    children: 'Button',
+    size: 'l',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    children: 'Button',
+    endIcon: <BsTwitter />,
+  },
+}
+
+export const Hollow: Story = {
+  args: {
+    hollow: true,
+    children: 'Button',
+  },
+}
+
+export const LongButton = () => {
+  return (
+    <Box width="300px">
+      <ButtonTW>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ButtonTW>
+    </Box>
+  )
+}

tailwind.config.js

@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
+
+const primaryColor = '#0588cb'
+
+module.exports = {
+	content: ['./src/**/*.{js,ts,jsx,tsx}', './stories/**/*.{js,ts,jsx,tsx}'],
+	theme: {
+		extend: {
+			colors: {
+        ...colors,
+				blue: {
+          '100': '#e7f5ff',
+          '200': '#c9e8ff',
+          '300': '#8dd5f8',
+          '400': '#5db8fe',
+          '500': '#37a6ed',
+          '600': '#0588cb',
+          '700': '#0f77b8',
+          '800': '#056aa6',
+          '900': '#005f9c',
+          '1000': '#005a99'
+        },
+
+			},
+		},
+	},
+
+	// plugins: [
+	// 	require('@tailwindcss/typography'),
+	// 	require('@tailwindcss/aspect-ratio'),
+	// 	require('@tailwindcss/forms'),
+	// ],
+};