From 6ff15f9d6d8a4ed4935a90f125042f60844f511b Mon Sep 17 00:00:00 2001
From: Minghua Sun <clairesunstudio@gmail.com>
Date: Wed, 2 Dec 2020 15:56:31 -0500
Subject: [PATCH] Core/cleanup (#1279)

* cleanup unused

* remove unused package

* order stories
---
 .../core/.storybook/syntax-highlighter.js     | 171 ------------------
 1 file changed, 171 deletions(-)
 delete mode 100644 packages/core/.storybook/syntax-highlighter.js

diff --git a/packages/core/.storybook/syntax-highlighter.js b/packages/core/.storybook/syntax-highlighter.js
deleted file mode 100644
index d51b3d5189..0000000000
--- a/packages/core/.storybook/syntax-highlighter.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from 'react';
-import { AutoSizer, List } from 'react-virtualized';
-import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
-import { ActionBar, createSyntaxHighlighterElement, EmptyBlock  } from '@storybook/components';
-import { styled, ThemeProvider, convert, themes, Global, getScrollAreaStyles } from '@storybook/theming';
-import { formatter } from '@storybook/components/dist/syntaxhighlighter/formatter';
-import '!!style-loader!css-loader!react-virtualized/styles.css'; // only needs to be imported once
-
-const themedSyntax = (theme) =>
-  Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {});
-  
-const Pre = styled.pre(({ theme, padded }) => ({
-  display: 'flex',
-  justifyContent: 'flex-start',
-  height: '100%',
-  margin: 0,
-  padding: padded ? theme.layoutMargin : 0,
-}));
-
-const Code = styled.code({
-  flex: 1,
-  paddingRight: 0,
-  opacity: 1,
-});
-
-export const Wrapper = styled.div(
-  ({ theme }) => ({
-    position: 'relative',
-    overflow: 'hidden',
-    color: theme.color.defaultText,
-    // A speficic number of pixels for the height is
-    // required for react virtualization to work.
-    height: '700px',
-
-  }),
-  ({ theme, bordered }) =>
-    bordered
-      ? {
-          border: `1px solid ${theme.appBorderColor}`,
-          borderRadius: theme.borderRadius,
-          background: theme.background.content,
-        }
-      : {},
-      // This provides styles to highlight code!
-      ({ theme }) => themedSyntax(theme)
-
-);
-
-// This is a refactor of Storybook's Source component to support
-// react virtualization.
-const SyntaxHighlighter = ({
-  children,
-  language = 'jsx',
-  copyable = true,
-  bordered = true,
-  padded = false,
-  format = true,
-  className = null,
-  useInlineStyles = false,
-  ...rest
-}) => {
-  if (typeof children !== 'string' || !children.trim()) {
-    return null;
-  }
-  const highlightableCode = format ? formatter(children) : children.trim();
-  
-  const [copied, setCopied] = React.useState(false);
-
-  const onClick = (e) => {
-    e.preventDefault();
-
-    if (navigator) {
-      navigator.clipboard
-        .writeText(highlightableCode)
-        .then(() => {
-          setCopied(true);
-          if (window) {
-            window.setTimeout(() => setCopied(false), 1500);
-          }
-        })
-        .catch(console.error);
-    }
-  };
-
-  return (
-    <Wrapper bordered={bordered} padded={padded} className={className}>
-      <ReactSyntaxHighlighter
-        padded={padded || bordered}
-        language={language}
-        lineNumberContainerStyle={{}}
-        PreTag={Pre}
-        CodeTag={Code}
-        useInlineStyles={useInlineStyles}
-        {...rest}
-      >
-        {highlightableCode}
-      </ReactSyntaxHighlighter>
-      {copyable ? (
-        <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]} />
-      ) : null}
-    </Wrapper>
-  );
-};
-
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
-  // DocBlocks-specific styling and overrides
-  fontSize: `${theme.typography.size.s2 - 1}px`,
-  lineHeight: '19px',
-  margin: '25px 0 40px',
-  borderRadius: theme.appBorderRadius,
-  boxShadow:
-    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-  'pre.hljs': {
-    padding: 20,
-    background: 'inherit',
-  },
-}));
-
-const Source = (props) => {
-  const { error } = props;
-  if (error) {
-    return <EmptyBlock>{error}</EmptyBlock>;
-  }
-
-  const { language, code, dark, format, ...rest } = props;
-
-  const syntaxHighlighter = (
-    <StyledSyntaxHighlighter
-      bordered
-      padded
-      copyable
-      format={format}
-      language={language}
-      {...rest}
-    >
-      {code}
-    </StyledSyntaxHighlighter>
-  );
-  if (typeof dark === 'undefined') {
-    return syntaxHighlighter;
-  }
-  const overrideTheme = dark ? themes.dark : themes.light;
-  return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
-}
-
-export default Source;
-
-// Renders each row of code for the syntax highlighter.
-export const Renderer = ({rows, stylesheet, useInlineStyles }) => (
-  <AutoSizer>
-    {({height, width}) => (
-      <List
-        columnCount={1}
-        height={height}
-        width={width}
-        columnWidth={400}
-        rowHeight={19}
-        containerStyle={{overflowX: 'auto'}}
-        rowRenderer={({ index, key, style }) => createSyntaxHighlighterElement({
-          node: rows[index],
-          stylesheet,
-          style,
-          // Required to get this to work with react virtualization.
-          useInlineStyles: true,
-          key
-      })}
-        rowCount={rows.length}
-        />
-    )}
-  </AutoSizer>     
-);
\ No newline at end of file