Skip to content

Commit

Permalink
fix(code-snippet): ensure isForwardRef type guard captures all cases
Browse files Browse the repository at this point in the history
- ensures forwarded components are properly resolved when checking for the story component instead of being skipped
  • Loading branch information
mgadewoll committed Jun 27, 2024
1 parent 8398560 commit 54380d3
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 7 deletions.
23 changes: 16 additions & 7 deletions packages/eui/.storybook/addons/code-snippet/decorators/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down

0 comments on commit 54380d3

Please sign in to comment.