ronantakizawa/codereview-bench huggingface dataset:
Repository: mui/material-ui
File: scripts/prettier.js (JavaScript)

Code before:
/* eslint-disable no-console */
// Based on similar script in React
// https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/scripts/prettier/index.js

// supported modes = check, check-changed, write, write-changed

const glob = require('globby');
const prettier = require('prettier');
const fs = require('fs');
const path = require('path');
const yargs = require('yargs');
const { LANGUAGES } = require('docs/src/modules/constants');
const listChangedFiles = require('./listChangedFiles');

const workspaceRoot = path.resolve(__dirname, '../');

function isTranslatedDocument(filename) {
  // markdown files from crowdin end with a 2 letter locale
  return new RegExp(String.raw`-(${LANGUAGES.join('|')})\.md$`).test(filename);
}

function runPrettier(options) {
  const { changedFiles, shouldWrite } = options;

  let didWarn = false;
  let didError = false;

  const warnedFiles = [];
  const ignoredFiles = fs
    .readFileSync(path.join(workspaceRoot, '.eslintignore'), 'utf-8')
    .split(/\r*\n/)
    .filter((line) => {
      return (
        // ignore comments
        !line.startsWith('#') &&
        // skip empty lines
        line.length > 0
      );
    })
    .map((line) => {

Review comment (suggestion):
For #22071
```suggestion
const workspaceRoot = process.cwd();
```

Code after:
/* eslint-disable no-console */
// Based on similar script in React
// https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/scripts/prettier/index.js

// supported modes = check, check-changed, write, write-changed

const glob = require('globby');
const prettier = require('prettier');
const fs = require('fs');
const path = require('path');
const yargs = require('yargs');
const { LANGUAGES } = require('docs/src/modules/constants');
const listChangedFiles = require('./listChangedFiles');

// FIXME: Incorrect assumption
const workspaceRoot = process.cwd();

function isTranslatedDocument(filename) {
  // markdown files from crowdin end with a 2 letter locale
  return new RegExp(String.raw`-(${LANGUAGES.join('|')})\.md$`).test(filename);
}

function runPrettier(options) {
  const { changedFiles, shouldWrite } = options;

  let didWarn = false;
  let didError = false;

  const warnedFiles = [];
  const ignoredFiles = fs
    .readFileSync(path.join(workspaceRoot, '.eslintignore'), 'utf-8')
    .split(/\r*\n/)
    .filter((line) => {
      return (
        // ignore comments
        !line.startsWith('#') &&
        // skip empty lines
        line.length > 0
      );
    })
Repository: mui/material-ui
File: packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.js (JavaScript)

Code before:
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { unstable_capitalize as capitalize, usePreviousProps } from '@material-ui/utils';
import isHostComponent from '../utils/isHostComponent';
import composeClasses from '../composeClasses';
import { getBadgeUtilityClass } from './badgeUnstyledClasses';

const useUtilityClasses = (styleProps) => {
  const { variant, anchorOrigin, overlap, invisible, classes } = styleProps;

  const slots = {
    root: ['root'],
    badge: [
      'badge',
      variant, // there was only utility class for the variant previously
      `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
        anchorOrigin.horizontal,
      )}${capitalize(overlap)}`,
      invisible && 'invisible',
    ],
  };

  return composeClasses({ slots, classes, getUtilityClass: getBadgeUtilityClass });
};

const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
  const {
    anchorOrigin: anchorOriginProp = {
      vertical: 'top',
      horizontal: 'right',
    },
    classes: classesProp = {},
    badgeContent: badgeContentProp,
    component: Component = 'span',
    children,
    className,
    components = {},
    componentsProps = {},
    invisible: invisibleProp,
    max: maxProp = 99,

Review comment (suggestion):
```suggestion
      variant,
```
I'd say we are fixing issue with this.

Code after:
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { unstable_capitalize as capitalize, usePreviousProps } from '@material-ui/utils';
import isHostComponent from '../utils/isHostComponent';
import composeClasses from '../composeClasses';
import { getBadgeUtilityClass } from './badgeUnstyledClasses';

const useUtilityClasses = (styleProps) => {
  const { variant, anchorOrigin, overlap, invisible, classes } = styleProps;

  const slots = {
    root: ['root'],
    badge: [
      'badge',
      variant,
      `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
        anchorOrigin.horizontal,
      )}${capitalize(overlap)}`,
      invisible && 'invisible',
    ],
  };

  return composeClasses({ slots, classes, getUtilityClass: getBadgeUtilityClass });
};

const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
  const {
    anchorOrigin: anchorOriginProp = {
      vertical: 'top',
      horizontal: 'right',
    },
    classes: classesProp = {},
    badgeContent: badgeContentProp,
    component: Component = 'span',
    children,
    className,
    components = {},
    componentsProps = {},
    invisible: invisibleProp,
    max: maxProp = 99,
Repository: mui/material-ui
File: packages/material-ui-unstyled/src/composeClasses/composeClasses.js (JavaScript)

Code before:
function composeClasses({ slots = {}, classes = {}, getUtilityClass = () => '' }) {
  const output = {};

  Object.keys(slots).forEach((slot) => {
    output[slot] = slots[slot]
      .reduce((acc, key) => {
        if (key) {
          if (classes && classes[key]) {
            acc.push(classes[key]);
          }
          acc.push(getUtilityClass(key));
        }
        return acc;
      }, [])
      .join(' ');
  });

  return output;
}

export default composeClasses;


Review comment (refactor):
Do we need these defaults?

```suggestion
function composeClasses({ slots, classes, getUtilityClass }) {
```

Code after:
function composeClasses({ slots, classes, getUtilityClass }) {
  const output = {};

  Object.keys(slots).forEach((slot) => {
    output[slot] = slots[slot]
      .reduce((acc, key) => {
        if (key) {
          if (classes && classes[key]) {
            acc.push(classes[key]);
          }
          acc.push(getUtilityClass(key));
        }
        return acc;
      }, [])
      .join(' ');
  });

  return output;
}

export default composeClasses;
Repository: mui/material-ui
File: packages/material-ui-unstyled/src/composeClasses/composeClasses.js (JavaScript)

Code before:
function composeClasses({ slots, classes = {}, getUtilityClass }) {
  const output = {};

  Object.keys(slots).forEach((slot) => {
    output[slot] = slots[slot]
      .reduce((acc, key) => {
        if (key) {
          if (classes && classes[key]) {
            acc.push(classes[key]);
          }
          acc.push(getUtilityClass(key));
        }
        return acc;
      }, [])
      .join(' ');
  });

  return output;
}

export default composeClasses;


Review comment (refactor):
```suggestion
function composeClasses({ slots, classes, getUtilityClass }) {
```

Code after:
function composeClasses({ slots, classes, getUtilityClass }) {
  const output = {};

  Object.keys(slots).forEach((slot) => {
    output[slot] = slots[slot]
      .reduce((acc, key) => {
        if (key) {
          if (classes && classes[key]) {
            acc.push(classes[key]);
          }
          acc.push(getUtilityClass(key));
        }
        return acc;
      }, [])
      .join(' ');
  });

  return output;
}

export default composeClasses;
Repository: mui/material-ui
File: packages/material-ui/src/Badge/Badge.js (JavaScript)

Code before:
  {
    name: 'MuiBadge',
    slot: 'Root',
    skipVariantsResolver: true,
    overridesResolver: (props, styles) => styles.root,
  },
)({
  position: 'relative',
  display: 'inline-flex',
  // For correct alignment with the text.
  verticalAlign: 'middle',
  flexShrink: 0,
});

const BadgeBadge = styled(
  'span',
  {},
  {
    name: 'MuiBadge',
    slot: 'Badge',
    skipVariantsResolver: false,
    overridesResolver: (props, styles) => {
      const { styleProps } = props;

      return {
        ...styles.root,
        ...styles.badge,
        ...styles[styleProps.variant],
        ...styles[
          `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize(
            styleProps.anchorOrigin.horizontal,
          )}${capitalize(styleProps.overlap)}`
        ],
        ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]),
        ...(styleProps.invisible && styles.invisible),
      };
    },
  },
)(({ theme, styleProps }) => ({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  position: 'absolute',
  boxSizing: 'border-box',
  fontFamily: theme.typography.fontFamily,
  fontWeight: theme.typography.fontWeightMedium,
  fontSize: theme.typography.pxToRem(12),
  minWidth: RADIUS_STANDARD * 2,

Review comment (suggestion):
Not sure if this is correct, but this is how it was previously implemented, didn't want to change anything, we can revisit later.

Code after:
  {
    name: 'MuiBadge',
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root,
  },
)({
  position: 'relative',
  display: 'inline-flex',
  // For correct alignment with the text.
  verticalAlign: 'middle',
  flexShrink: 0,
});

const BadgeBadge = styled(
  'span',
  {},
  {
    name: 'MuiBadge',
    slot: 'Badge',
    overridesResolver: (props, styles) => {
      const { styleProps } = props;

      return {
        ...styles.badge,
        ...styles[styleProps.variant],
        ...styles[
          `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize(
            styleProps.anchorOrigin.horizontal,
          )}${capitalize(styleProps.overlap)}`
        ],
        ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]),
        ...(styleProps.invisible && styles.invisible),
      };
    },
  },
)(({ theme, styleProps }) => ({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  position: 'absolute',
  boxSizing: 'border-box',
  fontFamily: theme.typography.fontFamily,
  fontWeight: theme.typography.fontWeightMedium,
  fontSize: theme.typography.pxToRem(12),
  minWidth: RADIUS_STANDARD * 2,
  lineHeight: 1,
  padding: '0 6px',
  height: RADIUS_STANDARD * 2,
Repository: mui/material-ui
File: packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx (TypeScript)

Code before:
  hideTabs?: boolean;
  /**
   * Date tab icon.
   */
  dateRangeIcon?: React.ReactNode;
  /**
   * Time tab icon.
   */
  timeIcon?: React.ReactNode;
  /**
   * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
   */
  minDateTime?: ParseableDate<TDate>;
  /**
   * Minimal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
   */
  maxDateTime?: ParseableDate<TDate>;
  /**
   * First view to show.
   */
  openTo?: DateTimePickerView;
  /**
   * Component that will replace default toolbar renderer.
   * @default DateTimePickerToolbar
   */
  ToolbarComponent?: BasePickerProps<ParseableDate<TDate>, TDate | null>['ToolbarComponent'];
  /**
   * Date format, that is displaying in toolbar.
   */
  toolbarFormat?: string;
  /**
   * Array of views to show.
   */
  views?: readonly DateTimePickerView[];
}

type InterceptedProps<Props> = Props & { inputFormat: string };

function useInterceptProps<Props extends BaseDateTimePickerProps<unknown>>({
  ampm,
  inputFormat,
  maxDate: __maxDate = defaultMaxDate,
  maxDateTime: __maxDateTime,
  maxTime: __maxTime,
  minDate: __minDate = defaultMinDate,
  minDateTime: __minDateTime,
  minTime: __minTime,
  openTo = 'day',
  orientation = 'portrait',
  views = ['year', 'day', 'hours', 'minutes'],
  ...other

Review comment (suggestion):
Gave up handling `ts.IndexedTypeAccess` and just inlined the type. 

Code after:
  hideTabs?: boolean;
  /**
   * Date tab icon.
   */
  dateRangeIcon?: React.ReactNode;
  /**
   * Time tab icon.
   */
  timeIcon?: React.ReactNode;
  /**
   * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
   */
  minDateTime?: ParseableDate<TDate>;
  /**
   * Minimal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
   */
  maxDateTime?: ParseableDate<TDate>;
  /**
   * First view to show.
   */
  openTo?: DateTimePickerView;
  /**
   * Component that will replace default toolbar renderer.
   * @default DateTimePickerToolbar
   */
  ToolbarComponent?: React.JSXElementConstructor<ToolbarComponentProps>;
  /**
   * Date format, that is displaying in toolbar.
   */
  toolbarFormat?: string;
  /**
   * Array of views to show.
   */
  views?: readonly DateTimePickerView[];
}

type InterceptedProps<Props> = Props & { inputFormat: string };

function useInterceptProps<Props extends BaseDateTimePickerProps<unknown>>({
  ampm,
  inputFormat,
  maxDate: __maxDate = defaultMaxDate,
  maxDateTime: __maxDateTime,
  maxTime: __maxTime,
  minDate: __minDate = defaultMinDate,
  minDateTime: __minDateTime,
  minTime: __minTime,
  openTo = 'day',
  orientation = 'portrait',
  views = ['year', 'day', 'hours', 'minutes'],
  ...other
Repository: mui/material-ui
File: packages/material-ui-codemod/src/v0.15.0/import-path.test.js (JavaScript)

Code before:
import fs from 'fs';
import path from 'path';
import { expect } from 'chai';
import jscodeshift from 'jscodeshift';
import transform from './import-path';

function trim(str) {
  return str.replace(/^\s+|\s+$/, '');
}

function read(fileName) {
  return fs.readFileSync(path.join(__dirname, fileName), 'utf8').toString();
}

describe('@material-ui/codemod', () => {
  describe('v0.15.0', () => {
    describe('import-path', () => {
      it('convert path as needed', () => {
        const actual = transform(
          { source: read('./import-path.test/actual.js') },
          { jscodeshift: jscodeshift },
        );

        const expected = read('./import-path.test/expected.js');
        expect(trim(actual.replace(/\r\n/g, '\n'))).to.equal(trim(expected), 'The transformed version should be correct');
      });
    });
  });
});


Review comment (refactor):
Instead of repeating the replacement, maybe we should move it to the `read()` method and make it a shared helper for the codemod tests?

Code after:
import fs from 'fs';
import path from 'path';
import { expect } from 'chai';
import jscodeshift from 'jscodeshift';
import transform from './import-path';
import readFile from '../util/readFile';

function trim(str) {
  return str.replace(/^\s+|\s+$/, '');
}

function read(fileName) {
  return readFile(path.join(__dirname, fileName));
}

describe('@material-ui/codemod', () => {
  describe('v0.15.0', () => {
    describe('import-path', () => {
      it('convert path as needed', () => {
        const actual = transform(
          { source: read('./import-path.test/actual.js') },
          { jscodeshift: jscodeshift },
        );

        const expected = read('./import-path.test/expected.js');
        expect(trim(actual)).to.equal(trim(expected), 'The transformed version should be correct');
      });
    });
  });
});
Repository: mui/material-ui
File: test/karma.conf.js (JavaScript)

Code before:
    },
    customLaunchers: {
      chromeHeadless: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox'],
      },
    },
    singleRun: CI,
  };

  let newConfig = baseConfig;

  if (browserStack.accessKey) {
    newConfig = {
      ...baseConfig,
      browserStack,
      browsers: baseConfig.browsers.concat(['chrome', 'firefox', 'safari', 'edge']),
      plugins: baseConfig.plugins.concat(['karma-browserstack-launcher']),
      customLaunchers: {
        ...baseConfig.customLaunchers,
        chrome: {
          base: 'BrowserStack',
          os: 'OS X',
          os_version: 'Catalina',
          browser: 'chrome',
          browser_version: '90.0',
        },
        firefox: {
          base: 'BrowserStack',
          os: 'Windows',
          os_version: '10',
          browser: 'firefox',
          browser_version: '78.0',
        },
        safari: {
          base: 'BrowserStack',
          os: 'OS X',
          os_version: 'Catalina',
          browser: 'safari',
          // We support 12.5 on iOS.
          // However, 12.x is very flaky on desktop (mobile is always flaky).
          browser_version: '13.0',
        },
        edge: {
          base: 'BrowserStack',
          os: 'Windows',
          os_version: '10',
          browser: 'edge',
          browser_version: '91.0',
        },
      },

Review comment (bug):
Considering all the [test failures](https://app.circleci.com/pipelines/github/mui-org/material-ui/50818/workflows/2baf1c01-a7eb-47f8-ad28-99d83a37185c/jobs/285757) we may want to hold off on changing this until we figured out what changed.



Code after:
    },
    customLaunchers: {
      chromeHeadless: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox'],
      },
    },
    singleRun: CI,
  };

  let newConfig = baseConfig;

  if (browserStack.accessKey) {
    newConfig = {
      ...baseConfig,
      browserStack,
      browsers: baseConfig.browsers.concat(['chrome', 'firefox', 'safari', 'edge']),
      plugins: baseConfig.plugins.concat(['karma-browserstack-launcher']),
      customLaunchers: {
        ...baseConfig.customLaunchers,
        chrome: {
          base: 'BrowserStack',
          os: 'OS X',
          os_version: 'Catalina',
          browser: 'chrome',
          // We support Chrome 90.x
          // However, >=88 fails on seemingly all focus-related tests.
          // TODO: Investigate why.
          browser_version: '87.0',
        },
        firefox: {
          base: 'BrowserStack',
          os: 'Windows',
          os_version: '10',
          browser: 'firefox',
          browser_version: '78.0',
        },
        safari: {
          base: 'BrowserStack',
          os: 'OS X',
          os_version: 'Catalina',
          browser: 'safari',
          // We support 12.5 on iOS.
          // However, 12.x is very flaky on desktop (mobile is always flaky).
          browser_version: '13.0',
        },
        edge: {
          base: 'BrowserStack',
          os: 'Windows',
          os_version: '10',
          browser: 'edge',
Repository: mui/material-ui
File: docs/src/pages/components/tables/ReactVirtualizedTable.js (JavaScript)

Code before:
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@material-ui/styles';
import { createTheme } from '@material-ui/core/styles';
import TableCell from '@material-ui/core/TableCell';
import Paper from '@material-ui/core/Paper';
import { AutoSizer, Column, Table } from 'react-virtualized';

const styles = (theme) => ({
  flexContainer: {
    display: 'flex',
    alignItems: 'center',
    boxSizing: 'border-box',
  },
  table: {
    // temporary right-to-left patch, waiting for
    // https://github.com/bvaughn/react-virtualized/issues/454
    '& .ReactVirtualized__Table__headerRow': {
      flip: false,
      paddingRight: theme.direction === 'rtl' ? '0 !important' : undefined,
    },
  },
  tableRow: {
    cursor: 'pointer',
  },
  tableRowHover: {
    '&:hover': {
      backgroundColor: theme.palette.grey[200],
    },
  },
  tableCell: {
    flex: 1,
  },
  noClick: {
    cursor: 'initial',
  },
});

class MuiVirtualizedTable extends React.PureComponent {
  static defaultProps = {
    headerHeight: 48,
    rowHeight: 48,
  };

  getRowClassName = ({ index }) => {

Review comment (suggestion):
Wasn't that already fine? Just the `flip: flase` is unused I thought.

Code after:
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@material-ui/styles';
import { createTheme } from '@material-ui/core/styles';
import TableCell from '@material-ui/core/TableCell';
import Paper from '@material-ui/core/Paper';
import { AutoSizer, Column, Table } from 'react-virtualized';

const styles = (theme) => ({
  flexContainer: {
    display: 'flex',
    alignItems: 'center',
    boxSizing: 'border-box',
  },
  table: {
    // temporary right-to-left patch, waiting for
    // https://github.com/bvaughn/react-virtualized/issues/454
    '& .ReactVirtualized__Table__headerRow': {
      ...(theme.direction === 'rtl' && {
        paddingLeft: '0 !important',
      }),
      ...(theme.direction !== 'rtl' && {
        paddingRight: undefined,
      }),
    },
  },
  tableRow: {
    cursor: 'pointer',
  },
  tableRowHover: {
    '&:hover': {
      backgroundColor: theme.palette.grey[200],
    },
  },
  tableCell: {
    flex: 1,
  },
  noClick: {
    cursor: 'initial',
  },
});

class MuiVirtualizedTable extends React.PureComponent {
  static defaultProps = {
    headerHeight: 48,
Repository: mui/material-ui
File: packages/mui-joy/src/index.test.js (JavaScript)

Code before:
/* eslint import/namespace: ['error', { allowComputed: true }] */
/**
 * Important: This test also serves as a point to
 * import the entire lib for coverage reporting
 */

import { expect } from 'chai';
import * as materialNext from './index';

describe('@mui/material-next', () => {
  it('should have exports', () => {
    expect(typeof materialNext).to.equal('object');
  });

  it('should not have undefined exports', () => {
    Object.keys(materialNext).forEach((exportKey) =>
      expect(Boolean(materialNext[exportKey])).to.equal(true),
    );
  });
});


Review comment (suggestion):
```suggestion
import * as joy from './index';
```

Code after:
/* eslint import/namespace: ['error', { allowComputed: true }] */
/**
 * Important: This test also serves as a point to
 * import the entire lib for coverage reporting
 */

import { expect } from 'chai';
import * as joy from './index';

describe('@mui/joy', () => {
  it('should have exports', () => {
    expect(typeof joy).to.equal('object');
  });

  it('should not have undefined exports', () => {
    Object.keys(joy).forEach((exportKey) => expect(Boolean(joy[exportKey])).to.equal(true));
  });
});
Repository: mui/material-ui
File: packages/mui-joy/src/index.test.js (JavaScript)

Code before:
/* eslint import/namespace: ['error', { allowComputed: true }] */
/**
 * Important: This test also serves as a point to
 * import the entire lib for coverage reporting
 */

import { expect } from 'chai';
import * as materialNext from './index';

describe('@mui/material-next', () => {
  it('should have exports', () => {
    expect(typeof materialNext).to.equal('object');
  });

  it('should not have undefined exports', () => {
    Object.keys(materialNext).forEach((exportKey) =>
      expect(Boolean(materialNext[exportKey])).to.equal(true),
    );
  });
});


Review comment (suggestion):
```suggestion
    expect(typeof joy).to.equal('object');
```

Code after:
/* eslint import/namespace: ['error', { allowComputed: true }] */
/**
 * Important: This test also serves as a point to
 * import the entire lib for coverage reporting
 */

import { expect } from 'chai';
import * as joy from './index';

describe('@mui/joy', () => {
  it('should have exports', () => {
    expect(typeof joy).to.equal('object');
  });

  it('should not have undefined exports', () => {
    Object.keys(joy).forEach((exportKey) => expect(Boolean(joy[exportKey])).to.equal(true));
  });
});