@orangelogic/orange-dam-content-browser-sdk 2.1.54 → 2.1.57

package/src/components/Browser/Browser.tsx

@@ -1,284 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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/ControlBar/ControlBar.constants.tsx

@@ -1,66 +0,0 @@
-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',
-}];

package/src/components/ControlBar/ControlBar.styled.ts

@@ -1,82 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--cx-spacing-small);
-  width: 100%;
-
-  --menu-item-width: 278px;
-  --details-width: 354px;
-
-  cx-input {
-    min-width: 160px;
-    max-width: 300px;
-    flex: 1;
-  }
-
-  cx-menu-item.selected::part(label),
-  cx-menu-item.selected::part(prefix),
-  cx-menu-item.selected::part(suffix) {
-    color: var(--cx-color-primary);
-    font-weight: var(--cx-font-weight-medium);
-  }
-
-  cx-menu-item::part(base) {
-    width: var(--menu-item-width);
-    max-width: 100%;
-    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
-  }
-
-  cx-menu-item::part(checked-icon) {
-    display: none;
-  }
-
-  .filter-details {
-    width: var(--details-width);
-    max-width: 100%;
-
-    cx-space {
-      flex-wrap: wrap;
-    }
-
-    cx-tree {
-      width: 100%;
-    }
-
-    cx-tree-item {
-      &::part(item) {
-        padding: var(--cx-spacing-2x-small) 0;
-      }
-
-      &::part(item--selected) {
-        background-color: transparent;
-        color: var(--cx-color-neutral-700);
-      }
-    }
-  }
-
-  .filter-details--empty {
-    &::part(content) {
-      padding: 0;
-    }
-  }
-
-  .filter-details .clear-all-button {
-    margin-top: var(--cx-spacing-small);
-  }
-
-  .menu-item--switch {
-    &::part(label) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    &::part(submenu-icon) {
-      display: none;
-    }
-  }
-`;