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

package/dist/modern/spaced/Spaced.js

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

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

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

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

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

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

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