<commit_before>import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { theme } from './theme';

const LiveCode = (props) => {
  const className = props.children.props.className || '';
  const matches = className.match(/language-(?<lang>.+)/);
  const language =
    matches && matches.groups && matches.groups.lang ? matches.groups.lang : '';

  const showText = `Show ${language.toUpperCase()}`;
  const hideText = `Hide ${language.toUpperCase()}`;
  const [labelText, setLabelText] = useState(showText);
  const [codeHidden, setCodeHidden] = useState(true);
  const [copyText, setCopyText] = useState('Copy');

  const handleChange = function(event) {
    if (event.target.checked) {
      setLabelText(hideText);
      setCodeHidden(false);
    } else {
      setLabelText(showText);
      setCodeHidden(true);
    }
  };

  const copyToClipboard = function(e) {
    const textArea = e.target.closest('.button-copy').nextElementSibling
      .firstElementChild;

    const input = document.createElement('textarea');
    input.classList.add('visually-hidden');

    document.body.appendChild(input);
    input.value = textArea.defaultValue;
    input.select();

    document.execCommand('copy');
    document.body.removeChild(input);

    setCopyText('Copied');
    setTimeout(function() {
      setCopyText('Copy');
    }, 2000);
  };

  return (
    <LiveProvider
      language={language}
      disabled={true}
      code={`${props.children.props.children.trim()}`}
      transformCode={(code) => {
        return language === 'html' ? `<>${code}</>` : code;
      }}
      theme={theme}
    >
      <section className="component-example">
        {props.children.props['code-only'] ? (
          <div
            className="component-example_code"
            data-rb-example-lang={language.toUpperCase()}
          >
            <button onClick={copyToClipboard} className="button button-copy">
              <span className="button-copy_language">
                {language.toUpperCase()}
              </span>
              <span className="button-copy_text">{copyText}</span>
            </button>
            <LiveEditor />
          </div>
        ) : props.children.props['render-only'] ? (
          <div
            className="component-example_preview"
            dangerouslySetInnerHTML={{
              __html: props.children.props.children.trim(),
            }}
          ></div>
        ) : (
          <>
            <div
              className="component-example_preview"
              dangerouslySetInnerHTML={{
                __html: props.children.props.children.trim(),
              }}
            ></div>
            <label className="component-example_toggle">
              <input
                onChange={handleChange}
                type="checkbox"
                className="visually-hidden"
              />
              {labelText}
            </label>
            <div
              className={`component-example_code ${
                codeHidden ? 'visually-hidden' : ''
              }`}
              data-rb-example-lang={language.toUpperCase()}
            >
              <button onClick={copyToClipboard} className="button button-copy">
                <span className="button-copy_language">
                  {language.toUpperCase()}
                </span>
                <span className="button-copy_text">{copyText}</span>
              </button>
              <LiveEditor />
            </div>
          </>
        )}
        <LiveError />
      </section>
    </LiveProvider>
  );
};

export default LiveCode;<commit_msg>fix(Sample Site): Conditionally render errors on dialog page.<commit_after>import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { theme } from './theme';

const LiveCode = (props) => {
  const className = props.children.props.className || '';
  const matches = className.match(/language-(?<lang>.+)/);
  const language =
    matches && matches.groups && matches.groups.lang ? matches.groups.lang : '';

  const showText = `Show ${language.toUpperCase()}`;
  const hideText = `Hide ${language.toUpperCase()}`;
  const [labelText, setLabelText] = useState(showText);
  const [codeHidden, setCodeHidden] = useState(true);
  const [copyText, setCopyText] = useState('Copy');

  const handleChange = function(event) {
    if (event.target.checked) {
      setLabelText(hideText);
      setCodeHidden(false);
    } else {
      setLabelText(showText);
      setCodeHidden(true);
    }
  };

  const copyToClipboard = function(e) {
    const textArea = e.target.closest('.button-copy').nextElementSibling
      .firstElementChild;

    const input = document.createElement('textarea');
    input.classList.add('visually-hidden');

    document.body.appendChild(input);
    input.value = textArea.defaultValue;
    input.select();

    document.execCommand('copy');
    document.body.removeChild(input);

    setCopyText('Copied');
    setTimeout(function() {
      setCopyText('Copy');
    }, 2000);
  };

  return (
    <LiveProvider
      language={language}
      disabled={true}
      code={`${props.children.props.children.trim()}`}
      transformCode={(code) => {
        return language === 'html' ? `<>${code}</>` : code;
      }}
      theme={theme}
    >
      <section className="component-example">
        {props.children.props['code-only'] ? (
          <div
            className="component-example_code"
            data-rb-example-lang={language.toUpperCase()}
          >
            <button onClick={copyToClipboard} className="button button-copy">
              <span className="button-copy_language">
                {language.toUpperCase()}
              </span>
              <span className="button-copy_text">{copyText}</span>
            </button>
            <LiveEditor />
          </div>
        ) : props.children.props['render-only'] ? (
          <div
            className="component-example_preview"
            dangerouslySetInnerHTML={{
              __html: props.children.props.children.trim(),
            }}
          ></div>
        ) : (
          <>
            <div
              className="component-example_preview"
              dangerouslySetInnerHTML={{
                __html: props.children.props.children.trim(),
              }}
            ></div>
            <label className="component-example_toggle">
              <input
                onChange={handleChange}
                type="checkbox"
                className="visually-hidden"
              />
              {labelText}
            </label>
            <div
              className={`component-example_code ${
                codeHidden ? 'visually-hidden' : ''
              }`}
              data-rb-example-lang={language.toUpperCase()}
            >
              <button onClick={copyToClipboard} className="button button-copy">
                <span className="button-copy_language">
                  {language.toUpperCase()}
                </span>
                <span className="button-copy_text">{copyText}</span>
              </button>
              <LiveEditor />
            </div>
          </>
        )}
        {!props.children.props['code-only'] && <LiveError />}
      </section>
    </LiveProvider>
  );
};

export default LiveCode;
{'fraction_non_alphanumeric': 0.14082998661311916, 'fraction_numerical': 0.00107095046854083, 'mean_word_length': 2.0618852459016392, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '896316', 'n_tokens_mistral': 2018, 'n_tokens_neox': 1996, 'n_words': 331}