chore: Bump package version to 1.0.230 and add Pill and PersonCard components

- Updated package version in package.json to 1.0.230
- Introduced Pill component with customizable variants and sizes
- Added PersonCard component to display user information with social links and actions
- Created stories and tests for both Pill and PersonCard components
- Updated index.ts and types.ts to include new components and their types

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.229",
+  "version": "1.0.230",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Core/Pill/Pill.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import Pill from "./index";
+
+const meta: Meta<typeof Pill> = {
+  title: "Components/Core/Pill",
+  component: Pill,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "warning",
+        "indigo",
+        "purple",
+        "pink"
+      ]
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"]
+    },
+    clickable: {
+      control: { type: "boolean" }
+    },
+    disabled: {
+      control: { type: "boolean" }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Pill>;
+
+export const Default: Story = {
+  args: {
+    children: "Badge"
+  }
+};
+
+export const Primary: Story = {
+  args: {
+    children: "Primary",
+    variant: "primary"
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary"
+  }
+};
+
+export const Success: Story = {
+  args: {
+    children: "Success",
+    variant: "success"
+  }
+};
+
+export const Error: Story = {
+  args: {
+    children: "Error",
+    variant: "error"
+  }
+};
+
+export const Warning: Story = {
+  args: {
+    children: "Warning",
+    variant: "warning"
+  }
+};
+
+export const Indigo: Story = {
+  args: {
+    children: "Indigo",
+    variant: "indigo"
+  }
+};
+
+export const Purple: Story = {
+  args: {
+    children: "Purple",
+    variant: "purple"
+  }
+};
+
+export const Pink: Story = {
+  args: {
+    children: "Pink",
+    variant: "pink"
+  }
+};
+
+export const Clickable: Story = {
+  args: {
+    children: "Clickable",
+    variant: "primary",
+    clickable: true,
+    onClick: () => console.log("Pill clicked!")
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled",
+    variant: "primary",
+    clickable: true,
+    disabled: true
+  }
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='yl:flex yl:items-center yl:gap-4'>
+      <Pill size='small' variant='primary'>
+        Small
+      </Pill>
+      <Pill size='medium' variant='primary'>
+        Medium
+      </Pill>
+      <Pill size='large' variant='primary'>
+        Large
+      </Pill>
+    </div>
+  )
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className='yl:flex yl:flex-wrap yl:gap-2'>
+      <Pill variant='primary'>Primary</Pill>
+      <Pill variant='secondary'>Secondary</Pill>
+      <Pill variant='success'>Success</Pill>
+      <Pill variant='error'>Error</Pill>
+      <Pill variant='warning'>Warning</Pill>
+      <Pill variant='indigo'>Indigo</Pill>
+      <Pill variant='purple'>Purple</Pill>
+      <Pill variant='pink'>Pink</Pill>
+    </div>
+  )
+};

src/Components/Core/Pill/Pill.test.tsx

@@ -0,0 +1,179 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import Pill from "./index";
+
+describe("Pill Component", () => {
+  it("renders children correctly", () => {
+    render(<Pill>Test Pill</Pill>);
+    expect(screen.getByText("Test Pill")).toBeInTheDocument();
+  });
+
+  it("applies default variant and size", () => {
+    render(<Pill>Default Pill</Pill>);
+    const pill = screen.getByText("Default Pill");
+    expect(pill).toHaveClass(
+      "yl:bg-primary/10",
+      "yl:text-primary",
+      "yl:px-2",
+      "yl:py-1"
+    );
+  });
+
+  it("applies custom variant correctly", () => {
+    render(<Pill variant='error'>Error Pill</Pill>);
+    const pill = screen.getByText("Error Pill");
+    expect(pill).toHaveClass("yl:bg-red-500/10", "yl:text-red-400");
+  });
+
+  it("applies custom size correctly", () => {
+    render(<Pill size='large'>Large Pill</Pill>);
+    const pill = screen.getByText("Large Pill");
+    expect(pill).toHaveClass("yl:px-3", "yl:py-1.5", "yl:text-sm");
+  });
+
+  it("renders as span when not clickable", () => {
+    render(<Pill>Non-clickable</Pill>);
+    const pill = screen.getByText("Non-clickable");
+    expect(pill.tagName).toBe("SPAN");
+    expect(pill).not.toHaveClass("yl:cursor-pointer");
+  });
+
+  it("renders as button when clickable", () => {
+    const handleClick = vi.fn();
+    render(
+      <Pill clickable onClick={handleClick}>
+        Clickable
+      </Pill>
+    );
+    const pill = screen.getByText("Clickable");
+    expect(pill.tagName).toBe("BUTTON");
+    expect(pill).toHaveClass("yl:cursor-pointer");
+  });
+
+  it("handles click events correctly", () => {
+    const handleClick = vi.fn();
+    render(
+      <Pill clickable onClick={handleClick}>
+        Clickable
+      </Pill>
+    );
+    const pill = screen.getByText("Clickable");
+
+    fireEvent.click(pill);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies disabled state correctly", () => {
+    const handleClick = vi.fn();
+    render(
+      <Pill clickable disabled onClick={handleClick}>
+        Disabled
+      </Pill>
+    );
+    const pill = screen.getByText("Disabled");
+
+    expect(pill).toBeDisabled();
+    expect(pill).toHaveClass("yl:cursor-not-allowed", "yl:opacity-50");
+
+    fireEvent.click(pill);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("applies custom className", () => {
+    render(<Pill className='custom-class'>Custom</Pill>);
+    const pill = screen.getByText("Custom");
+    expect(pill).toHaveClass("custom-class");
+  });
+
+  it("applies hover classes when clickable", () => {
+    render(
+      <Pill clickable variant='success'>
+        Hoverable
+      </Pill>
+    );
+    const pill = screen.getByText("Hoverable");
+    expect(pill).toHaveClass("yl:hover:bg-green-500/20");
+  });
+
+  it("does not apply hover classes when disabled", () => {
+    render(
+      <Pill clickable disabled variant='success'>
+        Disabled
+      </Pill>
+    );
+    const pill = screen.getByText("Disabled");
+    expect(pill).not.toHaveClass("yl:hover:bg-green-500/20");
+  });
+
+  describe("All variants render correctly", () => {
+    const variants = [
+      {
+        variant: "primary",
+        bgClass: "yl:bg-primary/10",
+        textClass: "yl:text-primary"
+      },
+      {
+        variant: "secondary",
+        bgClass: "yl:bg-muted/10",
+        textClass: "yl:text-muted"
+      },
+      {
+        variant: "success",
+        bgClass: "yl:bg-green-500/10",
+        textClass: "yl:text-green-400"
+      },
+      {
+        variant: "error",
+        bgClass: "yl:bg-red-500/10",
+        textClass: "yl:text-red-400"
+      },
+      {
+        variant: "warning",
+        bgClass: "yl:bg-yellow-500/10",
+        textClass: "yl:text-yellow-400"
+      },
+      {
+        variant: "indigo",
+        bgClass: "yl:bg-indigo-500/10",
+        textClass: "yl:text-indigo-400"
+      },
+      {
+        variant: "purple",
+        bgClass: "yl:bg-purple-500/10",
+        textClass: "yl:text-purple-400"
+      },
+      {
+        variant: "pink",
+        bgClass: "yl:bg-pink-500/10",
+        textClass: "yl:text-pink-400"
+      }
+    ] as const;
+
+    variants.forEach(({ variant, bgClass, textClass }) => {
+      it(`renders ${variant} variant correctly`, () => {
+        render(<Pill variant={variant}>{variant}</Pill>);
+        const pill = screen.getByText(variant);
+        expect(pill).toHaveClass(bgClass, textClass);
+      });
+    });
+  });
+
+  describe("All sizes render correctly", () => {
+    const sizes = [
+      { size: "small", classes: ["yl:px-2", "yl:py-0.5", "yl:text-xs"] },
+      { size: "medium", classes: ["yl:px-2", "yl:py-1", "yl:text-xs"] },
+      { size: "large", classes: ["yl:px-3", "yl:py-1.5", "yl:text-sm"] }
+    ] as const;
+
+    sizes.forEach(({ size, classes }) => {
+      it(`renders ${size} size correctly`, () => {
+        render(<Pill size={size}>{size}</Pill>);
+        const pill = screen.getByText(size);
+        classes.forEach(className => {
+          expect(pill).toHaveClass(className);
+        });
+      });
+    });
+  });
+});

src/Components/Core/Pill/Pill.types.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+export type PillVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "error"
+  | "warning"
+  | "indigo"
+  | "purple"
+  | "pink";
+
+export type PillSize = "small" | "medium" | "large";
+
+export interface IPillProps {
+  children: ReactNode;
+  variant?: PillVariant;
+  size?: PillSize;
+  clickable?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+  disabled?: boolean;
+  [key: string]: any;
+}