chore: Bump package version to 1.0.233 and refactor Card component to use Pills

- Updated package version in package.json to 1.0.233
- Replaced Badge component with Pill component in Card component for better visual representation
- Updated related tests and stories to reflect the changes in the Card component
- Adjusted types and imports to accommodate the new Pill implementation

Author: agjs

package.json

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

src/Components/Button/types.ts

@@ -1,7 +1,5 @@
 import { ReactNode } from "react";
 
-import { IconName } from "Components/Icons/types";
-
 export enum ButtonVariantEnum {
   PRIMARY = "primary",
   SECONDARY = "secondary",
@@ -17,7 +15,7 @@ export interface IButtonProps {
   isLoading?: boolean;
   outlined?: boolean;
   icon?: {
-    iconName?: IconName;
+    iconName?: string;
     iconClassName?: string;
     iconPosition?: "left" | "right";
   };

src/Components/Card/Card.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import { NavLink } from "react-router-dom";
 
 import Card from ".";
-import { BadgeVariantEnum } from "../Badge/types";
 import Icon from "../Icon";
 import { ICardData } from "./types";
 
@@ -81,9 +80,9 @@ const defaultData: ICardData = {
     aspectRatio: "16:9",
     lazy: false
   },
-  badges: [
-    { title: "Premium", variant: BadgeVariantEnum.FILLED },
-    { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
+  pills: [
+    { title: "Premium", variant: "primary" },
+    { title: "Editor's Choice", variant: "secondary" }
   ],
   tags: [
     { name: "nature", url: "/tags/nature" },
@@ -438,72 +437,72 @@ export const EditOnlyActionNoImage: Story = {
   }
 };
 
-export const WithBadges: Story = {
+export const WithPills: Story = {
   args: {
     ...Default.args,
     data: {
       ...defaultData,
-      badges: [
-        { title: "Premium", variant: BadgeVariantEnum.FILLED },
-        { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
+      pills: [
+        { title: "Premium", variant: "primary" },
+        { title: "Editor's Choice", variant: "secondary" },
         {
           title: "Trending",
-          variant: BadgeVariantEnum.FILLED,
+          variant: "success",
           className: "yl:bg-green-500 yl:text-white"
         }
       ]
     }
   }
 };
 
-export const WithManyBadges: Story = {
+export const WithManyPills: Story = {
   args: {
     ...Default.args,
     data: {
       ...defaultData,
-      badges: [
-        { title: "Premium", variant: BadgeVariantEnum.FILLED },
-        { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
-        { title: "Trending", variant: BadgeVariantEnum.FILLED },
+      pills: [
+        { title: "Premium", variant: "primary" },
+        { title: "Editor's Choice", variant: "secondary" },
+        { title: "Trending", variant: "success" },
         {
           title: "New",
-          variant: BadgeVariantEnum.FILLED,
+          variant: "indigo",
           className: "yl:bg-blue-500 yl:text-white"
         },
-        { title: "Popular", variant: BadgeVariantEnum.OUTLINE },
+        { title: "Popular", variant: "warning" },
         {
           title: "Verified",
-          variant: BadgeVariantEnum.FILLED,
+          variant: "success",
           className: "yl:bg-green-600 yl:text-white"
         }
       ]
     }
   }
 };
 
-export const BadgesWithoutImage: Story = {
+export const PillsWithoutImage: Story = {
   args: {
     ...Default.args,
     data: {
       ...defaultData,
       image: undefined,
-      badges: [
-        { title: "Featured", variant: BadgeVariantEnum.FILLED },
-        { title: "Staff Pick", variant: BadgeVariantEnum.OUTLINE }
+      pills: [
+        { title: "Featured", variant: "primary" },
+        { title: "Staff Pick", variant: "secondary" }
       ]
     }
   }
 };
 
-export const BadgesOnly: Story = {
+export const PillsOnly: Story = {
   args: {
     ...Default.args,
     data: {
       ...defaultData,
       tags: undefined,
-      badges: [
-        { title: "Premium", variant: BadgeVariantEnum.FILLED },
-        { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
+      pills: [
+        { title: "Premium", variant: "primary" },
+        { title: "Editor's Choice", variant: "secondary" }
       ]
     }
   }

src/Components/Card/Card.test.tsx

@@ -3,7 +3,6 @@ import { BrowserRouter, NavLink } from "react-router-dom";
 import { vi } from "vitest";
 
 import Card from ".";
-import { BadgeVariantEnum } from "../Badge/types";
 import { ICardData } from "./types";
 
 const mockNavLink = NavLink;
@@ -102,49 +101,49 @@ describe("Card component", () => {
       expect(screen.getByText("#typescript")).toBeInTheDocument();
     });
 
-    it("renders badges when provided", () => {
-      const cardWithBadges: ICardData = {
+    it("renders pills when provided", () => {
+      const cardWithPills: ICardData = {
         ...fullCardData,
-        badges: [
-          { title: "Premium", variant: BadgeVariantEnum.FILLED },
-          { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
+        pills: [
+          { title: "Premium", variant: "primary" },
+          { title: "Editor's Choice", variant: "secondary" }
         ]
       };
 
-      renderCard({ data: cardWithBadges });
+      renderCard({ data: cardWithPills });
 
       expect(screen.getByText("Premium")).toBeInTheDocument();
       expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
     });
 
-    it("renders multiple badges correctly", () => {
-      const cardWithManyBadges: ICardData = {
+    it("renders multiple pills correctly", () => {
+      const cardWithManyPills: ICardData = {
         ...fullCardData,
-        badges: [
-          { title: "Premium", variant: BadgeVariantEnum.FILLED },
-          { title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
-          { title: "Trending", variant: BadgeVariantEnum.FILLED },
-          { title: "New", variant: BadgeVariantEnum.OUTLINE }
+        pills: [
+          { title: "Premium", variant: "primary" },
+          { title: "Editor's Choice", variant: "secondary" },
+          { title: "Trending", variant: "success" },
+          { title: "New", variant: "warning" }
         ]
       };
 
-      renderCard({ data: cardWithManyBadges });
+      renderCard({ data: cardWithManyPills });
 
       expect(screen.getByText("Premium")).toBeInTheDocument();
       expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
       expect(screen.getByText("Trending")).toBeInTheDocument();
       expect(screen.getByText("New")).toBeInTheDocument();
     });
 
-    it("renders card without badges when none provided", () => {
-      const cardWithoutBadges: ICardData = {
+    it("renders card without pills when none provided", () => {
+      const cardWithoutPills: ICardData = {
         ...fullCardData,
-        badges: undefined
+        pills: undefined
       };
 
-      renderCard({ data: cardWithoutBadges });
+      renderCard({ data: cardWithoutPills });
 
-      // Should not render any badges
+      // Should not render any pills
       expect(screen.queryByText("Premium")).not.toBeInTheDocument();
       expect(screen.queryByText("Editor's Choice")).not.toBeInTheDocument();
     });

src/Components/Card/Components/CardBadges.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+
+import { IPill } from "../types";
+import CardPills from "./CardPills";
+
+describe("CardPills component", () => {
+  const mockPills: IPill[] = [
+    { title: "Premium", variant: "primary" },
+    { title: "Editor's Choice", variant: "secondary" },
+    { title: "Custom", className: "custom-class" }
+  ];
+
+  it("renders pills correctly", () => {
+    render(<CardPills pills={mockPills} />);
+
+    expect(screen.getByText("Premium")).toBeInTheDocument();
+    expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+
+  it("renders nothing when pills array is empty", () => {
+    const { container } = render(<CardPills pills={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders nothing when pills prop is undefined", () => {
+    const { container } = render(<CardPills pills={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders pills with correct variants", () => {
+    render(<CardPills pills={mockPills} />);
+
+    const premiumPill = screen.getByText("Premium");
+    const editorChoicePill = screen.getByText("Editor's Choice");
+
+    expect(premiumPill).toHaveClass("yl:bg-primary/10");
+    expect(editorChoicePill).toHaveClass("yl:bg-muted/10");
+  });
+
+  it("applies custom className to pills", () => {
+    render(<CardPills pills={mockPills} />);
+
+    const customPill = screen.getByText("Custom");
+    expect(customPill).toHaveClass("custom-class");
+  });
+
+  it("renders pills in a flex container with proper spacing", () => {
+    const { container } = render(<CardPills pills={mockPills} />);
+
+    const pillsContainer = container.firstChild as HTMLElement;
+    expect(pillsContainer).toHaveClass(
+      "yl:flex",
+      "yl:items-center",
+      "yl:gap-2",
+      "yl:flex-wrap",
+      "yl:mt-3",
+      "yl:mb-1"
+    );
+  });
+
+  it("handles single pill correctly", () => {
+    const singlePill: IPill[] = [{ title: "Single", variant: "primary" }];
+
+    render(<CardPills pills={singlePill} />);
+    expect(screen.getByText("Single")).toBeInTheDocument();
+  });
+});