refactor!: upgrade dependencies, add TypeScript support, and restructure build output (#435)

* chore: upgrade dependencies, add TypeScript support, and restructure build output

- Upgrade all dev dependencies (ESLint 9, Jest 30, Prettier 3, Husky 9, etc.)
- Replace node-sass with sass, react-test-renderer with @testing-library/react
- Migrate ESLint from .eslintrc to flat config (eslint.config.mjs) with TS parser
- Add TypeScript: convert all src/ and spec/ files from JS to TS/TSX
- Keep Babel for JS output, add tsc for type declarations (dist/types/)
- Restructure build output into dist/ (cjs, esm, types, styles.css)
- Upgrade Gatsby website to v4 + React 18 with updated plugins and examples
- Move spec files to dedicated spec/ directory

* refactor: improve TypeScript types and remove unnecessary `as any` casts

- Move Column static properties (Alignment, FrozenDirection) into class body
- Use `keyof TableComponents` for _getComponent instead of untyped string
- Add JSDoc comments to ColumnShape and other shared types
- Export cloneArray from index.ts
- Include LICENSE.md and README.md in published files

* chore: bump version to 2.0.0 and update changelog, docs, and propTypes JSDoc

- Bump version from 1.13.5 to 2.0.0
- Generate v2.0.0 changelog with breaking changes, features, upgrades, and bug fixes
- Update docs (get-started, advance) with new import paths and browser support
- Restore JSDoc comments on BaseTable.propTypes for gatsby-transformer-react-docgen

Author: tonnyskk

.babelrc

@@ -7,6 +7,7 @@
       },
     ],
     "@babel/preset-react",
+    "@babel/preset-typescript",
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",

.eslintignore

@@ -12,7 +12,5 @@ npm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 
-styles.css
-es/
-lib/
+dist/
 coverage/

.eslintrc

@@ -0,0 +1 @@
+npx lint-staged

.gitignore

@@ -1 +1 @@
-10.16.0
+24

.husky/pre-commit

@@ -1,6 +1,7 @@
 {
-  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 120
+  "quoteProps": "preserve",
+  "printWidth": 120,
+  "arrowParens": "always",
+  "jsxBracketSameLine": false
 }

.nvmrc

@@ -1,6 +1,38 @@
 # CHANGELOG
 
-## NEXT VERSION
+## v2.0.0 (2026-04-16)
+
+### Breaking Changes
+
+- **Build output restructured**: `lib/` → `dist/cjs/`, `es/` → `dist/esm/`, `types/` → `dist/types/`, `styles.css` → `dist/styles.css`
+  - CSS import changed from `react-base-table/styles.css` to `react-base-table/dist/styles.css`
+  - SCSS import changed from `~react-base-table/es/_BaseTable.scss` to `react-base-table/dist/esm/_BaseTable.scss`
+- **Peer dependency**: requires React >= 17.0.2 (dropped IE11 support)
+- **Removed hand-written `types/index.d.ts`**: replaced by auto-generated declarations from TypeScript source
+
+### Features
+
+- **TypeScript**: rewritten all source files (`src/`) and specs (`spec/`) in TypeScript; ships `.d.ts` declarations out of the box
+- **Exported types**: `ColumnShape`, `RowData`, `RowKey`, `CellRendererProps`, `HeaderRendererProps`, `RowRendererProps`, `ScrollArgs`, `SortByShape`, `SortState`, `TableComponents`, and more
+- **New utility export**: `cloneArray`
+
+### Upgrades
+
+- Upgraded all dev dependencies: ESLint 9, Jest 30, Prettier 3, Husky 9, Sass (Dart), TypeScript 6
+- Replaced `node-sass` with `sass` (Dart Sass)
+- Replaced `react-test-renderer` with `@testing-library/react`
+- Migrated ESLint from `.eslintrc` to flat config (`eslint.config.mjs`) with `@typescript-eslint/parser`
+- Moved test files from `src/` to dedicated `spec/` directory
+
+### Bug Fixes
+
+- fix: `_handleRowExpand` expand logic was always true (`!arr.indexOf(x) >= 0` → `arr.indexOf(x) < 0`)
+
+### Website (Gatsby demo)
+
+- Upgraded Gatsby 2 → 4, React 16 → 18, and all associated plugins
+- Migrated `faker` → `@faker-js/faker` v8
+- Fixed navigation links, code block rendering, and live code examples
 
 ## v1.13.5 (2024-05-24)
 

.prettierrc

@@ -19,22 +19,19 @@ yarn add react-base-table
 
 ## Usage
 
-```js
+```tsx
 import BaseTable, { Column } from 'react-base-table'
-import 'react-base-table/styles.css'
-// Important: if you fail to import react-base-table/styles.css then 
-// BaseTable will not render as advertised in the included examples.
-// For advanced styling see link below:
-// https://github.com/Autodesk/react-base-table#advance
- ...
+import 'react-base-table/dist/styles.css'
+
 <BaseTable data={data} width={600} height={400}>
   <Column key="col0" dataKey="col0" width={100} />
   <Column key="col1" dataKey="col1" width={100} />
   ...
 </BaseTable>
-...
 ```
 
+> **Note:** You must import the stylesheet for BaseTable to render correctly. For advanced styling see [below](#advance).
+
 Learn more at the [website](https://autodesk.github.io/react-base-table/)
 
 ### unique key
@@ -64,11 +61,17 @@ Things getting worse with the introduction of React hooks, we use primitive stat
 
 Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate 
 
-## Browser Support
+## TypeScript
+
+This package is written in TypeScript and ships type declarations out of the box. All public types are exported from the main entry point:
+
+```ts
+import type { ColumnShape, RowData, SortOrderValue } from 'react-base-table'
+```
 
-`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_
+## Browser Support
 
-**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
+`BaseTable` is tested on all modern browsers (Chrome, Firefox, Safari, Edge). IE is no longer supported.
 
 ## Advance
 
@@ -90,7 +93,7 @@ $column-padding: 7.5px;
 $show-frozen-rows-shadow: false;
 $show-frozen-columns-shadow: true;
 
-@import '~react-base-table/es/_BaseTable.scss';
+@import 'react-base-table/dist/esm/_BaseTable.scss';
 
 .#{$table-prefix} {
   &:not(.#{$table-prefix}--show-left-shadow) {
@@ -140,7 +143,16 @@ We are using a advanced table component based on `BaseTable` internally, with mu
 
 ## Development
 
-We use `Yarn` as the package manager, checkout this repo and run `yarn` under both root folder and `website` folder in install packages, then run `yarn start` to start the demo site powered by `Gatsby`
+Requires **Node.js >= 18** (Node 24 recommended). We use `Yarn` as the package manager.
+
+```bash
+yarn install --ignore-scripts
+cd website && yarn install
+cd ..
+yarn start
+```
+
+This starts the demo site powered by Gatsby.
 
 ## Contributing
 

CHANGELOG.md

@@ -18,7 +18,7 @@ $column-padding: 7.5px;
 $show-frozen-rows-shadow: false;
 $show-frozen-columns-shadow: true;
 
-@import '~react-base-table/es/_BaseTable.scss';
+@import 'react-base-table/dist/esm/_BaseTable.scss';
 
 .#{$table-prefix} {
   &:not(.#{$table-prefix}--show-left-shadow) {