BREAKING CHANGE: components renamed

* Add missing exports * Dont import external dependencies * feat: Wrap custom cell renderers in loadable cells * Re-add selectable to demo * Rename popout to popover * Url shortening * Fix chromatic * Try to fix chromatic * Fix double click exiting current edit * Downgrade weblogic4 * Fix run tests
linz · Oct 27, 2022 · e9e1647 · e9e1647
1 parent 2dd60d2
commit e9e1647
Show file tree

Hide file tree

Showing 31 changed files with 42,431 additions and 32,792 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,13 +1,15 @@
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const path = require("path");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 module.exports = {
-  babel: async options => ({
-    // Update your babel configuration here
-    ...options
-  }),
-  framework: '@storybook/react',
+  // Specifying the location of the stories and file formats of what stories can be
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [],
+  // Specifying the add ons for Storybook if requiring specific add ons to make a story work then add them here
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-addon-mock/register",
+    "@storybook/addon-interactions",
+  ],
   webpackFinal: async config => {
     // Handling scss files when used within components consumed by a story
     config.module.rules.push({
@@ -35,7 +37,4 @@ module.exports = {
     // Return the altered config
     return config;
   },
-  core: {
-    builder: "webpack5"
-  }
 };
diff --git a/index.ts b/index.ts
@@ -10,17 +10,19 @@ export { GridIcon } from "./src/components/GridIcon";
 export { ComponentLoadingWrapper } from "./src/components/ComponentLoadingWrapper";
 export { GenericMultiEditCellClass } from "./src/components/GenericCellClass";
 export { GridLoadableCell } from "./src/components/GridLoadableCell";
-export { useGridPopoutHook } from "./src/components/GridPopoutHook";
+export { useGridPopoverHook } from "./src/components/GridPopoverHook";
 export { usePostSortRowsHook } from "./src/components/PostSortRowsHook";
 
 export { GridRendererGenericCell } from "./src/components/gridRender/GridRenderGenericCell";
 export { GridRenderPopoutMenuCell } from "./src/components/gridRender/GridRenderPopoutMenuCell";
 
 export { GridPopoutEditMultiSelect } from "./src/components/gridPopoverEdit/GridPopoutEditMultiSelect";
-export { GridPopoutMenu } from "./src/components/gridPopoverEdit/GridPopoutMenu";
+export { GridPopoverMenu } from "./src/components/gridPopoverEdit/GridPopoverMenu";
 export { GridPopoverEditBearing } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
 export { GridPopoverEditDropDown } from "./src/components/gridPopoverEdit/GridPopoverEditDropDown";
 export { GridPopoverMessage } from "./src/components/gridPopoverEdit/GridPopoverMessage";
+export { GridPopoverTextArea } from "./src/components/gridPopoverEdit/GridPopoverTextArea";
+export { GridPopoverTextInput } from "./src/components/gridPopoverEdit/GridPopoverTextInput";
 
 export { GridHeaderSelect } from "./src/components/gridHeader/GridHeaderSelect";
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,32 +16,22 @@
   "engines": {
     "node": ">=10"
   },
-  "resolutions": {
-    "webpack": "5"
-  },
   "dependencies": {
     "@linzjs/lui": "^17.18.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
     "ag-grid-community": "^27.3.0",
     "ag-grid-react": "^27.3.0",
     "debounce-promise": "^3.1.2",
     "lodash-es": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.1",
-    "uuid": "^9.0.0",
-    "autoprefixer": "^10.0.2",
-    "postcss": "^8.1.7",
-    "postcss-loader": "^4.0.4"
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "build": "rollup -c && npm run",
-    "test": "react-app-rewired test --passWithNoTests",
-    "eject": "react-app-rewired eject",
+    "test": "react-scripts test --passWithNoTests",
+    "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "start-storybook --no-manager-cache -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
@@ -71,47 +61,56 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/cli": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.12",
-    "@types/debounce-promise": "^3.1.4",
-    "@types/jest": "^27.5.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "storybook-addon-mock": "^2.4.1",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/react": "6.5.13",
+    "@storybook/test-runner": "^0.9.0",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/debounce-promise": "^3.1.5",
+    "@types/jest": "^29.2.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.18.0",
-    "@types/react": "^17.0.50",
-    "@types/react-dom": "^17.0.17",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.23",
+    "@types/react-dom": "^18.0.7",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.39.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "babel-jest": "^26.6.3",
     "babel-preset-react-app": "10.0.0",
-    "chromatic": "^6.10.1",
-    "css-loader": "^5.2.7",
+    "chromatic": "^6.11.2",
+    "css-loader": "3.6.0",
     "eslint": "8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^1.3.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.5",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.3.1",
-    "prettier": "^2.2.1",
-    "react-app-rewired": "^2.2.1",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "postcss": "^8.1.7",
+    "postcss-loader": "^4.0.4",
+    "prettier": "^2.7.1",
+    "react-scripts": "^5.0.1",
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "sass": "^1.49.9",
-    "sass-loader": "^10.3.1",
+    "sass": "^1.55.0",
+    "sass-loader": "10.1.1",
     "semantic-release": "^19.0.5",
     "style-loader": "^2.0.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.8.4"
   },
   "babel": {
     "presets": [

diff --git a/rollup.config.ts b/rollup.config.ts
@@ -13,7 +13,6 @@ const outputDir = "dist";
 
 export default {
   input: "index.ts",
-  external: ["ag-grid-community"],
   output: [
     {
       file: packageJson.main,
@@ -27,7 +26,7 @@ export default {
     },
   ],
   plugins: [
-    peerDepsExternal(),
+    peerDepsExternal({ includeDependencies: true }),
     resolve(),
     commonjs(),
     typescript(),

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
@@ -8,11 +8,11 @@ import { AgGridEvent, CellClickedEvent, ColDef } from "ag-grid-community";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
-import { GridContext } from "../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { isNotEmpty } from "../utils/util";
+import { isNotEmpty } from "@utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
-import { UpdatingContext } from "../contexts/UpdatingContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
 
 export interface GridBaseRow {
   id: string | number;

diff --git a/src/components/GridCell.tsx b/src/components/GridCell.tsx
@@ -1,9 +1,11 @@
 import { useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
-import { GridContext } from "../contexts/GridContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridContext } from "@contexts/GridContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
 import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
-import { ColDef, ICellEditorParams } from "ag-grid-community";
+import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
+import { GridLoadableCell } from "./GridLoadableCell";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
   cellEditorParams: ICellEditorParams;
@@ -28,14 +30,32 @@ export interface GenericCellEditorColDef<
   cellRendererParams?: GenericCellRendererParams;
 }
 
+export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
+  const { checkUpdating } = useContext(UpdatingContext);
+  const colDef = cellRendererParams.colDef;
+
+  return colDef?.cellRendererParams?.oldCellRenderer ? (
+    <GridLoadableCell
+      isLoading={checkUpdating(
+        cellRendererParams.colDef?.field ?? cellRendererParams.colDef?.colId ?? "",
+        cellRendererParams.data.id,
+      )}
+    >
+      <colDef.cellRendererParams.oldCellRenderer {...cellRendererParams} />
+    </GridLoadableCell>
+  ) : (
+    <GridRendererGenericCell {...cellRendererParams} />
+  );
+};
+
 /**
  * For editing a text area.
  */
 export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericCellEditorParams<RowType>>(
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: props.cellRenderer ?? GridRendererGenericCell,
+    cellRenderer: GridCellRenderer,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {
@@ -44,6 +64,10 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
       cellEditor: GenericCellEditorComponent,
     }),
     ...props,
+    cellRendererParams: {
+      originalCellRender: props.cellRenderer,
+      ...props.cellRendererParams,
+    },
   };
 };
 

diff --git a/src/components/GridPopoutHook.tsx → src/components/GridPopoverHook.tsx b/src/components/GridPopoutHook.tsx → src/components/GridPopoverHook.tsx
@@ -1,12 +1,12 @@
 import { ICellEditorParams } from "ag-grid-community";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { ControlledMenu } from "@szhsin/react-menu";
 import { GridFormProps } from "./GridCell";
-import { hasParentClass } from "../utils/util";
+import { hasParentClass } from "@utils/util";
 import { GridBaseRow } from "./Grid";
 
-export const useGridPopoutHook = <RowType extends GridBaseRow>(
+export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,
   save?: (selectedRows: any[]) => Promise<boolean>,
 ) => {
@@ -66,16 +66,18 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
       document.addEventListener("mousedown", handleScreenMouseDown, true);
       document.addEventListener("mouseup", handleScreenMouseEvent, true);
       document.addEventListener("click", handleScreenMouseEvent, true);
+      document.addEventListener("dblclick", handleScreenMouseEvent, true);
       return () => {
         document.removeEventListener("mousedown", handleScreenMouseDown, true);
         document.removeEventListener("mouseup", handleScreenMouseEvent, true);
         document.removeEventListener("click", handleScreenMouseEvent, true);
+        document.removeEventListener("dblclick", handleScreenMouseEvent, true);
       };
     }
     return () => {};
   }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
 
-  const popoutWrapper = useCallback(
+  const popoverWrapper = useCallback(
     (children: JSX.Element) => {
       return (
         <>
@@ -112,7 +114,7 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
   );
 
   return {
-    popoutWrapper,
+    popoverWrapper,
     triggerSave,
   };
 };
diff --git a/src/components/gridForm/GridFormDropDown.tsx b/src/components/gridForm/GridFormDropDown.tsx
@@ -4,11 +4,11 @@ import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { GridContext } from "../../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   selectedRows: RowType[];
@@ -37,7 +37,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
 }
 
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const { popoutWrapper } = useGridPopoutHook(props);
+  const { popoverWrapper } = useGridPopoverHook(props);
   const formProps = props.formProps as GridFormPopoutDropDownProps<RowType, ValueType>;
 
   const { updatingCells, stopEditing } = useContext(GridContext);
@@ -148,7 +148,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     [filteredValues, options, selectItemHandler, stopEditing],
   );
 
-  return popoutWrapper(
+  return popoverWrapper(
     <>
       {formProps.filtered && (
         <>

diff --git a/src/components/gridForm/GridFormEditBearing.tsx b/src/components/gridForm/GridFormEditBearing.tsx
@@ -3,9 +3,9 @@ import "./GridFormEditBearing.scss";
 import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
+import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   placeHolder: string;
@@ -38,9 +38,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
     },
     [formProps, props.field, props.value, value],
   );
-  const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
         value={value ?? ""}

diff --git a/src/components/gridForm/GridFormMessage.tsx b/src/components/gridForm/GridFormMessage.tsx
@@ -3,7 +3,7 @@ import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { ICellEditorParams } from "ag-grid-community";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   message: (
@@ -16,15 +16,15 @@ export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProp
   const formProps = props.formProps as GridFormMessageProps<RowType>;
 
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
-  const { popoutWrapper } = useGridPopoutHook(props);
+  const { popoverWrapper } = useGridPopoverHook(props);
 
   useEffect(() => {
     (async () => {
       setMessage(await formProps.message(props.selectedRows, props.cellEditorParams));
     })().then();
   }, [formProps, props.selectedRows, props]);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <ComponentLoadingWrapper loading={message === null}>
       <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
         {message}