Fix/bug fixes and updates

README.md

@@ -55,11 +55,20 @@ npm install @kleros/ui-components-library
 
 ### Setup
 
-1. Import the CSS at the top level of your application:
+1. Import the CSS:
 
-```javascript
-import "@kleros/ui-components-library/style.css";
-```
+   a. For Non-tailwind apps, import the CSS at top level of your app.
+
+   ```javascript
+   import "@kleros/ui-components-library/style.css";
+   ```
+
+   b. For Tailwind apps, import the theme and mark the library as a source in your global.css file.
+
+   ```css
+   @import "../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
+   @source "../../../node_modules/@kleros/ui-components-library";
+   ```
 
 2. Import and use components in your application:
 
@@ -82,8 +91,8 @@ function MyComponent() {
 If you wish the use the library's tailwind theme variables in your tailwind app. You can utilize it by importing the theme file in your `global.css` file.
 
 ```css
-@import tailwindcss @import
-  "../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
+@import tailwindcss;
+@import "../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
 ```
 
 You can find the available theme variables [here](src/styles/theme.css).

package.json

@@ -52,6 +52,7 @@
     "@storybook/test": "^8.6.4",
     "@tailwindcss/postcss": "^4.0.11",
     "@tailwindcss/vite": "^4.1.4",
+    "@types/lodash": "^4",
     "@types/node": "^22.13.10",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
@@ -93,6 +94,7 @@
     "@internationalized/date": "^3.7.0",
     "bignumber.js": "^9.1.2",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "react": "^18.0.0",
     "react-aria-components": "^1.7.1",
     "react-dom": "^18.0.0",

src/lib/accordion/accordion-item.tsx

@@ -25,19 +25,24 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   return (
     <div className="my-2">
       <Button
+        id="expand-button"
         className={cn(
           "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
           "hover-medium-blue hover-short-transition hover:cursor-pointer",
-          "rounded-[3px] px-8 py-[11.5px]",
+          "rounded-[3px] px-4 py-[11.5px] md:px-8",
           "flex w-full items-center justify-between",
         )}
         onPress={() => setExpanded(expanded ? -1 : index)}
       >
         {title}
         {expanded ? (
-          <Minus className={cn("fill-klerosUIComponentsPrimaryText size-4")} />
+          <Minus
+            className={cn("fill-klerosUIComponentsPrimaryText size-4 shrink-0")}
+          />
         ) : (
-          <Plus className={cn("fill-klerosUIComponentsPrimaryText size-4")} />
+          <Plus
+            className={cn("fill-klerosUIComponentsPrimaryText size-4 shrink-0")}
+          />
         )}
       </Button>
       <div
@@ -47,7 +52,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
           "transition-[height] duration-(--klerosUIComponentsTransitionSpeed) ease-initial",
         )}
       >
-        <div className="p-8" ref={ref}>
+        <div className="p-4 md:p-8" id="body-wrapper" ref={ref}>
           {body}
         </div>
       </div>

src/lib/container/modal.tsx

@@ -14,13 +14,15 @@ interface ModalProps
   /** classname that applies to the modal overlay. */
   modalOverlayClassname?: ModalOverlayProps["className"];
   children?: DialogProps["children"];
+  ariaLabel?: string;
 }
 
 /** A modal is an overlay element which blocks interaction with elements outside it. */
 function Modal({
   className,
   modalOverlayClassname,
   children,
+  ariaLabel,
   ...props
 }: Readonly<ModalProps>) {
   return (
@@ -36,6 +38,7 @@ function Modal({
     >
       <AriaModal {...props}>
         <Dialog
+          aria-label={ariaLabel ?? "Modal"}
           className={cn(
             "bg-klerosUIComponentsWhiteBackground h-[200px] w-[328px] outline-none",
             "rounded-base box-border",

src/lib/draggable-list/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useListData } from "react-stately";
+import React from "react";
 import {
   Button,
   ListBox,
@@ -13,6 +12,7 @@ import { cn } from "../../utils";
 import DragAndDropIcon from "../../assets/svgs/drag-and-drop.svg";
 import Trash from "../../assets/svgs/trash.svg";
 import clsx from "clsx";
+import { useList } from "./useList";
 
 type ListItem = {
   id: string | number;
@@ -53,24 +53,26 @@ function DraggableList({
   deletionDisabled = false,
   ...props
 }: Readonly<IDraggableList>) {
-  const list = useListData({
+  const {
+    items: list,
+    moveAfter,
+    moveBefore,
+    remove,
+    getItem,
+  } = useList({
     initialItems: items,
+    onChange: updateCallback,
   });
 
-  useEffect(() => {
-    if (!updateCallback) return;
-    updateCallback(list.items);
-  }, [list, updateCallback, items]);
-
   const { dragAndDropHooks } = useDragAndDrop({
     getItems: (keys) =>
-      [...keys].map((key) => ({ "text/plain": list.getItem(key)!.name })),
+      [...keys].map((key) => ({ "text/plain": getItem(key)!.name })),
     getAllowedDropOperations: () => ["move"],
     onReorder(e) {
       if (e.target.dropPosition === "before") {
-        list.moveBefore(e.target.key, e.keys);
+        moveBefore(e.target.key, e.keys);
       } else if (e.target.dropPosition === "after") {
-        list.moveAfter(e.target.key, e.keys);
+        moveAfter(e.target.key, e.keys);
       }
     },
     renderDragPreview,
@@ -81,11 +83,11 @@ function DraggableList({
       {...props}
       aria-label={props["aria-label"] ?? "Reorderable list"}
       selectionMode="single"
-      items={list.items}
+      items={list}
       dragAndDropHooks={dragDisabled ? undefined : dragAndDropHooks}
       onSelectionChange={(keys) => {
         const keyArr = Array.from(keys);
-        const selectedItem = list.getItem(keyArr[0]);
+        const selectedItem = getItem(keyArr[0]);
 
         if (selectionCallback && selectedItem) selectionCallback(selectedItem);
       }}
@@ -96,50 +98,54 @@ function DraggableList({
         className,
       )}
     >
-      {(item) => (
-        <ListBoxItem
-          textValue={item.name}
-          className={({ isHovered, isDragging, isSelected }) =>
-            cn(
-              "h-11.25 w-full cursor-pointer border-l-3 border-l-transparent",
-              "flex items-center gap-4 px-4",
-              "focus-visible:outline-klerosUIComponentsPrimaryBlue focus-visible:outline",
-              (isHovered || isSelected) && "bg-klerosUIComponentsMediumBlue",
-              isSelected && "border-l-klerosUIComponentsPrimaryBlue",
-              isDragging && "cursor-grabbing opacity-60",
-            )
-          }
-        >
-          {({ isHovered }) => (
-            <>
-              {dragDisabled ? null : (
-                <DragAndDropIcon className="size-4 cursor-grab" />
-              )}
-              <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
-                {item.name}
-              </span>
-              {isHovered && !deletionDisabled ? (
-                <Button
-                  className={"cursor-pointer hover:scale-105"}
-                  onPress={() => {
-                    list.remove(item.id);
-                  }}
-                >
-                  {({ isHovered: isButtonHovered }) => (
-                    <Trash
-                      className={clsx(
-                        "ease-ease size-4 transition",
-                        isButtonHovered &&
-                          "[&_path]:fill-klerosUIComponentsPrimaryBlue",
-                      )}
-                    />
-                  )}
-                </Button>
-              ) : null}
-            </>
-          )}
-        </ListBoxItem>
-      )}
+      {list.map((item) => {
+        return (
+          <ListBoxItem
+            id={item.id}
+            key={item.id}
+            textValue={item.name}
+            className={({ isHovered, isDragging, isSelected }) =>
+              cn(
+                "h-11.25 w-full cursor-pointer border-l-3 border-l-transparent",
+                "flex items-center gap-4 px-4",
+                "focus-visible:outline-klerosUIComponentsPrimaryBlue focus-visible:outline",
+                (isHovered || isSelected) && "bg-klerosUIComponentsMediumBlue",
+                isSelected && "border-l-klerosUIComponentsPrimaryBlue",
+                isDragging && "cursor-grabbing opacity-60",
+              )
+            }
+          >
+            {({ isHovered, isSelected }) => (
+              <>
+                {dragDisabled ? null : (
+                  <DragAndDropIcon className="size-4 cursor-grab" />
+                )}
+                <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
+                  {item.name}
+                </span>
+                {(isHovered || isSelected) && !deletionDisabled ? (
+                  <Button
+                    className={"cursor-pointer hover:scale-105"}
+                    onPress={() => {
+                      remove(item.id);
+                    }}
+                  >
+                    {({ isHovered: isButtonHovered }) => (
+                      <Trash
+                        className={clsx(
+                          "ease-ease size-4 transition",
+                          (isButtonHovered || isSelected) &&
+                            "[&_path]:fill-klerosUIComponentsPrimaryBlue",
+                        )}
+                      />
+                    )}
+                  </Button>
+                ) : null}
+              </>
+            )}
+          </ListBoxItem>
+        );
+      })}
     </ListBox>
   );
 }

src/lib/draggable-list/useList.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
+
+type Key = string | number;
+
+export interface ListItem {
+  id: Key;
+  name: string;
+  value: any;
+}
+
+interface UseListOptions {
+  initialItems: ListItem[];
+  onChange?: (updatedItems: ListItem[]) => void;
+}
+
+export function useList({ initialItems, onChange }: UseListOptions) {
+  const [items, setItems] = useState<ListItem[]>(initialItems);
+
+  useEffect(() => {
+    // preventing callback loop, we cannot rely on useEffect dependency since that does not utilize deep comparison
+    if (_.isEqual(initialItems, items)) return;
+
+    setItems(initialItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialItems]);
+
+  const updateItems = useCallback(
+    (newItems: ListItem[]) => {
+      setItems(newItems);
+      onChange?.(newItems);
+    },
+    [onChange],
+  );
+
+  const itemsMap = useMemo(() => {
+    const map = new Map<Key, ListItem>();
+    for (const item of items) {
+      map.set(item.id, item);
+    }
+    return map;
+  }, [items]);
+
+  const getItem = useCallback((key: Key) => itemsMap.get(key), [itemsMap]);
+
+  const remove = useCallback(
+    (key: Key) => {
+      updateItems(items.filter((item) => key !== item.id));
+    },
+    [items, updateItems],
+  );
+
+  const moveBefore = useCallback(
+    (targetKey: Key, keys: Iterable<Key>) => {
+      const key = Array.from(keys)[0];
+      if (key === targetKey) return;
+
+      const indexFrom = items.findIndex((item) => item.id === key);
+      const indexTo = items.findIndex((item) => item.id === targetKey);
+      if (indexFrom === -1 || indexTo === -1) return;
+
+      const reordered = [...items];
+      const [movedItem] = reordered.splice(indexFrom, 1);
+      reordered.splice(indexTo, 0, movedItem);
+      updateItems(reordered);
+    },
+    [items, updateItems],
+  );
+
+  const moveAfter = useCallback(
+    (targetKey: Key, keys: Iterable<Key>) => {
+      const key = Array.from(keys)[0];
+      if (key === targetKey) return;
+
+      const indexFrom = items.findIndex((item) => item.id === key);
+      const indexTo = items.findIndex((item) => item.id === targetKey);
+      if (indexFrom === -1 || indexTo === -1) return;
+
+      const reordered = [...items];
+      const [movedItem] = reordered.splice(indexFrom, 1);
+
+      // Adjust if removing item before target index
+      const insertIndex = indexFrom < indexTo ? indexTo : indexTo + 1;
+      reordered.splice(insertIndex, 0, movedItem);
+      updateItems(reordered);
+    },
+    [items, updateItems],
+  );
+
+  return {
+    items,
+    getItem,
+    remove,
+    moveBefore,
+    moveAfter,
+  };
+}