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

Working on getting ArgsTable working unattached

Browse Source
This commit is contained in:
Tom Coleman 2023-03-03 16:55:42 +11:00
parent 8c8974884f
commit 949e057f7b
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
code/ui/blocks/src/blocks/ArgsTable.tsx
View File

@ -4,7 +4,7 @@ import mapValues from 'lodash/mapValues.js';
import type { ArgTypesExtractor } from '@storybook/docs-tools';
import type { PropDescriptor } from '@storybook/preview-api';
import { filterArgTypes } from '@storybook/preview-api';
import type { StrictArgTypes, Args, Globals } from '@storybook/types';
import type { StrictArgTypes, Args, Globals, Parameters } from '@storybook/types';
import {
STORY_ARGS_UPDATED,
UPDATE_STORY_ARGS,
@ -90,11 +90,10 @@ const useGlobals = (context: DocsContextProps): [Globals] => {
export const extractComponentArgTypes = (
component: Component,
context: DocsContextProps,
parameters: Parameters,
include?: PropDescriptor,
exclude?: PropDescriptor
): StrictArgTypes => {
const { parameters } = context.storyById();
const { extractArgTypes }: { extractArgTypes: ArgTypesExtractor } = parameters.docs || {};
if (!extractArgTypes) {
throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
@ -109,10 +108,9 @@ const isShortcut = (value?: string) => {
return value && [PRIMARY_STORY].includes(value);
};
export const getComponent = (props: ArgsTableProps = {}, context: DocsContextProps): Component => {
export const getComponent = (props: ArgsTableProps = {}, component: Component): Component => {
const { of } = props as OfProps;
const { story } = props as StoryProps;
const { component } = context.storyById();
if (isShortcut(of) || isShortcut(story)) {
return component || null;
}
@ -220,17 +218,22 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
`);
const context = useContext(DocsContext);
const {
parameters: { controls },
subcomponents,
} = context.storyById();
let primaryStory;
try {
primaryStory = context.storyById();
} catch (err) {
// It is OK to use the ArgsTable unattached, we don't have this information
}
const { parameters, component, subcomponents } = primaryStory || { parameters: {} as Parameters };
const { include, exclude, components, sort: sortProp } = props as ComponentsProps;
const { story: storyName } = props as StoryProps;
const sort = sortProp || controls?.sort;
const sort = sortProp || parameters.controls?.sort;
const main = getComponent(props, context);
const main = getComponent(props, component);
if (storyName) {
return <StoryTable {...(props as StoryProps)} component={main} {...{ subcomponents, sort }} />;
}
@ -238,7 +241,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
if (!components && !subcomponents) {
let mainProps;
try {
mainProps = { rows: extractComponentArgTypes(main, context, include, exclude) };
mainProps = { rows: extractComponentArgTypes(main, parameters, include, exclude) };
} catch (err) {
mainProps = { error: err.message };
}