Merge pull request #11105 from storybookjs/10979-argstable-design-update

Components: Remove PropsTable, clean ArgsTable stories

addons/docs/src/frameworks/angular/compodoc.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 /* global window */
 
-import { PropDef } from '@storybook/components';
 import { ArgType, ArgTypes } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
 import {
@@ -16,8 +15,6 @@ import {
   Directive,
 } from './types';
 
-type Sections = Record<string, PropDef[]>;
-
 export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => {
   return (methodOrProp as Method).args !== undefined;
 };

addons/docs/src/frameworks/react/extractArgTypes.ts

@@ -1,12 +1,10 @@
-import { PropDef, PropsTableRowsProps } from '@storybook/components';
 import { ArgTypes } from '@storybook/api';
-import { ArgTypesExtractor } from '../../lib/docgen';
+import { PropDef, ArgTypesExtractor } from '../../lib/docgen';
 import { extractProps } from './extractProps';
 
 export const extractArgTypes: ArgTypesExtractor = (component) => {
   if (component) {
-    const props = extractProps(component);
-    const { rows } = props as PropsTableRowsProps;
+    const { rows } = extractProps(component);
     if (rows) {
       return rows.reduce((acc: ArgTypes, row: PropDef) => {
         const { type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row;

addons/docs/src/frameworks/react/extractProps.ts

@@ -1,7 +1,12 @@
 import PropTypes from 'prop-types';
 import { isForwardRef, isMemo } from 'react-is';
-import { PropDef } from '@storybook/components';
-import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen';
+import {
+  PropDef,
+  hasDocgen,
+  extractComponentProps,
+  PropsExtractor,
+  TypeSystem,
+} from '../../lib/docgen';
 import { Component } from '../../blocks/types';
 import { enhancePropTypesProps } from './propTypes/handleProp';
 import { enhanceTypeScriptProps } from './typeScript/handleProp';

addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts

@@ -1,10 +1,11 @@
-import { PropDefaultValue, PropDef } from '@storybook/components';
+import { PropDefaultValue } from '@storybook/components';
 import isPlainObject from 'lodash/isPlainObject';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
 // @ts-ignore
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
+import { PropDef } from '../../../../lib/docgen';
 import { inspectValue, InspectionFunction } from '../inspection';
 import { generateObject } from './generateObject';
 import { generateArray } from './generateArray';

addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx

@@ -1,10 +1,14 @@
 /* eslint-disable no-underscore-dangle */
 
-import { PropDef } from '@storybook/components';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from '../../../blocks/types';
-import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
+import {
+  PropDef,
+  extractComponentProps,
+  DocgenInfo,
+  DocgenPropDefaultValue,
+} from '../../../lib/docgen';
 import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
 
 const DOCGEN_SECTION = 'props';

addons/docs/src/frameworks/react/propTypes/handleProp.ts

@@ -1,5 +1,4 @@
-import { PropDef } from '@storybook/components';
-import { ExtractedProp } from '../../../lib/docgen';
+import { PropDef, ExtractedProp } from '../../../lib/docgen';
 import { createType } from './createType';
 import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
 import { Component } from '../../../blocks/types';

addons/docs/src/frameworks/react/propTypes/sortProps.ts

@@ -1,4 +1,4 @@
-import { PropDef } from '@storybook/components';
+import { PropDef } from '../../../lib/docgen';
 import { Component } from '../../../blocks/types';
 
 // react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component.

addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable no-underscore-dangle */
 
-import { PropDef } from '@storybook/components';
 import React from 'react';
 import { Component } from '../../../blocks/types';
-import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
+import {
+  PropDef,
+  extractComponentProps,
+  DocgenInfo,
+  DocgenPropDefaultValue,
+} from '../../../lib/docgen';
 import { enhanceTypeScriptProp } from './handleProp';
 
 const DOCGEN_SECTION = 'props';

addons/docs/src/frameworks/react/typeScript/handleProp.ts

@@ -1,5 +1,4 @@
-import { PropDef } from '@storybook/components';
-import { ExtractedProp } from '../../../lib/docgen';
+import { PropDef, ExtractedProp } from '../../../lib/docgen';
 import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
 
 export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {

lib/components/src/blocks/PropsTable/PropDef.ts → addons/docs/src/lib/docgen/PropDef.ts

@@ -1,3 +1,5 @@
+// FIXME: this is legacy code that needs to be updated & simplified with ArgType refactor
+
 export interface JsDocParam {
   name: string;
   description?: string;

addons/docs/src/lib/docgen/createPropDef.ts

@@ -1,5 +1,5 @@
-import { PropDef, PropDefaultValue } from '@storybook/components';
-import { TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
+import { PropDefaultValue } from '@storybook/components';
+import { PropDef, TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
 import { JsDocParsingResult } from '../jsdocParser';
 import { createSummaryValue } from '../utils';
 import { createFlowPropDef } from './flow/createPropDef';

addons/docs/src/lib/docgen/extractDocgenProps.ts

@@ -1,7 +1,6 @@
-import { PropDef } from '@storybook/components';
 import { Component } from '../../blocks/types';
 import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser';
-import { DocgenInfo, TypeSystem } from './types';
+import { PropDef, DocgenInfo, TypeSystem } from './types';
 import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils';
 import { getPropDefFactory, PropDefFactory } from './createPropDef';
 

addons/docs/src/lib/docgen/types.ts

@@ -1,8 +1,8 @@
-import { PropsTableProps } from '@storybook/components';
 import { ArgTypes } from '@storybook/api';
+import { PropDef } from './PropDef';
 import { Component } from '../../blocks/types';
 
-export type PropsExtractor = (component: Component) => PropsTableProps | null;
+export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null;
 
 export type ArgTypesExtractor = (component: Component) => ArgTypes | null;
 
@@ -49,3 +49,5 @@ export enum TypeSystem {
   TYPESCRIPT = 'TypeScript',
   UNKNOWN = 'Unknown',
 }
+
+export { PropDef };

lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx

@@ -122,15 +122,54 @@ const withArgs = {
   updateArgs: action('updateArgs'),
 };
 
-export const String = () => <ArgRow row={stringType} />;
-export const LongName = () => <ArgRow row={longNameType} />;
-export const LongDesc = () => <ArgRow row={longDescType} />;
-export const Number = () => <ArgRow row={numberType} />;
-export const ObjectOf = () => <ArgRow row={objectType} />;
-export const ArrayOf = () => <ArgRow row={arrayType} />;
-export const ComplexObject = () => <ArgRow row={complexType} />;
-export const Func = () => <ArgRow row={funcType} />;
-export const Markdown = () => <ArgRow row={markdownType} />;
-export const StringCompact = () => <ArgRow compact row={stringType} />;
-export const Args = () => <ArgRow row={stringType} {...withArgs} />;
-export const ArgsCompact = () => <ArgRow compact row={stringType} {...withArgs} />;
+export const String = (args) => <ArgRow {...args} />;
+String.args = {
+  row: stringType,
+};
+export const LongName = (args) => <ArgRow {...args} />;
+LongName.args = {
+  row: longNameType,
+};
+export const LongDesc = (args) => <ArgRow {...args} />;
+LongDesc.args = {
+  row: longDescType,
+};
+export const Number = (args) => <ArgRow {...args} />;
+Number.args = {
+  row: numberType,
+};
+export const ObjectOf = (args) => <ArgRow {...args} />;
+ObjectOf.args = {
+  row: objectType,
+};
+export const ArrayOf = (args) => <ArgRow {...args} />;
+ArrayOf.args = {
+  row: arrayType,
+};
+export const ComplexObject = (args) => <ArgRow {...args} />;
+ComplexObject.args = {
+  row: complexType,
+};
+export const Func = (args) => <ArgRow {...args} />;
+Func.args = {
+  row: funcType,
+};
+export const Markdown = (args) => <ArgRow {...args} />;
+Markdown.args = {
+  row: markdownType,
+};
+export const StringCompact = (args) => <ArgRow {...args} />;
+StringCompact.args = {
+  ...String.args,
+  compact: true,
+};
+export const Args = (args) => <ArgRow {...args} />;
+Args.args = {
+  ...String.args,
+  ...withArgs,
+};
+export const ArgsCompact = (args) => <ArgRow {...args} />;
+ArgsCompact.args = {
+  ...Args.args,
+  compact: true,
+};

lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArgsTable, ArgsTableError } from './ArgsTable';
-import { stringType, numberType } from './ArgRow.stories';
+import * as ArgRow from './ArgRow.stories';
 
 export default {
   component: ArgsTable,
@@ -10,20 +10,44 @@ export default {
 const propsSection = { category: 'props ' };
 const eventsSection = { category: 'events ' };
 
-export const Normal = () => <ArgsTable rows={{ stringType, numberType }} />;
+const stringType = ArgRow.String.args.row;
+const numberType = ArgRow.Number.args.row;
 
-export const Compact = () => <ArgsTable compact rows={{ stringType, numberType }} />;
+export const Normal = (args) => <ArgsTable {...args} />;
+Normal.args = {
+  rows: {
+    stringType,
+    numberType,
+  },
+};
+
+export const Compact = (args) => <ArgsTable {...args} />;
+Compact.args = {
+  ...Normal.args,
+  compact: true,
+};
 
 const sectionRows = {
   a: { ...stringType, table: { ...stringType.table, ...propsSection } },
   b: { ...numberType, table: { ...stringType.table, ...propsSection } },
   c: { ...stringType, table: { ...stringType.table, ...eventsSection } },
 };
 
-export const Sections = () => <ArgsTable rows={sectionRows} />;
+export const Sections = (args) => <ArgsTable {...args} />;
+Sections.args = {
+  rows: sectionRows,
+};
 
-export const SectionsCompact = () => <ArgsTable compact rows={sectionRows} />;
+export const SectionsCompact = (args) => <ArgsTable {...args} />;
+SectionsCompact.args = {
+  ...Sections.args,
+  compact: true,
+};
 
-export const Error = () => <ArgsTable error={ArgsTableError.NO_COMPONENT} />;
+export const Error = (args) => <ArgsTable {...args} />;
+Error.args = {
+  error: ArgsTableError.NO_COMPONENT,
+};
 
-export const Empty = () => <ArgsTable rows={{}} />;
+export const Empty = (args) => <ArgsTable {...args} />;
+Empty.args = { rows: {} };

lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TabbedArgsTable } from './TabbedArgsTable';
+import { Normal, Compact, Sections } from './ArgsTable.stories';
+
+export default {
+  component: TabbedArgsTable,
+  title: 'Docs/TabbedArgsTable',
+};
+
+const propsSection = { category: 'props ' };
+const eventsSection = { category: 'events ' };
+
+export const Tabs = (args) => <TabbedArgsTable {...args} />;
+Tabs.args = {
+  tabs: {
+    Normal: Normal.args,
+    Compact: Compact.args,
+    Sections: Sections.args,
+  },
+};
+
+export const Empty = Tabs.bind();
+Empty.args = {
+  tabs: {},
+};

lib/components/src/blocks/Description.stories.tsx

@@ -10,6 +10,15 @@ export default {
 
 const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
 
-export const text = () => <Description markdown={textCaption} />;
+export const Text = (args) => {
+  console.log({ args });
+  return <Description {...args} />;
+};
+Text.args = {
+  markdown: textCaption,
+};
 
-export const markdown = () => <Description markdown={markdownCaption} />;
+export const Markdown = (args) => <Description {...args} />;
+Markdown.args = {
+  markdown: markdownCaption,
+};