@fibery/ui-kit 1.42.0 → 2.0.1

package/src/toggle-button/toggle-button.tsx

@@ -1,4 +1,4 @@
-import {css, cx} from "@linaria/core";
+import {css, cx, CSSProperties} from "@linaria/core";
 import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
 import {forwardRef} from "react";
 import {border, space, textStyles, themeVars} from "../design-system";
@@ -18,15 +18,15 @@ export const toggleButtonCss = css`
   transition-property: border, background-color, color, opacity, box-shadow;
   transition-duration: 0.15s;
 
-  color: ${themeVars.textColor};
-  ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
+  color: var(--fibery-toggle-button-default-text-color);
+  ${iconColorVar}: var(--fibery-toggle-button-default-icon-color);
 
-  border: 1.5px solid ${themeVars.colorBorderReactionsHover};
-  background-color: ${themeVars.colorBgReactionsDefault};
+  border: 1.5px solid var(--fibery-toggle-button-default-border-color);
+  background-color: var(--fibery-toggle-button-default-color);
 
   &[aria-readonly="true"] {
-    background-color: ${themeVars.colorBgReactionsHover};
-    border-color: ${themeVars.colorBgReactionsHover};
+    background-color: var(--fibery-toggle-button-default-hover-color);
+    border-color: var(--fibery-toggle-button-default-hover-color);
   }
 
   cursor: pointer;
@@ -59,19 +59,11 @@ export const toggleButtonCss = css`
   }
 
   &:not(:disabled, [aria-readonly="true"]) {
-    &:hover {
-      background-color: ${themeVars.colorBgReactionsHover};
-      border-color: ${themeVars.colorBorderReactionsHover};
-    }
-
+    &:hover,
     &:is(:active, [aria-expanded="true"]) {
-      background-color: ${themeVars.colorBgReactionsHover};
-      border-color: ${themeVars.colorBorderReactionsHover};
-
-      &:is([aria-pressed="true"], [aria-checked="true"]) {
-        background-color: ${themeVars.colorBgReactionsSelectedHover};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
-      }
+      background-color: var(--fibery-toggle-button-default-hover-color);
+      border-color: var(--fibery-toggle-button-default-border-color);
+      color: var(--fibery-toggle-button-default-hover-text-color);
     }
   }
 
@@ -85,30 +77,27 @@ export const toggleButtonCss = css`
   }
 
   &:focus-visible {
-    background-color: ${themeVars.colorBgReactionsHover};
-    outline: 2px solid ${themeVars.colorBorderReactionsHover};
+    background-color: var(--fibery-toggle-button-default-hover-color);
+    outline: 2px solid var(--fibery-toggle-button-default-border-color);
   }
 
   &:is([aria-pressed="true"], [aria-checked="true"]) {
-    color: ${themeVars.colorTextReactionsSelected};
-    ${iconColorVar}: ${themeVars.colorIconButtonGhostAccent};
-    background-color: ${themeVars.colorBgReactionsSelectedDefault};
-    border-color: ${themeVars.colorBorderReactionsSelectedDefault};
+    color: var(--fibery-toggle-button-pressed-text-color);
+    ${iconColorVar}: var(--fibery-toggle-button-pressed-icon-color);
+    background-color: var(--fibery-toggle-button-pressed-color);
+    border-color: var(--fibery-toggle-button-pressed-border-color);
 
     &[aria-readonly="true"] {
-      background-color: ${themeVars.colorBgReactionsSelectedDefault};
-      border-color: ${themeVars.colorBgReactionsSelectedDefault};
+      background-color: var(--fibery-toggle-button-pressed-color);
+      border-color: var(--fibery-toggle-button-pressed-color);
     }
 
     &:not(:disabled, [aria-readonly="true"]) {
-      &:hover {
-        background-color: ${themeVars.colorBgReactionsSelectedHover};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
-      }
-
-      &:active {
-        background-color: ${themeVars.colorBgReactionsSelectedDefault};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      &:hover,
+      &:is(:active, [aria-expanded="true"]) {
+        background-color: var(--fibery-toggle-button-pressed-hover-color);
+        border-color: var(--fibery-toggle-button-pressed-hover-border-color);
+        color: var(--fibery-toggle-button-pressed-hover-text-color);
       }
     }
   }
@@ -138,6 +127,26 @@ export const toggleButtonContent = css`
   overflow: hidden;
 `;
 
+const getColors = (): CSSProperties => {
+  return {
+    "--fibery-toggle-button-default-color": themeVars.colorBgReactionsDefault,
+    "--fibery-toggle-button-default-text-color": themeVars.colorTextButtonGhostNeutral,
+    "--fibery-toggle-button-default-icon-color": themeVars.colorIconButtonGhostNeutral,
+    "--fibery-toggle-button-default-border-color": themeVars.colorBorderReactionsHover,
+    "--fibery-toggle-button-default-hover-color": themeVars.colorBgReactionsHover,
+    "--fibery-toggle-button-default-hover-text-color": themeVars.colorTextButtonGhostNeutral,
+    "--fibery-toggle-button-default-hover-border-color": themeVars.colorBorderReactionsHover,
+
+    "--fibery-toggle-button-pressed-color": themeVars.colorBgReactionsSelectedDefault,
+    "--fibery-toggle-button-pressed-text-color": themeVars.colorTextReactionsSelected,
+    "--fibery-toggle-button-pressed-icon-color": themeVars.colorIconButtonGhostAccent,
+    "--fibery-toggle-button-pressed-border-color": themeVars.colorBorderReactionsSelectedDefault,
+    "--fibery-toggle-button-pressed-hover-color": themeVars.colorBgReactionsSelectedHover,
+    "--fibery-toggle-button-pressed-hover-text-color": themeVars.colorTextReactionsSelected,
+    "--fibery-toggle-button-pressed-hover-border-color": themeVars.colorBorderReactionsSelectedHover,
+  };
+};
+
 export type ToggleButtonVariant = "outline";
 export type ToggleButtonSize = "small" | "medium" | "large";
 
@@ -156,14 +165,18 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       size = "small",
       variant = "outline",
       children,
+      style,
       "aria-readonly": ariaReadonly,
       readOnly = ariaReadonly,
       ...props
     },
     ref
   ): JSX.Element => {
+    const colors = getColors();
+
     return (
       <Toggle
+        style={{...colors, ...style}}
         ref={ref}
         className={cx(toggleButtonCss, iconStart && toggleButtonCssWithIconStart, className)}
         data-variant={variant}

package/src/tree-utils.test.ts

@@ -0,0 +1,166 @@
+import {flattenTree, mutateTree, TreeData} from "./tree-utils";
+
+const makeTree = (): TreeData => ({
+  rootId: "root",
+  items: {
+    root: {id: "root", children: ["a", "b"]},
+    a: {id: "a", children: ["a1", "a2"], isExpanded: false},
+    a1: {id: "a1", children: []},
+    a2: {id: "a2", children: []},
+    b: {id: "b", children: [], isExpanded: false},
+  },
+});
+
+describe("flattenTree", () => {
+  it("returns empty array when rootId is missing from items", () => {
+    const tree: TreeData = {rootId: "missing", items: {}};
+    expect(flattenTree(tree)).toEqual([]);
+  });
+
+  it("returns top-level children with correct paths", () => {
+    const tree = makeTree();
+    const result = flattenTree(tree);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].item.id).toBe("a");
+    expect(result[0].path).toEqual([0]);
+    expect(result[1].item.id).toBe("b");
+    expect(result[1].path).toEqual([1]);
+  });
+
+  it("does not include children of collapsed nodes", () => {
+    const tree = makeTree();
+    const result = flattenTree(tree);
+
+    const ids = result.map((r) => r.item.id);
+    expect(ids).not.toContain("a1");
+    expect(ids).not.toContain("a2");
+  });
+
+  it("includes children of expanded nodes", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+
+    const result = flattenTree(tree);
+    const ids = result.map((r) => r.item.id);
+
+    expect(ids).toEqual(["a", "a1", "a2", "b"]);
+  });
+
+  it("assigns correct nested paths for expanded children", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+
+    const result = flattenTree(tree);
+
+    expect(result[1].item.id).toBe("a1");
+    expect(result[1].path).toEqual([0, 0]);
+    expect(result[2].item.id).toBe("a2");
+    expect(result[2].path).toEqual([0, 1]);
+  });
+
+  it("handles multiple levels of expansion", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {
+        root: {id: "root", children: ["a"]},
+        a: {id: "a", children: ["a1"], isExpanded: true},
+        a1: {id: "a1", children: ["a1a"], isExpanded: true},
+        a1a: {id: "a1a", children: []},
+      },
+    };
+
+    const result = flattenTree(tree);
+    expect(result.map((r) => r.item.id)).toEqual(["a", "a1", "a1a"]);
+    expect(result[2].path).toEqual([0, 0, 0]);
+  });
+
+  it("returns empty array when root has no children", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {root: {id: "root", children: []}},
+    };
+    expect(flattenTree(tree)).toEqual([]);
+  });
+
+  it("preserves original path prefix when called with initial path", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {
+        root: {id: "root", children: ["a"]},
+        a: {id: "a", children: []},
+      },
+    };
+
+    const result = flattenTree(tree, [5, 3]);
+    expect(result[0].path).toEqual([5, 3, 0]);
+  });
+});
+
+describe("mutateTree", () => {
+  it("returns the same tree reference when itemId is not found", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "nonexistent", {isExpanded: true});
+    expect(result).toBe(tree);
+  });
+
+  it("preserves rootId", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.rootId).toBe(tree.rootId);
+  });
+
+  it("applies mutation to the target item", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"].isExpanded).toBe(true);
+  });
+
+  it("does not mutate the original tree", () => {
+    const tree = makeTree();
+    mutateTree(tree, "a", {isExpanded: true});
+    expect(tree.items["a"].isExpanded).toBe(false);
+  });
+
+  it("does not change other items references", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["b"]).toBe(tree.items["b"]);
+    expect(result.items["a1"]).toBe(tree.items["a1"]);
+  });
+
+  it("merges partial mutation fields", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], hasChildren: true, isExpanded: false};
+
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"].hasChildren).toBe(true);
+    expect(result.items["a"].isExpanded).toBe(true);
+    expect(result.items["a"].children).toEqual(["a1", "a2"]);
+  });
+
+  it("can update children array", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "b", {children: ["new-child"]});
+    expect(result.items["b"].children).toEqual(["new-child"]);
+  });
+
+  it("can update data field", () => {
+    const tree = makeTree();
+    const data = {name: "Node A"};
+    const result = mutateTree(tree, "a", {data});
+    expect(result.items["a"].data).toBe(data);
+  });
+
+  it("returns a new items object reference", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items).not.toBe(tree.items);
+  });
+
+  it("returns a new item object reference for the mutated item", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"]).not.toBe(tree.items["a"]);
+  });
+});

package/src/tree-utils.ts

@@ -0,0 +1,107 @@
+import {$TSFixMe} from "@fibery/ui-kit/src/tsfixme";
+
+export type ItemId = string | number;
+export interface TreeData {
+  rootId: ItemId;
+  items: Record<ItemId, TreeItem>;
+}
+
+export type TreeItemData = $TSFixMe;
+export type TreeItem = {
+  id: ItemId;
+  children: ItemId[];
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  isChildrenLoading?: boolean;
+  data?: TreeItemData;
+};
+export type FlattenedTree = FlattenedItem[];
+export type Path = number[];
+export type FlattenedItem = {
+  item: TreeItem;
+  path: Path;
+};
+export type TreeSourcePosition = {
+  parentId: ItemId;
+  index: number;
+};
+export type TreeDestinationPosition = {
+  parentId: ItemId;
+  index?: number;
+};
+
+export type TreeItemMutation = {
+  id?: ItemId;
+  children?: ItemId[];
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  isChildrenLoading?: boolean;
+  data?: TreeItemData;
+};
+
+/*
+  Transforms tree structure into flat list of items for rendering purposes.
+  We recursively go through all the elements and its children first on each level
+ */
+export const flattenTree = (tree: TreeData, path: Path = []): FlattenedTree =>
+  tree.items[tree.rootId]
+    ? tree.items[tree.rootId].children.reduce<FlattenedTree>((accum, itemId, index) => {
+        // iterating through all the children on the given level
+        const item = tree.items[itemId];
+        const currentPath = [...path, index]; // we create a flattened item for the current item
+
+        const currentItem = createFlattenedItem(item, currentPath); // we flatten its children
+
+        const children = flattenChildren(tree, item, currentPath); // append to the accumulator
+
+        return [...accum, currentItem, ...children];
+      }, [])
+    : [];
+/*
+  Constructs a new FlattenedItem
+ */
+
+const createFlattenedItem = (item: TreeItem, currentPath: Path) => {
+  return {
+    item,
+    path: currentPath,
+  };
+};
+/*
+  Flatten the children of the given subtree
+*/
+
+const flattenChildren = (tree: TreeData, item: TreeItem, currentPath: Path) => {
+  return item.isExpanded
+    ? flattenTree(
+        {
+          rootId: item.id,
+          items: tree.items,
+        },
+        currentPath
+      )
+    : [];
+};
+/*
+  Changes the tree data structure with minimal reference changes.
+ */
+
+export const mutateTree = (tree: TreeData, itemId: ItemId, mutation: TreeItemMutation) => {
+  const itemToChange = tree.items[itemId];
+
+  if (!itemToChange) {
+    // Item not found
+    return tree;
+  } // Returning a clone of the tree structure and overwriting the field coming in mutation
+
+  return {
+    // rootId should not change
+    rootId: tree.rootId,
+    items: {
+      // copy all old items
+      ...tree.items,
+      // overwriting only the item being changed
+      [itemId]: {...itemToChange, ...mutation},
+    },
+  };
+};

package/src/file-item/use-register-in-image-gallery.tsx

@@ -1,70 +0,0 @@
-import {useCallback, useEffect, useState} from "react";
-import {useImagesGalleryMethods, useImagesGalleryRegistry} from "../images-gallery/images-gallery";
-import {FilePreviewActions} from "./file-preview-actions";
-import {PreviewData} from "./types";
-
-export function useRegisterInImageGallery({
-  preview,
-  name,
-  onDownloadClick,
-}: {
-  preview: PreviewData | null;
-  name: string;
-  onDownloadClick?: () => void;
-}) {
-  const [zoomed, setZoomed] = useState(false);
-  const imagesRegistry = useImagesGalleryRegistry();
-  const galleryMethods = useImagesGalleryMethods();
-
-  useEffect(() => {
-    if (!preview) {
-      return;
-    }
-
-    imagesRegistry.set(preview.originalSrc, {
-      type: preview.type,
-      src: preview.originalSrc,
-      label: name,
-      zoomed: false,
-      setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-    });
-  }, [imagesRegistry, name, preview, onDownloadClick]);
-
-  useEffect(() => {
-    if (!preview) {
-      return undefined;
-    }
-
-    if (zoomed) {
-      galleryMethods.setActivated(true);
-    }
-    const imageData = imagesRegistry.get(preview.originalSrc);
-    if (imageData) {
-      imageData.zoomed = zoomed;
-    } else {
-      imagesRegistry.set(preview.originalSrc, {
-        type: preview.type,
-        src: preview.originalSrc,
-        label: name,
-        zoomed,
-        setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-      });
-    }
-
-    return () => {
-      imagesRegistry.delete(preview.originalSrc);
-    };
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
-
-  const openGallery = useCallback(() => {
-    if (preview) {
-      setZoomed(true);
-    } else {
-      onDownloadClick?.();
-    }
-  }, [preview, onDownloadClick]);
-
-  return {openGallery};
-}