fix(code-snippet): ensure isForwardRef type guard captures all cases

mgadewoll · mgadewoll · commit 58f724e1799c · 2024-06-27T18:54:06.000+02:00
- ensures forwarded components are properly resolved when checking for the story component instead of being skipped
diff --git a/packages/eui/.storybook/addons/code-snippet/decorators/utils.ts b/packages/eui/.storybook/addons/code-snippet/decorators/utils.ts
@@ -33,16 +33,22 @@ export const toPascalCase = (str: string) =>
   str.charAt(0).toUpperCase() + str.slice(1);
 
 /* Helpers for React specific checks */
+const isReactElement = (el: any): el is ReactElement => el.type !== undefined;
+const isExoticComponent = (el: any): el is ExoticComponent =>
+  el.$$typeof !== undefined;
+
 export const isMemo = (component: ExoticComponent) =>
   component.$$typeof === Symbol.for('react.memo');
-export const isForwardRef = (component: ExoticComponent) =>
-  component.$$typeof === Symbol.for('react.forward_ref');
+export const isForwardRef = (component: ReactElement | ExoticComponent) => {
+  // use type guards to ensure keys are available
+  return isReactElement(component) && isExoticComponent(component.type)
+    ? component.type?.$$typeof === Symbol.for('react.forward_ref')
+    : isExoticComponent(component)
+    ? component.$$typeof === Symbol.for('react.forward_ref')
+    : false;
+};
 export const isFragment = (component: ReactElement | ExoticComponent) => {
   // use type guards to ensure keys are available
-  const isReactElement = (el: any): el is ReactElement => el.type !== undefined;
-  const isExoticComponent = (el: any): el is ExoticComponent =>
-    el.$$typeof !== undefined;
-
   return isReactElement(component)
     ? component.type?.toString().includes('fragment')
     : isExoticComponent(component)
@@ -265,7 +271,10 @@ export const getStoryComponent = (
           const resolvedDisplayName =
             getEmotionComponentDisplayName(resolvedChild);
 
-          if (resolvedDisplayName && resolvedDisplayName !== displayName) {
+          if (
+            (resolvedDisplayName && resolvedDisplayName !== displayName) ||
+            isForwardRef(resolvedChild)
+          ) {
             resolveChildren(resolvedChild);
           } else if (typeof resolvedChild.type !== 'string') {
             storyNode = resolvedChild;
diff --git a/packages/eui/src/components/text_truncate/text_truncate.stories.tsx b/packages/eui/src/components/text_truncate/text_truncate.stories.tsx
@@ -74,6 +74,9 @@ enableFunctionToggleControls(ResizeObserver, ['onResize']);
 export const StartEndAnchorForSearch: Story = {
   parameters: {
     controls: { include: ['text', 'calculationDelayMs', 'ellipsis', 'width'] },
+    codeSnippet: {
+      resolveStoryElementOnly: true,
+    },
   },
   render: function Render(props) {
     const [highlight, setHighlight] = useState('');
