Add support for indicator icons (normally used for showing sort) (#896)

* Add support for header indicator icons

* Fix test

* Cleanup warnings

* Add click event

* Fix test files

* Fix header click

Author: jassmith

.storybook/addons/expand-all/register.js renamed to .storybook/addons/expand-all/register.mjs

@@ -1,23 +1,18 @@
-const { dirname, join } = require("path");
-const linaria = require("@linaria/vite");
-const vite = require("vite");
+import { dirname, join } from "path";
+import linaria from "@linaria/vite";
+import { mergeConfig } from "vite";
 
-const mergeConfig = vite.mergeConfig;
-
-module.exports = {
+export default {
     stories: ["../**/src/**/*.stories.tsx"],
-    addons: ["@storybook/addon-storysource", getAbsolutePath("@storybook/addon-controls")],
-    core: {
-        builder: "@storybook/builder-vite",
-    },
+    addons: [getAbsolutePath("@storybook/addon-storysource"), getAbsolutePath("@storybook/addon-controls")],
 
     typescript: {
         reactDocgen: false,
     },
 
     async viteFinal(config) {
         return mergeConfig(config, {
-            plugins: [linaria.default()],
+            plugins: [linaria()],
         });
     },
 

.storybook/main.js renamed to .storybook/main.ts

@@ -1,102 +1,102 @@
 {
-    "name": "root",
-    "version": "6.0.3",
-    "scripts": {
-        "start": "npm run storybook",
-        "version": "./update-version.sh",
-        "build": "npm run build --workspaces && npm run lint --workspaces",
-        "typedoc": "typedoc --readme none --disableSources --tsconfig packages/core/tsconfig.json",
-        "serve-docs": "http-server packages/core/gen-docs",
-        "storybook:run": "storybook dev -p 9009 --no-open",
-        "watch:core": "npm run watch -w packages/core",
-        "storybook": "concurrently \"npm run storybook:run\" \"npm run watch:core\"",
-        "build-storybook": "npm run build --workspaces && storybook build -o storybook-build/",
-        "prod-storybook": "npm run build-storybook && npx http-server storybook-build -p 9009",
-        "test": "cd packages/core && npm run test --",
-        "test-18": "./setup-react-18-test.sh && cd packages/core && npm run test --",
-        "test-source": "cd packages/source && npm run test",
-        "test-cells": "cd packages/cells && npm run test",
-        "test-projects": "cd test-projects/ && ./bootstrap-projects.sh"
-    },
-    "author": "Glide",
-    "license": "MIT",
-    "workspaces": [
-        "./packages/core",
-        "./packages/cells",
-        "./packages/source"
-    ],
-    "devDependencies": {
-        "@babel/cli": "^7.16.0",
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/preset-env": "^7.16.4",
-        "@babel/preset-react": "^7.8.3",
-        "@babel/preset-typescript": "^7.9.0",
-        "@faker-js/faker": "^7.6.0",
-        "@linaria/babel-preset": "^4.5.3",
-        "@linaria/cli": "^4.5.3",
-        "@linaria/core": "^4.5.3",
-        "@linaria/esbuild": "^4.5.3",
-        "@linaria/react": "^4.5.3",
-        "@linaria/shaker": "^4.5.3",
-        "@linaria/vite": "^4.5.3",
-        "@linaria/webpack-loader": "^4.5.3",
-        "@storybook/addon-actions": "^7.6.7",
-        "@storybook/addon-controls": "^7.6.7",
-        "@storybook/addon-links": "^7.6.7",
-        "@storybook/addon-storysource": "^7.6.7",
-        "@storybook/addons": "^7.6.7",
-        "@storybook/builder-vite": "^7.6.7",
-        "@storybook/react": "^7.6.7",
-        "@storybook/react-vite": "^7.6.7",
-        "@storybook/react-webpack5": "^7.6.7",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/react-hooks": "^8.0.1",
-        "@testing-library/user-event": "^14.5.1",
-        "@types/cheerio": "^0.22.30",
-        "@types/lodash": "^4.14.177",
-        "@types/marked": "^4.0.2",
-        "@types/node": "^18.7.13",
-        "@types/prosemirror-commands": "^1.0.4",
-        "@types/prosemirror-inputrules": "^1.0.4",
-        "@types/prosemirror-model": "^1.16.1",
-        "@types/prosemirror-state": "^1.2.8",
-        "@types/react": "^16.14.21 || 17.x",
-        "@types/react-dom": "^16.9.5 || 17.x",
-        "@types/react-syntax-highlighter": "^15.5.5",
-        "@typescript-eslint/eslint-plugin": "^5.30.5",
-        "@typescript-eslint/parser": "^6.4.1",
-        "@typescript-eslint/typescript-estree": "^5.30.5",
-        "@vitejs/plugin-react": "^4.2.0",
-        "babel-loader": "^8.1.0",
-        "chokidar-cli": "^3.0.0",
-        "clean-css-cli": "^5.6.2",
-        "concurrently": "^8.2.2",
-        "esbuild": "^0.19.2",
-        "eslint": "^8.19.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.30.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-sonarjs": "^0.13.0",
-        "eslint-plugin-unicorn": "^43.0.1",
-        "http-server": "^14.1.1",
-        "jsdom": "^22.1.0",
-        "lodash": "^4.17.21",
-        "marked": "^4.0.10",
-        "mini-css-extract-plugin": "^2.6.1",
-        "prettier": "^3.0.2",
-        "react": "^16.12.0 || 17.x",
-        "react-dom": "^16.12.0 || 17.x",
-        "react-laag": "^2.0.3",
-        "react-responsive-carousel": "^3.2.7",
-        "react-syntax-highlighter": "^15.4.5",
-        "resolve-typescript-plugin": "^2.0.1",
-        "storybook": "^7.6.7",
-        "tsc-esm-fix": "^2.7.8",
-        "typedoc": "^0.25.4",
-        "typescript": "^5.1.6",
-        "vitest": "^0.34.6",
-        "vitest-canvas-mock": "^0.3.3",
-        "webpack": "^5.73.0"
-    }
+  "name": "root",
+  "version": "6.0.3",
+  "scripts": {
+    "start": "npm run storybook",
+    "version": "./update-version.sh",
+    "build": "npm run build --workspaces && npm run lint --workspaces",
+    "typedoc": "typedoc --readme none --disableSources --tsconfig packages/core/tsconfig.json",
+    "serve-docs": "http-server packages/core/gen-docs",
+    "storybook:run": "storybook dev -p 9009 --no-open",
+    "watch:core": "npm run watch -w packages/core",
+    "storybook": "concurrently \"npm run storybook:run\" \"npm run watch:core\"",
+    "build-storybook": "npm run build --workspaces && storybook build -o storybook-build/",
+    "prod-storybook": "npm run build-storybook && npx http-server storybook-build -p 9009",
+    "test": "cd packages/core && npm run test --",
+    "test-18": "./setup-react-18-test.sh && cd packages/core && npm run test --",
+    "test-source": "cd packages/source && npm run test",
+    "test-cells": "cd packages/cells && npm run test",
+    "test-projects": "cd test-projects/ && ./bootstrap-projects.sh"
+  },
+  "type": "commonjs",
+  "author": "Glide",
+  "license": "MIT",
+  "workspaces": [
+    "./packages/core",
+    "./packages/cells",
+    "./packages/source"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.9.0",
+    "@faker-js/faker": "^7.6.0",
+    "@linaria/babel-preset": "^4.5.3",
+    "@linaria/cli": "^4.5.3",
+    "@linaria/core": "^4.5.3",
+    "@linaria/esbuild": "^4.5.3",
+    "@linaria/react": "^4.5.3",
+    "@linaria/shaker": "^4.5.3",
+    "@linaria/vite": "^4.5.3",
+    "@linaria/webpack-loader": "^4.5.3",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-controls": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-storysource": "^7.6.12",
+    "@storybook/addons": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/cheerio": "^0.22.30",
+    "@types/lodash": "^4.14.177",
+    "@types/marked": "^4.0.2",
+    "@types/node": "^18.7.13",
+    "@types/prosemirror-commands": "^1.0.4",
+    "@types/prosemirror-inputrules": "^1.0.4",
+    "@types/prosemirror-model": "^1.16.1",
+    "@types/prosemirror-state": "^1.2.8",
+    "@types/react": "^16.14.21 || 17.x",
+    "@types/react-dom": "^16.9.5 || 17.x",
+    "@types/react-syntax-highlighter": "^15.5.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/typescript-estree": "^5.30.5",
+    "@vitejs/plugin-react": "^4.2.0",
+    "babel-loader": "^8.1.0",
+    "chokidar-cli": "^3.0.0",
+    "clean-css-cli": "^5.6.2",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.19.2",
+    "eslint": "^8.19.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.13.0",
+    "eslint-plugin-unicorn": "^43.0.1",
+    "http-server": "^14.1.1",
+    "jsdom": "^22.1.0",
+    "lodash": "^4.17.21",
+    "marked": "^4.0.10",
+    "mini-css-extract-plugin": "^2.6.1",
+    "prettier": "^3.0.2",
+    "react": "^16.12.0 || 17.x",
+    "react-dom": "^16.12.0 || 17.x",
+    "react-laag": "^2.0.3",
+    "react-responsive-carousel": "^3.2.7",
+    "react-syntax-highlighter": "^15.4.5",
+    "resolve-typescript-plugin": "^2.0.1",
+    "storybook": "^7.6.12",
+    "tsc-esm-fix": "^2.7.8",
+    "typedoc": "^0.25.4",
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.6",
+    "vitest-canvas-mock": "^0.3.3",
+    "webpack": "^5.73.0"
+  }
 }

.storybook/manager.js renamed to .storybook/manager.ts

@@ -1,3 +1,4 @@
 build.cjs
 node_modules/
-dist/
+dist/
+vitest.*.ts

.storybook/preview.js renamed to .storybook/preview.ts

@@ -48,5 +48,10 @@
                 "@typescript-eslint/strict-boolean-expressions": "error"
             }
         }
-    ]
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
 }

package-lock.json

@@ -9,18 +9,22 @@ shopt -s globstar
 ## Delete the dist folder
 rm -rf dist
 
+echo -e "\033[0;36m🏗️ Building Glide Data Grid Cells 🏗️\033[0m"
+
 compile_esm() {
     tsc -p tsconfig.esm.json
-    linaria -r dist/esm/ -m esnext -o dist/esm/ dist/esm/**/*.js -t -i dist/esm -c ../../config/linaria.json
+    linaria -r dist/esm/ -m esnext -o dist/esm/ dist/esm/**/*.js -t -i dist/esm -c ../../config/linaria.json > /dev/null
     remove_all_css_imports dist/esm
 }
 
 compile_cjs() {
     tsc -p tsconfig.cjs.json
-    linaria -r dist/cjs/ -m commonjs -o dist/cjs/ dist/cjs/**/*.js -t -i dist/cjs -c ../../config/linaria.json
+    linaria -r dist/cjs/ -m commonjs -o dist/cjs/ dist/cjs/**/*.js -t -i dist/cjs -c ../../config/linaria.json > /dev/null
     remove_all_css_imports dist/cjs
 }
 
 run_in_parallel compile_esm compile_cjs
 
-generate_index_css
+generate_index_css
+
+echo -e "\033[0;36m🎉 Cells Build Complete 🎉\033[0m"

package.json

@@ -6,7 +6,7 @@ export default defineConfig({
     test: {
         include: ["test/**/*.test.tsx", "test/**/*.test.ts"],
         environment: "jsdom",
-        setupFiles: "vitest.setup.js",
+        setupFiles: "vitest.setup.ts",
         threads: false,
         singleThread: true,
         watch: false,