chore: Update package version to 1.0.184 and fix Accordion onDragged …

…event handler

package.json

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

src/Components/Accordion/Accordion.stories.tsx

@@ -3,6 +3,8 @@ 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";
 
@@ -60,7 +62,7 @@ export const Primary = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        setSections={setSections}
+        onSorted={setSections}
         expanded={expandedSections}
         hasDraggableSections={true}
         hasDraggableSectionItems={true}
@@ -100,7 +102,7 @@ export const NonInteractive = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        setSections={setSections}
+        onSorted={setSections}
         expanded={expandedSections}
         setExpanded={(expanded: number[]) => {
           setExpandedSections(expanded);
@@ -135,7 +137,7 @@ export const WithoutDragAndDrop = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        setSections={setSections}
+        onSorted={setSections}
         expanded={expandedSections}
         setExpanded={(expanded: number[]) => {
           setExpandedSections(expanded);
@@ -149,6 +151,70 @@ export const WithoutDragAndDrop = () => {
 };
 
 export const AddSectionAndSectionItem = () => {
+  const [sections, setSections] = useState<ISection[]>([
+    {
+      id: 236163,
+      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]);
+
+  if (!sections.length) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          const newSection = sections[0];
+          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]);
+        }}
+      >
+        Add Section
+      </Button>
+      <Accordion
+        className='yl-w-[500px]'
+        selectedId={2}
+        sections={sections}
+        expanded={expandedSections}
+        onSorted={setSections}
+        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]);
 
@@ -170,11 +236,13 @@ export const AddSectionAndSectionItem = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        setSections={setSections}
         expanded={expandedSections}
+        onSorted={setSections}
         onAddSection={() => {
           action("onAddSection")();
         }}
+        addSectionLabel='Add Course Section'
+        addSectionItemLabel='Add Course Lecture'
         onAddSectionItem={section => {
           action("onAddSectionItem")(section);
         }}

src/Components/Accordion/index.tsx

@@ -18,13 +18,15 @@ import { IAccordionProps } from "./types";
 const Accordion: FC<IAccordionProps> = ({
   className,
   sections,
-  setSections,
+  onSorted,
   sectionTitleClassName,
   onSectionItemClick,
   onSectionClick,
   onSelected,
   onAddSection,
+  addSectionLabel,
   onAddSectionItem,
+  addSectionItemLabel,
   expanded,
   setExpanded,
   selectedId,
@@ -65,7 +67,7 @@ const Accordion: FC<IAccordionProps> = ({
   const handleSectionDrop = (e: React.DragEvent<Element>) => {
     e.preventDefault();
     if (draggedId != null && draggedOverId != null) {
-      setSections(
+      onSorted(
         ArrayUtils.reorder(
           sections,
           sections.findIndex(item => item.id === draggedId),
@@ -179,7 +181,7 @@ const Accordion: FC<IAccordionProps> = ({
                     setSelectedItemId(item.id);
                   }}
                   onDragged={(items: IDraggableListItem[]) => {
-                    setSections(
+                    onSorted(
                       [
                         ...sections.map(s =>
                           s.id === section.id ? { ...s, items } : s
@@ -200,7 +202,7 @@ const Accordion: FC<IAccordionProps> = ({
                           selectedItemId !== item.id,
                         "yl-text-primary":
                           onSectionItemClick && selectedItemId === item.id,
-                        "yl-pl-9": section.items.length === 1
+                        "yl-pl-5": section.items.length === 1
                       }
                     )
                   }
@@ -213,6 +215,9 @@ const Accordion: FC<IAccordionProps> = ({
                     )}
                   >
                     <IconAddCircle className='yl-w-6' />
+                    {addSectionItemLabel && (
+                      <span className='yl-text-sm'>{addSectionItemLabel}</span>
+                    )}
                   </div>
                 )}
               </>
@@ -235,6 +240,9 @@ const Accordion: FC<IAccordionProps> = ({
           >
             <Paragraph className='yl-text-primary-text-color/70 group-hover:yl-text-primary yl-flex yl-items-center yl-gap-1'>
               <IconAddCircle className='yl-w-6 group-hover:yl-text-primary' />
+              {addSectionLabel && (
+                <span className='yl-text-sm'>{addSectionLabel}</span>
+              )}
             </Paragraph>
           </h3>
         </div>

src/Components/Accordion/types.ts

@@ -22,16 +22,18 @@ export enum AccordionOrderType {
 export interface IAccordionProps {
   className?: string;
   sections: ISection[];
-  setSections: (
+  sectionTitleClassName?: string;
+  onSorted: (
     sections: ISection[],
     section: { sectionId: number; items: IDraggableListItem[] }
   ) => void;
-  sectionTitleClassName?: string;
   onSectionItemClick?: (item: IDraggableListItem) => void;
   onSectionClick?: (item: IDraggableListItem) => void;
   onSelected?: (item: IDraggableListItem) => void;
   onAddSection?: () => void;
+  addSectionItemLabel?: string;
   onAddSectionItem?: (item: ISection) => void;
+  addSectionLabel?: string;
   expanded: number[];
   setExpanded: (sections: number[]) => void;
   selectedId?: number;

src/Components/DraggableList/index.tsx

@@ -49,7 +49,7 @@ const DraggableList: FC<IDraggableList> = ({
 
   useEffect(() => {
     setLocalItems(items || []);
-  }, []);
+  }, [items]);
 
   useEffect(() => {
     onDragged?.(localItems);