@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/modern/spaced/Spaced.stories.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-import { Spaced } from './Spaced';
-const PlaceholderBlock = styled.div(({
-  color
-}) => ({
-  background: color || 'hotpink',
-  padding: 20
-}));
-const PlaceholderInline = styled.span(({
-  color
-}) => ({
-  background: color || 'hotpink',
-  display: 'inline-block',
-  padding: 20
-}));
-storiesOf('Basics/Spaced', module).add('row', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}), /*#__PURE__*/React.createElement(Spaced, {
-  row: 1
-}, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}))).add('row outer', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}), /*#__PURE__*/React.createElement(Spaced, {
-  row: 1,
-  outer: true
-}, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}))).add('row multiply', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}), /*#__PURE__*/React.createElement(Spaced, {
-  row: 3,
-  outer: 0.5
-}, /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null), /*#__PURE__*/React.createElement(PlaceholderBlock, null)), /*#__PURE__*/React.createElement(PlaceholderBlock, {
-  color: "silver"
-}))).add('col', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderInline, {
-  color: "silver"
-}), /*#__PURE__*/React.createElement(Spaced, {
-  col: 1
-}, /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null)), /*#__PURE__*/React.createElement(PlaceholderInline, {
-  color: "silver"
-}))).add('col outer', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderInline, {
-  color: "silver"
-}), /*#__PURE__*/React.createElement(Spaced, {
-  col: 1,
-  outer: true
-}, /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null), /*#__PURE__*/React.createElement(PlaceholderInline, null)), /*#__PURE__*/React.createElement(PlaceholderInline, {
-  color: "silver"
-})));

package/dist/modern/syntaxhighlighter/formatter.js

@@ -1,3 +0,0 @@
-import memoize from 'memoizerific';
-import dedent from 'ts-dedent';
-export const formatter = memoize(2)(code => dedent(code));

package/dist/modern/syntaxhighlighter/lazy-syntaxhighlighter.js

@@ -1,6 +0,0 @@
-import React, { Suspense } from 'react';
-const LazySyntaxHighlighter = /*#__PURE__*/React.lazy(() => import('./syntaxhighlighter'));
-export const SyntaxHighlighter = props => /*#__PURE__*/React.createElement(Suspense, {
-  fallback: /*#__PURE__*/React.createElement("div", null)
-}, /*#__PURE__*/React.createElement(LazySyntaxHighlighter, props));
-SyntaxHighlighter.displayName = "SyntaxHighlighter";

package/dist/modern/syntaxhighlighter/syntaxhighlighter.js

@@ -1,172 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import "core-js/modules/es.array.reduce.js";
-import React, { useState } from 'react';
-import { logger } from '@storybook/client-logger';
-import { styled } from '@storybook/theming';
-import global from 'global';
-import memoize from 'memoizerific'; // @ts-ignore
-
-import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'; // @ts-ignore
-
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'; // @ts-ignore
-
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css'; // @ts-ignore
-
-import jsExtras from 'react-syntax-highlighter/dist/esm/languages/prism/js-extras'; // @ts-ignore
-
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json'; // @ts-ignore
-
-import graphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql'; // @ts-ignore
-
-import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup'; // @ts-ignore
-
-import md from 'react-syntax-highlighter/dist/esm/languages/prism/markdown'; // @ts-ignore
-
-import yml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml'; // @ts-ignore
-
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; // @ts-ignore
-
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'; // @ts-ignore
-
-import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
-import { ActionBar } from '../ActionBar/ActionBar';
-import { ScrollArea } from '../ScrollArea/ScrollArea';
-import { formatter } from './formatter';
-const {
-  navigator,
-  document,
-  window: globalWindow
-} = global;
-ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
-ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
-ReactSyntaxHighlighter.registerLanguage('json', json);
-ReactSyntaxHighlighter.registerLanguage('yml', yml);
-ReactSyntaxHighlighter.registerLanguage('md', md);
-ReactSyntaxHighlighter.registerLanguage('bash', bash);
-ReactSyntaxHighlighter.registerLanguage('css', css);
-ReactSyntaxHighlighter.registerLanguage('html', html);
-ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
-ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
-ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
-const themedSyntax = memoize(2)(theme => Object.entries(theme.code || {}).reduce((acc, [key, val]) => Object.assign({}, acc, {
-  [`* .${key}`]: val
-}), {}));
-const copyToClipboard = createCopyToClipboardFunction();
-export function createCopyToClipboardFunction() {
-  if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
-    return text => navigator.clipboard.writeText(text);
-  }
-
-  return async text => {
-    const tmp = document.createElement('TEXTAREA');
-    const focus = document.activeElement;
-    tmp.value = text;
-    document.body.appendChild(tmp);
-    tmp.select();
-    document.execCommand('copy');
-    document.body.removeChild(tmp);
-    focus.focus();
-  };
-}
-const Wrapper = styled.div(({
-  theme
-}) => ({
-  position: 'relative',
-  overflow: 'hidden',
-  color: theme.color.defaultText
-}), ({
-  theme,
-  bordered
-}) => bordered ? {
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: theme.borderRadius,
-  background: theme.background.content
-} : {});
-const Scroller = styled(({
-  children,
-  className
-}) => /*#__PURE__*/React.createElement(ScrollArea, {
-  horizontal: true,
-  vertical: true,
-  className: className
-}, children))({
-  position: 'relative'
-}, ({
-  theme
-}) => ({
-  '& code': {
-    paddingRight: theme.layoutMargin
-  }
-}), ({
-  theme
-}) => themedSyntax(theme));
-const Pre = styled.pre(({
-  theme,
-  padded
-}) => ({
-  display: 'flex',
-  justifyContent: 'flex-start',
-  margin: 0,
-  padding: padded ? theme.layoutMargin : 0
-}));
-const Code = styled.code({
-  flex: 1,
-  paddingRight: 0,
-  opacity: 1
-});
-export const SyntaxHighlighter = (_ref) => {
-  let {
-    children,
-    language = 'jsx',
-    copyable = false,
-    bordered = false,
-    padded = false,
-    format = true,
-    className = null,
-    showLineNumbers = false
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "language", "copyable", "bordered", "padded", "format", "className", "showLineNumbers"]);
-
-  if (typeof children !== 'string' || !children.trim()) {
-    return null;
-  }
-
-  const highlightableCode = format ? formatter(children) : children.trim();
-  const [copied, setCopied] = useState(false);
-
-  const onClick = e => {
-    e.preventDefault();
-    const selectedText = globalWindow.getSelection().toString();
-    const textToCopy = e.type !== 'click' && selectedText ? selectedText : highlightableCode;
-    copyToClipboard(textToCopy).then(() => {
-      setCopied(true);
-      globalWindow.setTimeout(() => setCopied(false), 1500);
-    }).catch(logger.error);
-  };
-
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    bordered: bordered,
-    padded: padded,
-    className: className,
-    onCopyCapture: onClick
-  }, /*#__PURE__*/React.createElement(Scroller, null, /*#__PURE__*/React.createElement(ReactSyntaxHighlighter, _extends({
-    padded: padded || bordered,
-    language: language,
-    showLineNumbers: showLineNumbers,
-    showInlineLineNumbers: showLineNumbers,
-    useInlineStyles: false,
-    PreTag: Pre,
-    CodeTag: Code,
-    lineNumberContainerStyle: {}
-  }, rest), highlightableCode)), copyable ? /*#__PURE__*/React.createElement(ActionBar, {
-    actionItems: [{
-      title: copied ? 'Copied' : 'Copy',
-      onClick
-    }]
-  }) : null);
-};
-SyntaxHighlighter.displayName = "SyntaxHighlighter";
-export default SyntaxHighlighter;

package/dist/modern/syntaxhighlighter/syntaxhighlighter.stories.js

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { ThemeProvider, themes, ensure } from '@storybook/theming';
-import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
-storiesOf('Basics/SyntaxHighlighter', module).add('bash', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "bash",
-  copyable: false
-}, "npx npm-check-updates '/storybook/' -u && npm install")).add('css', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "css",
-  copyable: false
-}, `
-        .className {
-          border: 1px solid hotpink;
-        }
-      `)).add('json', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "json",
-  copyable: false
-}, `
-      {
-        "number": 1,
-        "string": "something",
-        "object": {
-          "property": "value",
-        },
-        array: [1,2,3],
-      }
-      `)).add('markdown', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "markdown",
-  copyable: false
-}, `
-      # a big header
-
-      some code:
-
-      ~~~js
-      const name = "a string";
-      ~~~
-
-      > crazy
-
-      `)).add('yaml', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "yaml",
-  copyable: false
-}, `
-        product:
-        - sku         : BL394D
-          quantity    : 4
-          description : Basketball
-          price       : 450.00
-      `)).add('jsx', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  copyable: false
-}, `import { Good, Things } from 'life';
-
-        const result = () => <Good><Things all={true} /></Good>;
-
-        export { result as default };
-      `)).add('js', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  copyable: false
-}, `import React, { createElement } from 'react';
-        import { Good, Things } from 'life';
-
-        const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
-
-        console.log(result);
-
-        export { result as default };
-      `)).add('graphql', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "graphql",
-  copyable: false
-}, `query HeroNameAndFriends($episode: Episode) {
-          hero(episode: $episode) {
-            name
-            friends {
-              name
-            }
-          }
-        }
-      `)).add('unsupported', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "C#",
-  bordered: true,
-  copyable: true
-}, `
-        // A Hello World! program in C#.
-        using System;
-        namespace HelloWorld
-        {
-          class Hello 
-          {
-            static void Main() 
-            {
-              Console.WriteLine("Hello World!");
-
-              // Keep the console window open in debug mode.
-              Console.WriteLine("Press any key to exit.");
-              Console.ReadKey();
-            }
-          }
-        }
-      `)).add('dark unsupported', () => {
-  const theme = ensure(themes.dark);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-    bordered: true,
-    language: "C#",
-    copyable: true
-  }, `
-            // A Hello World! program in C#.
-            using System;
-            namespace HelloWorld
-            {
-              class Hello 
-              {
-                static void Main() 
-                {
-                  Console.WriteLine("Hello World!");
-
-                  // Keep the console window open in debug mode.
-                  Console.WriteLine("Press any key to exit.");
-                  Console.ReadKey();
-                }
-              }
-            }
-          `));
-}).add('story', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  copyable: false
-}, `
-        import React from 'react';
-        import { storiesOf } from '@storybook/react';
-        import { styled } from '@storybook/theming';
-
-        import Heading from './heading';
-
-        const Holder = styled.div({
-          margin: 10,
-          border: '1px dashed deepskyblue',
-          // overflow: 'hidden',
-        });
-
-        storiesOf('Basics|Heading', module).add('types', () => (
-          <div>
-            <Holder>
-              <Heading>DEFAULT WITH ALL CAPS</Heading>
-            </Holder>
-            <Holder>
-              <Heading sub="With a great sub">THIS LONG DEFAULT WITH ALL CAPS & SUB</Heading>
-            </Holder>
-            <Holder>
-              <Heading type="page">page type</Heading>
-            </Holder>
-            <Holder>
-              <Heading type="page" sub="With a sub">
-                page type
-              </Heading>
-            </Holder>
-          </div>
-        ));
-      `)).add('bordered & copy-able', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  copyable: true,
-  bordered: true
-}, `import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `)).add('padded', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  padded: true
-}, `import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `)).add('showLineNumbers', () => /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-  language: "jsx",
-  copyable: false,
-  showLineNumbers: true
-}, `import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `));

package/dist/modern/tabs/tabs.js

@@ -1,214 +0,0 @@
-import React, { Children, Component, Fragment, memo } from 'react';
-import { styled } from '@storybook/theming';
-import { sanitize } from '@storybook/csf';
-import { Placeholder } from '../placeholder/placeholder';
-import { FlexBar } from '../bar/bar';
-import { TabButton } from '../bar/button';
-const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-const Wrapper = styled.div(({
-  theme,
-  bordered
-}) => bordered ? {
-  backgroundClip: 'padding-box',
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: theme.appBorderRadius,
-  overflow: 'hidden',
-  boxSizing: 'border-box'
-} : {}, ({
-  absolute
-}) => absolute ? {
-  width: '100%',
-  height: '100%',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexDirection: 'column'
-} : {
-  display: 'block'
-});
-export const TabBar = styled.div({
-  overflow: 'hidden',
-  '&:first-of-type': {
-    marginLeft: -3
-  }
-});
-const Content = styled.div({
-  display: 'block',
-  position: 'relative'
-}, ({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content
-}), ({
-  bordered,
-  theme
-}) => bordered ? {
-  borderRadius: `0 0 ${theme.appBorderRadius - 1}px ${theme.appBorderRadius - 1}px`
-} : {}, ({
-  absolute,
-  bordered
-}) => absolute ? {
-  height: `calc(100% - ${bordered ? 42 : 40}px)`,
-  position: 'absolute',
-  left: 0 + (bordered ? 1 : 0),
-  right: 0 + (bordered ? 1 : 0),
-  bottom: 0 + (bordered ? 1 : 0),
-  top: 40 + (bordered ? 1 : 0),
-  overflow: 'auto',
-  [`& > *:first-child${ignoreSsrWarning}`]: {
-    position: 'absolute',
-    left: 0 + (bordered ? 1 : 0),
-    right: 0 + (bordered ? 1 : 0),
-    bottom: 0 + (bordered ? 1 : 0),
-    top: 0 + (bordered ? 1 : 0),
-    height: `calc(100% - ${bordered ? 2 : 0}px)`,
-    overflow: 'auto'
-  }
-} : {});
-const VisuallyHidden = styled.div(({
-  active
-}) => active ? {
-  display: 'block'
-} : {
-  display: 'none'
-});
-export const TabWrapper = ({
-  active,
-  render,
-  children
-}) => /*#__PURE__*/React.createElement(VisuallyHidden, {
-  active: active
-}, render ? render() : children);
-TabWrapper.displayName = "TabWrapper";
-export const panelProps = {};
-
-const childrenToList = (children, selected) => Children.toArray(children).map(({
-  props: {
-    title,
-    id,
-    color,
-    children: childrenOfChild
-  }
-}, index) => {
-  const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
-  return {
-    active: selected ? id === selected : index === 0,
-    title,
-    id,
-    color,
-    render: typeof content === 'function' ? content : ({
-      active,
-      key
-    }) => /*#__PURE__*/React.createElement(VisuallyHidden, {
-      key: key,
-      active: active,
-      role: "tabpanel"
-    }, content)
-  };
-});
-
-export const Tabs = /*#__PURE__*/memo(({
-  children,
-  selected,
-  actions,
-  absolute,
-  bordered,
-  tools,
-  backgroundColor,
-  id: htmlId
-}) => {
-  const list = childrenToList(children, selected);
-  return list.length ? /*#__PURE__*/React.createElement(Wrapper, {
-    absolute: absolute,
-    bordered: bordered,
-    id: htmlId
-  }, /*#__PURE__*/React.createElement(FlexBar, {
-    border: true,
-    backgroundColor: backgroundColor
-  }, /*#__PURE__*/React.createElement(TabBar, {
-    role: "tablist"
-  }, list.map(({
-    title,
-    id,
-    active,
-    color
-  }) => {
-    const tabTitle = typeof title === 'function' ? title() : title;
-    return /*#__PURE__*/React.createElement(TabButton, {
-      id: `tabbutton-${sanitize(tabTitle)}`,
-      className: `tabbutton ${active ? 'tabbutton-active' : ''}`,
-      type: "button",
-      key: id,
-      active: active,
-      textColor: color,
-      onClick: e => {
-        e.preventDefault();
-        actions.onSelect(id);
-      },
-      role: "tab"
-    }, tabTitle);
-  })), tools ? /*#__PURE__*/React.createElement(Fragment, null, tools) : null), /*#__PURE__*/React.createElement(Content, {
-    id: "panel-tab-content",
-    bordered: bordered,
-    absolute: absolute
-  }, list.map(({
-    id,
-    active,
-    render
-  }) => render({
-    key: id,
-    active
-  })))) : /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Fragment, {
-    key: "title"
-  }, "Nothing found"));
-});
-Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false
-};
-export class TabsState extends Component {
-  constructor(props) {
-    super(props);
-    this.handlers = {
-      onSelect: id => this.setState({
-        selected: id
-      })
-    };
-    this.state = {
-      selected: props.initial
-    };
-  }
-
-  render() {
-    const {
-      bordered = false,
-      absolute = false,
-      children,
-      backgroundColor
-    } = this.props;
-    const {
-      selected
-    } = this.state;
-    return /*#__PURE__*/React.createElement(Tabs, {
-      bordered: bordered,
-      absolute: absolute,
-      selected: selected,
-      backgroundColor: backgroundColor,
-      actions: this.handlers
-    }, children);
-  }
-
-}
-TabsState.displayName = "TabsState";
-TabsState.defaultProps = {
-  children: [],
-  initial: null,
-  absolute: false,
-  bordered: false,
-  backgroundColor: ''
-};