@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-alpha

package/scripts/start.js

@@ -0,0 +1,154 @@
+/* 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 = 'development';
+process.env.NODE_ENV = 'development';
+
+// 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 fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST),
+      )}`,
+    ),
+  );
+  console.log(
+    'If this was unintentional, check that you haven\'t mistakenly set it in your shell.',
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`,
+  );
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1),
+    );
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      urls,
+      useYarn,
+      useTypeScript,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath,
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port,
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
+    // Launch WebpackDevServer.
+    devServer.startCallback(() => {
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`,
+          ),
+        );
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

package/scripts/test.js

@@ -0,0 +1,53 @@
+/* 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

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

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

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

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

@@ -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;
+  }
+`;