@linzjs/step-ag-grid 2.0.0 → 2.1.0

package/README.md

@@ -1,4 +1,119 @@
 # step-ag-grid
-Home for our reusable ag-grid component
 
-Storybook deployed at: https://linz.github.io/step-ag-grid/
+> Reusable [ag-grid](https://www.ag-grid.com/) component for LINZ / Toitū te whenua.
+
+Storybook deployed at: https://linz.github.io/step-ag-grid/ (private to LINZ)
+
+## Features
+
+- [ag-grid-community](https://www.npmjs.com/package/ag-grid-community) based grid with custom popover components
+implemented using a modified [react-menu](https://www.npmjs.com/package/@szhsin/react-menu).
+- Default components
+  - Text input
+  - Text area
+  - Drop-down
+  - Multi-select
+  - Bearing/Bearing Correction
+  - Popover message
+  - Custom form
+
+*Please note this requires React >=17, ag-grid-community >=27, and sass.*
+
+## Install
+
+with npm
+
+```bash
+npm install @linz/step-ag-grid
+```
+
+or with Yarn
+
+```bash
+yarn add @linz/step-ag-grid
+```
+
+## Demo
+
+```bash
+npm run storybook
+```
+
+## Usage
+
+```tsx
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/step-ag-grid/dist/index.css"
+// Only required for LINZ themes otherwise import the default theme from ag-grid
+import "@linzjs/step-ag-grid/dist/GridTheme.scss";
+
+import { useMemo } from "react";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { ColDefT, GridCell } from "@components/GridCell";
+import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
+
+const GridDemo = () => {
+  interface ITestRow {
+    id: number;
+    position: string;
+    age: number;
+  };
+  
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        initialWidth: 65,
+        maxWidth: 150,
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          cellRenderer: () => <>Click me!</>,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            message: async (formParams): Promise<string> => {
+              return `There are ${formParams.selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const rowData: ITestRow[] = useMemo(
+    () => [
+        { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+        { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    ],
+    [],
+  );
+
+  return (
+    <GridUpdatingContextProvider>
+      <GridContextProvider>
+        <Grid
+          selectable={true}
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />
+      </GridContextProvider>
+    </GridUpdatingContextProvider>
+  );
+};
+```

package/{src/components → dist}/GridTheme.scss

@@ -1,29 +1,40 @@
-@use '~@linzjs/lui/dist/scss/Core' as lui;
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
 
-@import "node_modules/ag-grid-community/src/styles/ag-grid.scss";
-@import "node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+// These break if we use urls so ignore stylelint
+/* stylelint-disable-next-line */
+@import "ag-grid-community/src/styles/ag-grid";
+/* stylelint-disable-next-line */
+@import "ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
 
 .ag-theme-alpine {
   // AG Grid themes can be customized using theme parameters, which are arguments that change its appearance. Refer to
   // https://www.ag-grid.com/javascript-data-grid/themes-customising/#full-list-of-theme-parameters for a full list of
   // the available theme parameters, which should be used whenever possible.
-  @include ag-theme-alpine((
-          alpine-active-color: lui.$sea,
-          foreground-color: lui.$grey-80,
-          data-color: lui.$grey-80,
-          header-foreground-color: lui.$surfie,
-          background-color: lui.$white,
-          odd-row-background-color: lui.$white,
-          header-background-color: lui.$white,
-          border-color: lui.$lily,
-          secondary-border-color: lui.$lily,
-          row-hover-color: lui.$lily,
-          font-family: ("Open Sans", system-ui, sans-serif),
-          font-size: 0.875rem !important,
-          borders: false,
-          borders-critical: true,
-          borders-secondary: false,
-  ));
+  @include ag-theme-alpine(
+    (
+      alpine-active-color: lui.$sea,
+      foreground-color: lui.$grey-80,
+      data-color: lui.$grey-80,
+      // ag-grid-community >=28
+      selected-row-background-color: lui.$polar,
+      header-foreground-color: lui.$surfie,
+      background-color: lui.$white,
+      odd-row-background-color: lui.$white,
+      header-background-color: lui.$white,
+      border-color: lui.$lily,
+      secondary-border-color: lui.$lily,
+      row-hover-color: lui.$lily,
+      font-family: (
+        "Open Sans",
+        system-ui,
+        sans-serif,
+      ),
+      font-size: 0.875rem !important,
+      borders: false,
+      borders-critical: true,
+      borders-secondary: false,
+    )
+  );
 
   // Fix that when you click below checkbox it doesn't process a click
   .ag-cell[col-id="selection"] {
@@ -31,7 +42,7 @@
   }
 
   // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
+  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
     height: auto;
   }
 
@@ -39,6 +50,7 @@
     border-bottom: none;
   }
 
+  // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
   // You can set a background _color_ with theme parameters, but for something like a gradient, you need to override CSS.
   .ag-row-selected {
     background-color: lui.$polar;
@@ -70,8 +82,10 @@
     word-break: break-word;
   }
 
-  .ag-cell-popup-editing, .ag-selected-for-edit, .ag-cell-inline-editing {
-    background: rgba(72, 160, 244, 0.2);
+  .ag-cell-popup-editing,
+  .ag-selected-for-edit,
+  .ag-cell-inline-editing {
+    background: rgb(72 160 244 / 20%);
     // These are important, it needs to override ag-grid to work
     border: 3px solid #48a0f4 !important;
     border-right: 3px solid #48a0f4 !important;

package/dist/index.css

@@ -0,0 +1,351 @@
+@charset "UTF-8";
+.step-ag-grid-react-menu {
+  /**
+   * Scrollbar (Only Chrome)
+   */
+  /** Free text input */
+}
+.step-ag-grid-react-menu ::-webkit-scrollbar {
+  width: 20px;
+}
+.step-ag-grid-react-menu ::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.step-ag-grid-react-menu ::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+.step-ag-grid-react-menu ::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
+.step-ag-grid-react-menu .szh-menu__item,
+.step-ag-grid-react-menu .szh-menu__header {
+  padding: 0.375rem 1.5rem;
+}
+.step-ag-grid-react-menu .LuiCheckboxInput {
+  margin-bottom: 0;
+}
+.step-ag-grid-react-menu .free-text-input {
+  border: transparent;
+  outline: transparent;
+  line-height: 33px;
+  padding-left: 4px;
+}
+.step-ag-grid-react-menu textarea.free-text-input {
+  font-weight: 400;
+  line-height: 1.5;
+  width: 300px;
+  height: 150px;
+  resize: none;
+  border: 0.06rem solid #beb9b4;
+}
+
+.szh-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  width: max-content;
+  z-index: 100;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+.szh-menu:focus {
+  outline: none;
+}
+.szh-menu__arrow {
+  box-sizing: border-box;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.1);
+  border-top-color: rgba(0, 0, 0, 0.1);
+  z-index: -1;
+}
+.szh-menu__arrow--dir-left {
+  right: 0.375rem;
+  transform: translateY(-50%) rotate(135deg);
+}
+.szh-menu__arrow--dir-right {
+  left: 0.375rem;
+  transform: translateY(-50%) rotate(-45deg);
+}
+.szh-menu__arrow--dir-top {
+  bottom: 0.375rem;
+  transform: translateX(-50%) rotate(-135deg);
+}
+.szh-menu__arrow--dir-bottom {
+  top: 0.375rem;
+  transform: translateX(-50%) rotate(45deg);
+}
+.szh-menu__item {
+  cursor: pointer;
+}
+.szh-menu__item:focus {
+  outline: none;
+}
+.szh-menu__item--hover {
+  background-color: #ebebeb;
+}
+.szh-menu__item--focusable {
+  cursor: default;
+  background-color: inherit;
+}
+.szh-menu__item--disabled {
+  cursor: default;
+  color: #aaa;
+}
+.szh-menu__group {
+  box-sizing: border-box;
+}
+.szh-menu__radio-group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.szh-menu__divider {
+  height: 1px;
+  margin: 0.5rem 0;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.szh-menu-button {
+  box-sizing: border-box;
+}
+
+.szh-menu {
+  user-select: none;
+  color: #212529;
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
+  min-width: 10rem;
+  padding: 0.5rem 0;
+}
+.szh-menu__item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0.375rem 1.5rem;
+}
+.szh-menu-container--itemTransition .szh-menu__item {
+  transition-property: background-color, color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+}
+.szh-menu__item--type-radio {
+  padding-left: 2.2rem;
+}
+.szh-menu__item--type-radio::before {
+  content: "○";
+  position: absolute;
+  left: 0.8rem;
+  top: 0.55rem;
+  font-size: 0.8rem;
+}
+.szh-menu__item--type-radio.szh-menu__item--checked::before {
+  content: "●";
+}
+.szh-menu__item--type-checkbox {
+  padding-left: 2.2rem;
+}
+.szh-menu__item--type-checkbox::before {
+  position: absolute;
+  left: 0.8rem;
+}
+.szh-menu__item--type-checkbox.szh-menu__item--checked::before {
+  content: "✔";
+}
+.szh-menu__submenu > .szh-menu__item {
+  padding-right: 2.5rem;
+}
+.szh-menu__submenu > .szh-menu__item::after {
+  content: "❯";
+  position: absolute;
+  right: 1rem;
+}
+.szh-menu__header {
+  color: #888;
+  font-size: 0.8rem;
+  padding: 0.2rem 1.5rem;
+  text-transform: uppercase;
+}
+
+/**
+  @deprecated
+ */
+/**
+  @deprecated
+ */
+/**
+  @deprecated
+ */
+/**
+ * Here is where we can override the styles of react-menu
+ */
+.step-ag-grid-react-menu.szh-menu {
+  z-index: 900;
+  color: #2a292c;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: 300;
+}
+.step-ag-grid-react-menu.szh-menu div,
+.step-ag-grid-react-menu.szh-menu a[role=menuitem] {
+  text-decoration: none;
+  color: #2a292c;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: 300;
+}
+.step-ag-grid-react-menu.szh-menu li[role=menuitem]:hover {
+  background-color: #e2f3f7;
+}
+.step-ag-grid-react-menu.szh-menu .szh-menu__header {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Here are styles for lui select menu
+ */
+@media screen and (min-width: 480px) {
+  .lui-select-menu.szh-menu-container {
+    position: absolute;
+  }
+}
+
+.lui-select-menu.szh-menu {
+  z-index: 900;
+  width: 92vw;
+  overflow-y: scroll;
+  color: #2a292c;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: 300;
+}
+@media screen and (min-width: 480px) {
+  .lui-select-menu.szh-menu {
+    overflow: visible;
+    height: auto;
+    width: 240px;
+  }
+}
+
+.lui-select-menuItem {
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  display: flex;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  fill: #6b6966;
+}
+.lui-select-menuItem:hover {
+  background-color: #e2f3f7;
+}
+
+.lui-select-menuItem--error p {
+  color: #cc0000;
+}
+.lui-select-menuItem--error .LuiIcon {
+  fill: #cc0000;
+}
+
+.lui-select-menuItemText {
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  color: #2a292c;
+  margin: 0;
+  padding-left: 2rem;
+}
+.lui-select-menuItemText--noPadding {
+  padding-left: 0.25rem;
+}
+
+.lui-select-icon + .lui-select-menuItemText {
+  padding-left: 0.5rem;
+}
+
+.lui-select-menu-group {
+  height: 32px;
+  color: #6b6966;
+  padding-left: 0.75rem;
+  text-transform: none;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.lui-select-submenu {
+  flex: 1;
+}
+.lui-select-submenu div[role=menuitem] {
+  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
+  text-decoration: none;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  height: 40px;
+}
+.lui-select-submenu .szh-menu__item--hover {
+  background-color: #e2f3f7;
+}
+
+.lui-select-submenu-with-icon {
+  flex: 1;
+}
+.lui-select-submenu-with-icon div[role=menuitem] {
+  padding-left: 0;
+  text-decoration: none;
+  font-family: "Open Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  height: 40px;
+}
+
+.lui-select-divider {
+  margin: 0.25rem;
+}
+
+.step-ag-grid-react-menu-sub-header-icon {
+  margin: 0.5rem;
+  fill: #6b6966;
+}
+
+.Grid-container {
+  flex: 1;
+  width: 100%;
+}
+
+.Grid-sortIsStale span.ag-icon.ag-icon-desc::after {
+  content: "*";
+}
+.Grid-sortIsStale span.ag-icon.ag-icon-asc::after {
+  content: "*";
+}
+
+.Grid-quickFilter {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.Grid-quickFilterBox {
+  width: 100%;
+  height: 48px;
+  border: 0.06rem solid #beb9b4;
+  border-radius: 3px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.Grid-popoverContainer {
+  padding: 4px 8px;
+}
+
+.GridFormMessage-container {
+  padding: 4px 8px;
+  max-width: 400px;
+}