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

Merge pull request #18248 from storybookjs/18177-fix-conditional-args-fail-gracefully

Browse Source 
ArgsTable: Gracefully handle conditional args failures
This commit is contained in:
Michael Shilman 2022-05-18 10:50:38 +08:00 committed by GitHub
commit 152e441693
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
lib/components/src/blocks/ArgsTable/ArgsTable.tsx
View File

@ -3,6 +3,7 @@ import pickBy from 'lodash/pickBy';
import { styled, ignoreSsrWarning } from '@storybook/theming';
import { opacify, transparentize, darken, lighten } from 'polished';
import { includeConditionalArg } from '@storybook/csf';
import { once } from '@storybook/client-logger';
import { Icons } from '../../icon/icon';
import { ArgRow } from './ArgRow';
import { SectionRow } from './SectionRow';
@ -372,6 +373,22 @@ const groupRows = (rows: ArgType, sort: SortType) => {
return sorted;
};
/**
* Wrap CSF's `includeConditionalArg` in a try catch so that invalid
* conditionals don't break the entire UI. We can safely swallow the
* error because `includeConditionalArg` is also called in the preview
* in `prepareStory`, and that exception will be bubbled up into the
* UI in a red screen. Nevertheless, we log the error here just in case.
*/
const safeIncludeConditionalArg = (row: ArgType, args: Args, globals: Globals) => {
try {
return includeConditionalArg(row, args, globals);
} catch (err) {
once.warn(err.message);
return false;
}
};
/**
* Display the props for a component as a props table. Each row is a collection of
* ArgDefs, usually derived from docgen info for the component.
@ -402,7 +419,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
const groups = groupRows(
pickBy(
rows,
(row) => !row?.table?.disable && includeConditionalArg(row, args || {}, globals || {})
(row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
),
sort
);