@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/components/Attachments/Attachments.tsx

@@ -0,0 +1,221 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useEffect, useState } from 'react';
+import {
+    DndContext,
+    DragEndEvent,
+    DragOverlay,
+    DragStartEvent,
+    KeyboardSensor,
+    PointerSensor,
+    closestCenter,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
+import { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';
+import {
+    AssetInput,
+    AssetInputSize,
+    Flyout,
+    FlyoutPlacement,
+    IconCaretDown12,
+    IconPaperclip16,
+    Tooltip,
+    TooltipPosition,
+} from '@frontify/fondue';
+import { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';
+import { AttachmentsProps } from './types';
+import { restrictToWindowEdges } from '@dnd-kit/modifiers';
+
+export const Attachments = ({
+    items = [],
+    onDelete,
+    onReplaceWithBrowse,
+    onReplaceWithUpload,
+    onBrowse,
+    onUpload,
+    onSorted,
+    appBridge,
+}: AttachmentsProps) => {
+    const [internalItems, setInternalItems] = useState<Asset[]>(items);
+    const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));
+    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);
+    const [isUploadLoading, setIsUploadLoading] = useState(false);
+    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);
+    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);
+    const isEditing = useEditorState(appBridge);
+
+    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);
+
+    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({
+        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),
+    });
+
+    useEffect(() => {
+        setInternalItems(items);
+    }, [items]);
+
+    useEffect(() => {
+        if (selectedFiles) {
+            setIsUploadLoading(true);
+            uploadFile(selectedFiles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFiles]);
+
+    useEffect(() => {
+        const uploadDone = async () => {
+            if (doneAll) {
+                await onUpload(uploadResults);
+                setIsUploadLoading(false);
+            }
+        };
+        uploadDone();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [doneAll, uploadResults]);
+
+    const onOpenAssetChooser = () => {
+        setIsFlyoutOpen(false);
+        appBridge.openAssetChooser(
+            (result: Asset[]) => {
+                onBrowse(result);
+                appBridge.closeAssetChooser();
+                setIsFlyoutOpen(true);
+            },
+            {
+                multiSelection: true,
+                selectedValueIds: internalItems.map((internalItem) => internalItem.id),
+            }
+        );
+    };
+
+    const onReplaceItemWithBrowse = (toReplace: Asset) => {
+        setIsFlyoutOpen(false);
+        appBridge.openAssetChooser(
+            async (result: Asset[]) => {
+                setIsFlyoutOpen(true);
+                appBridge.closeAssetChooser();
+                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);
+                await onReplaceWithBrowse(toReplace, result[0]);
+                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));
+            },
+            {
+                multiSelection: false,
+                selectedValueIds: internalItems.map((internalItem) => internalItem.id),
+            }
+        );
+    };
+
+    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {
+        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);
+        await onReplaceWithUpload(toReplace, uploadedAsset);
+        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));
+    };
+
+    const handleDragStart = (event: DragStartEvent) => {
+        const { active } = event;
+        setDraggedAssetId(active.id as number);
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id && internalItems) {
+            const oldIndex = internalItems.findIndex((i) => i.id === active.id);
+            const newIndex = internalItems.findIndex((i) => i.id === over.id);
+            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);
+            setInternalItems(sortedItems);
+            onSorted(sortedItems);
+        }
+        setDraggedAssetId(undefined);
+    };
+
+    return isEditing || (internalItems?.length ?? 0) > 0 ? (
+        <Tooltip
+            withArrow
+            position={TooltipPosition.Top}
+            content="Attachments"
+            disabled={isFlyoutOpen}
+            enterDelay={500}
+            triggerElement={
+                <div data-test-id="attachments-flyout-button">
+                    <Flyout
+                        placement={FlyoutPlacement.BottomRight}
+                        onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}
+                        isOpen={isFlyoutOpen}
+                        hug={false}
+                        fitContent
+                        legacyFooter={false}
+                        trigger={
+                            <div className="tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line">
+                                <IconPaperclip16 />
+                                <div>{items.length > 0 ? items.length : 'Add'}</div>
+                                <IconCaretDown12 />
+                            </div>
+                        }
+                    >
+                        <div className="tw-w-[300px]">
+                            {internalItems.length > 0 && (
+                                <DndContext
+                                    sensors={sensors}
+                                    collisionDetection={closestCenter}
+                                    onDragStart={handleDragStart}
+                                    onDragEnd={handleDragEnd}
+                                    modifiers={[restrictToWindowEdges]}
+                                >
+                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>
+                                        <div className="tw-border-b tw-border-b-line">
+                                            {internalItems.map((item) => (
+                                                <SortableAttachmentItem
+                                                    isEditing={isEditing}
+                                                    isLoading={assetIdsLoading.includes(item.id)}
+                                                    key={item.id}
+                                                    item={item}
+                                                    onDelete={() => onDelete(item)}
+                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}
+                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>
+                                                        onReplaceItemWithUpload(item, uploadedAsset)
+                                                    }
+                                                />
+                                            ))}
+                                        </div>
+                                    </SortableContext>
+                                    <DragOverlay>
+                                        {draggedItem && (
+                                            <AttachmentItem
+                                                isOverlay={true}
+                                                isEditing={isEditing}
+                                                key={draggedAssetId}
+                                                item={draggedItem}
+                                                isDragging={true}
+                                                onDelete={() => onDelete(draggedItem)}
+                                                onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}
+                                                onReplaceWithUpload={(uploadedAsset: Asset) =>
+                                                    onReplaceItemWithUpload(draggedItem, uploadedAsset)
+                                                }
+                                            />
+                                        )}
+                                    </DragOverlay>
+                                </DndContext>
+                            )}
+                            {isEditing && (
+                                <div className="tw-px-5 tw-py-3">
+                                    <div className="tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4">
+                                        Add attachments
+                                    </div>
+                                    <AssetInput
+                                        isLoading={isUploadLoading}
+                                        size={AssetInputSize.Small}
+                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}
+                                        onLibraryClick={onOpenAssetChooser}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </Flyout>
+                </div>
+            }
+        />
+    ) : null;
+};

package/src/components/Attachments/index.ts

@@ -0,0 +1,4 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './Attachments';
+export * from './types';

package/src/components/Attachments/types.ts

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, Asset } from '@frontify/app-bridge';
+
+export type AttachmentsProps = {
+    items?: Asset[];
+    appBridge: AppBridgeBlock;
+    onReplaceWithUpload: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onReplaceWithBrowse: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onDelete: (attachmentToDelete: Asset) => void;
+    onUpload: (uploadedAttachments: Asset[]) => Promise<void>;
+    onBrowse: (browserAttachments: Asset[]) => void;
+    onSorted: (sortedAttachments: Asset[]) => void;
+};
+
+export type AttachmentItemProps = SortableAttachmentItemProps & {
+    isDragging?: boolean;
+    transformStyle?: Record<string, unknown>;
+    draggableProps?: Record<string, unknown>;
+    isOverlay?: boolean;
+};
+
+export type SortableAttachmentItemProps = {
+    item: Asset;
+    isEditing: boolean;
+    onDelete: () => void;
+    isLoading?: boolean;
+    onReplaceWithBrowse: () => void;
+    onReplaceWithUpload: (uploadedAsset: Asset) => void;
+};

package/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx

@@ -0,0 +1,48 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
+import { mount } from 'cypress/react18';
+import { BlockInjectButton } from './BlockInjectButton';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+
+const BlockInjectButtonSelector = '[data-test-id="block-inject-button"]';
+const ActionMenuItemSelector = '[data-test-id="menu-item"]';
+
+describe('Block Inject Button', () => {
+    it('renders a simple block inject button', () => {
+        const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
+
+        mount(
+            <BlockInjectButtonWithStubs
+                label="label"
+                icon={<IconAdobeCreativeCloud />}
+                secondaryLabel="second label"
+                withMenu={false}
+            />
+        );
+        cy.get(BlockInjectButtonSelector)
+            .should('exist')
+            .should('have.class', 'first:tw-rounded-tl last:tw-rounded-br', 'first:tw-rounded-bl last:tw-rounded-tr');
+    });
+
+    it('renders a block inject button with Menu upload and asset', () => {
+        const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
+
+        mount(
+            <BlockInjectButtonWithStubs
+                label="label"
+                secondaryLabel="second label"
+                onAssetChooseClick={cy.stub().as('onClickOpenAssetChooser')}
+                onUploadClick={cy.stub().as('onClickonUploadClick')}
+            />
+        );
+        cy.get(BlockInjectButtonSelector).click();
+        cy.get(ActionMenuItemSelector).should('have.length', 2);
+        cy.get(ActionMenuItemSelector).eq(0).should('have.text', 'Upload asset').click();
+        cy.get('@onClickonUploadClick').should('have.been.calledOnce');
+
+        cy.get(BlockInjectButtonSelector).click();
+        cy.get(ActionMenuItemSelector).eq(1).should('have.text', 'Browse asset').click();
+        cy.get('@onClickOpenAssetChooser').should('have.been.calledOnce');
+    });
+});

package/src/components/BlockInjectButton/BlockInjectButton.tsx

@@ -0,0 +1,212 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    ActionMenu,
+    Flyout,
+    IconArrowCircleUp20,
+    IconExclamationMarkTriangle,
+    IconImageStack20,
+    LoadingCircle,
+    MenuItemContentSize,
+} from '@frontify/fondue';
+import { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';
+import { joinClassNames } from '../../utilities/react/joinClassNames';
+import { BlockInjectButtonProps } from './types';
+import { FileExtension, FileExtensionSets } from '@frontify/app-bridge';
+
+export const BlockInjectButton = ({
+    onDrop,
+    label,
+    icon,
+    secondaryLabel,
+    isLoading,
+    fillParentContainer,
+    onAssetChooseClick,
+    onUploadClick,
+    withMenu = true,
+    onClick,
+    validFileType,
+    verticalLayout,
+}: BlockInjectButtonProps) => {
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);
+
+    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {
+        event.preventDefault();
+        setIsDraggingOver(false);
+        if (!isValidAsset(event.dataTransfer.files)) {
+            setErrorMsg('Invalid');
+            setTimeout(() => {
+                setErrorMsg(undefined);
+            }, 1000);
+            return;
+        }
+        onDrop?.(event.dataTransfer.files);
+    };
+
+    const isValidAsset = (files: FileList) => {
+        if (!validFileType) {
+            return true;
+        }
+        for (let i = 0; i < files.length; i++) {
+            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;
+            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {
+        if (!buttonRef.current || isLoading) {
+            return;
+        }
+        const { left, top } = buttonRef.current.getBoundingClientRect();
+        const XInsideComponent = event.clientX - left;
+        const YInsideComponent = event.clientY - top;
+        setMenuPosition([XInsideComponent, YInsideComponent]);
+    };
+
+    return (
+        <button
+            ref={buttonRef}
+            data-test-id="block-inject-button"
+            className={joinClassNames([
+                'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',
+                verticalLayout
+                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'
+                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',
+                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',
+                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',
+                menuPosition && 'tw-bg-blank-state-pressed-inverse',
+                isDraggingOver && 'tw-bg-blank-state-weak-inverse',
+                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',
+                isLoading || menuPosition || isDraggingOver || errorMsg
+                    ? ''
+                    : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',
+                (isDraggingOver || !!menuPosition) && !errorMsg
+                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'
+                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',
+            ])}
+            onDragEnter={
+                onDrop
+                    ? (event) => {
+                          setIsDraggingOver(true);
+                          // is now only used for images, can be adapted if needed
+                          if (validFileType === 'Images') {
+                              for (const item of Array.from(event.dataTransfer.items)) {
+                                  if (!item?.type?.startsWith('image/')) {
+                                      setErrorMsg('Invalid');
+                                  } else {
+                                      setErrorMsg(undefined);
+                                  }
+                              }
+                          }
+                      }
+                    : undefined
+            }
+            onDragLeave={
+                onDrop
+                    ? () => {
+                          setIsDraggingOver(false);
+                          setErrorMsg(undefined);
+                      }
+                    : undefined
+            }
+            onDrop={onDrop ? handleDrop : undefined}
+            onClick={(event) => {
+                withMenu && openMenu(event);
+                onClick?.();
+            }}
+        >
+            {isLoading ? (
+                <LoadingCircle />
+            ) : // eslint-disable-next-line unicorn/no-nested-ternary
+            errorMsg ? (
+                <div className=" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium">
+                    <IconExclamationMarkTriangle />
+                    {errorMsg}
+                </div>
+            ) : (
+                <>
+                    {icon && <div>{icon}</div>}
+                    {(label || secondaryLabel) && (
+                        <div className="tw-flex tw-flex-col tw-items-start">
+                            {label && <div className="tw-font-medium">{label}</div>}
+                            {secondaryLabel && <div className="tw-font-normal">{secondaryLabel}</div>}
+                        </div>
+                    )}
+                </>
+            )}
+            {menuPosition && (
+                <div
+                    className="tw-absolute tw-left-0 tw-top-full tw-z-20"
+                    style={{
+                        left: menuPosition[0],
+                        top: menuPosition[1],
+                    }}
+                >
+                    <Flyout
+                        onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}
+                        isOpen={true}
+                        fitContent
+                        hug={false}
+                        legacyFooter={false}
+                        trigger={<div />}
+                    >
+                        <ActionMenu
+                            menuBlocks={[
+                                {
+                                    id: 'menu',
+                                    menuItems: [
+                                        ...(onUploadClick
+                                            ? [
+                                                  {
+                                                      id: 'upload',
+                                                      size: MenuItemContentSize.XSmall,
+                                                      title: 'Upload asset',
+                                                      onClick: () => {
+                                                          onUploadClick();
+                                                          setMenuPosition(undefined);
+                                                      },
+
+                                                      initialValue: true,
+                                                      decorator: (
+                                                          <div className="tw-mr-2">
+                                                              <IconArrowCircleUp20 />
+                                                          </div>
+                                                      ),
+                                                  },
+                                              ]
+                                            : []),
+                                        ...(onAssetChooseClick
+                                            ? [
+                                                  {
+                                                      id: 'asset',
+                                                      size: MenuItemContentSize.XSmall,
+                                                      title: 'Browse asset',
+                                                      onClick: () => {
+                                                          onAssetChooseClick();
+                                                          setMenuPosition(undefined);
+                                                      },
+                                                      initialValue: true,
+                                                      decorator: (
+                                                          <div className="tw-mr-2">
+                                                              <IconImageStack20 />
+                                                          </div>
+                                                      ),
+                                                  },
+                                              ]
+                                            : []),
+                                    ],
+                                },
+                            ]}
+                        />
+                    </Flyout>
+                </div>
+            )}
+        </button>
+    );
+};

package/src/components/BlockInjectButton/index.ts

@@ -0,0 +1,4 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './BlockInjectButton';
+export * from './types';

package/src/components/BlockInjectButton/types.ts

@@ -0,0 +1,18 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import type { FileType } from '@frontify/app-bridge';
+
+export type BlockInjectButtonProps = {
+    isLoading?: boolean;
+    label?: string;
+    validFileType?: keyof typeof FileType;
+    secondaryLabel?: string;
+    icon?: JSX.Element;
+    onDrop?: (files: FileList) => void;
+    fillParentContainer?: boolean;
+    onUploadClick?: () => void;
+    onAssetChooseClick?: () => void;
+    withMenu?: boolean;
+    onClick?: () => void;
+    verticalLayout?: boolean;
+};