GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

addon-docs: fix Memo props types & tiny refactor to jsxDecorator

Browse Source 
jsxDecorator can now fetch component name from docgen & also using new helpers.
This commit is contained in:
Andrew Salib 2020-10-07 16:37:45 +11:00
parent 5d06c42100
commit 179ca8d7fb
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
addons/docs/src/frameworks/react/extractProps.ts
View File

@ -1,5 +1,4 @@
import PropTypes from 'prop-types';
import { isMemo } from 'react-is';
import {
PropDef,
hasDocgen,
@ -10,6 +9,7 @@ import {
import { Component } from '../../blocks/types';
import { enhancePropTypesProps } from './propTypes/handleProp';
import { enhanceTypeScriptProps } from './typeScript/handleProp';
import { isMemo, isForwardRef } from './lib';
export interface PropDefMap {
[p: string]: PropDef;
@ -26,11 +26,13 @@ Object.keys(PropTypes).forEach((typeName) => {
});
function getPropDefs(component: Component, section: string): PropDef[] {
// destructure here so we don't get silly TS errors 🙄
// eslint-disable-next-line react/forbid-foreign-prop-types
const { render, type, propTypes } = component;
let processedComponent = component;
// eslint-disable-next-line react/forbid-foreign-prop-types
if (!hasDocgen(component) && !component.propTypes && isMemo(component)) {
processedComponent = component.type().type;
if ((!hasDocgen(component) || !propTypes) && (isMemo(component) || isForwardRef(component))) {
processedComponent = isForwardRef(component) ? render : type;
}
const extractedProps = extractComponentProps(processedComponent, section);

7
addons/docs/src/frameworks/react/jsxDecorator.tsx
View File

@ -7,6 +7,8 @@ import { addons, StoryContext } from '@storybook/addons';
import { logger } from '@storybook/client-logger';
import { SourceType, SNIPPET_RENDERED } from '../../shared';
import { getDocgenSection } from '../../lib/docgen';
import { isMemo, isForwardRef } from './lib';
type JSXOptions = Options & {
/** How many wrappers to skip when rendering the jsx */
@ -91,10 +93,11 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
// To get exotic component names resolving properly
displayName: (el: any): string =>
el.type.displayName ||
getDocgenSection(el.type, 'displayName') ||
(el.type.name !== '_default' ? el.type.name : null) ||
(typeof el.type === 'function' ? 'No Display Name' : null) ||
(el.type.$$typeof === Symbol.for('react.forward_ref') ? el.type.render.name : null) ||
(el.type.$$typeof === Symbol.for('react.memo') ? el.type.type.name : null) ||
(isForwardRef(el.type) ? el.type.render.name : null) ||
(isMemo(el.type) ? el.type.type.name : null) ||
el.type,
};