<commit_before>import React, { useState } from 'react';
import { withPrefix } from 'gatsby';
import VisibilitySensor from 'react-visibility-sensor';
import { encodeQueryParams } from 'use-query-params';
import { stringify } from 'query-string';
import classnames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay, faCode, faWindowRestore, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import CodeViewer from './CodeViewer';
import GlobalContextConsumer from '../GlobalContext';
import ExampleRunnerResult from './ExampleRunnerResult';
import { useExampleFileNodes } from './use-example-file-nodes';
import { getExampleInfo, isDevelopment, openPlunker } from './helpers';
import { doOnEnter } from '../key-handlers';
import { ParameterConfig } from '../../pages/example-runner';
import anchorIcon from '../../images/anchor';
import styles from './ExampleRunner.module.scss';

const getNewTabLink = exampleInfo => {
    if (isDevelopment()) {
        const {
            pageName,
            library,
            framework,
            useFunctionalReact,
            importType,
            name,
            title,
            type,
            options,
        } = exampleInfo;

        const queryParams = encodeQueryParams(
            ParameterConfig,
            {
                pageName,
                library,
                framework,
                useFunctionalReact,
                importType,
                name,
                title,
                type,
                options,
            });

        return `/example-runner/?${stringify(queryParams)}`;
    } else {
        return `${exampleInfo.appLocation}index.html`;
    }
};

export const ExampleRunner = ({ pageName, framework, name, title, type, options = {}, library }) => {
    const [showCode, setShowCode] = useState(!!options.showCode);
    const nodes = useExampleFileNodes();

    return <GlobalContextConsumer>
        {({ exampleImportType, useFunctionalReact, set }) => {
            const exampleInfo = getExampleInfo(
                nodes, library, pageName, name, title, type, options, framework, exampleImportType, useFunctionalReact);

            const exampleStyle = {
                width: '100%',
                height: exampleInfo.options.exampleHeight || '500px',
            };

            const isGenerated = exampleInfo.type === 'generated' || exampleInfo.type === 'mixed';
            const linkId = `example--${name}`;

            return <div className={styles['example-runner']}>
                <div className={`form-inline ${styles['example-runner__header']}`}>
                    <a id={linkId} href={`#${linkId}`} className={`anchor ${styles['example-runner__title']}`}>
                        {anchorIcon}&nbsp;Example: {title}
                    </a>
                    {library === 'grid' && exampleInfo.framework === 'react' &&
                        <ReactStyleSelector
                            useFunctionalReact={useFunctionalReact}
                            onChange={event => set({ useFunctionalReact: JSON.parse(event.target.value) })} />
                    }
                    {library === 'grid' && exampleInfo.framework !== 'javascript' && isGenerated &&
                        <ImportTypeSelector
                            importType={exampleImportType}
                            onChange={event => set({ exampleImportType: event.target.value })} />
                    }
                </div>
                <div className={styles['example-runner__body']} style={exampleStyle}>
                    <div className={styles['example-runner__menu']}>
                        <div
                            className={classnames(styles['example-runner__menu-item'], { [styles['example-runner__menu-item--selected']]: !showCode })}
                            onClick={() => setShowCode(false)}<commit_msg>AG-4634 - use one hyphen in example title IDs<commit_after>import React, { useState } from 'react';
import { withPrefix } from 'gatsby';
import VisibilitySensor from 'react-visibility-sensor';
import { encodeQueryParams } from 'use-query-params';
import { stringify } from 'query-string';
import classnames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay, faCode, faWindowRestore, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import CodeViewer from './CodeViewer';
import GlobalContextConsumer from '../GlobalContext';
import ExampleRunnerResult from './ExampleRunnerResult';
import { useExampleFileNodes } from './use-example-file-nodes';
import { getExampleInfo, isDevelopment, openPlunker } from './helpers';
import { doOnEnter } from '../key-handlers';
import { ParameterConfig } from '../../pages/example-runner';
import anchorIcon from '../../images/anchor';
import styles from './ExampleRunner.module.scss';

const getNewTabLink = exampleInfo => {
    if (isDevelopment()) {
        const {
            pageName,
            library,
            framework,
            useFunctionalReact,
            importType,
            name,
            title,
            type,
            options,
        } = exampleInfo;

        const queryParams = encodeQueryParams(
            ParameterConfig,
            {
                pageName,
                library,
                framework,
                useFunctionalReact,
                importType,
                name,
                title,
                type,
                options,
            });

        return `/example-runner/?${stringify(queryParams)}`;
    } else {
        return `${exampleInfo.appLocation}index.html`;
    }
};

export const ExampleRunner = ({ pageName, framework, name, title, type, options = {}, library }) => {
    const [showCode, setShowCode] = useState(!!options.showCode);
    const nodes = useExampleFileNodes();

    return <GlobalContextConsumer>
        {({ exampleImportType, useFunctionalReact, set }) => {
            const exampleInfo = getExampleInfo(
                nodes, library, pageName, name, title, type, options, framework, exampleImportType, useFunctionalReact);

            const exampleStyle = {
                width: '100%',
                height: exampleInfo.options.exampleHeight || '500px',
            };

            const isGenerated = exampleInfo.type === 'generated' || exampleInfo.type === 'mixed';
            const linkId = `example-${name}`;

            return <div className={styles['example-runner']}>
                <div className={`form-inline ${styles['example-runner__header']}`}>
                    <a id={linkId} href={`#${linkId}`} className={`anchor ${styles['example-runner__title']}`}>
                        {anchorIcon}&nbsp;Example: {title}
                    </a>
                    {library === 'grid' && exampleInfo.framework === 'react' &&
                        <ReactStyleSelector
                            useFunctionalReact={useFunctionalReact}
                            onChange={event => set({ useFunctionalReact: JSON.parse(event.target.value) })} />
                    }
                    {library === 'grid' && exampleInfo.framework !== 'javascript' && isGenerated &&
                        <ImportTypeSelector
                            importType={exampleImportType}
                            onChange={event => set({ exampleImportType: event.target.value })} />
                    }
                </div>
                <div className={styles['example-runner__body']} style={exampleStyle}>
                    <div className={styles['example-runner__menu']}>
                        <div
                            className={classnames(styles['example-runner__menu-item'], { [styles['example-runner__menu-item--selected']]: !showCode })}
                            onClick={() => setShowCode(false)}
{'fraction_non_alphanumeric': 0.12466708941027267, 'fraction_numerical': 0.002029169308814204, 'mean_word_length': 2.0099236641221374, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6545496', 'n_tokens_mistral': 1958, 'n_tokens_neox': 1908, 'n_words': 418}