@linzjs/step-ag-grid 12.1.1 → 13.0.0

package/src/stories/grid/FormTest.tsx

@@ -1,12 +1,9 @@
-import "./FormTest.scss";
-
 import { useCallback, useState } from "react";
+
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
-import { wait } from "../../utils/util";
-import { CellEditorCommon } from "../../components/GridCell";
-import { useGridPopoverHook } from "../../components/GridPopoverHook";
-import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
-import { FormError } from "../../lui/FormError";
+
+import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from "../..";
+import "./FormTest.scss";
 
 export interface IFormTestRow {
   id: number;

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -0,0 +1,110 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFilterButtons,
+  GridFilterQuick,
+  GridFilters,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          border: "1px solid #eee",
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          maxHeight: 500,
+          maxWidth: "100%",
+          minWidth: "480px",
+          padding: "1em",
+        }}
+      >
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  desc: string;
+}
+
+const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, position: "Tester", age: 30, desc: "Integration tester" },
+    { id: 1001, position: "Developer", age: 12, desc: "Frontend developer" },
+    { id: 1002, position: "Manager", age: 65, desc: "Technical Manager" },
+    { id: 1003, position: "Tester", age: 30, desc: "E2E tester" },
+    { id: 1004, position: "Developer", age: 12, desc: "Fullstack Developer" },
+    { id: 1005, position: "Developer", age: 12, desc: "Backend Developer" },
+    { id: 1006, position: "Architect", age: 30, desc: "Architect" },
+  ]);
+
+  return (
+    <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
+        <GridFilterButtons<ITestRow>
+          luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
+          options={[
+            {
+              label: "All",
+            },
+            {
+              label: "Developers",
+              filter: (row) => row.position === "Developer",
+            },
+            {
+              label: "Testers",
+              filter: (row) => row.position === "Tester",
+            },
+          ]}
+        />
+      </GridFilters>
+      <Grid {...props} columnDefs={columnDefs} rowData={rowData} />
+    </GridWrapper>
+  );
+};
+
+export const FilterButtonsExample = GridFilterButtonsTemplate.bind({});

package/src/stories/grid/GridKeyboardInteractions.stories.tsx

@@ -1,23 +1,28 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
+import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
-import { useMemo, useState } from "react";
-import { wait } from "../../utils/util";
-import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
-import { ColDefT, GridCell } from "../../components/GridCell";
-import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
-import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
-import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
-import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
-import { GridIcon } from "../../components/GridIcon";
 import { userEvent, waitFor } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFormSubComponentTextArea,
+  GridFormSubComponentTextInput,
+  GridIcon,
+  GridPopoverMenu,
+  GridPopoverMessage,
+  GridProps,
+  GridUpdatingContextProvider,
+  MenuOption,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -1,22 +1,27 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
-import { useMemo, useState } from "react";
-import { wait } from "../../utils/util";
-import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
-import { ColDefT, GridCell } from "../../components/GridCell";
-import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
-import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
-import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
-import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
-import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { ColDef } from "ag-grid-community";
+import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
+import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFormSubComponentTextArea,
+  GridFormSubComponentTextInput,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  MenuOption,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -1,14 +1,12 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { ColDefT, GridCell } from "../../components/GridCell";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -1,24 +1,31 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
 import { useCallback, useContext, useMemo, useState } from "react";
-import { ColDefT, GridCell } from "../../components/GridCell";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ActionButton,
+  ColDefT,
+  Editor,
+  Grid,
+  GridCell,
+  GridCellMultiEditor,
+  GridContext,
+  GridContextProvider,
+  GridFormDropDown,
+  GridFormTextArea,
+  GridPopoverMenu,
+  GridPopoverTextArea,
+  GridPopoverTextInput,
+  GridProps,
+  GridUpdatingContextProvider,
+  isFloat,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 import { IFormTestRow } from "./FormTest";
-import { isFloat, wait } from "../../utils/util";
-import { GridPopoverTextArea } from "../../components/gridPopoverEdit/GridPopoverTextArea";
-import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopoverTextInput";
-import { ActionButton } from "../../lui/ActionButton";
-import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
-import { GridContext } from "../../contexts/GridContext";
-import { Editor, GridCellMultiEditor } from "../../components/GridCellMultiEditor";
-import { GridFormTextArea } from "../../components/gridForm/GridFormTextArea";
-import { GridFormDropDown } from "../../components/gridForm/GridFormDropDown";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -1,19 +1,22 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
-import { ColDefT, GridCell } from "../../components/GridCell";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
   GridPopoverEditBearing,
   GridPopoverEditBearingCorrection,
-} from "../../components/gridPopoverEdit/GridPopoverEditBearing";
-import { wait } from "../../utils/util";
+  GridProps,
+  GridUpdatingContextProvider,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -1,20 +1,27 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
 import { useCallback, useMemo, useState } from "react";
-import { MenuHeaderItem, MenuSeparator, MenuSeparatorString } from "../../components/gridForm/GridFormDropDown";
-import { wait } from "../../utils/util";
-import { ColDefT, GridCell } from "../../components/GridCell";
-import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
-import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
-import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
-import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFormSubComponentTextArea,
+  GridFormSubComponentTextInput,
+  GridPopoverEditDropDown,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  MenuHeaderItem,
+  MenuSeparator,
+  MenuSeparatorString,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -1,20 +1,25 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
-import { useMemo, useState } from "react";
-import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
-import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
-import { ColDefT, GridCell } from "../../components/GridCell";
-import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
 import { isEmpty, partition } from "lodash-es";
-import { wait } from "../../utils/util";
-import { MultiSelectOption } from "../../components/gridForm/GridFormMultiSelect";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFormSubComponentTextArea,
+  GridPopoutEditMultiSelect,
+  GridProps,
+  GridUpdatingContextProvider,
+  MenuSeparator,
+  MultiSelectOption,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -1,25 +1,30 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../styles/index.scss";
-import "../../styles/GridTheme.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
 import { useCallback, useMemo, useState } from "react";
-import { wait } from "../../utils/util";
-import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
-import { ColDefT, GridCell } from "../../components/GridCell";
-import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
-import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
-import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
-import { GridIcon } from "../../components/GridIcon";
-import { useGridFilter } from "../../components/GridFilter";
-import { GridFilterQuick } from "../../components/gridFilter/GridFilterQuick";
-import { GridFilters } from "../../components/gridFilter/GridFilters";
-import { GridFilterButtons } from "../../components/gridFilter/GridFilterButtons";
-import { GridWrapper } from "../../components/GridWrapper";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFilterButtons,
+  GridFilterQuick,
+  GridFilters,
+  GridFormSubComponentTextArea,
+  GridFormSubComponentTextInput,
+  GridIcon,
+  GridPopoverMenu,
+  GridPopoverMessage,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+  useGridFilter,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -1,18 +1,19 @@
-import "@linzjs/lui/dist/scss/base.scss";
+import { expect, jest } from "@storybook/jest";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { userEvent, within } from "@storybook/testing-library";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
 import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
 
-import { useRef } from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import {
+  GridContextProvider,
   GridFormDropDown,
   GridFormDropDownProps,
+  GridFormSubComponentTextInput,
   GridPopoutEditDropDownSelectedItem,
-} from "../../../components/gridForm/GridFormDropDown";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
-import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -1,14 +1,13 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-
+import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { userEvent, within } from "@storybook/testing-library";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
-import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingCorrectionEditorParams } from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -1,14 +1,13 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-
+import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { userEvent, within } from "@storybook/testing-library";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
-import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingEditorParams } from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -1,20 +1,21 @@
-import "@linzjs/lui/dist/scss/base.scss";
+import { expect, jest } from "@storybook/jest";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { userEvent, within } from "@storybook/testing-library";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
 import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
 
-import { useRef } from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import {
+  GridContextProvider,
   GridFormMultiSelect,
   GridFormMultiSelectProps,
   GridFormMultiSelectSaveProps,
+  GridFormSubComponentTextInput,
   MultiSelectOption,
-} from "../../../components/gridForm/GridFormMultiSelect";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
-import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
-import { wait } from "../../../utils/util";
+  wait,
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -1,20 +1,21 @@
-import "@linzjs/lui/dist/scss/base.scss";
+import { expect, jest } from "@storybook/jest";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { userEvent, within } from "@storybook/testing-library";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
 import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import {
+  GridBaseRow,
+  GridContextProvider,
   GridFormPopoverMenu,
+  GridFormSubComponentTextArea,
+  GridFormSubComponentTextInput,
   PopoutMenuSeparator,
   SelectedMenuOptionResult,
-} from "../../../components/gridForm/GridFormPopoverMenu";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
-import { useRef } from "react";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
-import { GridBaseRow } from "../../../components/Grid";
-import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
-import { GridFormSubComponentTextArea } from "../../../components/gridForm/GridFormSubComponentTextArea";
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -1,13 +1,13 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-
+import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormTextArea } from "../../../components/gridForm/GridFormTextArea";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { userEvent, within } from "@storybook/testing-library";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { GridContextProvider, GridFormTextArea } from "../../..";
 
 export default {
   title: "GridForm / Interactions",

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -1,13 +1,13 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-
+import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormTextInput } from "../../../components/gridForm/GridFormTextInput";
-import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { userEvent, within } from "@storybook/testing-library";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { GridContextProvider, GridFormTextInput } from "../../..";
 
 export default {
   title: "GridForm / Interactions",