<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import numeral from 'numeral';
import styled, { keyframes } from 'styled-components';
import { Flex, Box, reflex } from 'reflexbox';

import colors from '../themes/colors';

const RLFillColor = ({ percentage }) => {
  if (percentage >= 50) {
    return colors.green;
  } else if (percentage > 2 && percentage < 50) {
    return colors.yellow;
  }
  return colors.red;
};

const RLFilling = ({ percentage }) => keyframes`
  from {
    background-color: ${colors.red};
    width: 0%;
  }

  to {
    background-color: ${RLFillColor({ percentage })};
    width: ${percentage}%;
  }
`;

const BaseRLMeterContainer = styled(Box)`
  border: 1px transparent solid;
  height: ${({ heightInRem }) => heightInRem}rem;
`;

const RLMeterContainer = reflex(BaseRLMeterContainer);

const RLMeter = styled(Box)`
  animation: 1.618s ease 0s 1 normal forwards running
    ${({ percentage }) => RLFilling({ percentage })};
  height: 100%;
  width: ${({ percentage }) => percentage}%;
`;

const RLNumber = styled(Box)`
  color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
  display: flex;
  align-items: center;
  justify-content: center;
`;

const RateLimit = ({ heightInRem, inverse, remaining, total }) => {
  const ratio = total === 0 ? 0 : remaining / total;
  return (
    <Flex>
      <RLMeterContainer heightInRem={heightInRem} w={2 / 3}>
        <RLMeter inverse={inverse} percentage={ratio * 100} />
      </RLMeterContainer>
      <RLNumber inverse={inverse} w={1 / 3}>
        {numeral(remaining).format('0,0')}
      </RLNumber>
    </Flex>
  );
};

RateLimit.propTypes = {
  heightInRem: PropTypes.number,
  inverse: PropTypes.bool,
  remaining: PropTypes.number,
  total: PropTypes.number,
};

RateLimit.defaultProps = {
  heightInRem: 1,
  inverse: false,
  remaining: 0,
  total: 0,
};

module.exports = RateLimit;<commit_msg>fix: Unknown Prop Warning on RateLimit component<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import numeral from 'numeral';
import styled, { keyframes } from 'styled-components';
import { Flex, reflex } from 'reflexbox';

import colors from '../themes/colors';

const RLFillColor = ({ percentage }) => {
  if (percentage >= 50) {
    return colors.green;
  } else if (percentage > 2 && percentage < 50) {
    return colors.yellow;
  }
  return colors.red;
};

const RLFilling = ({ percentage }) => keyframes`
  from {
    background-color: ${colors.red};
    width: 0%;
  }

  to {
    background-color: ${RLFillColor({ percentage })};
    width: ${percentage}%;
  }
`;

const BaseRLMeterContainer = styled.div`
  border: 1px transparent solid;
  height: ${({ heightInRem }) => heightInRem}rem;
`;

const RLMeterContainer = reflex(BaseRLMeterContainer);

const BaseRLMeter = styled.div`
  animation: 1.618s ease 0s 1 normal forwards running
    ${({ percentage }) => RLFilling({ percentage })};
  height: 100%;
  width: ${({ percentage }) => percentage}%;
`;

const RLMeter = reflex(BaseRLMeter);

const BaseRLNumber = styled.div`
  color: ${({ inverse }) => (inverse ? colors.white : colors.darkGray)};
  font-size: ${({ heightInRem }) => heightInRem * 0.9}rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const RLNumber = reflex(BaseRLNumber);

const RateLimit = ({ heightInRem, inverse, remaining, total }) => {
  const ratio = total === 0 ? 0 : remaining / total;
  return (
    <Flex>
      <RLMeterContainer w={2 / 3} heightInRem={heightInRem}>
        <RLMeter inverse={inverse} percentage={ratio * 100} />
      </RLMeterContainer>
      <RLNumber w={1 / 3} heightInRem={heightInRem} inverse={inverse}>
        {numeral(remaining).format('0,0')}
      </RLNumber>
    </Flex>
  );
};

RateLimit.propTypes = {
  heightInRem: PropTypes.number,
  inverse: PropTypes.bool,
  remaining: PropTypes.number,
  total: PropTypes.number,
};

RateLimit.defaultProps = {
  heightInRem: 1,
  inverse: false,
  remaining: 0,
  total: 0,
};

module.exports = RateLimit;
{'fraction_non_alphanumeric': 0.15437902028698663, 'fraction_numerical': 0.015338941118258289, 'mean_word_length': 3.7902843601895735, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 36, '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': '4994228', 'n_tokens_mistral': 1378, 'n_tokens_neox': 1309, 'n_words': 329}