chore: Bump package version to 1.0.223 and enhance Accordion and Badge components

- Update package version in package.json to 1.0.223
- Refactor Accordion component to support optional selected section and item management
- Update Accordion stories to reflect changes in state handling
- Introduce new Badge variants (FILLED and OUTLINE) and update related stories and tests
- Adjust Badge component styling for improved variant management

Author: agjs

package.json

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

src/Components/Accordion/Accordion.stories.tsx

@@ -3,8 +3,6 @@ import { action } from "@storybook/addon-actions";
 import { Meta } from "@storybook/react";
 import { useEffect, useState } from "react";
 
-import Button from "Components/Button";
-
 import Accordion from ".";
 import { ISection } from "./types";
 
@@ -239,96 +237,6 @@ export const WithoutDragAndDrop = () => {
   );
 };
 
-export const AddSectionAndSectionItem = () => {
-  const [sections, setSections] = useState<ISection[]>([
-    {
-      id: 1,
-      title: "velum constans brevis canis corrumpo magni attollo",
-      description:
-        "Creber aeneus versus itaque alioqui abeo crux sperno. Atrox subseco ater tenetur libero absum quidem thymum degusto allatus. Venia in carbo cibus desolo contego suffragium. Vero civitas tredecim ventosus dapifer quas. Animadverto spiculum velut.",
-      order: 0,
-      items: [
-        {
-          id: 597358,
-          title: "officia",
-          order: 0
-        }
-      ]
-    }
-  ]);
-
-  const [expandedSections, setExpandedSections] = useState<number[]>([1]);
-  const [selectedSection, setSelectedSection] = useState<number | null>(null);
-  const [selectedItem, setSelectedItem] = useState<number | null>(null);
-
-  if (!sections.length) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          const newSection = sections[0];
-          if (newSection) {
-            newSection.items.push({
-              id: Math.floor(Math.random() * 1000000),
-              title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
-              order: newSection.items.length
-            });
-          }
-
-          setSections([newSection as ISection]);
-        }}
-      >
-        Add Section
-      </Button>
-      <Accordion
-        className='yl:w-[500px]'
-        selected={{
-          sectionId: selectedSection ?? 0,
-          itemId: selectedItem ?? 0
-        }}
-        setSelectedSection={sectionId => {
-          setSelectedSection(sectionId);
-        }}
-        setSelectedItem={itemId => {
-          setSelectedItem(itemId);
-        }}
-        sections={sections}
-        expanded={expandedSections}
-        hasDraggableSectionItems={true}
-        onSectionItemClick={sectionItem => {
-          const newSection = sections[0];
-          if (newSection) {
-            newSection.items = newSection.items.filter(
-              item => item.id !== sectionItem.id
-            );
-          }
-
-          setSections([newSection as ISection]);
-        }}
-        onSorted={(_, sections) => {
-          setSections(sections);
-        }}
-        onAddSection={() => {
-          action("onAddSection")();
-        }}
-        onAddSectionItem={section => {
-          action("onAddSectionItem")(section);
-        }}
-        setExpanded={(expanded: number[]) => {
-          setExpandedSections(expanded);
-          action("setExpanded")(expanded);
-        }}
-        onSelected={item => {
-          action("onSelected")(item);
-        }}
-      />
-    </div>
-  );
-};
-
 export const WithAddLabels = () => {
   const [sections, setSections] = useState<ISection[]>([]);
   const [expandedSections, setExpandedSections] = useState<number[]>([1]);
@@ -440,7 +348,7 @@ export const WithNoItems = () => {
   );
 };
 
-export const DefaultExpanded = () => {
+export const ExpandedByDefault = () => {
   const [sections, setSections] = useState<ISection[]>([]);
   const [expandedSections, setExpandedSections] = useState<number[]>([]);
   const [selectedSection, setSelectedSection] = useState<number | null>(null);
@@ -461,6 +369,7 @@ export const DefaultExpanded = () => {
   return (
     <div>
       <Accordion
+        defaultExpanded={true}
         className='yl:w-[500px]'
         selected={{
           sectionId: selectedSection ?? 0,

src/Components/Accordion/index.tsx

@@ -32,7 +32,6 @@ const Accordion: FC<IAccordionProps> = ({
   setSelectedItem
 }) => {
   const hasInitialized = useRef(false);
-
   const [draggedId, setDraggedId] = useState<number | null>(null);
   const [draggedOverId, setDraggedOverId] = useState<number | null>(null);
 
@@ -108,8 +107,8 @@ const Accordion: FC<IAccordionProps> = ({
                 e.stopPropagation();
                 e.preventDefault();
                 onSectionClick?.(section);
-                setSelectedSection(section.id);
-                setSelectedItem(null);
+                setSelectedSection?.(section.id);
+                setSelectedItem?.(null);
                 toggleExpand(section.id);
               }}
               className={classNames(
@@ -119,9 +118,9 @@ const Accordion: FC<IAccordionProps> = ({
                   "yl:bg-text/2": expanded.includes(section.id),
                   "yl:cursor-pointer": onSectionItemClick,
                   "yl:text-text":
-                    selected.sectionId !== section.id || !onSectionItemClick,
+                    selected?.sectionId !== section.id || !onSectionItemClick,
                   "yl:text-primary":
-                    onSectionItemClick && selected.sectionId === section.id
+                    onSectionItemClick && selected?.sectionId === section.id
                 }
               )}
               onKeyDown={e =>
@@ -171,8 +170,8 @@ const Accordion: FC<IAccordionProps> = ({
                     onClick={(item: IDraggableListItem) => {
                       onSectionItemClick?.(item);
                       onSelected?.(item);
-                      setSelectedItem(item.id);
-                      setSelectedSection(
+                      setSelectedItem?.(item.id);
+                      setSelectedSection?.(
                         sections.find(s => s.items.includes(item))?.id ?? null
                       );
                     }}
@@ -199,7 +198,7 @@ const Accordion: FC<IAccordionProps> = ({
                           "yl:hover:cursor-pointer yl:hover:text-primary":
                             onSectionItemClick,
                           "yl:text-primary":
-                            onSectionItemClick && selected.itemId === item.id,
+                            onSectionItemClick && selected?.itemId === item.id,
                           "yl:pl-5": section.items.length === 1
                         }
                       )

src/Components/Accordion/types.ts

@@ -37,14 +37,13 @@ export interface IAccordionProps {
   addSectionLabel?: string;
   expanded: number[];
   setExpanded: (sections: number[]) => void;
-  selectedId?: number;
   hasDraggableSections?: boolean;
   hasDraggableSectionItems?: boolean;
   defaultExpanded?: boolean;
-  selected: {
-    sectionId: number;
-    itemId: number;
+  selected?: {
+    sectionId: number | null;
+    itemId: number | null;
   };
-  setSelectedSection: (sectionId: number | null) => void;
-  setSelectedItem: (itemId: number | null) => void;
+  setSelectedSection?: (sectionId: number | null) => void;
+  setSelectedItem?: (itemId: number | null) => void;
 }

src/Components/Badge/Badge.stories.tsx

@@ -10,36 +10,35 @@ const meta = {
     layout: "centered"
   },
   tags: ["autodocs"],
-  argTypes: {}
+  argTypes: {
+    variant: {
+      control: "select",
+      options: Object.values(BadgeVariantEnum)
+    }
+  }
 } satisfies Meta<typeof Badge>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Empty: Story = {
-  args: {
-    title: "Badge",
-    variant: BadgeVariantEnum.PRIMARY
-  }
-};
-
 export const Filled: Story = {
   args: {
     title: "Badge",
-    variant: BadgeVariantEnum.PRIMARY
+    variant: BadgeVariantEnum.FILLED
   }
 };
 
-export const Beta: Story = {
+export const Outline: Story = {
   args: {
-    title: "Beta",
-    variant: BadgeVariantEnum.BETA
+    title: "Badge",
+    variant: BadgeVariantEnum.OUTLINE,
+    className: "yl:text-secondary"
   }
 };
 
-export const New: Story = {
+export const Custom: Story = {
   args: {
-    title: "New",
-    variant: BadgeVariantEnum.NEW
+    title: "Badge",
+    className: "yl:text-bg yl:bg-red-500"
   }
 };

src/Components/Badge/Badge.test.tsx

@@ -8,27 +8,39 @@ describe("Badge component", () => {
 
   test("renders correctly - snapshot test", () => {
     const { asFragment } = render(
-      <Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />
+      <Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test("renders the title correctly", () => {
-    render(<Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />);
+    render(<Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />);
     const badgeElement = screen.getByText(testTitle);
     expect(badgeElement).toBeInTheDocument();
   });
 
+  test("applies filled variant", () => {
+    render(<Badge title={testTitle} variant={BadgeVariantEnum.FILLED} />);
+    const badgeElement = screen.getByText(testTitle);
+    expect(badgeElement).toHaveClass("yl:bg-primary");
+  });
+
   test("applies custom class name", () => {
     const customClass = "custom-class";
     render(
       <Badge
         title={testTitle}
-        variant={BadgeVariantEnum.PRIMARY}
+        variant={BadgeVariantEnum.FILLED}
         className={customClass}
       />
     );
     const badgeElement = screen.getByText(testTitle);
     expect(badgeElement).toHaveClass(customClass);
   });
+
+  test("applies outline variant", () => {
+    render(<Badge title={testTitle} variant={BadgeVariantEnum.OUTLINE} />);
+    const badgeElement = screen.getByText(testTitle);
+    expect(badgeElement).toHaveClass("yl:bg-transparent");
+  });
 });

src/Components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Badge component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <span
-    class="yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px] yl:bg-primary"
+    class="yl:rounded yl:border yl:border-border yl:px-[3px] yl:py-[1px] yl:text-[10px] yl:text-inherit yl:bg-primary"
   >
     Test Badge
   </span>

src/Components/Badge/index.tsx

@@ -5,29 +5,17 @@ import { BadgeVariantEnum, IBadgeProps } from "./types";
 
 const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
   const variants = {
-    [BadgeVariantEnum.PRIMARY]: "yl:bg-primary",
-    [BadgeVariantEnum.SECONDARY]: "yl:bg-secondary",
-    [BadgeVariantEnum.SUCCESS]: "yl:bg-success",
-    [BadgeVariantEnum.WARNING]: "yl:bg-warning",
-    [BadgeVariantEnum.ERROR]: "yl:bg-error",
-    [BadgeVariantEnum.BETA]: "yl:bg-violet-500",
-    [BadgeVariantEnum.NEW]: "yl:bg-blue-500",
-    [BadgeVariantEnum.NONE]: ""
+    [BadgeVariantEnum.FILLED]: "yl:bg-primary",
+    [BadgeVariantEnum.OUTLINE]: "yl:bg-transparent"
   };
 
   const baseClassNames =
-    "yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px]";
+    "yl:rounded yl:border yl:border-border yl:px-[3px] yl:py-[1px] yl:text-[10px] yl:text-inherit";
+
+  const variantClassNames = variant ? variants[variant] : "";
 
   return (
-    <span
-      className={classNames(
-        baseClassNames,
-        {
-          [variants[variant]]: variant
-        },
-        className
-      )}
-    >
+    <span className={classNames(baseClassNames, variantClassNames, className)}>
       {title}
     </span>
   );

src/Components/Badge/types.ts

@@ -1,16 +1,10 @@
 export enum BadgeVariantEnum {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  SUCCESS = "success",
-  WARNING = "warning",
-  ERROR = "error",
-  BETA = "beta",
-  NEW = "new",
-  NONE = "none"
+  FILLED = "filled",
+  OUTLINE = "outline"
 }
 
 export interface IBadgeProps {
   title: string;
   className?: string;
-  variant: BadgeVariantEnum;
+  variant?: BadgeVariantEnum;
 }