@trellixio/roaster-coffee/lib/components/CodeBlock/CodeBlock.js

Beans' product component library

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import * as React from 'react';
import { styled } from '@storybook/theming';
import prettier from 'prettier/standalone';
import parserBabel from 'prettier/parser-babel';
import reactElementToJSXString from 'react-element-to-jsx-string';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
SyntaxHighlighter.registerLanguage('tsx', tsx);
const Pre = styled.pre(({ theme }) => ({
    display: 'flex !important',
    justifyContent: 'flex-start',
    margin: 0,
    padding: `${theme.layoutMargin}px !important`,
    tabSize: '2',
}));
const Code = styled.code `
  flex: 1;
  padding-right: 0;
  opacity: 1;
  counter-reset: line;

  .code-line {
    counter-increment: line;
    position: relative;
    display: block;
    margin-left: 1.5rem;
  }

  .code-line:before {
    content: counter(line);
    position: absolute;
    margin-left: -1.5rem;
    color: #000;
  }
`;
const formatCode = (code) => {
    return prettier.format(code, { parser: 'babel', plugins: [parserBabel] });
};
export function CodeBlock({ language = 'jsx', copyable = false, bordered = false, padded = false, showLineNumbers = false, wrapLines = true, code, rawCode, codeStringifierOptions, }) {
    const [copied, setCopied] = React.useState(false);
    const displayedCode = rawCode ||
        reactElementToJSXString(code, Object.assign({ showFunctions: true, functionValue: (fn) => fn.name, sortProps: false, useBooleanShorthandSyntax: false, useFragmentShortSyntax: false }, codeStringifierOptions));
    const onClick = (e) => __awaiter(this, void 0, void 0, function* () {
        e.preventDefault();
        yield window.navigator.clipboard.writeText(displayedCode);
        setCopied(true);
        window.setTimeout(() => setCopied(false), 1500);
    });
    return (React.createElement(React.Fragment, null,
        React.createElement(SyntaxHighlighter, { language: language, style: oneLight, padded: padded || bordered, useInlineStyles: true, PreTag: Pre, CodeTag: Code, showLineNumbers: showLineNumbers, wrapLines: wrapLines, lineProps: { className: 'code-line' } }, formatCode(displayedCode)),
        copyable && (React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: 8 } },
            React.createElement("button", { type: "button", onClick: onClick, className: "button secondary" }, copied ? 'Copied' : 'Copy')))));
}