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

package/scripts/test.js

@@ -1,53 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI or explicitly running all tests
-if (
-  !process.env.CI &&
-  argv.indexOf('--watchAll') === -1 &&
-  argv.indexOf('--watchAll=false') === -1
-) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-
-jest.run(argv);

package/src/App.tsx

@@ -1,98 +0,0 @@
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import WebFont from 'webfontloader';
-
-import { AppContext, AppContextType } from '@/AppContext';
-import AssetsPicker from '@/view/AssetsPicker';
-
-type Props = {
-  containerId?: string;
-  extraFields?: string[];
-  multiSelect?: boolean;
-  publicApplicationName?: string;
-  /**
-   * Call back when we close the app modal.
-   * Note: This only applicable when containerId is not defined
-   * @returns
-   */
-  onClose?: () => void;
-  onError: AppContextType['onError'];
-  onAssetSelected: AppContextType['onAssetSelected'];
-  onImageSelected: AppContextType['onImageSelected'];
-};
-
-const Container = styled.div<{ open?: boolean }>`
-  background-color: var(--cx-color-neutral-0);
-  display: ${({ open }) => (open ? 'block' : 'none')};
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  z-index: var(--cx-z-index-dialog);
-`;
-
-export const App: FC<Props> = ({
-  extraFields = [],
-  containerId,
-  multiSelect,
-  onClose,
-  onError,
-  onAssetSelected,
-  onImageSelected,
-}) => {
-  useEffect(() => {
-    WebFont.load({
-      google: {
-        families: [
-          'Fira Code',
-          'Fira Mono',
-          'Fira Sans',
-          'Fira Sans Condensed',
-          'Fira Sans Extra Condensed',
-        ],
-      },
-    });
-
-    const script = document.createElement('script');
-    script.src = 'https://design-system.orangelogic.com/entry.1.0.212.js';
-    script.type = 'module';
-    document.head.appendChild(script);
-
-    return () => {
-      document.head.removeChild(script);
-    };
-    
-  }, []);
-  const [open, setOpen] = useState(true);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    onClose?.();
-  }, [onClose]);
-
-  const contextValue = useMemo(
-    () => ({
-      extraFields,
-      onAssetSelected,
-      onImageSelected,
-      onError,
-      onClose: handleClose,
-    }),
-    [extraFields, handleClose, onAssetSelected, onError, onImageSelected],
-  );
-
-  return (
-    <AppContext.Provider value={contextValue}>
-      {containerId ? (
-        <AssetsPicker multiSelect={multiSelect} />
-      ) : (
-        <Container open={open}>
-          <AssetsPicker multiSelect={multiSelect} />
-        </Container>
-      )}
-    </AppContext.Provider>
-  );
-};
-
-export default App;

package/src/AppContext.ts

@@ -1,18 +0,0 @@
-import { createContext } from 'react';
-import { GetAssetLinkResponse } from './types/search';
-
-export type AppContextType = {
-  extraFields: string[];
-  onAssetSelected: (asset: GetAssetLinkResponse[]) => void;
-  onImageSelected: (image: GetAssetLinkResponse[]) => void;
-  onError: (errorMessage?: string, error?: Error) => void;
-  onClose: () => void;
-};
-
-export const AppContext = createContext<AppContextType>({
-  extraFields: [],
-  onAssetSelected: () => { },
-  onImageSelected: () => { },
-  onError: () => { },
-  onClose: () => { },
-});

package/src/GlobalConfigContext.ts

@@ -1,46 +0,0 @@
-import { createContext } from 'react';
-
-export type ImageCardDisplayInfo = {
-  title?: boolean,
-  dimension?: boolean,
-  fileSize?: boolean,
-  tags?: boolean,
-};
-
-export type PluginInfo = {
-  publicApplicationName?: string,
-  pluginName?: string,
-};
-
-export type GlobalConfigContextType = {
-  availableDocTypes?: string[];
-  availableRepresentativeSubtypes?: string[];
-  ctaText: string;
-  displayInfo: ImageCardDisplayInfo;
-  lastLocationMode?: boolean;
-  persistMode: boolean;
-  pluginInfo: PluginInfo;
-  isContentBrowserPopedup: boolean;
-  searchInDrive: boolean;
-  showCollections?: boolean;
-  useSession?: string;
-  allowTracking: boolean;
-};
-
-export const GlobalConfigContext = createContext<GlobalConfigContextType>({
-  availableDocTypes: [],
-  availableRepresentativeSubtypes: [],
-  ctaText: 'Insert',
-  persistMode: false,
-  displayInfo: {
-    title: true,
-    dimension: true,
-    fileSize: false,
-    tags: false,
-  },
-  pluginInfo: {},
-  isContentBrowserPopedup: false,
-  searchInDrive: false,
-  showCollections: false,
-  allowTracking: true,
-});

package/src/components/ArrayClamp/ArrayClamp.styled.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  align-items: center;
-  display: flex;
-  gap: var(--cx-spacing-2x-small);
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  .array-clamp__items-container{
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-
-  .array-clamp__item {
-    white-space: nowrap;
-  }
-
-  .array-clamp__separator {
-    white-space: pre;
-  }
-
-  .array-clamp__item.clamped {
-    display: none;
-  }
-
-  .array-clamp__indicator {
-    flex-shrink: 0;
-  }
-
-  .array-clamp__indicator::part(base) {
-    max-width: 4rem;
-    display: flex;
-    overflow-wrap: break-word;
-    padding: 0 0.6em;
-    line-height: 0;
-  }
-`;

package/src/components/ArrayClamp/ArrayClamp.tsx

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

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

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

@@ -1,82 +0,0 @@
-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;
-  }
-`;