<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import PlusCircle from '@strapi/icons/PlusCircle';
import { Box } from '@strapi/design-system/Box';
import { BaseButton } from '@strapi/design-system/BaseButton';
import { Stack } from '@strapi/design-system/Stack';
import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text';
import { pxToRem } from '@strapi/helper-plugin';
import { getTrad } from '../../utils';

const IconButton = styled(BaseButton)`
  border: none;
  padding: 0;
  background: transparent;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  > svg {
    width: ${pxToRem(24)};
    height: ${pxToRem(24)};
    > circle {
      fill: ${({ theme }) => theme.colors.primary200}!important;
    }
    > path {
      fill: ${({ theme }) => theme.colors.primary600};
    }
  }
`;

const ComponentInitializer = ({ isReadOnly, onClick }) => {
  const { formatMessage } = useIntl();

  return (
    <Box
      background="neutral100"
      hasRadius
      borderColor="neutral200"
      paddingTop={9}
      paddingBottom={9}
    >
      <Stack size={2}>
        <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
          <IconButton disabled={isReadOnly} onClick={onClick}>
            <PlusCircle />
          </IconButton>
        </Flex>
        <Flex justifyContent="center">
          <Text textColor="primary600" small bold>
            {formatMessage({
              id: getTrad('components.empty-repeatable'),
              defaultMessage: 'No entry yet. Click on the button below to add one.',
            })}
          </Text>
        </Flex>
      </Stack>
    </Box>
  );
};

ComponentInitializer.defaultProps = {
  isReadOnly: false,
};

ComponentInitializer.propTypes = {
  isReadOnly: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
};

export default ComponentInitializer;<commit_msg>made box clickable to add an entry<commit_after>import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import PlusCircle from '@strapi/icons/PlusCircle';
import { Box } from '@strapi/design-system/Box';
import { BaseButton } from '@strapi/design-system/BaseButton';
import { Stack } from '@strapi/design-system/Stack';
import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text';
import { pxToRem } from '@strapi/helper-plugin';
import { getTrad } from '../../utils';

const CursorBox = styled(Box)`
  cursor: pointer;
`;

const IconButton = styled(BaseButton)`
  border: none;
  padding: 0;
  background: transparent;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  > svg {
    width: ${pxToRem(24)};
    height: ${pxToRem(24)};
    > circle {
      fill: ${({ theme }) => theme.colors.primary200}!important;
    }
    > path {
      fill: ${({ theme }) => theme.colors.primary600};
    }
  }
`;

const ComponentInitializer = ({ isReadOnly, onClick }) => {
  const { formatMessage } = useIntl();
  const addEntryButtonRef = useRef();

  const handleBoxClick = () => {
    if (addEntryButtonRef.current) {
      addEntryButtonRef.current.click();
    }
  };

  return (
    <CursorBox
      background="neutral100"
      hasRadius
      borderColor="neutral200"
      paddingTop={9}
      paddingBottom={9}
      onClick={handleBoxClick}
    >
      <Stack size={2}>
        <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
          <IconButton ref={addEntryButtonRef} disabled={isReadOnly} onClick={onClick}>
            <PlusCircle />
          </IconButton>
        </Flex>
        <Flex justifyContent="center">
          <Text textColor="primary600" small bold>
            {formatMessage({
              id: getTrad('components.empty-repeatable'),
              defaultMessage: 'No entry yet. Click on the button below to add one.',
            })}
          </Text>
        </Flex>
      </Stack>
    </CursorBox>
  );
};

ComponentInitializer.defaultProps = {
  isReadOnly: false,
};

ComponentInitializer.propTypes = {
  isReadOnly: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
};

export default ComponentInitializer;
{'fraction_non_alphanumeric': 0.14991989013504234, 'fraction_numerical': 0.010528725108720532, 'mean_word_length': 3.0462962962962963, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 44, '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': '5531816', 'n_tokens_mistral': 1346, 'n_tokens_neox': 1324, 'n_words': 301}