@imposium-hub/components 2.14.11 → 2.15.0-0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.14.11",
+    "version": "2.15.0-0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -22,11 +22,7 @@
         "release-as": "bash scripts/release-as.sh",
         "format": "prettier --write \"**/*.{,js,json,jsx,ts,tsx,md}\"",
         "check-formatting": "prettier --check \"**/*.{,js,json,jsx,ts,tsx,md}\"",
-        "storybook": "npm run build && start-storybook -p 6066",
-        "test": "vitest",
-        "test:run": "vitest run",
-        "test:coverage": "vitest run --coverage",
-        "test:watch": "vitest --watch"
+        "storybook": "npm run build && start-storybook -p 6066"
     },
     "repository": {
         "type": "git",
@@ -40,15 +36,15 @@
     "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
     "dependencies": {
         "@imposium-hub/react-color": "^2.19.4",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "@innovid/feature-flags-react": "^1.1.0-6",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "ansi_up": "^5.1.0",
         "cogo-toast": "^4.2.3",
         "export-to-csv": "^0.2.1",
         "file-saver": "^2.0.5",
         "imposium-js-sdk": "^3.5.6",
         "js-cookie": "^2.2.1",
-        "lodash": "^4.18.1",
+        "lodash": "^4.17.21",
         "moize": "^6.1.0",
         "moment": "^2.29.1",
         "react-hotkeys-hook": "^4.4.1",
@@ -70,13 +66,13 @@
         "axios": "^1.9.0",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
-        "react": "^18.0.0",
+        "react": "^17.0.1",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.0.0",
+        "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^12.0.0",
+        "react-resize-detector": "^6.7.1",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
@@ -103,14 +99,12 @@
         "@storybook/addon-storysource": "^8.6.14",
         "@storybook/react": "^8.6.14",
         "@storybook/testing-library": "^0.2.1",
-        "@testing-library/react": "^16.3.2",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/offscreencanvas": "^2019.6.4",
-        "@types/react": "^18.0.0",
+        "@types/react": "^17.0.37",
         "@types/resize-observer-browser": "^0.1.5",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
-        "@vitest/coverage-v8": "^4.1.3",
         "axios": "^1.9.0",
         "concurrently": "^7.1.0",
         "dpop": "^2.1.1",
@@ -120,20 +114,19 @@
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-unused-imports": "^2.0.0",
         "hotkeys-js": "^3.6.12",
-        "jsdom": "^29.0.2",
         "less": "^4.1.2",
         "less-plugin-clean-css": "^1.5.1",
         "localforage": "^1.7.3",
         "np": "^10.2.0",
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
-        "react": "^18.0.0",
+        "react": "^17.0.1",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.0.0",
+        "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^12.0.0",
+        "react-resize-detector": "^6.7.1",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
@@ -142,17 +135,13 @@
         "sb": "^8.6.14",
         "smpte-timecode": "^1.2.3",
         "storybook-dark-mode": "^3.0.3",
-        "typescript": "^5.3.3",
-        "vitest": "^4.1.3"
+        "typescript": "^5.3.3"
     },
     "eslintConfig": {
         "root": true,
         "extends": [
             "@imposium-hub/eslint-config/typescript-react"
-        ],
-        "parserOptions": {
-            "project": "./tsconfig.eslint.json"
-        }
+        ]
     },
     "prettier": "@imposium-hub/prettier-config",
     "overrides": {

package/src/components/app-wrapper/AppWrapper.tsx

@@ -5,18 +5,13 @@ import { ConfirmModal } from '../confirm-modal/ConfirmModal';
 import { IImposiumAPI } from '../../services/API';
 import { ICrmApi } from '../../services/CrmApi';
 import { useAuth0 } from '@auth0/auth0-react';
-import { configureHistory, replaceRoute } from '../../utils/routing';
+import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
 import { TOKEN_TYPE, FlagsProvider } from '@innovid/feature-flags-react';
 import { useMemo } from 'react';
 
-export interface ICompatibleHistory {
-    push: (route: string) => void;
-    replace: (route: string) => void;
-}
-
 export interface IAppWrapperProps {
     appLabel: string;
     environment: string;
@@ -37,8 +32,6 @@ export interface IAppWrapperProps {
     hideDocs?: boolean;
     hideOrgPicker?: boolean;
     growthBookId?: string;
-    history: ICompatibleHistory;
-    children?: React.ReactNode;
 }
 
 export const APP_WRAPPER_ERROR_STATES = {
@@ -69,16 +62,13 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         environment,
         appLabel,
         allowNoStories,
-        growthBookId,
-        history
+        growthBookId
     } = props;
     const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
     const [auth0Token, setAuth0Token] = React.useState(null);
 
-    configureHistory(history);
-
     React.useEffect(() => {
         void getAccessTokenSilently().then((token) => {
             if (token) {
@@ -189,10 +179,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 onAuthenticated(organization_id, story_id);
 
                 if (!hideStoryPicker) {
-                    const route = story_id
-                        ? `/${organization_id}/${story_id}`
-                        : `/${organization_id}`;
-                    replaceRoute(route);
+                    replaceRoute(`/${organization_id}/${story_id}`);
                 } else {
                     replaceRoute(`/${organization_id}`);
                 }
@@ -288,7 +275,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             // If we're not loading, and we're not authenticated, call login, and cache story + org ID from URL if it's there
         } else if (!isLoading && !isAuthenticated) {
             void loginWithRedirect({
-                appState: { returnTo: window.location.pathname + window.location.search }
+                appState: { returnTo: window.location.href }
             });
         }
     };
@@ -381,9 +368,14 @@ export const ERROR_DESCRIPTIONS = {
 export interface AppWrappeErrorProps {
     error: string;
     email: string;
+    onCreateStory?: () => void;
 }
 
-export const AppWrapperErrors: React.FC<AppWrappeErrorProps> = ({ error, email }) => {
+export const AppWrapperErrors: React.FC<AppWrappeErrorProps> = ({
+    error,
+    email,
+    onCreateStory
+}) => {
     return (
         <div className='no-access'>
             <FontAwesomeIcon

package/src/components/assets/AssetsUploadMenu.tsx

@@ -230,7 +230,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
         const delimiterSelector = tagByDelimiter && (
             <SelectField
-                width='10%'
+                width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
                 onChange={(c) => {
@@ -304,7 +304,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                     ref={this.menuRef}>
                     <div className='uploads-controls'>
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.autoTagDelimiter}
                             value={tagByDelimiter}
                             onChange={() =>
@@ -313,20 +313,20 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         />
                         {delimiterSelector}
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.manualTagging}
                             value={tagManually}
                             onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
                         />
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.autoTagFilname}
                             value={tagByFileName}
                             onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
                         />
                         {!fromCrM && (
                             <CheckboxField
-                                width='10%'
+                                width='50%'
                                 label={copy.uploads.assignToProjectInput}
                                 info={copy.uploads.assignToProjectInfo}
                                 value={!assignToStory}

package/src/components/change-report/ChangeReportTree.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { IChangeReportNode, IChangeReportSection } from '../../constants/snippets';
+import * as copy from '../../constants/copy';
+
+interface IChangeReportTreeProps {
+    sections: IChangeReportSection[] | null;
+    defaultExpanded?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+}
+
+interface IChangeReportNodeProps {
+    node: IChangeReportNode;
+    defaultExpanded: boolean;
+    depth: number;
+}
+
+const STATUS_LABELS: Record<IChangeReportNode['status'], string> = {
+    added: copy.publish.statusAdded,
+    removed: copy.publish.statusRemoved,
+    modified: copy.publish.statusModified
+};
+
+const ChangeReportNode: React.FC<IChangeReportNodeProps> = ({ node, defaultExpanded, depth }) => {
+    const [expanded, setExpanded] = React.useState(defaultExpanded);
+
+    const hasChildren = node.children && node.children.length > 0;
+    const hasValues = node.oldValue !== undefined || node.newValue !== undefined;
+
+    const oldDisplay =
+        node.oldValue === null || node.oldValue === '' || node.oldValue === undefined
+            ? '*empty*'
+            : node.oldValue;
+    const newDisplay =
+        node.newValue === null || node.newValue === '' || node.newValue === undefined
+            ? '*empty*'
+            : node.newValue;
+
+    return (
+        <div
+            className='change-report-node'
+            style={{ paddingLeft: depth * 16 }}>
+            <div className='change-report-node-row'>
+                {hasChildren && (
+                    <span
+                        className={`change-report-toggle ${
+                            expanded ? 'change-report-toggle--expanded' : ''
+                        }`}
+                        onClick={() => setExpanded(!expanded)}>
+                        ▶
+                    </span>
+                )}
+                {!hasChildren && <span className='change-report-toggle-placeholder' />}
+                <span className={`change-report-status change-report-status--${node.status}`}>
+                    {STATUS_LABELS[node.status]}
+                </span>
+                <span className='change-report-label'>{node.label}</span>
+                {hasValues && (
+                    <span className='change-report-values'>
+                        <span className='change-report-value change-report-value--old'>
+                            {oldDisplay}
+                        </span>
+                        <span className='change-report-value-arrow'>&rarr;</span>
+                        <span className='change-report-value change-report-value--new'>
+                            {newDisplay}
+                        </span>
+                    </span>
+                )}
+            </div>
+            {hasChildren && expanded && (
+                <div className='change-report-children'>
+                    {node.children.map((child, i) => (
+                        <ChangeReportNode
+                            key={i}
+                            node={child}
+                            defaultExpanded={defaultExpanded}
+                            depth={depth + 1}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const ChangeReportTree: React.FC<IChangeReportTreeProps> = ({
+    sections,
+    defaultExpanded = true,
+    emptyMessage = copy.publish.noChangesMessage,
+    loadingMessage = copy.publish.loadingChangesMessage
+}) => {
+    if (sections === null) {
+        return (
+            <div className='change-report-tree change-report-tree--loading'>{loadingMessage}</div>
+        );
+    }
+
+    if (sections.length === 0) {
+        return <div className='change-report-tree change-report-tree--empty'>{emptyMessage}</div>;
+    }
+
+    return (
+        <div className='change-report-tree'>
+            {sections.map((section, i) => (
+                <div
+                    key={i}
+                    className='change-report-section'>
+                    <div className='change-report-section-heading'>{section.section}</div>
+                    <div className='change-report-section-nodes'>
+                        {section.nodes.map((node, j) => (
+                            <ChangeReportNode
+                                key={j}
+                                node={node}
+                                defaultExpanded={defaultExpanded}
+                                depth={0}
+                            />
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ChangeReportTree;

package/src/components/context-menu/AnimateComponent.tsx

@@ -5,7 +5,6 @@ interface IAnimateComponentProps {
     isVisible: boolean;
     timeout: number;
     className: string;
-    children?: React.ReactNode;
 }
 
 const AnimateComponent: React.FC<IAnimateComponentProps> = ({

package/src/components/context-menu/ContextMenu.tsx

@@ -14,23 +14,20 @@ interface IContextMenuProps {
     preventHideOnScroll?: boolean;
     preventHideOnResize?: boolean;
     animation?: string;
-    children: React.ReactNode;
 }
 
-const ContextMenu: React.FC<IContextMenuProps> = (props: IContextMenuProps) => {
-    const {
-        id,
-        children,
-        appendTo,
-        hideOnLeave,
-        onMouseLeave,
-        onHide,
-        onShow,
-        preventHideOnScroll,
-        preventHideOnResize,
-        animation
-    } = props;
-
+const ContextMenu: React.FC<IContextMenuProps> = ({
+    id,
+    children,
+    appendTo,
+    hideOnLeave,
+    onMouseLeave,
+    onHide,
+    onShow,
+    preventHideOnScroll,
+    preventHideOnResize,
+    animation
+}) => {
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
     const [top, setTop] = useState('');
@@ -175,6 +172,7 @@ const ContextMenu: React.FC<IContextMenuProps> = (props: IContextMenuProps) => {
 };
 
 export default ContextMenu;
+
 ContextMenu.defaultProps = {
     appendTo: null,
     hideOnLeave: false,

package/src/components/context-menu/ContextMenuItem.tsx

@@ -5,7 +5,6 @@ interface IContextMenuItemProps {
     onClick?(e: React.MouseEvent): void;
     disabled?: boolean;
     preventClose?: boolean;
-    children?: React.ReactNode;
 }
 
 const ContextMenuItem: React.FC<IContextMenuItemProps> = ({

package/src/components/context-menu/ContextMenuTrigger.tsx

@@ -5,7 +5,6 @@ interface IContextMenuTriggerProps {
     id: string;
     disableWhileShiftPressed?: boolean;
     disable?: boolean;
-    children?: React.ReactNode;
 }
 
 const ContextMenuTrigger: React.FC<IContextMenuTriggerProps> = ({

package/src/components/context-menu/SubMenu.tsx

@@ -3,7 +3,6 @@ import ContextMenuItem from './ContextMenuItem';
 
 interface ISubmenuProps {
     title: string;
-    children?: React.ReactNode;
 }
 
 const Submenu: React.FC<ISubmenuProps> = ({ children, title }) => {

package/src/components/number-field/NumberField.tsx

@@ -2,20 +2,12 @@ import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
-export const validateNumInput = (val: number, min?: number, max?: number) => {
-    if ((min !== undefined && val < min) || (max !== undefined && val > max)) {
-        return false;
-    } else {
-        return true;
-    }
-};
-
 interface INumberFieldProps {
     buttons?: any;
     label?: any;
     placeholder?: string;
     readOnly?: boolean;
-    value: number | null;
+    value: number;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
     onChange?(e): void;
@@ -60,47 +52,46 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         if (this.props.focusOnMount && this.inputRef.current) {
             this.inputRef.current.focus();
         }
-        this.setState(
-            {
-                value: this.props.value
-            },
-            () => {
-                this.validateValue(this.props.value);
-            }
-        );
+        this.setState({
+            error: false,
+            value: this.props.value
+        });
     }
 
     public componentDidUpdate(prevProps): void {
         if (prevProps.value !== this.props.value) {
-            this.setState(
-                {
-                    value: this.props.value
-                },
-                () => {
-                    this.validateValue(this.props.value);
-                }
-            );
+            this.setState({
+                error: false,
+                value: this.props.value
+            });
         }
     }
 
-    private validateValue(val) {
+    private validate(e) {
         const { max, min } = this.props;
-        const error = validateNumInput(val, min, max);
-        this.setState({ error: !error });
+        const val = e.target.value;
+        this.setState({ value: val });
+        if (min || max) {
+            if (val < min || val > max) {
+                this.setState({ error: true });
+            } else {
+                this.setState({ error: false });
+                this.onChange(e);
+            }
+        } else {
+            this.onChange(e);
+        }
     }
 
     private onChange(e) {
         let val = e.target.value;
-
-        this.validateValue(val);
-
         if (val === '' || val === null) {
             val = this.props.min;
         } else {
             val = parseFloat(val);
         }
 
-        this.setState({ value: val }, () => this.props.onChange(val));
+        this.props.onChange(val);
     }
 
     private onKeyDownHandler(e) {
@@ -210,7 +201,7 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
                     onKeyDown={(e) => this.onKeyDownHandler(e)}
                     onFocus={() => this.onSelectFocus()}
                     onBlur={(e) => this.onSelectBlur(e)}
-                    onChange={(e) => this.onChange(e)}
+                    onChange={(e) => this.validate(e)}
                 />
             </FieldWrapper>
         );

package/src/components/portal/Portal.tsx

@@ -8,7 +8,6 @@ import { createPortal } from 'react-dom';
 
 interface IPortalProps {
     id: string;
-    children?: React.ReactNode;
 }
 
 const Portal: React.FC<IPortalProps> = ({ children, id }): ReactPortal => {