@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/modern/blocks/ArgsTable/ArgRow.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { ArgJsDoc } from './ArgJsDoc';
+import { ArgValue } from './ArgValue';
+import { ArgControl } from './ArgControl';
+import { codeCommon } from '../../typography/shared';
+const Name = styled.span({
+  fontWeight: 'bold'
+});
+const Required = styled.span(({
+  theme
+}) => ({
+  color: theme.color.negative,
+  fontFamily: theme.typography.fonts.mono,
+  cursor: 'help'
+}));
+const Description = styled.div(({
+  theme
+}) => ({
+  '&&': {
+    p: {
+      margin: '0 0 10px 0'
+    },
+    a: {
+      color: theme.color.secondary
+    }
+  },
+  code: Object.assign({}, codeCommon({
+    theme
+  }), {
+    fontSize: 12,
+    fontFamily: theme.typography.fonts.mono
+  }),
+  '& code': {
+    margin: 0,
+    display: 'inline-block'
+  },
+  '& pre > code': {
+    whiteSpace: 'pre-wrap'
+  }
+}));
+const Type = styled.div(({
+  theme,
+  hasDescription
+}) => ({
+  color: theme.base === 'light' ? transparentize(0.1, theme.color.defaultText) : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 4 : 0
+}));
+const TypeWithJsDoc = styled.div(({
+  theme,
+  hasDescription
+}) => ({
+  color: theme.base === 'light' ? transparentize(0.1, theme.color.defaultText) : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 12 : 0,
+  marginBottom: 12
+}));
+const StyledTd = styled.td(({
+  theme,
+  expandable
+}) => ({
+  paddingLeft: expandable ? '40px !important' : '20px !important'
+}));
+export const ArgRow = props => {
+  var _row$type;
+
+  const {
+    row,
+    updateArgs,
+    compact,
+    expandable,
+    initialExpandedArgs
+  } = props;
+  const {
+    name,
+    description
+  } = row;
+  const table = row.table || {};
+  const type = table.type || row.type;
+  const defaultValue = table.defaultValue || row.defaultValue;
+  const required = (_row$type = row.type) === null || _row$type === void 0 ? void 0 : _row$type.required;
+  const hasDescription = description != null && description !== '';
+  return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(StyledTd, {
+    expandable: expandable
+  }, /*#__PURE__*/React.createElement(Name, null, name), required ? /*#__PURE__*/React.createElement(Required, {
+    title: "Required"
+  }, "*") : null), compact ? null : /*#__PURE__*/React.createElement("td", null, hasDescription && /*#__PURE__*/React.createElement(Description, null, /*#__PURE__*/React.createElement(Markdown, null, description)), table.jsDocTags != null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TypeWithJsDoc, {
+    hasDescription: hasDescription
+  }, /*#__PURE__*/React.createElement(ArgValue, {
+    value: type,
+    initialExpandedArgs: initialExpandedArgs
+  })), /*#__PURE__*/React.createElement(ArgJsDoc, {
+    tags: table.jsDocTags
+  })) : /*#__PURE__*/React.createElement(Type, {
+    hasDescription: hasDescription
+  }, /*#__PURE__*/React.createElement(ArgValue, {
+    value: type,
+    initialExpandedArgs: initialExpandedArgs
+  }))), compact ? null : /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ArgValue, {
+    value: defaultValue,
+    initialExpandedArgs: initialExpandedArgs
+  })), updateArgs ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ArgControl, props)) : null);
+};
+ArgRow.displayName = "ArgRow";

package/dist/modern/blocks/ArgsTable/ArgRow.stories.js

@@ -0,0 +1,361 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { ArgRow } from './ArgRow';
+import { TableWrapper } from './ArgsTable';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
+export default {
+  component: ArgRow,
+  title: 'Docs/ArgRow',
+  decorators: [getStory => /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement("tbody", null, getStory())))]
+};
+
+const Template = args => /*#__PURE__*/React.createElement(ArgRow, args);
+
+Template.displayName = "Template";
+const baseArgs = {
+  updateArgs: action('updateArgs')
+};
+export const String = Template.bind({});
+String.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someString',
+    name: 'Some String',
+    description: 'someString description',
+    type: {
+      required: true
+    },
+    control: {
+      type: 'text'
+    },
+    table: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: {
+        summary: 'reallylongstringnospaces'
+      }
+    }
+  }
+});
+export const LongName = Template.bind({});
+LongName.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, String.args.row, {
+    name: 'Really Long String That Takes Up Space'
+  })
+});
+export const LongDesc = Template.bind({});
+LongDesc.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, String.args.row, {
+    description: 'really long description that takes up a lot of space. sometimes this happens.'
+  })
+});
+export const Boolean = Template.bind({});
+Boolean.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someBoolean',
+    name: 'Some Boolean',
+    description: 'someBoolean description',
+    type: {
+      required: true
+    },
+    control: {
+      type: 'boolean'
+    },
+    table: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: {
+        summary: 'fixme'
+      }
+    }
+  }
+});
+export const Color = Template.bind({});
+Color.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someColor',
+    name: 'Some Color',
+    type: {
+      name: 'string'
+    },
+    description: 'someColor description',
+    defaultValue: '#ff0',
+    control: {
+      type: 'color'
+    }
+  }
+});
+export const Date = Template.bind({});
+Date.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someDate',
+    name: 'Some Date',
+    type: {
+      name: 'string'
+    },
+    description: 'someDate description',
+    control: {
+      type: 'date'
+    }
+  }
+});
+export const Number = Template.bind({});
+Number.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someNumber',
+    name: 'Some Number',
+    description: 'someNumber description',
+    type: {
+      required: false
+    },
+    table: {
+      type: {
+        summary: 'number'
+      },
+      defaultValue: {
+        summary: '0'
+      }
+    },
+    control: {
+      type: 'number'
+    }
+  }
+});
+export const Range = Template.bind({});
+Range.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Number.args.row, {
+    control: {
+      type: 'range'
+    }
+  })
+});
+export const Radio = Template.bind({});
+Radio.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someEnum',
+    name: 'Some Enum',
+    description: 'someEnum description',
+    control: {
+      type: 'radio',
+      options: ['a', 'b', 'c']
+    }
+  }
+});
+export const InlineRadio = Template.bind({});
+InlineRadio.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Radio.args.row, {
+    control: Object.assign({}, Radio.args.row.control, {
+      type: 'inline-radio'
+    })
+  })
+});
+export const Check = Template.bind({});
+Check.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Radio.args.row, {
+    control: Object.assign({}, Radio.args.row.control, {
+      type: 'check'
+    })
+  })
+});
+export const InlineCheck = Template.bind({});
+InlineCheck.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Radio.args.row, {
+    control: Object.assign({}, Radio.args.row.control, {
+      type: 'inline-check'
+    })
+  })
+});
+export const Select = Template.bind({});
+Select.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Radio.args.row, {
+    control: Object.assign({}, Radio.args.row.control, {
+      type: 'select'
+    })
+  })
+});
+export const MultiSelect = Template.bind({});
+MultiSelect.args = Object.assign({}, baseArgs, {
+  row: Object.assign({}, Radio.args.row, {
+    control: Object.assign({}, Radio.args.row.control, {
+      type: 'multi-select'
+    })
+  })
+});
+export const ObjectOf = Template.bind({});
+ObjectOf.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someObject',
+    name: 'Some Object',
+    description: 'A simple `objectOf` propType.',
+    table: {
+      type: {
+        summary: 'objectOf(number)'
+      },
+      defaultValue: {
+        summary: '{ key: 1 }'
+      }
+    },
+    control: {
+      type: 'object'
+    }
+  }
+});
+export const ArrayOf = Template.bind({});
+ArrayOf.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someArray',
+    name: 'Some Array',
+    description: 'array of a certain type',
+    table: {
+      type: {
+        summary: 'number[]'
+      },
+      defaultValue: {
+        summary: '[1, 2, 3]'
+      }
+    },
+    control: {
+      type: 'array'
+    }
+  }
+});
+export const ComplexObject = Template.bind({});
+ComplexObject.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someComplex',
+    name: 'Some Complex',
+    description: 'A very complex `objectOf` propType.',
+    table: {
+      type: {
+        summary: 'object',
+        detail: `[{
+      id: number,
+      func: func,
+      arr: [{ index: number }]
+    }]`
+      },
+      defaultValue: {
+        summary: 'object',
+        detail: `[{
+      id: 1,
+      func: () => {},
+      arr: [{ index: 1 }]
+    }]`
+      }
+    },
+    control: {
+      type: 'object'
+    }
+  }
+});
+export const Func = Template.bind({});
+Func.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'concat',
+    name: 'Concat',
+    description: 'concat 2 string values.',
+    type: {
+      required: true
+    },
+    table: {
+      type: {
+        summary: '(a: string, b: string) => string'
+      },
+      defaultValue: {
+        summary: 'func',
+        detail: '(a, b) => { return a + b; }'
+      },
+      jsDocTags: {
+        params: [{
+          name: 'a',
+          description: 'The first string'
+        }, {
+          name: 'b',
+          description: 'The second string'
+        }],
+        returns: {
+          description: 'The concatenation of both strings'
+        }
+      }
+    },
+    control: false
+  }
+});
+const enumeration = '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"';
+export const Enum = Template.bind({});
+Enum.args = Object.assign({}, 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 = Object.assign({}, baseArgs, {
+  row: {
+    key: 'longEnum',
+    name: 'Long enum',
+    type: {
+      required: true
+    },
+    table: {
+      type: {
+        summary: long_enumeration
+      }
+    }
+  }
+});
+const complexUnion = '((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';
+export const ComplexUnion = Template.bind({});
+ComplexUnion.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'complexUnion',
+    name: 'Complex',
+    type: {
+      required: true
+    },
+    table: {
+      type: {
+        summary: complexUnion
+      }
+    }
+  }
+});
+export const Markdown = Template.bind({});
+Markdown.args = Object.assign({}, baseArgs, {
+  row: {
+    key: 'someString',
+    name: 'Some String',
+    description: 'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)',
+    table: {
+      type: {
+        summary: 'string'
+      }
+    },
+    control: {
+      type: 'text'
+    }
+  }
+});
+export const StringCompact = Template.bind({});
+StringCompact.args = Object.assign({}, String.args, {
+  compact: true
+});
+export const StringNoControls = Template.bind({});
+StringNoControls.args = {
+  row: String.args.row
+};
+export const StringNoControlsCompact = Template.bind({});
+StringNoControlsCompact.args = {
+  row: String.args.row,
+  compact: true
+};

package/dist/modern/blocks/ArgsTable/ArgValue.js

@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
+import memoize from 'memoizerific';
+import uniq from 'lodash/uniq';
+import { WithTooltipPure } from '../../tooltip/lazy-WithTooltip';
+import { Icons } from '../../icon/icon';
+import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
+import { codeCommon } from '../../typography/shared';
+const ITEMS_BEFORE_EXPANSION = 8;
+const Summary = styled.div(({
+  isExpanded
+}) => ({
+  display: 'flex',
+  flexDirection: isExpanded ? 'column' : 'row',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  marginBottom: '-4px',
+  minWidth: 100
+}));
+const Text = styled.span(codeCommon, ({
+  theme,
+  simple = false
+}) => Object.assign({
+  flex: '0 0 auto',
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s1,
+  wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
+  margin: 0,
+  marginRight: '4px',
+  marginBottom: '4px',
+  paddingTop: '2px',
+  paddingBottom: '2px',
+  lineHeight: '13px'
+}, simple && {
+  background: 'transparent',
+  border: '0 none',
+  paddingLeft: 0
+}));
+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
+}) => ({
+  fontFamily: theme.typography.fonts.mono,
+  color: theme.color.secondary,
+  fontSize: theme.typography.size.s1,
+  // overrides codeCommon
+  margin: 0,
+  whiteSpace: 'nowrap',
+  display: 'flex',
+  alignItems: 'center'
+}));
+const Detail = styled.div(({
+  theme,
+  width
+}) => ({
+  width,
+  minWidth: 200,
+  maxWidth: 800,
+  padding: 15,
+  // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s1,
+  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
+  boxSizing: 'content-box',
+  '& code': {
+    padding: '0 !important'
+  }
+}));
+const ArrowIcon = styled(Icons)({
+  height: 10,
+  width: 10,
+  minWidth: 10,
+  marginLeft: 4
+});
+
+const EmptyArg = () => {
+  return /*#__PURE__*/React.createElement("span", null, "-");
+};
+
+EmptyArg.displayName = "EmptyArg";
+
+const ArgText = ({
+  text,
+  simple
+}) => {
+  return /*#__PURE__*/React.createElement(Text, {
+    simple: simple
+  }, text);
+};
+
+ArgText.displayName = "ArgText";
+const calculateDetailWidth = memoize(1000)(detail => {
+  const lines = detail.split(/\r?\n/);
+  return `${Math.max(...lines.map(x => x.length))}ch`;
+});
+
+const getSummaryItems = summary => {
+  if (!summary) return [summary];
+  const splittedItems = summary.split('|');
+  const summaryItems = splittedItems.map(value => value.trim());
+  return uniq(summaryItems);
+};
+
+const renderSummaryItems = (summaryItems, isExpanded = true) => {
+  let items = summaryItems;
+
+  if (!isExpanded) {
+    items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
+  }
+
+  return items.map(item => /*#__PURE__*/React.createElement(ArgText, {
+    key: item,
+    text: item === '' ? '""' : item
+  }));
+};
+
+const ArgSummary = ({
+  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 = typeof summary.toString === 'function' ? summary.toString() : summary;
+
+  if (detail == null) {
+    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
+
+    if (cannotBeSafelySplitted) {
+      return /*#__PURE__*/React.createElement(ArgText, {
+        text: summaryAsString
+      });
+    }
+
+    const summaryItems = getSummaryItems(summaryAsString);
+    const itemsCount = summaryItems.length;
+    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
+    return hasManyItems ? /*#__PURE__*/React.createElement(Summary, {
+      isExpanded: isExpanded
+    }, renderSummaryItems(summaryItems, isExpanded), /*#__PURE__*/React.createElement(ExpandButton, {
+      onClick: () => setIsExpanded(!isExpanded)
+    }, isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`)) : /*#__PURE__*/React.createElement(Summary, null, renderSummaryItems(summaryItems));
+  }
+
+  return /*#__PURE__*/React.createElement(WithTooltipPure, {
+    closeOnClick: true,
+    trigger: "click",
+    placement: "bottom",
+    tooltipShown: isOpen,
+    onVisibilityChange: isVisible => {
+      setIsOpen(isVisible);
+    },
+    tooltip: /*#__PURE__*/React.createElement(Detail, {
+      width: calculateDetailWidth(detail)
+    }, /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+      language: "jsx",
+      format: false
+    }, detail))
+  }, /*#__PURE__*/React.createElement(Expandable, {
+    className: "sbdocs-expandable"
+  }, /*#__PURE__*/React.createElement("span", null, summaryAsString), /*#__PURE__*/React.createElement(ArrowIcon, {
+    icon: isOpen ? 'arrowup' : 'arrowdown'
+  })));
+};
+
+ArgSummary.displayName = "ArgSummary";
+export const ArgValue = ({
+  value,
+  initialExpandedArgs
+}) => {
+  return value == null ? /*#__PURE__*/React.createElement(EmptyArg, null) : /*#__PURE__*/React.createElement(ArgSummary, {
+    value: value,
+    initialExpandedArgs: initialExpandedArgs
+  });
+};