@frontify/guideline-blocks-settings 0.31.4 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.31.4",
+  "version": "0.32.0",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -16,6 +16,7 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },

package/src/components/Link/LinkInput.tsx

@@ -65,9 +65,15 @@ export const LinkInput = ({
                 <div className="tw-mt-3">
                     <LinkSelector
                         url={url}
-                        appBridge={appBridge}
                         onUrlChange={onUrlChange}
                         buttonSize={buttonSize ?? ButtonSize.Medium}
+                        getAllDocuments={() => appBridge.getAllDocuments()}
+                        getDocumentPagesByDocumentId={(documentId) =>
+                            appBridge.getDocumentPagesByDocumentId(documentId)
+                        }
+                        getDocumentSectionsByDocumentPageId={(documentPageId) =>
+                            appBridge.getDocumentSectionsByDocumentPageId(documentPageId)
+                        }
                     />
                 </div>
             )}

package/src/components/Link/LinkSelector/DocumentLink.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
+import type { DocumentPage, DocumentSection } from '@frontify/app-bridge';
 import { useEffect, useState } from 'react';
 import { PageLinks } from './PageLinks';
 import { IconColorFan16, merge } from '@frontify/fondue';
@@ -12,18 +12,20 @@ type DocumentLinkProps = {
         title: string;
         permanentLink: string;
     };
-    appBridge: AppBridgeBlock | AppBridgeTheme;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
     itemsToExpandInitially: InitiallyExpandedItems;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
+    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
 };
 
 export const DocumentLink = ({
     document,
-    appBridge,
     selectedUrl,
     onSelectUrl,
     itemsToExpandInitially,
+    getDocumentSectionsByDocumentPageId,
+    getDocumentPagesByDocumentId,
 }: DocumentLinkProps) => {
     const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);
     const isActive = document.permanentLink === selectedUrl;
@@ -66,11 +68,12 @@ export const DocumentLink = ({
             </button>
             {isExpanded && (
                 <PageLinks
-                    appBridge={appBridge}
                     documentId={document.id}
                     selectedUrl={selectedUrl}
                     onSelectUrl={onSelectUrl}
                     itemsToExpandInitially={itemsToExpandInitially}
+                    getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}
+                    getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}
                 />
             )}
         </>

package/src/components/Link/LinkSelector/DocumentLinks.tsx

@@ -1,18 +1,26 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import type { AppBridgeBlock, AppBridgeTheme, Document } from '@frontify/app-bridge';
+import type { Document, DocumentPage, DocumentSection } from '@frontify/app-bridge';
 import { ReactElement, useEffect, useState } from 'react';
 import { DocumentLink } from './DocumentLink';
 import { LoadingIndicator } from './LoadingIndicator';
 import { InitiallyExpandedItems } from '../';
 
 type DocumentLinksProps = {
-    appBridge: AppBridgeBlock | AppBridgeTheme;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
+    getAllDocuments: () => Promise<Document[]>;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
+    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
 };
 
-export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentLinksProps): ReactElement => {
+export const DocumentLinks = ({
+    selectedUrl,
+    onSelectUrl,
+    getAllDocuments,
+    getDocumentPagesByDocumentId,
+    getDocumentSectionsByDocumentPageId,
+}: DocumentLinksProps): ReactElement => {
     const [isLoading, setIsLoading] = useState(true);
     const [documents, setDocuments] = useState<Document[]>([]);
     const [itemsToExpandInitially, setItemsToExpandInitially] = useState<InitiallyExpandedItems>({
@@ -32,8 +40,7 @@ export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentL
     }, [documentArray.length]);
 
     useEffect(() => {
-        appBridge
-            .getAllDocuments()
+        getAllDocuments()
             .then((_documents) => {
                 setDocuments(_documents);
             })
@@ -52,8 +59,7 @@ export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentL
             return itemsToExpand;
         }
         for (const document of documentArray) {
-            const pages = await appBridge.getDocumentPagesByDocumentId(document.id);
-            appBridge.getAllDocuments();
+            const pages = await getDocumentPagesByDocumentId(document.id);
             const pagesArray = [...pages.values()];
             const selectedUrlIsPage = !!pagesArray.find((page) => page.permanentLink === selectedUrl);
             if (selectedUrlIsPage) {
@@ -61,7 +67,7 @@ export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentL
                 return itemsToExpand;
             }
             for (const page of pagesArray) {
-                const sections = await appBridge.getDocumentSectionsByDocumentPageId(page.id);
+                const sections = await getDocumentSectionsByDocumentPageId(page.id);
                 const sectionsArray = [...sections.values()];
                 const selectedUrlIsSection = !!sectionsArray.find((section) => section.permanentLink === selectedUrl);
                 if (selectedUrlIsSection) {
@@ -83,10 +89,11 @@ export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentL
                     <DocumentLink
                         key={document.id}
                         document={document}
-                        appBridge={appBridge}
                         selectedUrl={selectedUrl}
                         onSelectUrl={onSelectUrl}
                         itemsToExpandInitially={itemsToExpandInitially}
+                        getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}
+                        getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}
                     />
                 );
             })}

package/src/components/Link/LinkSelector/LinkSelector.spec.ct.tsx

@@ -5,7 +5,6 @@ import {
     DocumentPageApiDummy,
     DocumentSectionApiDummy,
     getAppBridgeBlockStub,
-    withAppBridgeBlockStubs,
 } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { LinkSelector } from './LinkSelector';
@@ -37,8 +36,16 @@ const apiSections = [
 
 describe('Link Selector', () => {
     it('renders the link selector button', () => {
-        const [LinkSelectorWithStubs] = withAppBridgeBlockStubs(LinkSelector, {});
-        mount(<LinkSelectorWithStubs url="" onUrlChange={cy.stub()} />);
+        const appBridge = getAppBridgeBlockStub();
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub()}
+            />,
+        );
         cy.get(LinkSelectorSelector).should('exist');
     });
 
@@ -50,7 +57,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
         (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
 
-        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub()}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(LinkSelectorModalSelector).should('exist');
     });
@@ -62,7 +77,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
         (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
 
-        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub()}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(DocumentLinkSelector).should('have.length', 2);
     });
@@ -77,7 +100,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
         (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
 
-        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub()}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(DocumentLinkSelector).eq(0).find(DocumentTreeItemToggleSelector).click();
         cy.get(PageLinkSelector).should('have.length', 3);
@@ -92,7 +123,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
         (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
 
-        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub()}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(DocumentLinkSelector).eq(0).find(DocumentTreeItemToggleSelector).click();
         cy.get(PageLinkSelector).eq(0).find('button').click();
@@ -108,7 +147,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
         (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
 
-        mount(<LinkSelector appBridge={appBridge} url="/7" onUrlChange={cy.stub()} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url="/7"
+                onUrlChange={cy.stub().as('urlChange')}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(SectionLinkSelector).should('have.length', 4);
     });
@@ -122,7 +169,15 @@ describe('Link Selector', () => {
         (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
         (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
 
-        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub().as('urlChange')} />);
+        mount(
+            <LinkSelector
+                getAllDocuments={appBridge.getAllDocuments}
+                getDocumentPagesByDocumentId={appBridge.getDocumentPagesByDocumentId}
+                getDocumentSectionsByDocumentPageId={appBridge.getDocumentSectionsByDocumentPageId}
+                url=""
+                onUrlChange={cy.stub().as('urlChange')}
+            />,
+        );
         cy.get(LinkSelectorButtonSelector).click();
         cy.get(DocumentLinkSelector).should('have.length', 2);
         cy.realPress('Tab');

package/src/components/Link/LinkSelector/LinkSelector.tsx

@@ -1,23 +1,27 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';
+import type { Document, DocumentPage, DocumentSection } from '@frontify/app-bridge';
 import { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { KeyboardEvent, ReactElement, useEffect, useState } from 'react';
 import { DocumentLinks } from './DocumentLinks';
 
 type LinkSelectorProps = {
-    appBridge: AppBridgeBlock | AppBridgeTheme;
     url: string;
     onUrlChange?: (value: string) => void;
     buttonSize?: ButtonSize;
+    getAllDocuments: () => Promise<Document[]>;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
+    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
 };
 
 export const LinkSelector = ({
-    appBridge,
     url,
     onUrlChange,
     buttonSize = ButtonSize.Medium,
+    getAllDocuments,
+    getDocumentPagesByDocumentId,
+    getDocumentSectionsByDocumentPageId,
 }: LinkSelectorProps): ReactElement => {
     const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});
     const [selectedUrl, setSelectedUrl] = useState<string>(url);
@@ -58,7 +62,13 @@ export const LinkSelector = ({
             <Modal zIndex={1001} onClose={() => closeLinkTree()} isOpen={isLinkTreeOpen} isDismissable>
                 <Modal.Header title="Select internal link" />
                 <Modal.Body>
-                    <DocumentLinks appBridge={appBridge} selectedUrl={selectedUrl} onSelectUrl={onSelectUrl} />
+                    <DocumentLinks
+                        selectedUrl={selectedUrl}
+                        onSelectUrl={onSelectUrl}
+                        getAllDocuments={getAllDocuments}
+                        getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}
+                        getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}
+                    />
                 </Modal.Body>
                 <Modal.Footer
                     buttons={[

package/src/components/Link/LinkSelector/PageLink.tsx

@@ -1,12 +1,12 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock, AppBridgeTheme, useDocumentSection } from '@frontify/app-bridge';
+import { type DocumentSection } from '@frontify/app-bridge';
 import { merge } from '@frontify/fondue';
 import { useEffect, useState } from 'react';
 import { InitiallyExpandedItems } from '../';
 import { SectionLink } from './SectionLink';
 
-type DocumentLinkProps = {
+type PageLinkProps = {
     page: {
         id: number;
         title: string;
@@ -14,16 +14,29 @@ type DocumentLinkProps = {
     };
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
-    appBridge: AppBridgeBlock | AppBridgeTheme;
     itemsToExpandInitially: InitiallyExpandedItems;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
 };
 
-export const PageLink = ({ page, selectedUrl, onSelectUrl, itemsToExpandInitially, appBridge }: DocumentLinkProps) => {
+export const PageLink = ({
+    page,
+    selectedUrl,
+    onSelectUrl,
+    itemsToExpandInitially,
+    getDocumentSectionsByDocumentPageId,
+}: PageLinkProps) => {
     const [isExpanded, setIsExpanded] = useState(page.id === itemsToExpandInitially.documentId);
+    const [documentSections, setDocumentSections] = useState<DocumentSection[]>([]);
     const isActive = page.permanentLink === selectedUrl;
-    const { documentSections } = useDocumentSection(appBridge, page.id);
-    const sectionsArray = [...documentSections.values()];
-    const hasSections = sectionsArray.length > 0;
+
+    useEffect(() => {
+        const fetchDocumentSections = async () => {
+            const sections = await getDocumentSectionsByDocumentPageId(page.id);
+            setDocumentSections(sections);
+        };
+
+        fetchDocumentSections();
+    }, [page.id, getDocumentSectionsByDocumentPageId]);
 
     useEffect(() => {
         if (page.id === itemsToExpandInitially.pageId) {
@@ -31,6 +44,9 @@ export const PageLink = ({ page, selectedUrl, onSelectUrl, itemsToExpandInitiall
         }
     }, [itemsToExpandInitially, page.id]);
 
+    const sectionsArray = [...documentSections.values()];
+    const hasSections = sectionsArray.length > 0;
+
     return (
         <>
             <button

package/src/components/Link/LinkSelector/PageLinks.tsx

@@ -1,25 +1,27 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import type { AppBridgeBlock, AppBridgeTheme, DocumentPage } from '@frontify/app-bridge';
+import type { DocumentPage, DocumentSection } from '@frontify/app-bridge';
 import { ReactElement, useEffect, useState } from 'react';
 import { InitiallyExpandedItems } from '../';
 import { PageLink } from './PageLink';
 import { LoadingIndicator } from './LoadingIndicator';
 
 type PageLinksProps = {
-    appBridge: AppBridgeBlock | AppBridgeTheme;
     documentId: number;
     selectedUrl: string;
     onSelectUrl: (url: string) => void;
     itemsToExpandInitially: InitiallyExpandedItems;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
+    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
 };
 
 export const PageLinks = ({
-    appBridge,
     documentId,
     selectedUrl,
     onSelectUrl,
     itemsToExpandInitially,
+    getDocumentSectionsByDocumentPageId,
+    getDocumentPagesByDocumentId,
 }: PageLinksProps): ReactElement => {
     const [pages, setPages] = useState<DocumentPage[]>([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -27,8 +29,7 @@ export const PageLinks = ({
     const hasPages = !isLoading && pagesArray.length > 0;
 
     useEffect(() => {
-        appBridge
-            .getDocumentPagesByDocumentId(documentId)
+        getDocumentPagesByDocumentId(documentId)
             .then((_pages) => {
                 const pagesWithCategories = _pages
                     .filter((page) => !!page.category)
@@ -54,10 +55,10 @@ export const PageLinks = ({
                     <PageLink
                         key={page.id}
                         page={page}
-                        appBridge={appBridge}
                         selectedUrl={selectedUrl}
                         onSelectUrl={onSelectUrl}
                         itemsToExpandInitially={itemsToExpandInitially}
+                        getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}
                     />
                 );
             })}