chore: Bump package version to 1.0.217 and enhance Accordion component

- Update package version in package.json to 1.0.217
- Rename NonInteractive story to NonInteractiveItems for clarity
- Add WithNoItems story to handle empty sections in Accordion
- Refactor Accordion component to conditionally render draggable items based on section content
- Improve styling for section and item interaction

Author: agjs

package.json

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

src/Components/Accordion/Accordion.stories.tsx

@@ -121,7 +121,7 @@ export const Interactive = () => {
   );
 };
 
-export const NonInteractive = () => {
+export const NonInteractiveItems = () => {
   const [sections, setSections] = useState<ISection[]>([]);
   const [expandedSections, setExpandedSections] = useState<number[]>([1]);
 
@@ -180,8 +180,6 @@ export const WithoutDragAndDrop = () => {
         className='yl:w-[500px]'
         selectedId={2}
         sections={sections}
-        hasDraggableSectionItems={true}
-        hasDraggableSections={true}
         onSorted={(_, sections) => {
           setSections(sections);
         }}
@@ -322,6 +320,51 @@ export const WithAddLabels = () => {
   );
 };
 
+export const WithNoItems = () => {
+  const [sections, setSections] = useState<ISection[]>([
+    {
+      id: 1,
+      title: "velum constans brevis canis corrumpo magni attollo",
+      description: "",
+      order: 0,
+      items: []
+    }
+  ]);
+  const [expandedSections, setExpandedSections] = useState<number[]>([]);
+
+  if (!sections.length) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Accordion
+        className='yl:w-[500px]'
+        sections={sections}
+        expanded={expandedSections}
+        onSorted={(_, sections) => {
+          setSections(sections);
+        }}
+        onAddSection={() => {
+          action("onAddSection")();
+        }}
+        addSectionLabel='Add Course Section'
+        addSectionItemLabel='Add Course Lecture'
+        onAddSectionItem={section => {
+          action("onAddSectionItem")(section);
+        }}
+        setExpanded={(expanded: number[]) => {
+          setExpandedSections(expanded);
+          action("setExpanded")(expanded);
+        }}
+        onSelected={item => {
+          action("onSelected")(item);
+        }}
+      />
+    </div>
+  );
+};
+
 export const DefaultExpanded = () => {
   const [sections, setSections] = useState<ISection[]>([]);
   const [expandedSections, setExpandedSections] = useState<number[]>([]);

src/Components/Accordion/index.tsx

@@ -94,7 +94,7 @@ const Accordion: FC<IAccordionProps> = ({
         .map((section, idx) => (
           <div
             key={section.id}
-            draggable={hasDraggableSections}
+            draggable={hasDraggableSections && section.items.length > 0}
             onDrag={e => handleDrag(e, section)}
             onDragOver={() =>
               hasDraggableSections && setDraggedOverId(section.id)
@@ -178,46 +178,52 @@ const Accordion: FC<IAccordionProps> = ({
 
             {expanded.includes(section.id) && (
               <>
-                <DraggableList
-                  items={section.items}
-                  onClick={(item: IDraggableListItem) => {
-                    onSectionItemClick?.(item);
-                    onSelected?.(item);
-                    setSelectedItemId(item.id);
-                    setSelectedSectionId(null);
-                  }}
-                  onDragged={(items: IDraggableListItem[]) => {
-                    onSorted?.(
-                      AccordionOrderType.LECTURES,
-                      [
-                        ...sections.map(s =>
-                          s.id === section.id ? { ...s, items } : s
-                        )
-                      ],
-                      { sectionId: section.id, items }
-                    );
-                  }}
-                  isDraggable={hasDraggableSectionItems}
-                  className='yl:gap-4 yl:flex yl:flex-col yl:py-4'
-                  draggedOverClassName='yl:border-t-2 yl:border-border'
-                  liClassName={(item: IDraggableListItem) =>
-                    classNames(
-                      "yl:cursor-default yl:break-words yl:leading-normal yl:px-4",
-                      {
-                        "yl:hover:cursor-pointer yl:hover:text-primary":
-                          onSectionItemClick,
-                        "yl:text-primary":
-                          onSectionItemClick && selectedItemId === item.id,
-                        "yl:pl-5": section.items.length === 1
-                      }
-                    )
-                  }
-                />
+                {section.items.length > 0 && (
+                  <DraggableList
+                    items={section.items}
+                    onClick={(item: IDraggableListItem) => {
+                      onSectionItemClick?.(item);
+                      onSelected?.(item);
+                      setSelectedItemId(item.id);
+                      setSelectedSectionId(
+                        sections.find(s => s.items.includes(item))?.id ?? null
+                      );
+                    }}
+                    onDragged={(items: IDraggableListItem[]) => {
+                      onSorted?.(
+                        AccordionOrderType.LECTURES,
+                        [
+                          ...sections.map(s =>
+                            s.id === section.id ? { ...s, items } : s
+                          )
+                        ],
+                        { sectionId: section.id, items }
+                      );
+                    }}
+                    isDraggable={
+                      hasDraggableSectionItems && section.items.length > 0
+                    }
+                    className='yl:gap-4 yl:flex yl:flex-col yl:py-4'
+                    draggedOverClassName='yl:border-t-2 yl:border-border'
+                    liClassName={(item: IDraggableListItem) =>
+                      classNames(
+                        "yl:cursor-default yl:break-words yl:leading-normal yl:px-4",
+                        {
+                          "yl:hover:cursor-pointer yl:hover:text-primary":
+                            onSectionItemClick,
+                          "yl:text-primary":
+                            onSectionItemClick && selectedItemId === item.id,
+                          "yl:pl-5": section.items.length === 1
+                        }
+                      )
+                    }
+                  />
+                )}
                 {onAddSectionItem && (
                   <div
                     onClick={() => onAddSectionItem(section)}
                     className={classNames(
-                      "yl:group  yl:border-border yl:hover:bg-text/2 yl:cursor-pointer"
+                      "yl:group yl:border-border yl:hover:bg-text/1 yl:cursor-pointer yl:bg-text/3"
                     )}
                     role='presentation'
                   >
@@ -250,7 +256,7 @@ const Accordion: FC<IAccordionProps> = ({
         <div
           onClick={onAddSection}
           className={classNames(
-            "yl:group yl:border-2 yl:border-t-0 yl:border-border yl:hover:bg-text/2 yl:rounded-bl-md yl:rounded-br-md yl:cursor-pointer"
+            "yl:group yl:border-2 yl:border-t-0 yl:border-border yl:hover:bg-text/2 yl:rounded-bl-md yl:rounded-br-md yl:cursor-pointer yl:bg-text/3"
           )}
           role='presentation'
         >