IBX-10161: Improve twig preview UX (#6)

Author: GrabowskiM

.storybook/main.js

@@ -63,7 +63,7 @@ const config = {
     },
     env: (envConfig) => ({
         ...envConfig,
-        TWIG_COMPONENTS_URL: 'http://localhost:8000/storybook/preview',
+        TWIG_COMPONENTS_BASE_URL: 'http://localhost:8000',
     }),
 };
 export default config;

src/storybook/addons/framework-selector/FrameworkSelectorDecorator.tsx

@@ -4,7 +4,7 @@ import { renderToString } from 'react-dom/server';
 import type { Renderer, StoryContext, PartialStoryFn as StoryFunction } from 'storybook/internal/types';
 import { useArgs, useGlobals } from 'storybook/internal/preview-api';
 
-import { FRAMEWORK } from './constants';
+import { FRAMEWORK, ROUTES } from './constants';
 
 type argsType = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 interface IframeResize {
@@ -23,6 +23,12 @@ type IframeMessageData = IframeResize | IframeMethods;
 
 const getStoryId = (kind: string) => kind.replace('components/src/', '').toLowerCase();
 const getIframeSrc = (id: string, args: argsType) => {
+    const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;
+
+    if (baseUrl === undefined || baseUrl === '') {
+        throw new Error('TWIG_COMPONENTS_BASE_URL environment variable is not set.');
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const storyProperties = Object.entries(args).reduce((accumulator: argsType, [propertyName, propertyValue]: [string, any]) => {
         /* eslint-disable @typescript-eslint/no-unsafe-assignment */
@@ -41,10 +47,11 @@ const getIframeSrc = (id: string, args: argsType) => {
         /* eslint-enable @typescript-eslint/no-unsafe-assignment */
     }, {});
     const storyPropertiesStringified = JSON.stringify(storyProperties);
-    const urlParams = new URLSearchParams({ properties: storyPropertiesStringified });
-    const twigUrl = `${process.env.TWIG_COMPONENTS_URL ?? ''}/${id}?${urlParams}`;
+    const previewUrl = new URL(`${ROUTES.PREVIEW}/${id}`, baseUrl);
+
+    previewUrl.searchParams.set('properties', storyPropertiesStringified);
 
-    return twigUrl;
+    return previewUrl.toString();
 };
 
 // eslint-disable-next-line ibexa/max-lines-per-function-jsx
@@ -55,14 +62,15 @@ const FrameworkSelectorDecorator = (
     const [globals] = useGlobals();
     const [args] = useArgs();
     const iframeRef = useRef<HTMLIFrameElement>(null);
-    const { title }: { title: string } = context;
+    const { id, title }: { id: string; title: string } = context;
     const renderTwigSelector = () => {
         const storyId = getStoryId(title);
         const twigUrl = getIframeSrc(storyId, args);
 
         return (
             <iframe
-                id={storyId}
+                className="twig-preview"
+                id={`twig-preview-${id}`}
                 ref={iframeRef}
                 src={twigUrl}
                 style={{

src/storybook/addons/framework-selector/components/Tool.tsx

@@ -1,18 +1,71 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { IconButton } from 'storybook/internal/components';
 import { useGlobals } from 'storybook/internal/manager-api';
 
-import { FRAMEWORK, KEY } from '../constants';
+import { FRAMEWORK, KEY, ROUTES } from '../constants';
 
 export const Tool = memo(() => {
     const [globals, updateGlobals, storyGlobals] = useGlobals();
+    const [twigEnabled, setTwigEnabled] = useState(false);
     const isLocked = KEY in storyGlobals;
+    const isTwigActive = globals[KEY] === FRAMEWORK.TWIG;
     const toggle = useCallback((frameworkId: string) => {
         updateGlobals({
             [KEY]: frameworkId,
         });
     }, []);
+    const openTwigPreview = useCallback(() => {
+        const storybookIframe = window.document.querySelector<HTMLIFrameElement>('#storybook-preview-iframe');
+
+        if (!storybookIframe?.contentWindow?.document) {
+            return;
+        }
+
+        const twigIframe = storybookIframe.contentWindow.document.querySelector<HTMLIFrameElement>('.twig-preview');
+
+        if (!twigIframe) {
+            return;
+        }
+
+        window.open(twigIframe.src, '_blank');
+    }, []);
+    const renderTwigLink = useCallback(() => {
+        if (!isTwigActive) {
+            return null;
+        }
+
+        return (
+            <IconButton
+                disabled={isLocked}
+                key="twig-link"
+                onClick={() => {
+                    openTwigPreview();
+                }}
+                title="Open Twig preview"
+            >
+                Open Twig preview
+            </IconButton>
+        );
+    }, [isTwigActive, isLocked]);
+
+    useEffect(() => {
+        const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;
+
+        if (baseUrl === undefined || baseUrl === '') {
+            return;
+        }
+
+        const statusUrl = new URL(ROUTES.STATUS, baseUrl);
+
+        fetch(statusUrl)
+            .then(() => {
+                setTwigEnabled(true);
+            })
+            .catch(() => {
+                setTwigEnabled(false);
+            });
+    }, []);
 
     return (
         <>
@@ -27,17 +80,20 @@ export const Tool = memo(() => {
             >
                 React
             </IconButton>
-            <IconButton
-                active={globals[KEY] === FRAMEWORK.TWIG}
-                disabled={isLocked}
-                key={FRAMEWORK.TWIG}
-                onClick={() => {
-                    toggle(FRAMEWORK.TWIG);
-                }}
-                title="Twig"
-            >
-                Twig
-            </IconButton>
+            {twigEnabled && (
+                <IconButton
+                    active={isTwigActive}
+                    disabled={isLocked}
+                    key={FRAMEWORK.TWIG}
+                    onClick={() => {
+                        toggle(FRAMEWORK.TWIG);
+                    }}
+                    title="Twig"
+                >
+                    Twig
+                </IconButton>
+            )}
+            {renderTwigLink()}
         </>
     );
 });

src/storybook/addons/framework-selector/constants.ts

@@ -13,3 +13,8 @@ export const EVENTS = {
     REQUEST: `${ADDON_ID}/request`,
     RESULT: `${ADDON_ID}/result`,
 };
+
+export const ROUTES = {
+    PREVIEW: 'storybook/preview',
+    STATUS: 'storybook/status',
+};