test(Chromatic): merge table samples (#4739)

Co-authored-by: Bruno Henriques <[email protected]>

Author: zettca

packages/core/src/Table/stories/Table.stories.tsx

@@ -1,7 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import {
-  HvSimpleGrid,
   HvTable,
   HvTableBody,
   HvTableCell,
@@ -12,14 +11,9 @@ import {
   HvTableRow,
 } from "@hitachivantara/uikit-react-core";
 
-import { TableComplete } from "./TableComplete/TableCompleteSample";
-import { AlternativeLayout } from "./TableHooks/AlternativeLayout";
 import { ColumnResize } from "./TableHooks/ColumnResize";
 import { TestHeaders as TestHeadersStory } from "./TableHooks/TableHooks.stories";
 import { UseHvGroupBy } from "./TableHooks/UseHvGroupBy";
-import { UseHvHeaderGroups } from "./TableHooks/UseHvHeaderGroups";
-import { UseHvRowExpand } from "./TableHooks/UseHvRowExpand";
-import { UseHvTableSticky } from "./TableHooks/UseHvTableSticky";
 import { AllColumnRenderers } from "./TableRenderers/AllColumnRenderers";
 import { GroupedRows as GroupedRowsStory } from "./TableSamples/GroupedRows";
 import GroupedRowsRaw from "./TableSamples/GroupedRows?raw";
@@ -33,7 +27,6 @@ import { ResponsiveTable as ResponsiveTableStory } from "./TableSamples/Responsi
 import ResponsiveTableRaw from "./TableSamples/ResponsiveTable?raw";
 import { SimpleTable as SimpleTableStory } from "./TableSamples/SimpleTable";
 import SimpleTableRaw from "./TableSamples/SimpleTable?raw";
-import { CompleteTableSection } from "./TableSection/CompleteTableSection";
 import { PropsTableSection } from "./TableSection/PropsTableSection";
 import { setupChromatic } from ".storybook/setupChromatic";
 
@@ -132,62 +125,6 @@ export const ListRow: StoryObj<HvTableProps> = {
 };
 
 export const Test: StoryObj = {
-  parameters: {
-    ...setupChromatic([
-      "DS3 dawn",
-      "DS3 wicked",
-      "DS5 dawn",
-      "DS5 wicked",
-      "Pentaho+ dawn",
-      "Pentaho+ wicked",
-    ]),
-    docs: { disable: true },
-    a11y: {
-      disable: true,
-    },
-  },
-  tags: ["skipTestRunner"],
-  render: (args, context: any) => (
-    <HvSimpleGrid cols={2}>
-      {ListRow.render?.(ListRow.args as any, context)}
-      {GroupedRows.render?.(GroupedRows.args as any, context)}
-      {NoData.render?.(NoData.args as any, context)}
-      {Main.render?.(Main.args as any, context)}
-      {SimpleTable.render?.(SimpleTable.args as any, context)}
-    </HvSimpleGrid>
-  ),
-};
-
-export const Test2: StoryObj = {
-  parameters: {
-    ...setupChromatic(
-      [
-        "DS3 dawn",
-        "DS3 wicked",
-        "DS5 dawn",
-        "DS5 wicked",
-        "Pentaho+ dawn",
-        "Pentaho+ wicked",
-      ],
-      5000,
-    ),
-    docs: { disable: true },
-    a11y: {
-      disable: true,
-    },
-  },
-  tags: ["skipTestRunner"],
-  render: () => (
-    <HvSimpleGrid cols={2}>
-      <TableComplete />
-      <AlternativeLayout />
-      <ColumnResize />
-      <UseHvTableSticky />
-    </HvSimpleGrid>
-  ),
-};
-
-export const Test3: StoryObj = {
   parameters: {
     ...setupChromatic([
       "DS3 dawn",
@@ -211,45 +148,26 @@ export const Test3: StoryObj = {
       name: /collapse/i,
     })[0];
     await userEvent.click(collapseButton);
-
-    // Row expand
-    const expandButton = canvas.getAllByRole("button", { name: /expand/i })[0];
-    await userEvent.click(expandButton);
   },
-  render: () => (
-    <HvSimpleGrid cols={2}>
-      <UseHvHeaderGroups />
-      <UseHvRowExpand />
-      <UseHvGroupBy />
-      <CompleteTableSection />
-    </HvSimpleGrid>
-  ),
-};
-
-export const Test4: StoryObj = {
-  parameters: {
-    ...setupChromatic([
-      "DS3 dawn",
-      "DS3 wicked",
-      "DS5 dawn",
-      "DS5 wicked",
-      "Pentaho+ dawn",
-      "Pentaho+ wicked",
-    ]),
-    docs: { disable: true },
-    a11y: {
-      disable: true,
-    },
-  },
-  tags: ["skipTestRunner"],
   render: (args, context: any) => (
     <>
-      <AllColumnRenderers />
+      <div className="grid grid-cols-2 gap-sm">
+        <div className="flex flex-col gap-sm">
+          {Main.render?.(Main.args as any, context)}
+          <UseHvGroupBy />
+          {GroupedRows.render?.(GroupedRows.args as any, context)}
+          {SimpleTable.render?.(SimpleTable.args as any, context)}
+        </div>
+        <div className="flex flex-col gap-sm">
+          {NoData.render?.(NoData.args as any, context)}
+          <ColumnResize />
+          {TestHeadersStory.render?.(TestHeadersStory.args as any, context)}
+          <PropsTableSection />
+          {ListRow.render?.(ListRow.args as any, context)}
+        </div>
+      </div>
       <br />
-      <HvSimpleGrid cols={2}>
-        <PropsTableSection />
-        {TestHeadersStory.render?.(TestHeadersStory.args as any, context)}
-      </HvSimpleGrid>
+      <AllColumnRenderers />
     </>
   ),
 };