[WEB-4736] dev: propel button

packages/propel/package.json

@@ -19,6 +19,7 @@
     "./accordion": "./dist/accordion/index.js",
     "./animated-counter": "./dist/animated-counter/index.js",
     "./avatar": "./dist/avatar/index.js",
+    "./button": "./dist/button/index.js",
     "./calendar": "./dist/calendar/index.js",
     "./card": "./dist/card/index.js",
     "./charts/*": "./dist/charts/*/index.js",

packages/propel/src/button/button.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button, EButtonVariant, EButtonSize } from "./button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: Object.values(EButtonVariant),
+    },
+    size: {
+      control: "select",
+      options: Object.values(EButtonSize),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: EButtonVariant.PRIMARY,
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: EButtonVariant.SECONDARY,
+    children: "Secondary Button",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: EButtonVariant.OUTLINE,
+    children: "Outline Button",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: EButtonVariant.GHOST,
+    children: "Ghost Button",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: EButtonVariant.DESTRUCTIVE,
+    children: "Destructive Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: EButtonSize.SM,
+    children: "Small Button",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: EButtonSize.MD,
+    children: "Medium Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: EButtonSize.LG,
+    children: "Large Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Button variant={EButtonVariant.PRIMARY}>Primary</Button>
+        <Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
+        <Button variant={EButtonVariant.OUTLINE}>Outline</Button>
+        <Button variant={EButtonVariant.GHOST}>Ghost</Button>
+        <Button variant={EButtonVariant.DESTRUCTIVE}>Destructive</Button>
+      </div>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Button size={EButtonSize.SM}>Small</Button>
+        <Button size={EButtonSize.MD}>Medium</Button>
+        <Button size={EButtonSize.LG}>Large</Button>
+      </div>
+    </div>
+  ),
+};

packages/propel/src/button/button.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export enum EButtonVariant {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  OUTLINE = "outline",
+  GHOST = "ghost",
+  DESTRUCTIVE = "destructive",
+}
+
+export enum EButtonSize {
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+}
+
+export type TButtonVariant =
+  | EButtonVariant.PRIMARY
+  | EButtonVariant.SECONDARY
+  | EButtonVariant.OUTLINE
+  | EButtonVariant.GHOST
+  | EButtonVariant.DESTRUCTIVE;
+export type TButtonSize = EButtonSize.SM | EButtonSize.MD | EButtonSize.LG;
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: TButtonVariant;
+  size?: TButtonSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const buttonVariants = {
+  [EButtonVariant.PRIMARY]: "bg-custom-primary-100 text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
+  [EButtonVariant.SECONDARY]:
+    "bg-custom-background-100 text-custom-text-200 border border-custom-border-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
+  [EButtonVariant.OUTLINE]:
+    "border border-custom-primary-100 text-custom-primary-100 bg-transparent hover:bg-custom-primary-100/10 focus:bg-custom-primary-100/20",
+  [EButtonVariant.GHOST]: "text-custom-text-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
+  [EButtonVariant.DESTRUCTIVE]: "bg-red-500 text-white hover:bg-red-600 focus:bg-red-600",
+};
+
+const buttonSizes = {
+  [EButtonSize.SM]: "px-3 py-1.5 text-xs font-medium",
+  [EButtonSize.MD]: "px-4 py-2 text-sm font-medium",
+  [EButtonSize.LG]: "px-6 py-2.5 text-base font-medium",
+};
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = EButtonVariant.PRIMARY, size = EButtonSize.MD, className, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        // Base styles
+        "inline-flex items-center justify-center gap-2 rounded-md transition-colors duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2",
+        "disabled:opacity-50 disabled:pointer-events-none",
+        // Variant styles
+        buttonVariants[variant],
+        // Size styles
+        buttonSizes[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+);
+
+Button.displayName = "Button";
+
+export { Button };

packages/propel/src/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./button";
+export type { ButtonProps } from "./button";

packages/propel/tsdown.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
     "src/accordion/index.ts",
     "src/animated-counter/index.ts",
     "src/avatar/index.ts",
+    "src/button/index.ts",
     "src/calendar/index.ts",
     "src/card/index.ts",
     "src/charts/*/index.ts",