<commit_before>import React, { FC } from 'react';
import Markdown from 'markdown-to-jsx';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { isNil } from 'lodash';
import { PropDef, PropDefJsDocTags } from './PropDef';

enum PropType {
  SHAPE = 'shape',
  UNION = 'union',
  ARRAYOF = 'arrayOf',
  OBJECTOF = 'objectOf',
  ENUM = 'enum',
  INSTANCEOF = 'instanceOf',
}

interface PrettyPropTypeProps {
  type: any;
}

interface PrettyPropValProps {
  value: any;
}

interface JsDocParamsAndReturnsProps {
  tags: PropDefJsDocTags;
}

export interface PropRowProps {
  row: PropDef;
  // FIXME: row options
}

const Name = styled.span({ fontWeight: 'bold' });

const Required = styled.span(({ theme }) => ({
  color: theme.color.negative,
  fontFamily: theme.typography.fonts.mono,
  cursor: 'help',
}));

const StyledPropDef = styled.div(({ theme }) => ({
  color:
    theme.base === 'light'
      ? transparentize(0.4, theme.color.defaultText)
      : transparentize(0.6, theme.color.defaultText),
  fontFamily: theme.typography.fonts.mono,
  fontSize: `${theme.typography.size.code}%`,
}));

const JsDocParamsAndReturnsTable = styled.table({});

const JsDocParamsAndReturnsTBody = styled.tbody({ boxShadow: 'none !important' });

const JsDocCellStyle = { paddingTop: '0 !important', paddingBottom: '0 !important' };

const JsDocNameCell = styled.td({
  ...JsDocCellStyle,
});

const JsDocDescCell = styled.td({
  ...JsDocCellStyle,
  width: 'auto !important',
});

const prettyPrint = (type: any): string => {
  if (!type || !type.name) {
    return '';
  }
  let fields = '';
  switch (type.name) {
    case PropType.SHAPE:
      fields = Object.keys(type.value)
        .map((key: string) => `${key}: ${prettyPrint(type.value[key])}`)
        .join(', ');
      return `{ ${fields} }`;
    case PropType.UNION:
      return Array.isArray(type.value)
        ? `Union<${type.value.map(prettyPrint).join(' | ')}>`
        : JSON.stringify(type.value);
    case PropType.ARRAYOF:
      return `[ ${prettyPrint(type.value)} ]`;
    case PropType.OBJECTOF:
      return `objectOf(${prettyPrint(type.value)})`;
    case PropType.ENUM:
      if (type.computed) {
        return JSON.stringify(type);
      }
      return Array.isArray(type.value)
        ? type.value.map((v: any) => v && v.value && v.value.toString()).join(' | ')
        : JSON.stringify(type);
    case PropType.INSTANCEOF:
      return `instanceOf(${JSON.stringify(type.value)})`;
    default:
      return type.name;
  }
};

export const PrettyPropType: FC<PrettyPropTypeProps> = ({ type }) => (
  <span>{prettyPrint(type)}</span>
);

export const PrettyPropVal: FC<PrettyPropValProps> = ({ value }) => (
  <span>{JSON.stringify(value)}</span>
);

const JsDocParamsAndReturns: FC<JsDocParamsAndReturnsProps> = ({ tags }) => {
  if (isNil(tags)) {
    return null;
  }

  const params = (tags.params || []).filter(x => x.description);
  const hasDisplayableParams = params.length !== 0;
  const hasReturns = !isNil(tags.returns);

  if (!hasDisplayableParams && !hasReturns) {
    return null;
  }

  return (
    <JsDocParamsAndReturnsTable>
      <JsDocParamsAndReturnsTBody>
        {hasDisplayableParams &&
          params.map(x => (
            <tr key={x.name}>
              <JsDocNameCell>
                <code>{x.name}</code>
              </JsDocNameCell>
              <JsDocDescCell>{x.description}</JsDocDescCell>
            </tr>
          ))}
        {hasReturns && (
          <tr>
            <JsDocNameCell>
              <code>Returns</code>
            </JsDocNameCell>
            <JsDocDescCell>{tags.returns.description}</JsDocDescCell>
          </tr>
        )}
      </JsDocParamsAndReturnsTBody>
    </JsDocParamsAndReturnsTable>
  );
};

export const PropRow: FC<PropRowProps> = ({
  row: { name, type, required, description, defaultValue, jsDocTags },
}) => (
  <tr>
    <td>
      <Name>{name}</Name>
      {required ? <Required title="Required">*</Required> : null}
    </td>
    <td>
      <Markdown>{description || ''}</Markdown>
      <StyledPropDef>
        <PrettyPropType type={type} /><commit_msg>Added a key to the returns row<commit_after>import React, { FC } from 'react';
import Markdown from 'markdown-to-jsx';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { isNil } from 'lodash';
import { PropDef, PropDefJsDocTags } from './PropDef';

enum PropType {
  SHAPE = 'shape',
  UNION = 'union',
  ARRAYOF = 'arrayOf',
  OBJECTOF = 'objectOf',
  ENUM = 'enum',
  INSTANCEOF = 'instanceOf',
}

interface PrettyPropTypeProps {
  type: any;
}

interface PrettyPropValProps {
  value: any;
}

interface JsDocParamsAndReturnsProps {
  tags: PropDefJsDocTags;
}

export interface PropRowProps {
  row: PropDef;
  // FIXME: row options
}

const Name = styled.span({ fontWeight: 'bold' });

const Required = styled.span(({ theme }) => ({
  color: theme.color.negative,
  fontFamily: theme.typography.fonts.mono,
  cursor: 'help',
}));

const StyledPropDef = styled.div(({ theme }) => ({
  color:
    theme.base === 'light'
      ? transparentize(0.4, theme.color.defaultText)
      : transparentize(0.6, theme.color.defaultText),
  fontFamily: theme.typography.fonts.mono,
  fontSize: `${theme.typography.size.code}%`,
}));

const JsDocParamsAndReturnsTable = styled.table({});

const JsDocParamsAndReturnsTBody = styled.tbody({ boxShadow: 'none !important' });

const JsDocCellStyle = { paddingTop: '0 !important', paddingBottom: '0 !important' };

const JsDocNameCell = styled.td({
  ...JsDocCellStyle,
});

const JsDocDescCell = styled.td({
  ...JsDocCellStyle,
  width: 'auto !important',
});

const prettyPrint = (type: any): string => {
  if (!type || !type.name) {
    return '';
  }
  let fields = '';
  switch (type.name) {
    case PropType.SHAPE:
      fields = Object.keys(type.value)
        .map((key: string) => `${key}: ${prettyPrint(type.value[key])}`)
        .join(', ');
      return `{ ${fields} }`;
    case PropType.UNION:
      return Array.isArray(type.value)
        ? `Union<${type.value.map(prettyPrint).join(' | ')}>`
        : JSON.stringify(type.value);
    case PropType.ARRAYOF:
      return `[ ${prettyPrint(type.value)} ]`;
    case PropType.OBJECTOF:
      return `objectOf(${prettyPrint(type.value)})`;
    case PropType.ENUM:
      if (type.computed) {
        return JSON.stringify(type);
      }
      return Array.isArray(type.value)
        ? type.value.map((v: any) => v && v.value && v.value.toString()).join(' | ')
        : JSON.stringify(type);
    case PropType.INSTANCEOF:
      return `instanceOf(${JSON.stringify(type.value)})`;
    default:
      return type.name;
  }
};

export const PrettyPropType: FC<PrettyPropTypeProps> = ({ type }) => (
  <span>{prettyPrint(type)}</span>
);

export const PrettyPropVal: FC<PrettyPropValProps> = ({ value }) => (
  <span>{JSON.stringify(value)}</span>
);

const JsDocParamsAndReturns: FC<JsDocParamsAndReturnsProps> = ({ tags }) => {
  if (isNil(tags)) {
    return null;
  }

  const params = (tags.params || []).filter(x => x.description);
  const hasDisplayableParams = params.length !== 0;
  const hasReturns = !isNil(tags.returns);

  if (!hasDisplayableParams && !hasReturns) {
    return null;
  }

  return (
    <JsDocParamsAndReturnsTable>
      <JsDocParamsAndReturnsTBody>
        {hasDisplayableParams &&
          params.map(x => (
            <tr key={x.name}>
              <JsDocNameCell>
                <code>{x.name}</code>
              </JsDocNameCell>
              <JsDocDescCell>{x.description}</JsDocDescCell>
            </tr>
          ))}
        {hasReturns && (
          <tr key="returns">
            <JsDocNameCell>
              <code>Returns</code>
            </JsDocNameCell>
            <JsDocDescCell>{tags.returns.description}</JsDocDescCell>
          </tr>
        )}
      </JsDocParamsAndReturnsTBody>
    </JsDocParamsAndReturnsTable>
  );
};

export const PropRow: FC<PropRowProps> = ({
  row: { name, type, required, description, defaultValue, jsDocTags },
}) => (
  <tr>
    <td>
      <Name>{name}</Name>
      {required ? <Required title="Required">*</Required> : null}
    </td>
    <td>
      <Markdown>{description || ''}</Markdown>
      <StyledPropDef>
        <PrettyPropType type={type} />
{'fraction_non_alphanumeric': 0.16324817080484585, 'fraction_numerical': 0.0016792611251049538, 'mean_word_length': 3.0554474708171204, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 107, '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': '3010955', 'n_tokens_mistral': 2758, 'n_tokens_neox': 2718, 'n_words': 527}