IBX-10903: [Storybook] Error 500 for Colors, Icons and typography

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

@@ -5,6 +5,7 @@ import type { Renderer, StoryContext, PartialStoryFn as StoryFunction } from 'st
 import { useArgs, useGlobals } from 'storybook/internal/preview-api';
 
 import { FRAMEWORK, ROUTES } from './constants';
+import { useIsTwigStoryAvailable } from '../../hooks/useIsTwigStoryAvailable';
 
 type argsType = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 interface IframeMethods {
@@ -81,6 +82,7 @@ const getCustomParameters = (context: StoryContext) => {
 
 // eslint-disable-next-line ibexa/max-lines-per-function-jsx
 const FrameworkSelectorDecorator = (StoryFn: StoryFunction, context: StoryContext): Renderer['storyResult'] | React.JSX.Element => {
+    const isTwigStoryAvailable = useIsTwigStoryAvailable();
     const [globals] = useGlobals();
     const [args] = useArgs();
     const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -156,14 +158,11 @@ const FrameworkSelectorDecorator = (StoryFn: StoryFunction, context: StoryContex
         iframeRef.current.style.opacity = '1';
     }, [isTwigFramework, isInDocsMode]);
 
-    switch (globals.frameworkSelector) {
-        case FRAMEWORK.REACT:
-            return StoryFn();
-        case FRAMEWORK.TWIG:
-            return renderTwigSelector();
-        default:
-            return StoryFn();
+    if (isTwigStoryAvailable && globals.frameworkSelector === FRAMEWORK.REACT) {
+        return renderTwigSelector();
     }
+
+    return StoryFn();
 };
 
 export default FrameworkSelectorDecorator;

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

@@ -1,13 +1,13 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 
-import { useGlobals, useStorybookState } from 'storybook/internal/manager-api';
 import { IconButton } from 'storybook/internal/components';
-import { type API_LeafEntry as LeafEntry } from 'storybook/internal/types';
+import { useGlobals } from 'storybook/internal/manager-api';
 
 import { FRAMEWORK, KEY, ROUTES } from '../constants';
+import { useIsTwigStoryAvailable } from '../../../hooks/useIsTwigStoryAvailable';
 
 export const Tool = memo(() => {
-    const { index: allStories, storyId: currentStoryId } = useStorybookState();
+    const isTwigStoryAvailable = useIsTwigStoryAvailable();
     const [globals, updateGlobals, storyGlobals] = useGlobals();
     const [twigEnabled, setTwigEnabled] = useState(false);
     const isLocked = KEY in storyGlobals;
@@ -17,24 +17,6 @@ export const Tool = memo(() => {
             [KEY]: frameworkId,
         });
     }, []);
-    const getStoryId = () => {
-        if (allStories === undefined) {
-            return '';
-        }
-
-        const currentStory = allStories[currentStoryId];
-
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (currentStory?.type !== 'story' && currentStory?.type !== 'docs') {
-            return '';
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-        return (allStories[currentStoryId] as LeafEntry).title;
-    };
-    const isTwigStoryAvailable = () => {
-        return getStoryId().startsWith('components/src/components/');
-    };
     const openTwigPreview = useCallback(() => {
         const storybookIframe = window.document.querySelector<HTMLIFrameElement>('#storybook-preview-iframe');
 
@@ -68,7 +50,7 @@ export const Tool = memo(() => {
             </IconButton>
         );
     }, [isTwigActive, isLocked]);
-    const showFrameworkSelectorTools = twigEnabled && isTwigStoryAvailable();
+    const showFrameworkSelectorTools = twigEnabled && isTwigStoryAvailable;
 
     useEffect(() => {
         const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;

src/storybook/hooks/useIsTwigStoryAvailable.ts

@@ -0,0 +1,23 @@
+import { type API_LeafEntry as LeafEntry } from 'storybook/internal/types';
+import { useStorybookState } from 'storybook/internal/manager-api';
+
+export const useIsTwigStoryAvailable = (): boolean => {
+    const { index: allStories, storyId: currentStoryId } = useStorybookState();
+    const getStoryId = () => {
+        if (allStories === undefined) {
+            return '';
+        }
+
+        const currentStory = allStories[currentStoryId];
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (currentStory?.type !== 'story' && currentStory?.type !== 'docs') {
+            return '';
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+        return (allStories[currentStoryId] as LeafEntry).title;
+    };
+
+    return getStoryId().startsWith('components/src/components/');
+};