@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/components/Attachments/AttachmentsButtonTrigger.tsx

@@ -1,30 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
-
-import { joinClassNames } from '../../utilities';
-
-import { type AttachmentsTriggerProps } from './types';
-
-export const AttachmentsButtonTrigger = ({
-    children,
-    isFlyoutOpen,
-    triggerProps,
-    triggerRef,
-}: AttachmentsTriggerProps) => (
-    <button
-        className={joinClassNames([
-            'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',
-            isFlyoutOpen
-                ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'
-                : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',
-        ])}
-        {...triggerProps}
-        ref={triggerRef}
-        data-test-id="attachments-button-trigger"
-    >
-        <IconPaperclip16 />
-        {children}
-        <IconCaretDown12 />
-    </button>
-);

package/src/components/Attachments/index.ts

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

package/src/components/Attachments/types.ts

@@ -1,40 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type AppBridgeBlock, type Asset } from '@frontify/app-bridge';
-import { HTMLAttributes, MutableRefObject, ReactElement, type ReactNode } from 'react';
-
-export type AttachmentsTriggerProps = {
-    children: ReactNode;
-    isFlyoutOpen: boolean;
-    triggerProps: HTMLAttributes<HTMLButtonElement>;
-    triggerRef: MutableRefObject<HTMLButtonElement>;
-};
-
-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;
-    triggerComponent?: (props: AttachmentsTriggerProps) => ReactElement;
-} & ({ isOpen?: never; onOpenChange?: never } | { isOpen: boolean; onOpenChange: (isOpen: boolean) => 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;
-    onDownload?: () => Promise<void>;
-};

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

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

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

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

package/src/components/BlockInjectButton/types.ts

@@ -1,18 +0,0 @@
-/* (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;
-};

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

@@ -1,145 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconMagnifier16 } from '@frontify/fondue';
-import { mount } from 'cypress/react18';
-import { BlockItemWrapper } from './BlockItemWrapper';
-
-const BlockItemWrapperSelector = '[data-test-id="block-item-wrapper"]';
-const ToolbarSelector = '[data-test-id="block-item-wrapper-toolbar"]';
-const FlyoutSelector = '[data-test-id="block-item-wrapper-toolbar-flyout"]';
-const MenuItemSelector = '[data-test-id="menu-item"]';
-const ToolbarButtonSelector = '[data-test-id="block-item-wrapper-toolbar-btn"]';
-const ChildSelector = '[data-test-id="block-item-wrapper-child"]';
-
-describe('Block Item Wrapper', () => {
-    it('should render the wrapper and the children', () => {
-        mount(
-            <BlockItemWrapper toolbarItems={[]}>
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(BlockItemWrapperSelector).should('exist');
-        cy.get(ChildSelector).should('exist');
-    });
-
-    it('should render the outline class', () => {
-        mount(
-            <BlockItemWrapper toolbarItems={[]}>
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(BlockItemWrapperSelector).should('have.class', 'hover:tw-outline');
-    });
-
-    it('should not render the outline class if the hide prop is set', () => {
-        mount(
-            <BlockItemWrapper toolbarItems={[]} shouldHideWrapper>
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(BlockItemWrapperSelector).should('not.exist');
-    });
-
-    it('should render the right amount of toolbar items', () => {
-        mount(
-            <BlockItemWrapper
-                toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                ]}
-            >
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(ToolbarButtonSelector).should('have.length', 2);
-    });
-
-    it('should render the flyout button with the right amount of menu items', () => {
-        mount(
-            <BlockItemWrapper
-                toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    {
-                        type: 'menu',
-                        items: [
-                            [
-                                {
-                                    icon: <IconMagnifier16 />,
-                                    onClick: cy.stub(),
-                                    title: 'Test title',
-                                },
-                            ],
-                            [
-                                {
-                                    icon: <IconMagnifier16 />,
-                                    onClick: cy.stub(),
-                                    title: 'Test title',
-                                },
-                                {
-                                    icon: <IconMagnifier16 />,
-                                    onClick: cy.stub(),
-                                    title: 'Test title',
-                                },
-                            ],
-                        ],
-                    },
-                ]}
-            >
-                <div data-test-id="block-item-wrapper-child" className="tw-mt-8 tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(ToolbarButtonSelector).eq(0).focus();
-        cy.get(FlyoutSelector).should('exist');
-        cy.get(FlyoutSelector).click({ force: true });
-        cy.get(MenuItemSelector).should('have.length', 3);
-    });
-
-    it('should render the outline if a toolbar button is focused', () => {
-        mount(
-            <BlockItemWrapper
-                toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                ]}
-            >
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(ToolbarButtonSelector).eq(0).focus();
-        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
-    });
-
-    it('should render the toolbar if a button is focused', () => {
-        mount(
-            <BlockItemWrapper
-                shouldHideComponent={false}
-                toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                ]}
-            >
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(ToolbarButtonSelector).eq(0).focus();
-        cy.get(ToolbarSelector).should('be.visible');
-    });
-
-    it('should render the outline and the toolbar if enabled', () => {
-        mount(
-            <BlockItemWrapper
-                toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                ]}
-                shouldBeShown
-            >
-                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
-            </BlockItemWrapper>,
-        );
-        cy.get(ChildSelector).should('exist');
-        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
-        cy.get(ToolbarSelector).should('be.visible');
-    });
-});

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -1,76 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type ReactElement, useRef, useState } from 'react';
-
-import { joinClassNames } from '../../utilities';
-
-import { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';
-import { type BlockItemWrapperProps } from './types';
-import { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';
-import { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';
-
-export const BlockItemWrapper = ({
-    children,
-    toolbarItems,
-    shouldHideWrapper,
-    shouldHideComponent = false,
-    isDragging = false,
-    shouldFillContainer,
-    outlineOffset = 2,
-    shouldBeShown = false,
-    showAttachments = false,
-}: BlockItemWrapperProps): ReactElement => {
-    const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);
-    const wrapperRef = useRef<HTMLDivElement>(null);
-
-    if (shouldHideWrapper) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <>{children}</>;
-    }
-
-    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);
-
-    const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;
-
-    return (
-        <DragPreviewContextProvider isDragPreview={isDragging}>
-            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>
-                <div
-                    ref={wrapperRef}
-                    data-test-id="block-item-wrapper"
-                    style={{
-                        outlineOffset,
-                    }}
-                    className={joinClassNames([
-                        'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',
-                        shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',
-                        'hover:tw-outline focus-within:tw-outline',
-                        shouldToolbarBeVisible && 'tw-outline',
-                        shouldHideComponent && 'tw-opacity-0',
-                    ])}
-                >
-                    <div
-                        style={{
-                            right: -1 - outlineOffset,
-                            bottom: `calc(100% - ${2 + outlineOffset}px)`,
-                        }}
-                        className={joinClassNames([
-                            'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',
-                            'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',
-                            'tw-flex tw-justify-end',
-                            shouldToolbarBeVisible && 'tw-opacity-100',
-                        ])}
-                    >
-                        <Toolbar
-                            attachments={{
-                                isEnabled: showAttachments,
-                            }}
-                            items={items}
-                        />
-                    </div>
-                    {children}
-                </div>
-            </MultiFlyoutContextProvider>
-        </DragPreviewContextProvider>
-    );
-};