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,96 @@
+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,73 @@
+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,34 @@
+/** @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'),
+  // ],
+}