<commit_before>import React, { useRef, useState } from 'react';
import { SelectTwo, Option, Icon } from 'react-components';
import mdx from './Select.mdx'

export default {
    title: 'Components / Select',
    component: SelectTwo,
    parameters: {
        docs: {
            page: mdx
        }
    }
}

export const basic = () => {
    const [ value, setValue ] = useState('ant');

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            <Option title="Ant" value="ant" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const ControlledOpenState = () => {
    const [value, setValue] = useState('');

    const [open, setOpen] = useState(false);

    function handleOpen() {
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <SelectTwo
            isOpen={open}
            value={value}
            onChange={({ value: v }) => setValue(v)}
            onOpen={handleOpen}
            onClose={handleClose}
        >
            <Option title="Ant" value="ant" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const withRichOptionContent = () => {
    const [ value, setValue ] = useState('reddit');

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            <Option title="Reddit" value="reddit">
                <Icon name="reddit"/> Reddit
            </Option>
            <Option title="Twitter" value="twitter">
                <Icon name="twitter"/> Twitter
            </Option>
            <Option title="Yahoo" value="yahoo">
                <Icon name="yahoo"/> Yahoo
            </Option>
            <Option title="Youtube" value="youtube">
                <Icon name="youtube"/> Youtube
            </Option>
        </SelectTwo>
    );
};

export const withCustomSearchClearTimer = () => {
    const [ value, setValue ] = useState('ant');

    return (
        <SelectTwo
            value={value}
            onChange={({ value: v }) => setValue(v)}
            clearSearchAfter={1000}
        >
            <Option title="Ant" value="ant" />
            <Option title="Bear" value="bear" />
            <Option title="Chimpanzee" value="chimpanzee" />
            <Option title="Deer" value="deer" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const withComplexValues = () => {
    /*
     * The useRef is used here in order to preserve identity of the value to its
     * option between render cycles since the Select uses identity comparison to
     * determine which option is selected.
     */
    const { current: options } = useRef([
        { name: 'ant' },
        { name: 'bear' },
        { name: 'chimpanzee' }
    ])

    const [ value, setValue ] = useState<{ name: string } | null>(options[0]);

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            {options.map(option => (
                <Option title={option.name} value={option} />
            ))}
        </SelectTwo>
    );
};<commit_msg>Fix linter errors<commit_after>import React, { useRef, useState } from 'react';
import { SelectTwo, Option, Icon } from 'react-components';
import mdx from './Select.mdx';

export default {
    title: 'Components / Select',
    component: SelectTwo,
    parameters: {
        docs: {
            page: mdx,
        },
    },
};

export const Basic = () => {
    const [value, setValue] = useState('ant');

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            <Option title="Ant" value="ant" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const ControlledOpenState = () => {
    const [value, setValue] = useState('');

    const [open, setOpen] = useState(false);

    function handleOpen() {
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <SelectTwo
            isOpen={open}
            value={value}
            onChange={({ value: v }) => setValue(v)}
            onOpen={handleOpen}
            onClose={handleClose}
        >
            <Option title="Ant" value="ant" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const WithRichOptionContent = () => {
    const [value, setValue] = useState('reddit');

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            <Option title="Reddit" value="reddit">
                <Icon name="reddit" /> Reddit
            </Option>
            <Option title="Twitter" value="twitter">
                <Icon name="twitter" /> Twitter
            </Option>
            <Option title="Yahoo" value="yahoo">
                <Icon name="yahoo" /> Yahoo
            </Option>
            <Option title="Youtube" value="youtube">
                <Icon name="youtube" /> Youtube
            </Option>
        </SelectTwo>
    );
};

export const WithCustomSearchClearTimer = () => {
    const [value, setValue] = useState('ant');

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)} clearSearchAfter={1000}>
            <Option title="Ant" value="ant" />
            <Option title="Bear" value="bear" />
            <Option title="Chimpanzee" value="chimpanzee" />
            <Option title="Deer" value="deer" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
};

export const WithComplexValues = () => {
    /*
     * The useRef is used here in order to preserve identity of the value to its
     * option between render cycles since the Select uses identity comparison to
     * determine which option is selected.
     */
    const { current: options } = useRef([{ name: 'ant' }, { name: 'bear' }, { name: 'chimpanzee' }]);

    const [value, setValue] = useState<{ name: string } | null>(options[0]);

    return (
        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
            {options.map((option) => (
                <Option title={option.name} value={option} />
            ))}
        </SelectTwo>
    );
};
{'fraction_non_alphanumeric': 0.15458473355736918, 'fraction_numerical': 0.0016002560409665546, 'mean_word_length': 2.033980582524272, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 91, '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': '6811282', 'n_tokens_mistral': 1803, 'n_tokens_neox': 1770, 'n_words': 440}