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

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

@@ -1,105 +0,0 @@
-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

@@ -1,361 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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
-  });
-};