@storybook/components 5.2.1 → 5.2.5

package/src/index.ts

@@ -1,37 +0,0 @@
-export { Badge } from './Badge/Badge';
-
-// Typography
-export { Link } from './typography/link/link';
-export { DocumentWrapper } from './typography/DocumentWrapper';
-export { SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
-
-// UI
-export { ActionBar } from './ActionBar/ActionBar';
-export { Spaced } from './spaced/Spaced';
-export { Placeholder } from './placeholder/placeholder';
-export { ScrollArea } from './ScrollArea/ScrollArea';
-
-// Forms
-export { Button } from './Button/Button';
-export { Form } from './form/index';
-
-// Tooltips
-export { WithTooltip, WithTooltipPure } from './tooltip/WithTooltip';
-export { TooltipMessage } from './tooltip/TooltipMessage';
-export { TooltipNote } from './tooltip/TooltipNote';
-export { TooltipLinkList } from './tooltip/TooltipLinkList';
-
-// Toolbar and subcomponents
-export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
-export { IconButton, TabButton } from './bar/button';
-export { Separator, interleaveSeparators } from './bar/separator';
-export { Bar, FlexBar } from './bar/bar';
-export { AddonPanel } from './addon-panel/addon-panel';
-
-// Graphics
-export { Icons } from './icon/icon';
-export { StorybookLogo } from './brand/StorybookLogo';
-export { StorybookIcon } from './brand/StorybookIcon';
-
-// Doc blocks
-export * from './blocks';

package/src/placeholder/placeholder.stories.tsx

@@ -1,24 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { Placeholder } from './placeholder';
-import { Link } from '../typography/link/link';
-
-export default {
-  component: Placeholder,
-  title: 'Basics|Placeholder',
-};
-
-export const singleChild = () => (
-  <Placeholder>This is a placeholder with single child, it's bolded</Placeholder>
-);
-export const twoChildren = () => (
-  <Placeholder>
-    <Fragment key="title">This has two children, the first bold</Fragment>
-    <Fragment key="desc">
-      The second normal weight. Here's a{' '}
-      <Link href="https://storybook.js.org" secondary cancel={false}>
-        link
-      </Link>
-    </Fragment>
-  </Placeholder>
-);

package/src/placeholder/placeholder.tsx

@@ -1,25 +0,0 @@
-import React, { Children, FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-
-const Title = styled.div`
-  font-weight: ${props => props.theme.typography.weight.bold};
-`;
-
-const Desc = styled.div``;
-
-const Message = styled.div`
-  padding: 30px;
-  text-align: center;
-  color: ${props => props.theme.color.defaultText};
-  font-size: ${props => props.theme.typography.size.s2 - 1}px;
-`;
-
-export const Placeholder: FunctionComponent = ({ children, ...props }) => {
-  const [title, desc] = Children.toArray(children);
-  return (
-    <Message {...props}>
-      <Title>{title}</Title>
-      {desc && <Desc>{desc}</Desc>}
-    </Message>
-  );
-};

package/src/spaced/Spaced.stories.tsx

@@ -1,72 +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', () => (
-    <div>
-      <PlaceholderBlock color="silver" />
-      <Spaced row={1}>
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-      </Spaced>
-      <PlaceholderBlock color="silver" />
-    </div>
-  ))
-  .add('row outer', () => (
-    <div>
-      <PlaceholderBlock color="silver" />
-      <Spaced row={1} outer>
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-      </Spaced>
-      <PlaceholderBlock color="silver" />
-    </div>
-  ))
-  .add('row multiply', () => (
-    <div>
-      <PlaceholderBlock color="silver" />
-      <Spaced row={3} outer={0.5}>
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-      </Spaced>
-      <PlaceholderBlock color="silver" />
-    </div>
-  ))
-  .add('col', () => (
-    <div>
-      <PlaceholderInline color="silver" />
-      <Spaced col={1}>
-        <PlaceholderInline />
-        <PlaceholderInline />
-        <PlaceholderInline />
-      </Spaced>
-      <PlaceholderInline color="silver" />
-    </div>
-  ))
-  .add('col outer', () => (
-    <div>
-      <PlaceholderInline color="silver" />
-      <Spaced col={1} outer>
-        <PlaceholderInline />
-        <PlaceholderInline />
-        <PlaceholderInline />
-      </Spaced>
-      <PlaceholderInline color="silver" />
-    </div>
-  ));

package/src/spaced/Spaced.tsx

@@ -1,69 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-
-const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
-
-export interface ContainerProps {
-  col?: number;
-  row?: number;
-  outer?: number;
-}
-
-const Container = styled.div<ContainerProps>(
-  ({ theme, col, row = 1 }) =>
-    col
-      ? {
-          display: 'inline-block',
-          verticalAlign: 'inherit',
-          '& > *': {
-            marginLeft: col * theme.layoutMargin,
-            verticalAlign: 'inherit',
-          },
-          '& > *:first-of-type': {
-            marginLeft: 0,
-          },
-        }
-      : {
-          '& > *': {
-            marginTop: row * theme.layoutMargin,
-          },
-          '& > *:first-of-type': {
-            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 interface SpacedProps {
-  col?: number;
-  row?: number;
-  outer?: number | boolean;
-}
-
-export const Spaced: FunctionComponent<SpacedProps> = ({ col, row, outer, children }) => {
-  const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
-
-  return (
-    <Container col={col} row={row} outer={outerAmount}>
-      {children}
-    </Container>
-  );
-};

package/src/syntaxhighlighter/formatter.test.js

@@ -1,90 +0,0 @@
-import { stripIndents } from 'common-tags';
-
-import { formatter } from './formatter';
-
-test('handles empty string', () => {
-  const input = '';
-  const result = formatter(input);
-
-  expect(result).toBe(input);
-});
-
-test('handles single line', () => {
-  const input = 'console.log("hello world")';
-  const result = formatter(input);
-
-  expect(result).toBe(input);
-});
-
-test('does not transform correct code', () => {
-  const input = stripIndents`
-    console.log("hello");
-    console.log("world");
-  `;
-  const result = formatter(input);
-
-  expect(result).toBe(input);
-});
-
-test('does transform incorrect code', () => {
-  const input = `
-    console.log("hello");
-    console.log("world");
-  `;
-  const result = formatter(input);
-
-  expect(result).toBe(`console.log("hello");
-console.log("world");`);
-});
-
-test('more indentations - skip first line', () => {
-  const input = `
-    test('handles empty string', () => {
-      const input = '';
-      const result = formatter(input);
-    
-      expect(result).toBe(input);
-    });
-  `;
-  const result = formatter(input);
-
-  expect(result).toBe(`test('handles empty string', () => {
-  const input = '';
-  const result = formatter(input);
-
-  expect(result).toBe(input);
-});`);
-});
-
-test('more indentations - code on first line', () => {
-  const input = `// some comment
-    test('handles empty string', () => {
-      const input = '';
-      const result = formatter(input);
-    
-      expect(result).toBe(input);
-    });
-  `;
-  const result = formatter(input);
-
-  expect(result).toBe(`// some comment
-test('handles empty string', () => {
-  const input = '';
-  const result = formatter(input);
-
-  expect(result).toBe(input);
-});`);
-});
-
-test('removes whitespace in empty line completely', () => {
-  const input = `
-    console.log("hello");
-
-    console.log("world");
-  `;
-  const result = formatter(input);
-
-  expect(result).toBe(`console.log("hello");
-
-console.log("world");`);
-});

package/src/syntaxhighlighter/formatter.ts

@@ -1,26 +0,0 @@
-import memoize from 'memoizerific';
-
-export const formatter = memoize(2)((code: string) => {
-  // code provided to the component is often coming from template literals, which preserve whitespace.
-  // sometimes the first line doesn't have padding, but the second does.
-  // we split the code-string into lines, then if we find padding on line 0 or 1,
-  // we assume that padding is bad, and remove that much padding on all following lines
-  return code
-    .split(/\n/)
-    .reduce(
-      (acc, i, index) => {
-        const match = i.match(/^((:?\s|\t)+)/);
-        const padding = match ? match[1] : '';
-
-        if (acc.firstIndent === '' && padding && index < 3) {
-          return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding };
-        }
-        return {
-          result: `${acc.result}\n${i.replace(acc.firstIndent, '').replace(/\s*$/, '')}`,
-          firstIndent: acc.firstIndent,
-        };
-      },
-      { firstIndent: '', result: '' }
-    )
-    .result.trim();
-});

package/src/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { ThemeProvider, themes, convert, ensure } from '@storybook/theming';
-import { SyntaxHighlighter } from './syntaxhighlighter';
-
-storiesOf('Basics|SyntaxHighlighter', module)
-  .add('bash', () => (
-    <SyntaxHighlighter language="bash" copyable={false}>
-      npx npm-check-updates '/storybook/' -u && npm install
-    </SyntaxHighlighter>
-  ))
-  .add('jsx', () => (
-    <SyntaxHighlighter language="jsx" copyable={false}>
-      {`import { Good, Things } from 'life';
-
-        const result = () => <Good><Things all={true} /></Good>;
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('unsupported', () => (
-    <SyntaxHighlighter language="C#" bordered copyable>
-      {`
-        // 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();
-            }
-          }
-        }
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('dark unsupported', () => {
-    const theme = ensure(themes.dark);
-    return (
-      <ThemeProvider theme={theme}>
-        <SyntaxHighlighter bordered language="C#" copyable>
-          {`
-            // 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();
-                }
-              }
-            }
-          `}
-        </SyntaxHighlighter>
-      </ThemeProvider>
-    );
-  })
-  .add('story', () => (
-    <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>
-        ));
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('bordered & copy-able', () => (
-    <SyntaxHighlighter language="jsx" copyable bordered>
-      {`import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('padded', () => (
-    <SyntaxHighlighter language="jsx" padded>
-      {`import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('showLineNumbers', () => (
-    <SyntaxHighlighter language="jsx" copyable={false} showLineNumbers>
-      {`import { Good, Things } from 'life';
-
-        const result = () => <Good><Things /></Good>;
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ));

package/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -1,165 +0,0 @@
-import React, { Component } from 'react';
-import { styled } from '@storybook/theming';
-import { document, window } from 'global';
-import memoize from 'memoizerific';
-
-import jsx from 'react-syntax-highlighter/languages/prism/jsx';
-import bash from 'react-syntax-highlighter/languages/prism/bash';
-import css from 'react-syntax-highlighter/languages/prism/css';
-import html from 'react-syntax-highlighter/languages/prism/markup';
-
-import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
-
-import { ActionBar } from '../ActionBar/ActionBar';
-import { ScrollArea } from '../ScrollArea/ScrollArea';
-
-import { formatter } from './formatter';
-
-registerLanguage('jsx', jsx);
-registerLanguage('bash', bash);
-registerLanguage('css', css);
-registerLanguage('html', html);
-
-const themedSyntax = memoize(2)(theme =>
-  Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
-);
-
-export interface WrapperProps {
-  bordered?: boolean;
-  padded?: boolean;
-}
-
-const Wrapper = styled.div<WrapperProps>(
-  ({ 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 }) => (
-  <ScrollArea horizontal vertical className={className}>
-    {children}
-  </ScrollArea>
-))(
-  {
-    position: 'relative',
-  },
-  ({ theme }) => ({
-    '& code': {
-      paddingRight: theme.layoutMargin,
-    },
-  }),
-  ({ theme }) => themedSyntax(theme)
-);
-
-export interface PreProps {
-  padded?: boolean;
-}
-
-const Pre = styled.pre<PreProps>(({ 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 interface SyntaxHighlighterProps {
-  language: string;
-  copyable?: boolean;
-  bordered?: boolean;
-  padded?: boolean;
-  format?: boolean;
-  className?: string;
-}
-
-export interface SyntaxHighlighterState {
-  copied: boolean;
-}
-
-type ReactSyntaxHighlighterProps = React.ComponentProps<typeof ReactSyntaxHighlighter>;
-
-export class SyntaxHighlighter extends Component<
-  SyntaxHighlighterProps & ReactSyntaxHighlighterProps,
-  SyntaxHighlighterState
-> {
-  static defaultProps: SyntaxHighlighterProps = {
-    language: null,
-    copyable: false,
-    bordered: false,
-    padded: false,
-    format: true,
-    className: null,
-  };
-
-  state = { copied: false };
-
-  onClick = (e: React.MouseEvent) => {
-    const { children } = this.props;
-
-    e.preventDefault();
-    const tmp = document.createElement('TEXTAREA');
-    const focus = document.activeElement;
-
-    tmp.value = children;
-
-    document.body.appendChild(tmp);
-    tmp.select();
-    document.execCommand('copy');
-    document.body.removeChild(tmp);
-    focus.focus();
-
-    this.setState({ copied: true }, () => {
-      window.setTimeout(() => this.setState({ copied: false }), 1500);
-    });
-  };
-
-  render() {
-    const {
-      children,
-      language = 'jsx',
-      copyable,
-      bordered,
-      padded,
-      format,
-      className,
-      ...rest
-    } = this.props;
-    const { copied } = this.state;
-
-    return children ? (
-      <Wrapper bordered={bordered} padded={padded} className={className}>
-        <Scroller>
-          <ReactSyntaxHighlighter
-            padded={padded || bordered}
-            language={language}
-            useInlineStyles={false}
-            PreTag={Pre}
-            CodeTag={Code}
-            lineNumberContainerStyle={{}}
-            {...rest}
-          >
-            {format ? formatter((children as string).trim()) : (children as string).trim()}
-          </ReactSyntaxHighlighter>
-        </Scroller>
-        {copyable ? (
-          <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick: this.onClick }]} />
-        ) : null}
-      </Wrapper>
-    ) : null;
-  }
-}