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

package/dist/modern/spaced/Spaced.js

@@ -1,76 +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 React from 'react';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
-
-const toNumber = input => typeof input === 'number' ? input : Number(input);
-
-const Container = styled.div(({
-  theme,
-  col,
-  row = 1
-}) => col ? {
-  display: 'inline-block',
-  verticalAlign: 'inherit',
-  '& > *': {
-    marginLeft: col * theme.layoutMargin,
-    verticalAlign: 'inherit'
-  },
-  [`& > *:first-child${ignoreSsrWarning}`]: {
-    marginLeft: 0
-  }
-} : {
-  '& > *': {
-    marginTop: row * theme.layoutMargin
-  },
-  [`& > *:first-child${ignoreSsrWarning}`]: {
-    marginTop: 0
-  }
-}, ({
-  theme,
-  outer,
-  col,
-  row
-}) => {
-  switch (true) {
-    case !!(outer && col):
-      {
-        return {
-          marginLeft: outer * theme.layoutMargin,
-          marginRight: outer * theme.layoutMargin
-        };
-      }
-
-    case !!(outer && row):
-      {
-        return {
-          marginTop: outer * theme.layoutMargin,
-          marginBottom: outer * theme.layoutMargin
-        };
-      }
-
-    default:
-      {
-        return {};
-      }
-  }
-});
-export const Spaced = (_ref) => {
-  let {
-    col,
-    row,
-    outer,
-    children
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["col", "row", "outer", "children"]);
-
-  const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    col: col,
-    row: row,
-    outer: outerAmount
-  }, rest), children);
-};
-Spaced.displayName = "Spaced";

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 };
-      `));