From b2c8d6dde8b8fe82ccae4c404b47fd3cc1275c48 Mon Sep 17 00:00:00 2001 From: jabelic Date: Thu, 26 Mar 2026 01:15:39 +0900 Subject: [PATCH 1/2] Upgrade Prettier to 3.8.1 Update the root package and website to Prettier 3 so formatting checks can parse the current configuration syntax consistently across the repository. Made-with: Cursor --- package.json | 2 +- website/package.json | 2 +- website/yarn.lock | 8 ++++---- yarn.lock | 8 ++++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 32ae48b27..ef6b3c02f 100755 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "jest-transform-css": "^6.0.1", "npm-run-all": "^4.1.5", "postcss": "^8.3.6", - "prettier": "^2.3.2", + "prettier": "^3.8.1", "prop-types": "^15.8.1", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/website/package.json b/website/package.json index 923f4091a..59ce52c5b 100644 --- a/website/package.json +++ b/website/package.json @@ -53,7 +53,7 @@ "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.2.0", - "prettier": "^2.3.2", + "prettier": "^3.8.1", "stylelint": "^13.2.1" }, "browserslist": { diff --git a/website/yarn.lock b/website/yarn.lock index b5202f77c..889c441c9 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -10977,10 +10977,10 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prettier@^2.3.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d" - integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ== +prettier@^3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.1.tgz#edf48977cf991558f4fcbd8a3ba6015ba2a3a173" + integrity sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg== pretty-error@^4.0.0: version "4.0.0" diff --git a/yarn.lock b/yarn.lock index 24c180817..c42f7c9a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7873,10 +7873,10 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@^2.3.2: - version "2.4.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" - integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA== +prettier@^3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.1.tgz#edf48977cf991558f4fcbd8a3ba6015ba2a3a173" + integrity sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg== pretty-error@^4.0.0: version "4.0.0" From 52707430264b8020fdccdf157ed08927f7e2ac04 Mon Sep 17 00:00:00 2001 From: jabelic Date: Thu, 26 Mar 2026 01:15:47 +0900 Subject: [PATCH 2/2] Reformat repository with Prettier 3 Apply the new Prettier 3 output after the formatter upgrade so the repository matches the updated formatting rules and CI checks pass consistently. Made-with: Cursor --- rollup.config.mjs | 2 +- src/ActiveCell.test.tsx | 18 +++---- src/ActiveCell.tsx | 14 ++--- src/Cell.test.tsx | 20 ++++---- src/Cell.tsx | 22 ++++---- src/ColumnIndicator.test.tsx | 2 +- src/ColumnIndicator.tsx | 8 +-- src/Copied.test.tsx | 6 +-- src/Copied.tsx | 2 +- src/CornerIndicator.test.tsx | 2 +- src/CornerIndicator.tsx | 6 +-- src/DataEditor.test.tsx | 4 +- src/DataEditor.tsx | 2 +- src/DataViewer.test.tsx | 2 +- src/DataViewer.tsx | 2 +- src/FloatingRect.test.tsx | 14 ++--- src/HeaderRow.test.tsx | 2 +- src/Row.test.tsx | 2 +- src/RowIndicator.test.tsx | 2 +- src/RowIndicator.tsx | 8 +-- src/Selected.test.tsx | 6 +-- src/Selected.tsx | 6 +-- src/Spreadsheet.test.tsx | 76 ++++++++++++++-------------- src/Spreadsheet.tsx | 50 +++++++++--------- src/Table.test.tsx | 12 ++--- src/actions.ts | 8 +-- src/engine/engine.test.ts | 4 +- src/engine/engine.ts | 30 +++++------ src/engine/formula.test.ts | 4 +- src/engine/formula.ts | 8 +-- src/engine/point-graph.test.ts | 24 ++++----- src/engine/point-graph.ts | 2 +- src/engine/point-set.test.ts | 4 +- src/matrix.test.ts | 22 ++++---- src/matrix.ts | 22 ++++---- src/point-range.ts | 2 +- src/reducer.test.ts | 56 ++++++++++---------- src/reducer.ts | 36 ++++++------- src/selection.test.ts | 30 +++++------ src/selection.ts | 8 +-- src/stories/CustomCell.tsx | 6 +-- src/stories/RangeDataComponents.tsx | 2 +- src/stories/SelectDataComponents.tsx | 6 +-- src/stories/Spreadsheet.stories.tsx | 22 ++++---- src/typings/fast-formula-parser.d.ts | 2 +- src/util.test.ts | 34 ++++++------- src/util.ts | 18 +++---- website/docusaurus.config.ts | 4 +- website/src/css/custom.css | 4 +- website/src/pages/index.js | 8 +-- website/src/pages/styles.module.css | 43 +++++++++++----- website/src/reference-sidebar.js | 2 +- website/static/img/site.webmanifest | 2 +- 53 files changed, 360 insertions(+), 343 deletions(-) diff --git a/rollup.config.mjs b/rollup.config.mjs index 077485038..fe5417075 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -7,7 +7,7 @@ import pkg from "./package.json" with { type: "json" }; function createExternal(dependencies) { return Object.keys(dependencies).flatMap( - (dependency) => new RegExp(`^${dependency}(\\/.+)?`) + (dependency) => new RegExp(`^${dependency}(\\/.+)?`), ); } diff --git a/src/ActiveCell.test.tsx b/src/ActiveCell.test.tsx index 8027124d0..e92f399ce 100644 --- a/src/ActiveCell.test.tsx +++ b/src/ActiveCell.test.tsx @@ -39,7 +39,7 @@ describe("", () => { render( - + , ); expect(document.querySelector(".Spreadsheet__active-cell")).toBeNull(); expect(MOCK_DATA_EDITOR).toBeCalledTimes(0); @@ -48,7 +48,7 @@ describe("", () => { render( - + , ); const activeCell = document.querySelector(".Spreadsheet__active-cell"); expect(activeCell).not.toBeNull(); @@ -61,7 +61,7 @@ describe("", () => { value={[{ ...STATE_WITH_ACTIVE, mode: "edit" }, DISPATCH_MOCK]} > - + , ); const activeCell = document.querySelector(".Spreadsheet__active-cell"); expect(activeCell).not.toBeNull(); @@ -75,7 +75,7 @@ describe("", () => { onChange: expect.any(Function), exitEditMode: expect.any(Function), }, - {} + {}, ); }); test("calls setCellData if value changed", () => { @@ -84,7 +84,7 @@ describe("", () => { value={[{ ...STATE_WITH_ACTIVE, mode: "edit" }, DISPATCH_MOCK]} > - + , ); const activeCell = document.querySelector(".Spreadsheet__active-cell"); expect(activeCell).not.toBeNull(); @@ -96,14 +96,14 @@ describe("", () => { expect(DISPATCH_MOCK).toBeCalledWith( Actions.setCellData(Point.ORIGIN, { value: "test", - }) + }), ); rerender( - + , ); expect(activeCell).not.toHaveClass("Spreadsheet__active-cell--edit"); }); @@ -113,7 +113,7 @@ describe("", () => { value={[{ ...STATE_WITH_ACTIVE, mode: "edit" }, DISPATCH_MOCK]} > - + , ); const activeCell = document.querySelector(".Spreadsheet__active-cell"); expect(activeCell).not.toBeNull(); @@ -123,7 +123,7 @@ describe("", () => { value={[{ ...STATE_WITH_ACTIVE, mode: "view" }, DISPATCH_MOCK]} > - + , ); expect(DISPATCH_MOCK).toBeCalledTimes(0); expect(activeCell).not.toHaveClass("Spreadsheet__active-cell--edit"); diff --git a/src/ActiveCell.tsx b/src/ActiveCell.tsx index d077c1439..099592f5d 100644 --- a/src/ActiveCell.tsx +++ b/src/ActiveCell.tsx @@ -19,13 +19,13 @@ const ActiveCell: React.FC = (props) => { const setCellData = React.useCallback( (active: Point.Point, data: Types.CellBase) => dispatch(Actions.setCellData(active, data)), - [dispatch] + [dispatch], ); const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]); const commit = React.useCallback( (changes: Types.CommitChanges) => dispatch(Actions.commit(changes)), - [dispatch] + [dispatch], ); const view = React.useCallback(() => { dispatch(Actions.view()); @@ -33,16 +33,16 @@ const ActiveCell: React.FC = (props) => { const active = useSelector((state) => state.active); const mode = useSelector((state) => state.mode); const cell = useSelector((state) => - state.active ? Matrix.get(state.active, state.model.data) : undefined + state.active ? Matrix.get(state.active, state.model.data) : undefined, ); const dimensions = useSelector((state) => active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions) - : undefined + : undefined, ); const hidden = React.useMemo( () => !active || !dimensions, - [active, dimensions] + [active, dimensions], ); const initialCellRef = React.useRef(undefined); @@ -56,7 +56,7 @@ const ActiveCell: React.FC = (props) => { } setCellData(active, cell); }, - [setCellData, active] + [setCellData, active], ); React.useEffect(() => { @@ -110,7 +110,7 @@ const ActiveCell: React.FC = (props) => { ref={rootRef} className={classnames( "Spreadsheet__active-cell", - `Spreadsheet__active-cell--${mode}` + `Spreadsheet__active-cell--${mode}`, )} style={dimensions} onClick={mode === "view" && !readOnly ? edit : undefined} diff --git a/src/Cell.test.tsx b/src/Cell.test.tsx index 1c3a9e04a..b98b0f232 100644 --- a/src/Cell.test.tsx +++ b/src/Cell.test.tsx @@ -88,13 +88,13 @@ describe("", () => { wrapper, }); const element = document.querySelector( - ".Spreadsheet__cell.Spreadsheet__cell--readonly" + ".Spreadsheet__cell.Spreadsheet__cell--readonly", ); expect(element).not.toBeNull(); expect(MOCK_DATA_VIEWER).toBeCalledTimes(1); expect(MOCK_DATA_VIEWER).toBeCalledWith( { ...EXAMPLE_DATA_VIEWER_PROPS, cell: EXAMPLE_READ_ONLY_DATA }, - {} + {}, ); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0); }); @@ -103,13 +103,13 @@ describe("", () => { wrapper, }); const element = document.querySelector( - `.Spreadsheet__cell.${EXAMPLE_DATA_WITH_CLASS_NAME.className}` + `.Spreadsheet__cell.${EXAMPLE_DATA_WITH_CLASS_NAME.className}`, ); expect(element).not.toBeNull(); expect(MOCK_DATA_VIEWER).toBeCalledTimes(1); expect(MOCK_DATA_VIEWER).toBeCalledWith( { ...EXAMPLE_DATA_VIEWER_PROPS, cell: EXAMPLE_DATA_WITH_CLASS_NAME }, - {} + {}, ); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0); }); @@ -125,7 +125,7 @@ describe("", () => { expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(1); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledWith( EXAMPLE_POINT, - getOffsetRect(element) + getOffsetRect(element), ); }); test("renders active", () => { @@ -154,7 +154,7 @@ describe("", () => { expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(1); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledWith( EXAMPLE_POINT, - getOffsetRect(element) + getOffsetRect(element), ); expect(MOCK_ACTIVATE).toBeCalledTimes(1); expect(MOCK_ACTIVATE).toBeCalledWith(EXAMPLE_POINT); @@ -174,7 +174,7 @@ describe("", () => { expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(1); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledWith( EXAMPLE_POINT, - getOffsetRect(element) + getOffsetRect(element), ); expect(MOCK_ACTIVATE).toBeCalledTimes(0); expect(MOCK_SELECT).toBeCalledTimes(1); @@ -194,7 +194,7 @@ describe("", () => { expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(1); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledWith( EXAMPLE_POINT, - getOffsetRect(element) + getOffsetRect(element), ); expect(MOCK_ACTIVATE).toBeCalledTimes(0); expect(MOCK_SELECT).toBeCalledTimes(1); @@ -205,14 +205,14 @@ describe("", () => { , { wrapper, - } + }, ); const element = document.querySelector(".Spreadsheet__cell"); expect(element).not.toBeNull(); expect(MOCK_CUSTOM_DATA_VIEWER).toBeCalledTimes(1); expect(MOCK_CUSTOM_DATA_VIEWER).toBeCalledWith( EXAMPLE_CUSTOM_DATA_VIEWER_PROPS, - {} + {}, ); expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0); }); diff --git a/src/Cell.tsx b/src/Cell.tsx index 7bf79e086..1f01dfda4 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -29,7 +29,7 @@ export const Cell: React.FC = ({ row, column, }), - [row, column] + [row, column], ); const handleMouseDown = React.useCallback( @@ -44,7 +44,7 @@ export const Cell: React.FC = ({ } } }, - [mode, setCellDimensions, point, select, activate] + [mode, setCellDimensions, point, select, activate], ); const handleMouseOver = React.useCallback( @@ -54,7 +54,7 @@ export const Cell: React.FC = ({ select(point); } }, - [setCellDimensions, select, dragging, point] + [setCellDimensions, select, dragging, point], ); React.useEffect(() => { @@ -94,7 +94,7 @@ export const Cell: React.FC = ({ }; export const enhance = ( - CellComponent: React.ComponentType + CellComponent: React.ComponentType, ): React.FC< Omit< Types.CellComponentProps, @@ -117,34 +117,34 @@ export const enhance = ( row, column, }), - [row, column] + [row, column], ); const setCellData = React.useCallback( (data: Types.CellBase) => dispatch(Actions.setCellData(point, data)), - [dispatch, point] + [dispatch, point], ); const select = React.useCallback( (point: Point.Point) => dispatch(Actions.select(point)), - [dispatch] + [dispatch], ); const activate = React.useCallback( (point: Point.Point) => dispatch(Actions.activate(point)), - [dispatch] + [dispatch], ); const setCellDimensions = React.useCallback( (point: Point.Point, dimensions: Types.Dimensions) => dispatch(Actions.setCellDimensions(point, dimensions)), - [dispatch] + [dispatch], ); const active = useSelector((state) => isActive(state.active, point)); const mode = useSelector((state) => (active ? state.mode : "view")); const data = useSelector((state) => Matrix.get(point, state.model.data)); const evaluatedData = useSelector((state) => - Matrix.get(point, state.model.evaluatedData) + Matrix.get(point, state.model.evaluatedData), ); const selected = useSelector((state) => - state.selected.has(state.model.data, point) + state.selected.has(state.model.data, point), ); const dragging = useSelector((state) => state.dragging); const copied = useSelector((state) => state.copied?.has(point) || false); diff --git a/src/ColumnIndicator.test.tsx b/src/ColumnIndicator.test.tsx index 5e24b237f..e1473dfc0 100644 --- a/src/ColumnIndicator.test.tsx +++ b/src/ColumnIndicator.test.tsx @@ -44,7 +44,7 @@ describe("", () => { }); expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); const indicator = document.querySelector( - "th.Spreadsheet__header" + "th.Spreadsheet__header", ) as HTMLTableCellElement; indicator.click(); expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1); diff --git a/src/ColumnIndicator.tsx b/src/ColumnIndicator.tsx index d9941c6b9..a73922ece 100644 --- a/src/ColumnIndicator.tsx +++ b/src/ColumnIndicator.tsx @@ -15,7 +15,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({ (event: React.MouseEvent) => { onSelect(column, event.shiftKey); }, - [onSelect, column] + [onSelect, column], ); return ( > => { return function ColumnIndicatorWrapper(props) { const dispatch = useDispatch(); const selectEntireColumn = React.useCallback( (column: number, extend: boolean) => dispatch(Actions.selectEntireColumn(column, extend)), - [dispatch] + [dispatch], ); const selected = useSelector((state) => - state.selected.hasEntireColumn(props.column) + state.selected.hasEntireColumn(props.column), ); return ( ", () => { render( - + , ); }); expect( document.querySelector( - ".Spreadsheet__floating-rect.Spreadsheet__floating-rect--copied" - ) + ".Spreadsheet__floating-rect.Spreadsheet__floating-rect--copied", + ), ); }); diff --git a/src/Copied.tsx b/src/Copied.tsx index b553c671b..b7b89a675 100644 --- a/src/Copied.tsx +++ b/src/Copied.tsx @@ -8,7 +8,7 @@ const Copied: React.FC = () => { const dimensions = useSelector( (state) => range && - getRangeDimensions(state.rowDimensions, state.columnDimensions, range) + getRangeDimensions(state.rowDimensions, state.columnDimensions, range), ); const hidden = range === null; diff --git a/src/CornerIndicator.test.tsx b/src/CornerIndicator.test.tsx index 951eef07d..99de95ff5 100644 --- a/src/CornerIndicator.test.tsx +++ b/src/CornerIndicator.test.tsx @@ -31,7 +31,7 @@ describe("", () => { render(, { wrapper }); expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); const indicator = document.querySelector( - "th.Spreadsheet__header" + "th.Spreadsheet__header", ) as HTMLTableCellElement; indicator.click(); expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1); diff --git a/src/CornerIndicator.tsx b/src/CornerIndicator.tsx index 9a83c6dc7..c41e5ee49 100644 --- a/src/CornerIndicator.tsx +++ b/src/CornerIndicator.tsx @@ -27,16 +27,16 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({ export default CornerIndicator; export const enhance = ( - CornerIndicatorComponent: Types.CornerIndicatorComponent + CornerIndicatorComponent: Types.CornerIndicatorComponent, ): React.FC> => { return function CornerIndicatorWrapper(props) { const dispatch = useDispatch(); const selectEntireWorksheet = React.useCallback( () => dispatch(Actions.selectEntireWorksheet()), - [dispatch] + [dispatch], ); const selected = useSelector( - (state) => state.selected instanceof EntireWorksheetSelection + (state) => state.selected instanceof EntireWorksheetSelection, ); return ( ", () => { test("renders correctly with null value", () => { render(); const input = document.querySelector( - ".Spreadsheet__data-editor input" + ".Spreadsheet__data-editor input", ); expect(input).not.toBeNull(); expect(input?.value).toBe(""); @@ -58,7 +58,7 @@ describe("", () => { test("handles change events correctly", async () => { render(); const input = document.querySelector( - ".Spreadsheet__data-editor input" + ".Spreadsheet__data-editor input", ); expect(input).not.toBeNull(); if (!input) { diff --git a/src/DataEditor.tsx b/src/DataEditor.tsx index 35c5ecc0a..182487ae3 100644 --- a/src/DataEditor.tsx +++ b/src/DataEditor.tsx @@ -10,7 +10,7 @@ const DataEditor: React.FC = ({ onChange, cell }) => { (event: React.ChangeEvent) => { onChange({ ...cell, value: event.target.value }); }, - [onChange, cell] + [onChange, cell], ); React.useEffect(() => { diff --git a/src/DataViewer.test.tsx b/src/DataViewer.test.tsx index b0a49d942..8da2c6106 100644 --- a/src/DataViewer.test.tsx +++ b/src/DataViewer.test.tsx @@ -43,7 +43,7 @@ describe("", () => { const element = document.querySelector(expectedSelector); expect(element).not.toBeNull(); expect(element?.textContent).toBe(expectedTextContent); - } + }, ); }); diff --git a/src/DataViewer.tsx b/src/DataViewer.tsx index b080f42df..9bf1da6d0 100644 --- a/src/DataViewer.tsx +++ b/src/DataViewer.tsx @@ -32,7 +32,7 @@ export default DataViewer; function getValue( cell: Types.CellBase | undefined, - evaluatedCell: Types.CellBase | undefined + evaluatedCell: Types.CellBase | undefined, ) { const baseValue = evaluatedCell?.value ?? cell?.value; if (baseValue && typeof baseValue === "object") { diff --git a/src/FloatingRect.test.tsx b/src/FloatingRect.test.tsx index b78a6faf8..24908d77e 100644 --- a/src/FloatingRect.test.tsx +++ b/src/FloatingRect.test.tsx @@ -24,7 +24,7 @@ describe("", () => { render( + />, ); const element = document.querySelector(".Spreadsheet__floating-rect"); if (!element) { @@ -40,24 +40,24 @@ describe("", () => { render(