diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000000..2b4bf0485b7b4 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,6 @@ +/.git +node_modules +dist +packages/grid/lib/lodash +packages/grid/x-grid-modules/lib/autosizer +packages/grid/x-grid-modules/lib/lodash diff --git a/package.json b/package.json index f6a3054cf7f9d..37e6501141765 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "eslint-plugin-react": "^7.18.3", "eslint-plugin-react-hooks": "^2.5.0", "eslint-plugin-unused-imports": "^0.1.2", + "glob-gitignore": "^1.0.14", "jest": "^25.1.0", "jest-cli": "^25.1.0", "jest-transform-stub": "^2.0.0", @@ -46,6 +47,7 @@ "bootstrap": "lerna bootstrap", "build": "lerna run build --stream", "start": "lerna run start --parallel", + "prettier": "node ./scripts/prettier.js", "test": "lerna run test --parallel", "lint": "lerna run lint --parallel" }, diff --git a/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx b/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx index 3110fcfb7926c..dd967043bd007 100644 --- a/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx +++ b/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx @@ -7,7 +7,7 @@ import { useTheme } from '../../theme/useTheme'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; export interface SettingsPanelProps { - onApply: (settings: { size: number; type: string; selectedTheme: string, pagesize: number }) => void; + onApply: (settings: { size: number; type: string; selectedTheme: string; pagesize: number }) => void; type: string; size: number; } diff --git a/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx b/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx index d60c5a5652c02..1f64dca02b6fd 100644 --- a/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx +++ b/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { AppBreadcrumbs } from '../../app-breadcrumbs'; -import { Grid, LicenseInfo, RowModel, Columns, GridOptions} from '@material-ui/x-grid'; +import { Grid, LicenseInfo, RowModel, Columns, GridOptions } from '@material-ui/x-grid'; import pkg from '@material-ui/x-grid/package.json'; import { MainContainer } from './components/main-container'; import { SettingsPanel } from './components/settings-panel'; diff --git a/packages/grid/x-grid-data-generator/bin/data-gen-script.js b/packages/grid/x-grid-data-generator/bin/data-gen-script.js index 580c87a769c86..0a67ba08d3f7c 100755 --- a/packages/grid/x-grid-data-generator/bin/data-gen-script.js +++ b/packages/grid/x-grid-data-generator/bin/data-gen-script.js @@ -4,4 +4,4 @@ require = require('esm')(module /*, options*/); // eslint-disable-next-line @typescript-eslint/no-var-requires -require('../dist/index-cjs').datagenCli(process.argv); \ No newline at end of file +require('../dist/index-cjs').datagenCli(process.argv); diff --git a/packages/grid/x-grid-modules/src/components/autosizer.tsx b/packages/grid/x-grid-modules/src/components/autosizer.tsx index c9f62b1e20273..38c699bf17c98 100644 --- a/packages/grid/x-grid-modules/src/components/autosizer.tsx +++ b/packages/grid/x-grid-modules/src/components/autosizer.tsx @@ -1,6 +1,6 @@ import React from 'react'; import AutoSizer from '../../lib/autosizer'; -export const AutoSizerWrapper: React.FC = p => ( - {(size: any) => p.children(size)} +export const AutoSizerWrapper: React.FC = props => ( + {(size: any) => props.children(size)} ); diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx index 714be77e8776b..325184cb427af 100644 --- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx +++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx @@ -46,7 +46,8 @@ export const RootStyle = styled.div` flex-direction: row; padding: 0 16px; } - .row-count, .selected-row-count { + .row-count, + .selected-row-count { display: flex; align-items: center; font-size: 0.875rem; @@ -57,7 +58,8 @@ export const RootStyle = styled.div` min-height: 48px; } @media (max-width: 650px) { - .row-count, .selected-row-count { + .row-count, + .selected-row-count { display: none; } } diff --git a/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.tsx b/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.tsx index 97f2e1269b797..79f606c314a0a 100644 --- a/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.tsx +++ b/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.tsx @@ -39,7 +39,8 @@ export const useContainerProps = (windowRef: React.RefObject): R const renderingZoneHeight = rzPageSize * rowHeight + rowHeight + scrollBarSize.x; const dataContainerWidth = columnsTotalWidth - scrollBarSize.y; const totalHeight = - (options.paginationAutoPageSize ? 1 : rowsCount / viewportPageSize) * viewportSize.height + rowHeight + + (options.paginationAutoPageSize ? 1 : rowsCount / viewportPageSize) * viewportSize.height + + rowHeight + (hasScrollY ? scrollBarSize.x : 0); const indexes: ContainerProps = { diff --git a/packages/grid/x-grid-modules/src/index.ts b/packages/grid/x-grid-modules/src/index.ts index 86fcb58cffa73..70836535f3469 100644 --- a/packages/grid/x-grid-modules/src/index.ts +++ b/packages/grid/x-grid-modules/src/index.ts @@ -5,4 +5,4 @@ export * from './models'; export * from './utils'; export * from './gridComponentProps'; -export * from './gridComponent'; \ No newline at end of file +export * from './gridComponent'; diff --git a/packages/grid/x-grid/rollup.config.js b/packages/grid/x-grid/rollup.config.js index a3e493dcb0bba..1e624cb6c8b21 100644 --- a/packages/grid/x-grid/rollup.config.js +++ b/packages/grid/x-grid/rollup.config.js @@ -54,5 +54,5 @@ export default [ { exitOnFail: true, wait: true }, ), ], - } + }, ]; diff --git a/packages/license/bin/license-gen-script.js b/packages/license/bin/license-gen-script.js index 4ff36a90b5fcb..ad391f68ff627 100755 --- a/packages/license/bin/license-gen-script.js +++ b/packages/license/bin/license-gen-script.js @@ -4,4 +4,4 @@ require = require('esm')(module /*, options*/); // eslint-disable-next-line @typescript-eslint/no-var-requires -require('../dist/cjs/license-cli').licenseGenCli(process.argv); \ No newline at end of file +require('../dist/cjs/license-cli').licenseGenCli(process.argv); diff --git a/packages/license/src/__tests__/verifyLicense.tests.ts b/packages/license/src/__tests__/verifyLicense.tests.ts index a8a980175b4cd..bb0cfca0e5da7 100644 --- a/packages/license/src/__tests__/verifyLicense.tests.ts +++ b/packages/license/src/__tests__/verifyLicense.tests.ts @@ -1,6 +1,6 @@ import { generateLicence } from '../generateLicense'; import { generateReleaseInfo, verifyLicense } from '../verifyLicense'; -import {LicenseStatus} from "../licenseStatus"; +import { LicenseStatus } from '../licenseStatus'; const oneDayInMS = 1000 * 60 * 60 * 24; const oneYear = oneDayInMS * 365; diff --git a/packages/license/src/license-cli.ts b/packages/license/src/license-cli.ts index db29cdb0dfabc..e67a20a4f133d 100644 --- a/packages/license/src/license-cli.ts +++ b/packages/license/src/license-cli.ts @@ -8,8 +8,8 @@ export function licenseGenCli(args: any) { .option('-o, --order ', 'Order number id') .option('-e, --expiry ', 'Number of days from now until expiry date', '366') .action(function() { - if(!program.order) { - throw new Error('You forgot to pass an order number. $ > licensegen -o order_123') + if (!program.order) { + throw new Error('You forgot to pass an order number. $ > licensegen -o order_123'); } const licenseDetails = { diff --git a/packages/license/src/licenseStatus.ts b/packages/license/src/licenseStatus.ts index 5785d76b23b5a..e0190df0d6af5 100644 --- a/packages/license/src/licenseStatus.ts +++ b/packages/license/src/licenseStatus.ts @@ -1,6 +1,6 @@ export enum LicenseStatus { - NotFound = 'NotFound', - Invalid = 'Invalid', - Expired = 'Expired', - Valid = 'Valid', -} \ No newline at end of file + NotFound = 'NotFound', + Invalid = 'Invalid', + Expired = 'Expired', + Valid = 'Valid', +} diff --git a/packages/license/src/useLicenseVerifier.ts b/packages/license/src/useLicenseVerifier.ts index 0dcb7ddfcb17e..05371088541dd 100644 --- a/packages/license/src/useLicenseVerifier.ts +++ b/packages/license/src/useLicenseVerifier.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { verifyLicense } from './verifyLicense'; import { LicenseInfo } from './licenseInfo'; import { showExpiredLicenseError, showInvalidLicenseError, showNotFoundLicenseError } from './licenseErrorMessageUtils'; -import {LicenseStatus} from "./licenseStatus"; +import { LicenseStatus } from './licenseStatus'; export const useLicenseVerifier = () => { const [licenseStatus, setLicenseStatus] = useState(LicenseStatus.Invalid); diff --git a/packages/license/src/verifyLicense.ts b/packages/license/src/verifyLicense.ts index 165cde831cf9d..d033140ce4e96 100644 --- a/packages/license/src/verifyLicense.ts +++ b/packages/license/src/verifyLicense.ts @@ -1,6 +1,6 @@ -import {base64Decode, base64Encode} from './encoding/base64'; -import {md5} from './encoding/md5'; -import {LicenseStatus} from "./licenseStatus"; +import { base64Decode, base64Encode } from './encoding/base64'; +import { md5 } from './encoding/md5'; +import { LicenseStatus } from './licenseStatus'; export const generateReleaseInfo = () => { const today = new Date(); diff --git a/packages/panel/rollup.config.js b/packages/panel/rollup.config.js index 35283ef0ebf3f..d14bb116b4416 100644 --- a/packages/panel/rollup.config.js +++ b/packages/panel/rollup.config.js @@ -24,9 +24,9 @@ export default { external: [...Object.keys(pkg.peerDependencies || {})], plugins: [ production && - cleaner({ - targets: ['./dist/'], - }), + cleaner({ + targets: ['./dist/'], + }), typescript(), !production && sourceMaps(), production && terser(), diff --git a/packages/splitter/rollup.config.js b/packages/splitter/rollup.config.js index 7320aa652bfe8..e3df570596bde 100644 --- a/packages/splitter/rollup.config.js +++ b/packages/splitter/rollup.config.js @@ -23,9 +23,9 @@ export default { external: [...Object.keys(pkg.peerDependencies || {})], plugins: [ production && - cleaner({ - targets: ['./dist/'], - }), + cleaner({ + targets: ['./dist/'], + }), typescript(), !production && sourceMaps(), production && terser(), diff --git a/packages/storybook/src/stories/grid-options.stories.tsx b/packages/storybook/src/stories/grid-options.stories.tsx index d08a3078f3db3..cd63a45ea96fb 100644 --- a/packages/storybook/src/stories/grid-options.stories.tsx +++ b/packages/storybook/src/stories/grid-options.stories.tsx @@ -240,11 +240,11 @@ export const withCustomFooter = () => { pagination: true, paginationPageSize: 33, hideFooterPagination: true, - footerComponent: ({paginationProps, rows, columns, options, api, gridRef}) => ( + footerComponent: ({ paginationProps, rows, columns, options, api, gridRef }) => (
- + This is my custom footer and pagination here! - + { onChange={(e, value) => paginationProps.setPage(value)} />
- ) + ), }} /> @@ -272,7 +272,7 @@ export const withCustomHeaderAndFooter = () => { pagination: true, paginationPageSize: 33, hideFooterPagination: true, - headerComponent: ({paginationProps}) => ( + headerComponent: ({ paginationProps }) => (
{ />
), - footerComponent: ({paginationProps}) => ( + footerComponent: ({ paginationProps }) => (
I counted {paginationProps.rowCount} row(s)
- ) - }} /> + ), + }} + /> ); }; diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx index 37e105d46c964..9aa12148e42fc 100644 --- a/packages/storybook/src/stories/playground/customize-components.stories.tsx +++ b/packages/storybook/src/stories/playground/customize-components.stories.tsx @@ -131,9 +131,9 @@ export const CustomFooter = () => { hideFooter: true, footerComponent: ({ paginationProps }) => (
- - This is my custom footer and pagination here!{' '} - + + This is my custom footer and pagination here!{' '} + { onChange={(e, value) => paginationProps.setPage(value)} />
- ) + ), }} - /> + /> ); }; @@ -161,7 +161,7 @@ export const HeaderAndFooter = () => { pagination: true, paginationPageSize: 33, hideFooterPagination: true, - headerComponent: ({paginationProps}) => ( + headerComponent: ({ paginationProps }) => (
{ />
), - footerComponent: ({paginationProps}) => ( + footerComponent: ({ paginationProps }) => (
I counted {paginationProps.rowCount} row(s)
- ) + ), }} /> diff --git a/.prettierrc.js b/prettier.config.js similarity index 98% rename from .prettierrc.js rename to prettier.config.js index c14badf57944e..5414f88b04ba9 100644 --- a/.prettierrc.js +++ b/prettier.config.js @@ -11,4 +11,4 @@ module.exports = { }, }, ], -}; \ No newline at end of file +}; diff --git a/scripts/listChangedFiles.js b/scripts/listChangedFiles.js new file mode 100644 index 0000000000000..6adaa87aa99d5 --- /dev/null +++ b/scripts/listChangedFiles.js @@ -0,0 +1,37 @@ +// Based on similar script in React +// https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/scripts/shared/listChangedFiles.js + +const util = require('util'); +const childProcess = require('child_process'); + +const execFileAsync = util.promisify(childProcess.execFile); + +async function exec(command, args) { + const options = { + cwd: process.cwd(), + env: process.env, + stdio: 'pipe', + encoding: 'utf-8', + }; + + const results = await execFileAsync(command, args, options); + return results.stdout; +} + +async function execGitCmd(args) { + const gitResults = await exec('git', args); + return gitResults + .trim() + .toString() + .split('\n'); +} + +async function listChangedFiles() { + const comparedBranch = process.env.CIRCLECI ? 'origin/master' : 'master'; + const mergeBase = await execGitCmd(['rev-parse', comparedBranch]); + const gitDiff = await execGitCmd(['diff', '--name-only', mergeBase]); + const gitLs = await execGitCmd(['ls-files', '--others', '--exclude-standard']); + return new Set([...gitDiff, ...gitLs]); +} + +module.exports = listChangedFiles; diff --git a/scripts/prettier.js b/scripts/prettier.js new file mode 100644 index 0000000000000..20e09ab202e71 --- /dev/null +++ b/scripts/prettier.js @@ -0,0 +1,106 @@ +/* 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('glob-gitignore'); +const prettier = require('prettier'); +const fs = require('fs'); +const path = require('path'); +const yargs = require('yargs'); +const listChangedFiles = require('./listChangedFiles'); + +function runPrettier(options) { + const { changedFiles, shouldWrite } = options; + + let didWarn = false; + let didError = false; + + const warnedFiles = []; + const ignoredFiles = fs + .readFileSync('.eslintignore', 'utf-8') + .split(/\r*\n/) + .filter(notEmpty => notEmpty); + + const files = glob + .sync('**/*.{js,tsx,ts}', { ignore: ['**/node_modules/**', ...ignoredFiles] }) + .filter(f => !changedFiles || changedFiles.has(f)); + + if (!files.length) { + return; + } + + const prettierConfigPath = path.join(__dirname, '../prettier.config.js'); + + files.forEach(file => { + const prettierOptions = prettier.resolveConfig.sync(file, { + config: prettierConfigPath, + }); + + try { + const input = fs.readFileSync(file, 'utf8'); + if (shouldWrite) { + console.log(`Formatting ${file}`); + const output = prettier.format(input, { ...prettierOptions, filepath: file }); + if (output !== input) { + fs.writeFileSync(file, output, 'utf8'); + } + } else { + console.log(`Checking ${file}`); + if (!prettier.check(input, { ...prettierOptions, filepath: file })) { + warnedFiles.push(file); + didWarn = true; + } + } + } catch (error) { + didError = true; + console.log(`\n\n${error.message}`); + console.log(file); + } + }); + + if (didWarn) { + console.log( + '\n\nThis project uses prettier to format all JavaScript code.\n' + + `Please run '${!changedFiles ? 'yarn prettier:all' : 'yarn prettier'}'` + + ' and commit the changes to the files listed below:\n\n', + ); + console.log(warnedFiles.join('\n')); + } + + if (didWarn || didError) { + throw new Error('Triggered at least one error or warning'); + } +} + +async function run(argv) { + const { mode } = argv; + const shouldWrite = mode === 'write' || mode === 'write-changed'; + const onlyChanged = mode === 'check-changed' || mode === 'write-changed'; + + let changedFiles; + if (onlyChanged) { + changedFiles = await listChangedFiles(); + } + + runPrettier({ changedFiles, shouldWrite }); +} + +yargs + .command({ + command: '$0 [mode]', + description: 'formats codebase', + builder: command => { + return command.positional('mode', { + description: '"write" | "check-changed" | "write-changed"', + type: 'string', + default: 'write-changed', + }); + }, + handler: run, + }) + .help() + .strict(true) + .version(false) + .parse();