5.0.0 (glideapps#416)

* Move to packaging core with esbuild

* Maybe working first linaria based thing

* Make build

* Cleanup more usages of styled-components

* Use linaria for cells as well

* Fix bootstrap

* Enable minification

* Fix tests

* Fix tests

* Restore tsc-esm-fix

* remove dead printf

* Remove all traces of styled-components

* Cleanup placement of css file

* Update docs

* Fix test projects

* Fix cra examples too

* Remove depreacted API

* Fix build

* Fix build

* Fix sourcemaps and restore boolean toggle

* Fix story

* Update docs

* Disable minification for cells

* Remove dead code

* More dead code

* Cleanup imports

* Fix issue where group headers would not get selected with touch events

* Fix issue where dragging onto a header menu would emit a click event

* Fix beep on Safari when copying cells using CMD+C (glideapps#420)

* Fix beep on Safari when copying cells using CMD+C

* Move the `preventDefault` to the bottom of the function call so it won't get called when something goes wrong

* Ability to override the cursor on a per-cell basis (glideapps#419)

* Add the ability to override the cursor per cell

* Add the `cursor` field to the API docs

* Improve scroll shadows (glideapps#421)

* Fix access to first column if there are no columns

* Add ability to add a vertical scroll shadow

* Show the vertical shadow if there are no fixed columns

* Split the `fixedShadow` prop into `fixedShadowX` and `fixedShadowY`

* Re-add the opacity transition when smoothScroll isn't enabled

* Re-add `pointer-events: none`

* Add information about the props to the API docs

* Import `clamp` from `lodash/clamp` for better tree-shaking

* Move the opacity calculation out of the `useMemo` hook

Co-authored-by: Jason Smith <[email protected]>

* Fix build

* Pass preview value to validate cell

* Add checkbox indicator for row markers header column

* 4.99.0-alpha1

* Fix deploy

* Improve build output

* Fix trailing row theem not applying when not sticky

* Dramatically improve SVG loader behavior

* 4.99.0-alpha2

* Fix tests

* Accidentally left minify on

* More fixes

* Restore RTL support

* Fix issue with fill handle being extra precise

* Respect readonly flag when filling

* 4.99.0-alpha3

* Add sprite test

* Transpile down to es2018

* 4.99.0-alpha4

* Fix next build server side

* 4.99.0-alpha5

* Depend on real version of canvas-hypertxt now that it is its own package

* 4.99.0-alpha6

* Add missing deps to test projects

* Variable scoping

* Fix spelling (glideapps#431)

* Fix spelling

* move comma

* Minor cleanups

* Update eslint

* More linting issues

* Fix build

* Minor simplification

* Fix onCellsEdited not preventing onCellEdited

* Don't break CSS for custom cell stories

* Add column index to draw header args

* Don't allow header to get filtered as an outlier when sizing a column

* Add delay to tooltip example

* Add row hover effect demo

* Simpler row hover demo

* 4.99.0-beta1

* Add css as a side-effect

* 4.99.0-beta2

* Remove react-virtualized-auto-sizer and replace with react-resize-detector

* Fix build

* 4.99.0-beta3

* Pair down react resize detector to its bare minimum that we actually need.

* Fix tests

* 4.99.0-beta4

* Add ability to control selection location when coercing a value

* Fix header shadow not being able to be turned off

* Ensure shadows do not encroach upon padding region

* Correct dep list

* Make sure context menus work better on all OS's

* Improve row marker responsiveness while maintaining proper support for markers when move handle is enabled (glideapps#441)

* Improve row marker responsiveness while maintaining proper support for markers when move handle is enabled

* Just add a random spot to test the clickable numbers

* 4.99.0-beta5

* Don't select row index 0 during a drag when hoving a header cell

* Add toArray to CompactSelection for ancient versions of JS to love

* Fix offsetting for calls to getBounds

* Improve copy support when called from external ref

* ResizeDetector smoke test

* Prep for 5.0.0 stable

* Fix nextjs compilation error

* Improve docs slightly

* 5.0.0-beta1

* Unify onCellEdited and onCellsEdited so you only need to implement one or the other

* Add capability for more granular drag sourcing without losing useful interactions (glideapps#453)

* Add capability for more granular drag sourcing without losing useful interactions

* Clear mouse state when drag begins

* Vastly improve autoscrolling behavior

* Be a little permissive with going outside the grid

* Prevent weird state with headers on drag when dragging cells enabled

* Prevent fetching out of bounds data when sizing a column

* Fix typo

* Dont scroll if mouse down on row markers

* Reduce render looping

* Add jerk

* Fix newline

* Add basic auto-scroller tests

* Imports instead of globals

* Fix react 18 testing

* Don't crash when asked to locate out of bounds cells

* Re-add removed effect but now it works as expected

* Add new column button example

* Return undefined for unknown cells isntead of empty rect

* Update changelog

* 5.0.0-beta2

* Prep for stable

Co-authored-by: Leo Bernard <[email protected]>
Co-authored-by: Robert S <[email protected]>

Author: 3 people

.devcontainer/devcontainer.json

@@ -1,33 +1,29 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 10, 12, 14
-		"args": { 
-			"VARIANT": "14"
-		}
-	},
+    "name": "Node.js & TypeScript",
+    "build": {
+        "dockerfile": "Dockerfile",
+        // Update 'VARIANT' to pick a Node version: 10, 12, 14
+        "args": {
+            "VARIANT": "14"
+        }
+    },
 
-	// Set *default* container specific settings.json values on container create.
-	"settings": { 
-		"terminal.integrated.shell.linux": "/bin/bash"
-	},
+    // Set *default* container specific settings.json values on container create.
+    "settings": {
+        "terminal.integrated.shell.linux": "/bin/bash"
+    },
 
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"dbaeumer.vscode-eslint",
-		"esbenp.prettier-vscode",
-		"jpoissonnier.vscode-styled-components"
-	],
+    // Add the IDs of extensions you want installed when the container is created.
+    "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [9009],
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    "forwardPorts": [9009],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "./.devcontainer/run.sh",
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "./.devcontainer/run.sh",
 
-	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
-}
+    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+    "remoteUser": "node"
+}

.github/workflows/beta.js.yml

@@ -24,7 +24,6 @@ jobs:
               working-directory: .
             - run: npm run lint
             - run: npm run build-js
-            - run: npm run build-cjs
             - run: npm run build-types
             - uses: JS-DevTools/npm-publish@v1
               with:
@@ -47,7 +46,6 @@ jobs:
               working-directory: .
             - run: npm run lint
             - run: npm run build-js
-            - run: npm run build-cjs
             - run: npm run build-types
             - uses: JS-DevTools/npm-publish@v1
               with:

.github/workflows/release.js.yml

@@ -25,7 +25,6 @@ jobs:
               working-directory: .
             - run: npm run lint
             - run: npm run build-js
-            - run: npm run build-cjs
             - run: npm run build-types
             - uses: JS-DevTools/npm-publish@v1
               with:
@@ -47,7 +46,6 @@ jobs:
               working-directory: .
             - run: npm run lint
             - run: npm run build-js
-            - run: npm run build-cjs
             - run: npm run build-types
             - uses: JS-DevTools/npm-publish@v1
               with:

.storybook/.babelrc.json

@@ -17,7 +17,8 @@
             }
         ],
         "@babel/preset-react",
-        "@babel/preset-typescript"
+        "@babel/preset-typescript",
+        "@linaria/babel-preset"
     ],
-    "plugins": ["babel-plugin-styled-components", "@babel/plugin-proposal-class-properties"]
+    "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.storybook/main.js

@@ -1,21 +1,38 @@
-const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
     stories: ["../**/*.stories.tsx"],
-    addons: ["@storybook/addon-links", "@storybook/addon-controls", "./addons/expand-all/register.js"],
-    devtool: "source-map",
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-knobs",
+        "@storybook/addon-controls",
+    ],
+    core: {
+        builder: "webpack5",
+    },
     webpackFinal: async (config, { configType }) => {
-        config.module.rules.push({
-            test: /\.(ts|tsx)$/,
+        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+        // You can change the configuration based on that.
+        // 'PRODUCTION' is used when building the static version of storybook.
+        // Check docs here: https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config
+
+        config.plugins.push(new MiniCssExtractPlugin({ filename: "[name].css" }));
+
+        // Add Linaria loader after babel-loader
+        config.module.rules.splice(1, 0, {
+            test: /\.tsx?$/,
+            exclude: /node_modules/,
             use: [
                 {
-                    loader: require.resolve("babel-loader"),
+                    loader: require.resolve("@linaria/webpack-loader"),
+                    options: {
+                        sourceMap: true,
+                    },
                 },
             ],
         });
 
-        config.resolve.extensions.push(".ts", ".tsx");
-        config.performance.hints = false;
         return config;
     },
 };

CONTRIBUTING.md

@@ -7,20 +7,20 @@ is to use Codespaces if you have access to it. If you do not, simply cloning the
 
 #### Steps
 
--   Cick the green dropdown labeled code, there should be two tabs: local and codespaces.
+-   Click the green dropdown labeled code, there should be two tabs: local and codespaces.
 -   Click on codespaces.
 -   If this is your first time, then create a new codespace. It will open a new browser tab and build the docker container for it - there will be a button to open the environment in VSCode if you'd prefer to run it that way
 -   You should see a screen that says `Setting up your codespace` As soon as that's done, you should see a VSCode like UI with files on the left.
 
-Once codespaces is up and runnng make sure `jq` is installed and then:
+Once codespaces is up and running make sure `jq` is installed and then:
 
 ```bash
 npm run bootstrap && npm run storybook
 ```
 
 ## Forking the data grid?
 
-Please consider submitting your work for review. We are a small project but we are super enthused when anyone comes by to help us build the best damned data grid on the internet.
+Please consider submitting your work for review. We are a small project, but we are super enthused when anyone comes by to help us build the best damned data grid on the internet.
 
 ## Contributing new cells
 

README.md

@@ -29,7 +29,7 @@ Lot's of fun examples are in our [Storybook](https://glideapps.github.io/glide-d
 -   **It scales to millions of rows**. Cells are rendered lazily on demand for memory efficiency.
 -   **Scrolling is extremely fast**. Native scrolling keeps everything buttery smooth.
 -   **Supports multiple types of cells**. Numbers, text, markdown, bubble, image, drilldown, uri
--   **Fully Free & Open Source**. [MIT licensed](LICENSE) so you can use Grid in commerical projects.
+-   **Fully Free & Open Source**. [MIT licensed](LICENSE), so you can use Grid in commercial projects.
 -   **Editing is built in**.
 -   **Resizable and movable columns**.
 -   **Variable sized rows**.
@@ -48,7 +48,7 @@ npm i @glideapps/glide-data-grid
 You may also need to install the peer dependencies if you don't have them already:
 
 ```shell
-npm i lodash marked react-responsive-carousel styled-components
+npm i lodash marked react-responsive-carousel
 ```
 
 Create a new `DataEditor` wherever you need to display lots and lots of data
@@ -57,6 +57,12 @@ Create a new `DataEditor` wherever you need to display lots and lots of data
 <DataEditor getCellContent={getData} columns={columns} rows={numRows} />
 ```
 
+Don't forget to import mandatory CSS
+
+```ts
+import "@glideapps/glide-data-grid/dist/index.css";
+```
+
 Making your columns is easy
 
 ```ts
@@ -141,7 +147,7 @@ Originally we had implemented our Grid using virtualized rendering. We virtualiz
 
 There are some hacks you can do like setting timers and entering into a "low fidelity" rendering mode where you only render a single element per cell. This works okay until you want to show hundreds of cells and you are right back to choppy scrolling. It also doesn't really look or feel great.
 
-**I want to use this with Next.js / Vercel but I'm getting weird errors**
+**I want to use this with Next.js / Vercel, but I'm getting weird errors**
 
 The easiest way to use the grid with Next is to create a component which wraps up your grid and then import it as a dynamic.
 

babel.cjs.json

@@ -18,7 +18,7 @@
         "@babel/preset-react",
         "@babel/preset-typescript"
     ],
-    "plugins": ["babel-plugin-styled-components", "@babel/plugin-proposal-class-properties"],
+    "plugins": ["@babel/plugin-proposal-class-properties"],
     "comments": false,
     "sourceMaps": true
 }

babel.config.json

@@ -19,7 +19,7 @@
         "@babel/preset-react",
         "@babel/preset-typescript"
     ],
-    "plugins": ["babel-plugin-styled-components", "@babel/plugin-proposal-class-properties"],
+    "plugins": ["@babel/plugin-proposal-class-properties"],
     "comments": false,
     "sourceMaps": true
 }

bootstrap.sh

@@ -21,7 +21,7 @@ popd
 for DIR in "cells" "source"
 do
     pushd packages/$DIR
-    update ".dependencies.\"@glideapps/glide-data-grid\" = \"3.4.1\"" package.json
+    update ".dependencies.\"@glideapps/glide-data-grid\" = \"4.99.0-beta2\"" package.json
     npm ci
     update ".dependencies.\"@glideapps/glide-data-grid\" = $VERSION" package.json
     update ".version = $VERSION" package.json