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
glideapps · Feb 4, 2024 · af3a749 · af3a749
1 parent aee0aa7
commit af3a749
Show file tree

Hide file tree

Showing 32 changed files with 36,507 additions and 39,221 deletions.
diff --git a/.storybook/addons/expand-all/register.js → .storybook/addons/expand-all/register.mjs b/.storybook/addons/expand-all/register.js → .storybook/addons/expand-all/register.mjs
diff --git a/.storybook/main.js → .storybook/main.ts b/.storybook/main.js → .storybook/main.ts
@@ -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()],
         });
     },
 

diff --git a/.storybook/manager.js → .storybook/manager.ts b/.storybook/manager.js → .storybook/manager.ts
diff --git a/.storybook/preview.js → .storybook/preview.ts b/.storybook/preview.js → .storybook/preview.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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"
+  }
 }
diff --git a/packages/cells/.eslintignore b/packages/cells/.eslintignore
@@ -1,3 +1,4 @@
 build.cjs
 node_modules/
-dist/
+dist/
+vitest.*.ts
diff --git a/packages/cells/.eslintrc b/packages/cells/.eslintrc
@@ -48,5 +48,10 @@
                 "@typescript-eslint/strict-boolean-expressions": "error"
             }
         }
-    ]
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
 }
diff --git a/packages/cells/build.sh b/packages/cells/build.sh
@@ -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"
diff --git a/packages/cells/vitest.config.js → packages/cells/vitest.config.ts b/packages/cells/vitest.config.js → packages/cells/vitest.config.ts
@@ -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,

diff --git a/packages/cells/vitest.setup.js → packages/cells/vitest.setup.ts b/packages/cells/vitest.setup.js → packages/cells/vitest.setup.ts
diff --git a/packages/core/.eslintignore b/packages/core/.eslintignore
@@ -1,4 +1,4 @@
 jest.config.js
 node_modules/
 build.cjs
-vitest.*.js
+vitest.*.ts
diff --git a/packages/core/.eslintrc b/packages/core/.eslintrc
@@ -58,5 +58,10 @@
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-types": "off"
     },
-    "ignorePatterns": ["**/node_modules/*", "**/dist/*"]
+    "ignorePatterns": ["**/node_modules/*", "**/dist/*"],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
 }
diff --git a/packages/core/build.sh b/packages/core/build.sh
@@ -27,4 +27,4 @@ run_in_parallel compile_esm compile_cjs
 
 generate_index_css
 
-echo -e "\033[0;36m🎉 Build Complete 🎉\033[0m"
+echo -e "\033[0;36m🎉 Core Build Complete 🎉\033[0m"
diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -776,6 +776,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         cellActivationBehavior = "second-click",
         rowSelectionMode = "auto",
         onHeaderMenuClick,
+        onHeaderIndicatorClick,
         getGroupDetails,
         onSearchClose: onSearchCloseIn,
         onItemHovered,
@@ -2420,6 +2421,13 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         [onHeaderMenuClick, rowMarkerOffset]
     );
 
+    const onHeaderIndicatorClickInner = React.useCallback(
+        (col: number, screenPosition: Rectangle) => {
+            onHeaderIndicatorClick?.(col - rowMarkerOffset, screenPosition);
+        },
+        [onHeaderIndicatorClick, rowMarkerOffset]
+    );
+
     const currentCell = gridSelection?.current?.cell;
     const onVisibleRegionChangedImpl = React.useCallback(
         (
@@ -3958,6 +3966,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     onColumnMoved={onColumnMovedImpl}
                     onDragStart={onDragStartImpl}
                     onHeaderMenuClick={onHeaderMenuClickInner}
+                    onHeaderIndicatorClick={onHeaderIndicatorClickInner}
                     onItemHovered={onItemHoveredImpl}
                     isFilling={mouseState?.fillHandle === true}
                     onMouseMove={onMouseMoveImpl}

diff --git a/packages/core/src/docs/examples/header-menus.stories.tsx b/packages/core/src/docs/examples/header-menus.stories.tsx
@@ -82,6 +82,7 @@ export const HeaderMenus: React.VFC = () => {
                     ...c,
                     hasMenu: true,
                     menuIcon: "dots",
+                    overlayIcon: "rowOwnerOverlay",
                 };
             } else if (index === 3) {
                 return {

diff --git a/packages/core/src/docs/examples/right-to-left.stories.tsx b/packages/core/src/docs/examples/right-to-left.stories.tsx
@@ -11,7 +11,7 @@ export default {
         (Story: React.ComponentType) => (
             <SimpleThemeWrapper>
                 <BeautifulWrapper
-                    title="Right "
+                    title="Right to Left support"
                     description={
                         <>
                             <Description>
@@ -29,6 +29,18 @@ export default {
 export const RightToLeft: React.VFC = () => {
     const { cols, getCellContent, setCellValue, onColumnResize } = useMockDataGenerator(60, false);
 
+    const realCols = React.useMemo(() => {
+        const result = [...cols];
+
+        result[0] = {
+            ...result[0],
+            title: "גלייד",
+            hasMenu: true,
+        };
+
+        return result;
+    }, [cols]);
+
     const getCellContentMangled = React.useCallback<typeof getCellContent>(
         item => {
             const [col, _row] = item;
@@ -48,10 +60,11 @@ export const RightToLeft: React.VFC = () => {
         <DataEditor
             {...defaultProps}
             getCellContent={getCellContentMangled}
-            columns={cols}
+            columns={realCols}
             onColumnResize={onColumnResize}
             getCellsForSelection={true}
             rowMarkers={"both"}
+            onHeaderMenuClick={() => alert("menu click")}
             onPaste={true}
             onCellEdited={setCellValue}
             rows={1000}