"paths": {
      "@ui/*": ["./src/components/ui/*"]
    }

yarn add tailwindcss cva@npm:class-variance-authority storybook @headlessui/react

src/
└── components/
    └── ui/
        └── Button/
            ├── index.tsx
            ├── button.test.tsx
            └── button.stories.tsx
     └── template/
     └── layout/

default function Button() {
  return (
    <button>Button</button>
  )
}

import React from 'react';


// Define the ButtonProps interface
interface ButtonProps {
  intent?: 'primary' | 'secondary' | 'default';
  size?: 'small' | 'medium' | 'large';
  roundness?: 'square' | 'round' | 'pill';
}

// Create the Button component
const Button: React.FC<ButtonProps> = ({
  intent = 'default',
  size = 'medium',
  roundness = 'round',
  children,
}) => {
  // Define the mapping of variant styles
  const variantStyles: { [key: string]: string } = {
    primary: 'bg-green-500 hover:bg-green-600',
    secondary: 'bg-red-500 hover:bg-red-600',
    default: 'bg-gray-500 hover:bg-gray-600',
  };

  const sizeStyles: { [key: string]: string } = {
    small: 'text-sm py-1 px-2',
    medium: 'text-base py-2 px-4',
    large: 'text-lg py-4 px-8',
  };

  const roundnessStyles: { [key: string]: string } = {
    square: 'rounded-none',
    round: 'rounded-md',
    pill: 'rounded-full',
  };

  const getButtonStyle = (): string => {
    const intentStyle = variantStyles[intent] || variantStyles['default'];
    const sizeStyle = sizeStyles[size] || sizeStyles['medium'];
    const roundnessStyle = roundnessStyles[roundness] || roundnessStyles['round'];

    return `h-fit text-white uppercase transition-colors duration-150 ${intentStyle} ${sizeStyle} ${roundnessStyle}`;
  };

  return (
    <button
      className={getButtonStyle()}
    >
      {children}
    </button>
  );
};

export default Button;

import { cva } from "class-variance-authority";
import type { FC } from 'react';

const ButtonVariants = cva(
    /* button base style */
    "h-fit text-white uppercase transition-colors duration-150",
    {
        variants: {
            /* button colors */
            intent: {
                primary:
                    "bg-green-500 hover:bg-green-600",
                secondary:
                    "bg-red-500 hover:bg-red-600",
                default:
                    "bg-gray-500 hover:bg-gray-600",
            },

            /* button sizes */
            size: {
                small: ["text-sm", "py-1", "px-2"],
                medium: ["text-base", "py-2", "px-4"],
                large: ["text-lg", "py-4", "px-8"],
            },

            /* button roundness */
            roundness: {
                square: "rounded-none",
                round: "rounded-md",
                pill: "rounded-full",
            },
        },

        // default parameter
        defaultVariants: {
            intent: "default",
            size: "medium",
            roundness: "round"
        },
    }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
  VariantProps<typeof ButtonVariants> {
}

const Button: FC<ButtonProps> = (props) => {
  const { size, variant, className } = props;
  return (
    <button type='button' {...props} className={buttonStyles({ variant, size, className })} />
  );
};

npx storybook@latest init

// Button.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import Button from '.';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'UI/Button'
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    children: 'تست'
  },
};

yarn storybook

import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';

import Button from '.'; // Replace './Button' with the correct path to your Button component

describe('Button Component', () => {
  it('renders with default variant and size', () => {
    render(<Button>Click Me</Button>);

    const buttonElement = screen.getByRole('button');
    expect(buttonElement).toHaveClass('bg-gray-500');
    expect(buttonElement).toHaveClass('text-base');
    expect(buttonElement).toHaveClass('rounded-md');
    expect(buttonElement).toHaveTextContent('Click Me');
  });

  it('applies the correct variant and size styles', () => {
    render(<Button variant='text' size='small'>Primary Button</Button>);

    const buttonElement = screen.getByRole('button');
    expect(buttonElement).toHaveClass('bg-green-500');
    expect(buttonElement).toHaveClass('text-lg');
    expect(buttonElement).toHaveClass('rounded-full');
    expect(buttonElement).toHaveTextContent('Primary Button');
  });

  it('calls the onClick callback when clicked', () => {
    const onClickMock = jest.fn();
    render(<Button onClick={onClickMock}>Click Me</Button>);

    const buttonElement = screen.getByRole('button');
    fireEvent.click(buttonElement);

    expect(onClickMock).toHaveBeenCalledTimes(1);
  });
});

import React from 'react'
import styles from 'banner.module.css'

function Banner(){
    return (
		 <div className="bg-green-100 border-t border-b border-green-500 text-green-700 px-4 py-3" role="alert">
        		<p className="font-bold">Informational message</p>
        		<p className="text-sm">Some additional text to explain said message.</p>
    	     </div>
	)
}

import React from 'react'
import styles from 'banner.module.css'

function Banner(){
    return (
		 <div className={styles.bannerContainer} role="alert">
        		<p className={styles.bannerTitle}>Informational message</p>
        		<p className={styles.bannerDescription}>Some additional text to explain said message.</p>
    	     </div>
	)
}

.bannerContainer {
    @apply bg-green-100 border-t border-b border-green-500 text-green-700 px-4 py-3
}

.bannerTitle {
    @apply font-bold
}
.bannerDescription {
    @apply text-sm
}