@orangelogic/orange-dam-content-browser-sdk 1.0.1-test

package/src/components/ArrayClamp/ArrayClamp.tsx

@@ -0,0 +1,167 @@
+import React, {
+  FC,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { CxResizeObserver } from '@/web-component';
+import { Container } from './ArrayClamp.styled';
+
+type ArrayClampProps = {
+  children: React.ReactNode;
+  className?: string;
+  separator?: string;
+  tooltipSeparator?: string;
+  getChildString?: (index: number) => string;
+};
+type ArrayChildrenProps = {
+  children: React.ReactNode;
+  isClamped: (index: number) => boolean | undefined;
+  separator?: string;
+  totalVisible: number;
+};
+
+const ArrayChildren: FC<ArrayChildrenProps> = ({
+  children,
+  isClamped,
+  separator,
+  totalVisible,
+}) => {
+  const renderLastItem = (child: React.ReactNode, index: number) => {
+    return (
+      <cx-line-clamp
+        class={`array-clamp__item ${isClamped(index) ? 'clamped' : ''}`}
+      >
+        {child}
+      </cx-line-clamp>
+    );
+  };
+
+  const renderItem = (child: React.ReactNode, index: number) => {
+    if (index === totalVisible - 1) {
+      return renderLastItem(child, index);
+    }
+
+    return (
+      <span
+        className={`array-clamp__item ${isClamped(index) ? 'clamped' : ''}`}
+      >
+        {child}
+        <span className="array-clamp__separator">{separator}</span>
+      </span>
+    );
+  };
+
+  return React.Children.map(children, (child, index) =>
+    renderItem(child, index),
+  );
+};
+
+const ArrayClamp: FC<ArrayClampProps> = ({ children, className, separator = ', ', tooltipSeparator, getChildString }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeObserverRef = useRef<CxResizeObserver>(null);
+  const [clampedMap, setClampedMap] = useState(new Map<number, boolean>());
+
+  const totalClamped = Array.from(clampedMap.values()).filter(Boolean).length;
+  const totalVisible = React.Children.count(children) - totalClamped;
+
+  const hiddenChildrenStr = useMemo(() => {
+    return React.Children.toArray(children)
+      .map((child, index) => {
+        if (!clampedMap.get(index)) {
+          return '';
+        }
+        if (getChildString) {
+          return getChildString(index);
+        }
+        if (typeof child === 'string') {
+          return child;
+        } else if (isValidElement(child)) {
+          return (child.props as { children: string }).children;
+        } else {
+          return '';
+        }
+      })
+      .filter(Boolean)
+      .join(tooltipSeparator || separator);
+  }, [children, clampedMap, tooltipSeparator, separator, getChildString]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const resizeObserver = resizeObserverRef.current;
+
+    if (!container || !resizeObserver) {
+      return;
+    }
+
+    const handleResize = () => {
+      const items = container.querySelectorAll('.array-clamp__item');
+      const containerWidth = container.clientWidth;
+      let currentWidth = 0;
+      let hasClamped = false;
+
+      items.forEach((item, index) => {
+        if (hasClamped) {
+          setClampedMap((prev) => new Map(prev.set(index, true)));
+        } else {
+          currentWidth += item.clientWidth;
+
+          if (currentWidth > containerWidth) {
+            hasClamped = true;
+            setClampedMap((prev) => new Map(prev.set(index, true)));
+          }
+        }
+      });
+    };
+
+    const onResize = (e: CustomEvent) => {
+      if (e.target !== resizeObserver) {
+        return;
+      }
+      handleResize();
+    };
+
+    resizeObserver.addEventListener('cx-resize', onResize);
+    handleResize();
+
+    return () => {
+      resizeObserver.removeEventListener('cx-resize', onResize);
+    };
+  }, [children]);
+
+  const isClamped = useCallback(
+    (index: number) => {
+      return clampedMap.get(index);
+    },
+    [clampedMap],
+  );
+
+  return (
+    <Container className={`array-clamp ${className}`}>
+      <cx-resize-observer ref={resizeObserverRef}>
+        <div ref={containerRef} className={'array-clamp__items-container'}>
+          <ArrayChildren
+            isClamped={isClamped}
+            separator={separator}
+            totalVisible={totalVisible}
+          >
+            {children}
+          </ArrayChildren>
+        </div>
+        {totalClamped > 0 && (
+          <cx-tag variant="neutral" size="small" pill class="array-clamp__indicator">
+            <cx-line-clamp tooltip={hiddenChildrenStr} lines={1}>
+              +{totalClamped}
+            </cx-line-clamp>
+          </cx-tag>
+        )}
+      </cx-resize-observer>
+    </Container>
+  );
+};
+
+export default ArrayClamp;

package/src/components/ArrayClamp/index.ts

@@ -0,0 +1 @@
+export { default } from './ArrayClamp';

package/src/components/Browser/Browser.styled.ts

@@ -0,0 +1,82 @@
+import { CxDrawerProps } from '@/react-web-component';
+import styled from 'styled-components';
+
+export const Drawer = styled('cx-drawer')<CxDrawerProps>`
+  &::part(base) {
+    z-index: var(--cx-z-index-dialog);
+  }
+
+  &::part(body) {
+    padding: 0;
+  }
+
+  cx-input {
+    width: 100%;
+  }
+
+  cx-space {
+    height: 100%;
+    width: 100%;
+  }
+
+  .browser__folders {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+    position: relative;
+
+    cx-tree {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .browser__folders {
+    cx-tree-item {
+      &::part(item) {
+        padding: 0;
+      }
+    }
+
+    cx-skeleton {
+      --border-radius: var(--cx-border-radius-medium);
+      width: 100%;
+      height: 32px;
+      margin-bottom: var(--cx-spacing-3x-small);
+    }
+  }
+
+  .browser__collections {
+    border: none;
+    padding: none;
+    width: 100%;
+
+    cx-menu-item {
+      &::part(base) {
+        border-radius: var(--cx-border-radius-large);
+        font-size: var(--cx-font-size-medium);
+        padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
+      }
+      &::part(checked-icon) {
+        display: none;
+      }
+
+      &.selected::part(base) {
+        background-color: var(--cx-color-primary-50);
+      }
+
+      &.selected::part(label),
+      &.selected::part(prefix),
+      &.selected::part(suffix) {
+        color: var(--cx-color-primary-600);
+      }
+    }
+  }
+
+  .browser__collections__menu {
+    border: none;
+    max-height: 200px;
+  }
+`;

package/src/components/Browser/Browser.tsx

@@ -0,0 +1,284 @@
+import _debounce from 'lodash-es/debounce';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+
+import { LIBRARY_NAME } from '@/consts/data';
+import { useGetCollectionsQuery, useGetFoldersQuery } from '@/store/search/search.api';
+import { RootFolder } from '@/store/search/search.slice';
+import { Folder } from '@/types/search';
+import { getData } from '@/utils/storage';
+import {
+  CxChangeEvent, CxDrawer, CxInput, CxMenu, CxSelectEvent, CxSelectionChangeEvent, CxTree,
+} from '@/web-component';
+import { skipToken } from '@reduxjs/toolkit/query';
+
+import { Drawer } from './Browser.styled';
+import BrowserItem from './BrowserItem';
+
+type Props = {
+  collectionPath?: string;
+  currentFolder: Folder;
+  focusInput?: boolean;
+  lastLocationMode?: boolean;
+  open: boolean;
+  showCollections?: boolean;
+  useSession?: string;
+  onFolderSelect: (selectedFolder: Folder) => void;
+  onClose: () => void;
+};
+
+const Browser: FC<Props> = ({
+  collectionPath,
+  currentFolder,
+  focusInput,
+  lastLocationMode,
+  open,
+  showCollections,
+  useSession,
+  onFolderSelect,
+  onClose,
+}) => {
+  const [searchText, setSearchText] = useState('');
+  const [isDefined, setIsDefined] = useState(false);
+
+  const collectionRef = useRef<CxMenu>(null);
+  const drawerRef = useRef<CxDrawer>(null);
+  const searchRef = useRef<CxInput>(null);
+  const treeRef = useRef<CxTree>(null);
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-drawer'),
+      customElements.whenDefined('cx-input'),
+      customElements.whenDefined('cx-tree'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const searchInput = searchRef.current;
+    if (!searchInput) return;
+    const onSearchInput = _debounce((e: CxChangeEvent) => {
+      const value = (e.target as CxInput).value;
+      if (searchText !== value && (value.length > 2 || value.length === 0)) {
+        setSearchText(value);
+      }
+    }, 500);
+    searchInput.addEventListener('cx-input', onSearchInput);
+
+    return () => {
+      searchInput.removeEventListener('cx-input', onSearchInput);
+    };
+  }, [isDefined, searchText]);
+
+  useEffect(() => {
+    const drawer = drawerRef.current;
+    if (!drawer) return;
+    const onDrawerClose = () => {
+      onClose();
+    };
+    drawer.addEventListener('cx-request-close', onDrawerClose);
+
+    return () => {
+      drawer.removeEventListener('cx-request-close', onDrawerClose);
+    };
+  }, [isDefined, onClose]);
+
+  const {
+    data: folders,
+    isLoading: isLoadingFolders,
+    isFetching: isFetchingFolders,
+    isError: isErrorFolders,
+  } = useGetFoldersQuery({ folder: RootFolder, searchText, useSession });
+
+  useEffect(() => {
+    const handleDefaultFolder = () => {
+      if (!folders) return;
+      const libraryFolder = folders.find((folder) => folder.title === LIBRARY_NAME);
+
+      if (libraryFolder) {
+        onFolderSelect(libraryFolder);
+      } else {
+        onFolderSelect(RootFolder);
+      }
+    };
+
+    if (firstRender.current && folders) {
+      firstRender.current = false;
+      if (lastLocationMode) {
+        getData('lastLocation').then((lastLocation) => {
+          if (typeof lastLocation === 'string') {
+            try {
+              const folder = JSON.parse(lastLocation) as Folder;
+              onFolderSelect(folder);
+            } catch (error) {
+              handleDefaultFolder();
+            }
+          } else {
+            handleDefaultFolder();
+          }
+        }).catch(() => {
+          handleDefaultFolder();
+        });
+      } else {
+        handleDefaultFolder();
+      }
+    }
+  }, [folders, lastLocationMode, onFolderSelect]);
+
+  const {
+    data: collections,
+    isLoading: isLoadingCollections,
+    isFetching: isFetchingCollections,
+    isError: isErrorCollections,
+  } = useGetCollectionsQuery(
+    collectionPath
+      ? {
+        folder: collectionPath,
+        useSession,
+      }
+      : skipToken,
+  );
+
+  useEffect(() => {
+    const tree = treeRef.current;
+    if (!tree) return;
+    const onTreeSelect = (e: CxSelectionChangeEvent) => {
+      const folder = JSON.parse(
+        e.detail.selection[0].dataset.value ?? '{}',
+      ) as Folder;
+      onFolderSelect?.(folder);
+    };
+    tree.addEventListener('cx-selection-change', onTreeSelect);
+  }, [isDefined, onFolderSelect]);
+
+  useEffect(() => {
+    const collection = collectionRef.current;
+    if (!collection) return;
+    const onCollectionSelect = (e: CxSelectEvent) => {
+      const folder = JSON.parse(e.detail.item.value ?? '{}') as Folder;
+      onFolderSelect?.(folder);
+    };
+    collection.addEventListener('cx-select', onCollectionSelect);
+
+    return () => {
+      collection.removeEventListener('cx-select', onCollectionSelect);
+    };
+  }, [isDefined, collections, onFolderSelect]);
+
+  const renderFolders = useCallback(() => {
+    if (isLoadingFolders || isFetchingFolders) {
+      return Array.from({ length: 5 }).map((_, index) => (
+        <cx-skeleton key={index}></cx-skeleton>
+      ));
+    } else if (folders && folders.length > 0) {
+      return folders?.map((folder) => (
+        <BrowserItem
+          key={folder.id}
+          folder={folder}
+          currentFolderID={currentFolder.id}
+          searchText={searchText}
+          useSession={useSession}
+        />
+      ));
+    } else if (isErrorFolders) {
+      return (
+        <cx-typography variant="body3">Failed to load folders</cx-typography>
+      );
+    }
+
+    return <cx-typography variant="body3">No folders found</cx-typography>;
+  }, [
+    isLoadingFolders,
+    isFetchingFolders,
+    isErrorFolders,
+    folders,
+    currentFolder.id,
+    searchText,
+    useSession,
+  ]);
+
+  const renderCollections = useCallback(() => {
+    if (isLoadingCollections || isFetchingCollections) {
+      return Array.from({ length: 5 }).map((_, index) => (
+        <cx-skeleton key={index}></cx-skeleton>
+      ));
+    } else if (collections && collections.length > 0) {
+      return collections?.map((collection) => {
+        const isSelected = currentFolder.id === collection.id;
+
+        return (  
+          <cx-menu-item
+            key={collection.id}
+            value={JSON.stringify(collection)}
+            className={`${isSelected ? 'selected' : ''}`}
+          >
+            <cx-icon slot="prefix" name="collections"></cx-icon>
+            {collection.title}
+          </cx-menu-item>
+        );
+      });
+    } else if (isErrorCollections) {
+      return (
+        <cx-typography variant="body3">
+          Failed to load collections
+        </cx-typography>
+      );
+    }
+
+    return <cx-typography variant="body3">No collections found</cx-typography>;
+  }, [isLoadingCollections, isFetchingCollections, collections, isErrorCollections, currentFolder.id]);
+
+  return (
+    <Drawer
+      ref={drawerRef}
+      label="Browser"
+      placement="start"
+      contained
+      open={open}
+    >
+      <cx-space direction="vertical" spacing="small" wrap="nowrap">
+        <cx-space
+          direction="vertical"
+          spacing="small"
+          style={{
+            padding: 'var(--body-spacing) var(--body-spacing) 0',
+          }}
+        >
+          <cx-typography variant="body3">Folders</cx-typography>
+          <cx-input
+            ref={searchRef}
+            value={searchText}
+            placeholder="Search..."
+            clearable
+            autoFocus={focusInput}
+            className='search-input'
+          >
+            <cx-icon name="search" slot="prefix" className="icon--large"></cx-icon>
+          </cx-input>
+          <div className="browser__folders">
+            <cx-tree ref={treeRef}>{renderFolders()}</cx-tree>
+          </div>
+        </cx-space>
+        {showCollections && collections && collections.length > 0 && (
+          <div className="browser__collections">
+            <cx-details>
+              <cx-typography slot="summary" variant="body3">
+                Collections
+              </cx-typography>
+              <cx-menu
+                ref={collectionRef}
+                className="browser__collections__menu"
+              >
+                {renderCollections()}
+              </cx-menu>
+            </cx-details>
+          </div>
+        )}
+      </cx-space>
+    </Drawer>
+  );
+};
+
+export default Browser;

package/src/components/Browser/BrowserItem.tsx

@@ -0,0 +1,98 @@
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useGetFoldersQuery } from '@/store/search/search.api';
+import { Folder } from '@/types/search';
+
+import { CxCollapseEvent, CxTreeItem } from '@/web-component';
+
+type Props = {
+  folder: Folder;
+  currentFolderID: string;
+  searchText?: string;
+  useSession?: string;
+};
+
+export const BrowserItem: FC<Props> = ({
+  folder,
+  currentFolderID,
+  searchText,
+  useSession,
+}) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const treeItemRef = useRef<CxTreeItem>(null);
+  const isSelected = currentFolderID === folder.id;
+
+  const {
+    data: folders,
+    isFetching,
+  } = useGetFoldersQuery({ folder, searchText: '', useSession }, { skip: !isExpanded });
+
+  const highlightedTitle = useMemo(() => {
+    if (!searchText) return folder.title;
+    const searchWords = searchText.toLowerCase().split(' ').filter(Boolean);
+    const regex = new RegExp(`(${searchWords.join('|')})`, 'gi');
+    const parts = folder.title.split(regex);
+
+    return parts.map((part, index) =>
+      searchWords.includes(part.toLowerCase()) ? <strong key={index}>{part}</strong> : part,
+    );
+  }, [folder.title, searchText]);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-tree-item'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, [isDefined]);
+
+  useEffect(() => {
+    const treeItem = treeItemRef.current;
+    if (!treeItem) return;
+    const onExpand = () => {
+      setIsExpanded(true);
+    };
+    const onCollapse = (e: CxCollapseEvent) => {
+      if (e.detail.target === treeItemRef.current) {
+        setIsExpanded(false);
+      }
+    };
+    treeItem.addEventListener('cx-lazy-load', onExpand);
+    treeItem.addEventListener('cx-expand', onExpand);
+    treeItem.addEventListener('cx-collapse', onCollapse);
+
+    return () => {
+      treeItem.removeEventListener('cx-lazy-load', onExpand);
+      treeItem.removeEventListener('cx-expand', onExpand);
+      treeItem.removeEventListener('cx-collapse', onCollapse);
+    };
+  }, [isDefined]);
+
+  // Lazy load if folder has children
+  // and (folders are not fetched yet or are fetching)
+  const isLazy = folder.hasChildren && (folders === undefined || isFetching);
+
+  return (
+    <cx-tree-item
+      ref={treeItemRef}
+      data-value={JSON.stringify(folder)}
+      expanded={isExpanded}
+      selected={isSelected}
+      lazy={isLazy}
+    >
+      <cx-icon name="folder"></cx-icon>
+      <cx-line-clamp lines={1}>{highlightedTitle}</cx-line-clamp>
+      {folders?.map((item) => (
+        <BrowserItem
+          key={item.id}
+          folder={item}
+          searchText={searchText}
+          currentFolderID={currentFolderID}
+        />
+      ))}
+    </cx-tree-item>
+  );
+};
+
+export default BrowserItem;

package/src/components/Browser/index.ts

@@ -0,0 +1 @@
+export { default as Browser } from './Browser';

package/src/components/ControlBar/ControlBar.constants.tsx

@@ -0,0 +1,66 @@
+import { GridView } from '@/types/search';
+
+const AscendingIcon = () => (
+  <svg
+    // @ts-expect-error
+    slot="prefix"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.33333 4.7619L4.25984 5.68841L6.60714 3.33929V11.3095H7.61905V3.33929L9.96627 5.68841L10.8929 4.7619L6.96429 0.833333L3.33333 4.7619Z"
+      fill="currentColor"
+    />
+    <path
+      opacity="0.3"
+      d="M17.0833 15.2381L16.1568 14.3116L13.8095 16.6607V8.69048H12.7976V16.6607L10.4504 14.3116L9.52381 15.2381L13.4524 19.1667L17.0833 15.2381Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const DescendingIcon = () => (
+  <svg
+    // @ts-expect-error
+    slot="prefix"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.3"
+      d="M3.33333 4.7619L4.25984 5.68841L6.60714 3.33929V11.3095H7.61905V3.33929L9.96627 5.68841L10.8929 4.7619L6.96429 0.833333L3.33333 4.7619Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.0833 15.2381L16.1568 14.3116L13.8095 16.6607V8.69048H12.7976V16.6607L10.4504 14.3116L9.52381 15.2381L13.4524 19.1667L17.0833 15.2381Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const sortDirections = [{
+  label: 'Ascending',
+  value: 'ascending',
+  icon: AscendingIcon,
+}, {
+  label: 'Descending',
+  value: 'descending',
+  icon: DescendingIcon,
+}];
+
+export const views = [{
+  value: GridView.Small,
+  label: 'Small labeled',
+}, {
+  value: GridView.Medium,
+  label: 'Medium labeled',
+}, {
+  value: GridView.Large,
+  label: 'Large labeled',
+}];