Merge pull request #11768 from ajkl2533/ajkl2533@11681

Addon-docs: Prettier, collapsible values in ArgsTable
storybookjs · Aug 5, 2020 · 10cafc8 · 10cafc8
2 parents b518502 + 054947a
commit 10cafc8
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 15 deletions.
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -262,6 +262,42 @@ Func.args = {
   },
 };
 
+const enumeration =
+  '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"';
+
+export const Enum = Template.bind({});
+Enum.args = {
+  ...baseArgs,
+  row: {
+    key: 'enum',
+    name: 'Some enum',
+    type: { required: true },
+    table: {
+      type: {
+        summary: enumeration,
+      },
+    },
+  },
+};
+
+const long_enumeration =
+  '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle" | "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right" | "envelope" | "exchange" | "file" | "file-check" | "file-import" | "file-pdf" | "file-times" | "pencil" | "question" | "question-circle" | "sitemap" | "user" | "times" | "plus" | "exclamation-triangle" | "trash-alt" | "long-arrow-up" | "long-arrow-down" | "long-arrow-left" | "long-arrow-right" | "external-link-alt" | "sticky-note" | "chart-line" | "spinner-third"';
+
+export const LongEnum = Template.bind({});
+LongEnum.args = {
+  ...baseArgs,
+  row: {
+    key: 'longEnum',
+    name: 'Long enum',
+    type: { required: true },
+    table: {
+      type: {
+        summary: long_enumeration,
+      },
+    },
+  },
+};
+
 export const Markdown = Template.bind({});
 Markdown.args = {
   ...baseArgs,

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -14,6 +14,7 @@ export interface ArgRowProps {
   updateArgs?: (args: Args) => void;
   compact?: boolean;
   expandable?: boolean;
+  initialExpandedArgs?: boolean;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });
@@ -64,7 +65,7 @@ const StyledTd = styled.td<{ expandable: boolean }>(({ theme, expandable }) => (
 }));
 
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const { row, updateArgs, compact, expandable } = props;
+  const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || row.type;
@@ -88,20 +89,20 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
           {table.jsDocTags != null ? (
             <>
               <TypeWithJsDoc hasDescription={hasDescription}>
-                <ArgValue value={type} />
+                <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
               </TypeWithJsDoc>
               <ArgJsDoc tags={table.jsDocTags} />
             </>
           ) : (
             <Type hasDescription={hasDescription}>
-              <ArgValue value={type} />
+              <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
             </Type>
           )}
         </td>
       )}
       {compact ? null : (
         <td>
-          <ArgValue value={defaultValue} />
+          <ArgValue value={defaultValue} initialExpandedArgs={initialExpandedArgs} />
         </td>
       )}
       {updateArgs ? (

diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
+import uniq from 'lodash/uniq';
 import { PropSummaryValue } from './types';
 import { WithTooltipPure } from '../../tooltip/WithTooltip';
 import { Icons } from '../../icon/icon';
@@ -9,6 +10,7 @@ import { codeCommon } from '../../typography/shared';
 
 interface ArgValueProps {
   value?: PropSummaryValue;
+  initialExpandedArgs?: boolean;
 }
 
 interface ArgTextProps {
@@ -17,12 +19,38 @@ interface ArgTextProps {
 
 interface ArgSummaryProps {
   value: PropSummaryValue;
+  initialExpandedArgs?: boolean;
 }
 
-const Text = styled.span(({ theme }) => ({
+const ITEMS_BEFORE_EXPANSION = 8;
+
+const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  display: 'flex',
+  flexDirection: isExpanded ? 'column' : 'row',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  marginBottom: '-4px',
+}));
+
+const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
+  flex: 0,
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   wordBreak: 'break-word',
+  margin: 0,
+  marginRight: '4px',
+  marginBottom: '4px',
+  paddingTop: '2px',
+  paddingBottom: '2px',
+  lineHeight: '13px',
+}));
+
+const ExpandButton = styled.button<{}>(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  color: theme.color.secondary,
+  marginBottom: '4px',
+  background: 'none',
+  border: 'none',
 }));
 
 const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
@@ -72,18 +100,49 @@ const calculateDetailWidth = memoize(1000)((detail: string): string => {
   return `${Math.max(...lines.map((x) => x.length))}ch`;
 });
 
-const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
+const getSummaryItems = (summary: string) => {
+  if (!summary) return [summary];
+  const splittedItems = summary.split('|');
+  const summaryItems = splittedItems.map((value) => value.trim());
+
+  return uniq(summaryItems);
+};
+
+const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
+  let items = summaryItems;
+  if (!isExpanded) {
+    items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
+  }
+
+  return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
+};
+
+const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const { summary, detail } = value;
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(initialExpandedArgs || false);
+
+  if (summary === undefined || summary === null) return null;
   // summary is used for the default value
   // below check fixes not displaying default values for boolean typescript vars
-  const summaryAsString =
-    summary !== undefined && summary !== null && typeof summary.toString === 'function'
-      ? summary.toString()
-      : summary;
+  const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
+
   if (detail == null) {
-    return <ArgText text={summaryAsString} />;
+    const summaryItems = getSummaryItems(summaryAsString);
+    const itemsCount = summaryItems.length;
+    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
+
+    return hasManyItems ? (
+      <Summary isExpanded={isExpanded}>
+        {renderSummaryItems(summaryItems, isExpanded)}
+        <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
+        </ExpandButton>
+      </Summary>
+    ) : (
+      <Summary>{renderSummaryItems(summaryItems)}</Summary>
+    );
   }
 
   return (
@@ -111,6 +170,10 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
   );
 };
 
-export const ArgValue: FC<ArgValueProps> = ({ value }) => {
-  return value == null ? <EmptyArg /> : <ArgSummary value={value} />;
+export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
+  return value == null ? (
+    <EmptyArg />
+  ) : (
+    <ArgSummary value={value} initialExpandedArgs={initialExpandedArgs} />
+  );
 };
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
@@ -23,6 +23,8 @@ const htmlElementSubsection = { subcategory: 'HTMLElement' };
 const stringType = ArgRow.String.args.row;
 const numberType = ArgRow.Number.args.row;
 
+const longEnumType = ArgRow.LongEnum.args.row;
+
 const Template = (args) => <ArgsTable {...args} />;
 
 export const Normal = Template.bind({});
@@ -129,3 +131,11 @@ Error.args = {
 
 export const Empty = Template.bind({});
 Empty.args = { rows: {} };
+
+export const WithDefaultExpandedArgs = Template.bind({});
+WithDefaultExpandedArgs.args = {
+  rows: {
+    longEnumType,
+  },
+  initialExpandedArgs: true,
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -233,6 +233,7 @@ export interface ArgsTableRowProps {
   resetArgs?: (argNames?: string[]) => void;
   compact?: boolean;
   inAddonPanel?: boolean;
+  initialExpandedArgs?: boolean;
 }
 
 export interface ArgsTableErrorProps {
@@ -297,7 +298,15 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     );
   }
 
-  const { rows, args, updateArgs, resetArgs, compact, inAddonPanel } = props as ArgsTableRowProps;
+  const {
+    rows,
+    args,
+    updateArgs,
+    resetArgs,
+    compact,
+    inAddonPanel,
+    initialExpandedArgs,
+  } = props as ArgsTableRowProps;
 
   const groups = groupRows(pickBy(rows, (row) => !row?.table?.disable));
 
@@ -321,7 +330,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   if (!compact) colSpan += 2;
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel };
+  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
   return (
     <ResetWrapper>
       <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">